8

Click here to load reader

Communication between Wicket and Flex

Embed Size (px)

DESCRIPTION

Wicket勉強会 2011-01 で発表した、WicketのAjax*系のコンポーネントとFlexプログラムをどう連携させるかについてのスライドです。

Citation preview

Page 1: Communication between Wicket and Flex

WicketとFlexの連携 たけうち  (chiemrast)

Page 2: Communication between Wicket and Flex

自己紹介

•  広域分散型WEB配信システム  •  大量のノードを安い一般回線に繋げてP2Pでファイルを分散したり配信するサービス  

•  特に理由はないけど管理画面開発にWicketを使用  

•  企業分析プラットフォーム「SPEEDA」  •  大量の企業情報や統計データを分析しやすい形で表示 •  システム全体でWicketを使用  •  Ajaxを多用したインターフェース  

•  S2Wicket  •  S2ContainerとWicketをつなぐライブラリ  •  S2DaoとかS2Flexとかと連携させると開発効率当社比2倍以上  

•  永遠のNEET  •  Twi@er:  @chimerast              blog:  h@p://chimera.st/  

Page 3: Communication between Wicket and Flex

WicketとFlexの連携 •  今回の話はWicketのAjax*系のコンポーネントとFlash/Flexをどう連携させるかについて  •  Flexからデータを大量に取得する場合はBlazeDS等を使用した方が効率がよいのでそちらを参照  

•  FlexとJavascriptの連携機構をWicketから利用  

Flex:  //  Flex関数をJavascript関数として追加  ExtenralInterface.addCallback(…);  //  Javascript関数の呼び出し  ExternalInterface.call(…);

Page 4: Communication between Wicket and Flex

Wicket  →  Flex •  AjaxRequestTargetのappendJavascript()を使用してJavascriptの関数としてFlexの関数を呼び出す  

1.  FlexのcreateCompleteイベント内で  

 を呼び出して、Javascript関数リストに関数を追加  

 2.  あとはWicket側からJavascriptを呼び出すだけ。  

Flex:  ExternalInterface.addCallback(      "<追加する関数名>",  <コールバック関数>);

Java:  target.appendJavascript(  

"Wicket.$('<embed>  or  <object>のid’)      .<追加した関数名>(<引数>...)");

Page 5: Communication between Wicket and Flex

Flex  →  Wicket •  AbstractDefaultAjaxBehaviorを継承しWebPageに追加することで、JavascriptからWicketのコンポーネントを呼び出すためのエンドポイントを生成。Flex側からそれを呼び出す。  

1.  AbstractDefaultAjaxBehavior.renderHead()をオーバーライドして連携用のJavascript関数を追加  

Java:  response.renderJavascript(String.format(      "function  <追加する関数名>(value)  {  "  +          "wicketAjaxGet('%s&params=’  "  +              "+  encodeURIComponent(value));"  +      "}",  getCallbackUrl()),  "適当なid");

Page 6: Communication between Wicket and Flex

Flex  →  Wicket  続き 2.  Flex側から追加した関数を呼び出す。      

3.  AbstractDefaultAjaxBehavior.respond()が呼ばれるのでgetRequest().getParameter()で引数を取り出しAjaxコンポーネントを更新

Flex:  ExternalInterface.call("<追加した関数名>",  <引数>);

Java:  @Override  protected  void  respond(AjaxRequestTarget  target)  {  

String  params  =  getRequest().getParameter("params");  

//  適当な処理 }  

Page 7: Communication between Wicket and Flex

テキストエンコーディング

•  Flex  ó  Javascript  •  特に何もする必要なし。  

•  Javascript  ó  Wicket  •  JavascriptからwicketAjaxGet()でWicketにパラメータを渡すときにURIエンコードする必要がある。encodeURIComponent()を使用すればよい。  

•  AjaxTarget.appendJavascript()によるJavascriptの呼び出しは、Javascriptのコードを記述しているだけなので何もする必要なし。

•  Tomcatについて  •  TomcatのHTTPコネクタを使用している場合は、server.xmlの<Connector>にURIEncoding=“UTF-­‐8”を追加(Tomcat  5.0以上)  

•  これやらないといくらsetResponseRequestEncoding()とか呼び出してもだめ  

Page 8: Communication between Wicket and Flex

終わり

•  ご清聴ありがとうございました