Your SlideShare is downloading. ×

S2Flex2

2,721
views

Published on

知っ得納得Webフレームワーク#01

知っ得納得Webフレームワーク#01

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,721
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. S2Flex2 -AMF3Gateway with DI Container -
  • 2. 自己紹介 片山 暁雄 id:c9katayama 株式会社キャピタルアセットプランニング
  • 3. Agenda S2Flex2とは Flex2とは S2Flex2の機能 デモ 設計パターン&Tips
  • 4. S2Flex2とは Flex2からSeaser2上のコンポーネントを呼び出 すフレームワーク クライアント側のフレームワークと、サーバ側の フレームワークが連携 通信プロトコルとしてHTTP(S)、通信フォーマッ トにAMFを使用
  • 5. S2Flex2とは JDK1.4以降、Seaser2.4以降で動作 Apache License2.0 Seaser Foundationで開発中
  • 6. S2Flex2とは Client Server Flex2 Application JavaEE Application Seasar2 HTTP over AMF component S2Flex2-components S2Flex2 component
  • 7. Flex2とは Adobeが提供する、リッチインターネットアプ リケーション環境 FlashPlayer9 Flex2SDK Flex2Builder MXMLとActionScript3.0
  • 8. Flex2の画面 http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html
  • 9. AS3 package sample.control{ import sample.dto.DtoSampleDto; public class DtoSampleControl implements IMXMLObject{ private var view:DtoSample; public function initialized(document:Object,id:String):void{ view = document as DtoSample; view.addEventListener(FlexEvent.CREATION_COMPLETE, function(e:FlexEvent):void{ setup(); }); }
  • 10. MXML <mx:Application xmlns:mx=http://www.adobe.com/2006/mxml layout=quot;horizontalquot; xmlns:control=quot;sample.control.*quot;> <mx:Style source=quot;app.cssquot;/> <mx:Button label=quot;DTOquot; id=quot;dtoButtonquot;/> <mx:TextArea id=quot;resultTextquot; width=quot;200quot; height=quot;200quot;/> </mx:Application>
  • 11. Flex2の利点 見た目がきれい コンポーネントが豊富 Eclipseの開発環境 ソースコードがテキストベース 実行時にコンパイルが不要 Javaが分かれば、 AS3は覚えやすい ステートを保持できる
  • 12. Flex2の開発サイクル 実装(AS3、MXML) コンパイル(swf) サーバに配置 ブラウザでアクセス HTMLコンテンツ作成と同じ
  • 13. S2Flex2 Client Server Flex2 Application JavaEE Application Seasar2 HTTP over AMF component S2Flex2-components S2Flex2 component
  • 14. S2Flex2-components クライアント側の接続コンポーネント - S2Flex2Serviceクラス - このクラスを使用し、サーバに接続 SWCファイルで提供
  • 15. S2Flex2Service S2Flex2Serviceの使用方法 Seasar2に、次のようなインターフェースを実装した コンポーネントが登録されているとします インターフェース public interface HelloService { /** * 引数の数だけ“hello”を連結して返す */ public String hello(int num); }
  • 16. S2Flex2Service 実装クラス @RemotingService public class HelloServiceImpl implements HelloService { public String hello(int num) { String hello = quot;quot;; for(int i = 0;i < num;i++){ hello += quot;helloquot;; } return hello; } }
  • 17. S2Flex2Service S2Flex2への接続 結果受け取りハンドラの実装 //通信に成功したときに呼び出される public function handleResult(event:ResultEvent):void{ var resultText = String(event.result); trace(resultText);// “hellohello”と表示される } //通信に失敗したときに呼び出される public function handleFault(event:FaultEvent):void{ var faultText = event.message.toString(); trace(faultText); }
  • 18. S2Flex2Service S2Flex2Serviceの定義 //タグで接続するサービスを定義 <seasar:S2Flex2Service id=quot;service“ destination=“helloServicequot; result=quot;handleResult(event)“ fault=quot;handleFault(event)quot; /> サービス呼び出し //サービス呼び出し service.hello(2);
  • 19. 呼び出しの流れ S2Flex2Service destination:helloService service.hello(2) メソッド:hello 引数:2 Seasar2 helloService S2Flex2 String hello(int num) 呼び出し成功: ResultEvent result:”hellohello” handleResultメソッド 呼び出し失敗: handleFaultメソッド FaultEvent message:エラー内容
  • 20. S2Flex2Service destination=S2のコンポーネント名 呼び出し時メソッド=コンポーネントのメソッド名 <seasar:S2Flex2Service id=quot;service“ destination=“helloServicequot; result=quot;handleResult(event)“ fault=quot;handleFault(event)quot; /> service.hello(2);
  • 21. S2Flex2Service 接続定義と呼び出し(AS3版) //タグで接続先サービスを定義 var service:S2Flex2Service = new S2Flex2Service(); service.destination=“helloServicequot;; service.initialized(this,quot;servicequot;); service.addEventListener( ResultEvent.RESULT,handleResult); service.addEventListener( FaultEvent.FAULT,handleFault); //サービス呼び出し service.hello(2);
  • 22. S2Flex2 Client Server Flex2 Application JavaEE Application Seasar2 HTTP over AMF component S2Flex2-components S2Flex2 component
  • 23. S2Flex2 AMFGateway - サーブレット(RemotingGatewayクラス) - AMF0とAMF3を解釈し、Seaser2管理下の コンポーネントを呼び出す - Flex2から来たAMFデータを元に、Javaのデータ 型に変換
  • 24. AMF AMF(ActionMessageFormat) AMF0とAMF3があり、AMF3はFlashPlayer9 以降でサポート - Flex2ではAMF3を利用 オープンなフォーマット仕様 ・http://download.macromedia.com/pub/labs/amf/amf3_spec_121207.pdf
  • 25. AMF 圧縮したバイナリ形式のフォーマット - データサイズが小さいため、通信が速い - JSONの4倍、XMLの10倍 型サポート - Stringやintなどのプリミティブ - 型付オブジェクトもサポートするため、 データクラスをそのまま転送可能
  • 26. AMF3 サポートタイプ一覧 undefined Type null Type false Type true Type integer Type double Type String Type XMLDocument Type Date Type Array Type XML Type ByteArray Type Object Type(anonymous,typed)
  • 27. AMF3 型変換 Java側の Java AS3 クラス名を package sample.dto { 指定 package sample.dto; [Bindable] public class HelloDto { [RemoteClass(alias=quot;sample.dto.HelloDtoquot;)] public class HelloDto { private String text; private Integer num; public var text: String; private Boolean bool; public var num: int; public var bool: Boolean; public void setText(String value){ } S2Flex2Compon text = value; } } ent(FlashPlayer) S2Flex2 //以下アクセサ } AS3 -> AMF3 AMF3 -> Java
  • 28. @RemotingService サービスとして公開するコンポーネント - @RemotingServiceアノテーション、もしくは REMOTING_SERVICE変数を宣言する ことで公開可能
  • 29. @RemotingService 呼び出し可能コンポーネント @RemotingService public class HelloServiceImpl implements HelloService { public String hello(int num) { String hello = quot;quot;; for(int i = 0;i < num;i++){ hello += quot;helloquot;; } return hello; } }
  • 30. デモ Hello 足し算 DTOで通信
  • 31. 設計パターン&Tips セッション情報・ステートはFlex側で保持する - 入力・画面遷移ごとにサーバ通信を行わない サーバ通信の結果受け取りは非同期である ため、非同期前提の設計にする サーバ側は極力HttpSesionの利用を避け、 引数でもらう値のみでビジネスロジックが完 結するようにする
  • 32. 設計パターン&Tips HttpServletRequest,HttpSessionが必要な 場合は、@Export、@Importのアノテーション が利用できる - がしかし制御が難しいので、HttpServletRequest をスレッドローカルに格納する方法も検討した方が いい
  • 33. 設計パターン&Tips @RemotingService public class TotalServiceImpl implements TotalService { ストレージタイプを private Integer totalNum; SESSIONにすると、 セッションから値をセットして @Import(storage=StorageType.SESSION) くれる public void setTotalNum(Integer totalNum) { this.totalNum = totalNum; } 処理実行 public int hello(int num) { if(totalNum==null){ メンバ変数に値を格納 totalNum = 0; } totalNum+=num; return totalNum; } ストレージタイプを @Export(storage=StorageType.SESSION) SESSIONにすると、 public Integer getTotalNum() { セッションに値を格納してく return totalNum; } れる }
  • 34. 設計パターン&Tips サーバ側の受け口は、1箇所に固めた方がい い - @RemotingServiceをつけると、どのコンポーネン トでも公開できるが、後で分かりにくくなるので、 「service」などのパッケージを作り、そこに公開用の コンポーネントを固める。Daoはそのコンポーネント から呼ぶようにする。
  • 35. 設計パターン&Tips 競合フレームワークの検討 - BlazeDS Adobeのオープンソース(LGPLv3) AMF通信のほか、サーバプッシュ、メッセージングなどの機能を備える DIコンテナ非依存(Seaser2やSpringと連携可能) 設定がわりとめんどくさい - LiveCycleDataServices Adobeの商用サーバ AMF通信のほか、RTMP(Realtime Message Protcol)やPDF生成をサポート お値段がたかい
  • 36. まとめ S2Flex2を使用すれば、Flashとの高速な通 信を手軽に利用できる Seaser2の機能をすべて利用可能 サーバプッシュを使いたい場合は、BlazeDS などを検討 エンジョイFlex2!

×