Your SlideShare is downloading. ×
0
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
S2Flex2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

S2Flex2

2,729

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,729
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!

×