S2Flex2

50 %
50 %
Information about S2Flex2
Technology

Published on November 20, 2008

Author: yone098

Source: slideshare.net

Description

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

S2Flex2 -AMF3Gateway with DI Container -

自己紹介 片山 暁雄 id:c9katayama 株式会社キャピタルアセットプランニング

Agenda S2Flex2とは Flex2とは S2Flex2の機能 デモ 設計パターン&Tips

S2Flex2とは Flex2からSeaser2上のコンポーネントを呼び出 すフレームワーク クライアント側のフレームワークと、サーバ側の フレームワークが連携 通信プロトコルとしてHTTP(S)、通信フォーマッ トにAMFを使用

S2Flex2とは JDK1.4以降、Seaser2.4以降で動作 Apache License2.0 Seaser Foundationで開発中

S2Flex2とは Client Server Flex2 Application JavaEE Application Seasar2 HTTP over AMF component S2Flex2-components S2Flex2 component

Flex2とは Adobeが提供する、リッチインターネットアプ リケーション環境 FlashPlayer9 Flex2SDK Flex2Builder MXMLとActionScript3.0

Flex2の画面 http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

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(); }); }

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>

Flex2の利点 見た目がきれい コンポーネントが豊富 Eclipseの開発環境 ソースコードがテキストベース 実行時にコンパイルが不要 Javaが分かれば、 AS3は覚えやすい ステートを保持できる

Flex2の開発サイクル 実装(AS3、MXML) コンパイル(swf) サーバに配置 ブラウザでアクセス HTMLコンテンツ作成と同じ

S2Flex2 Client Server Flex2 Application JavaEE Application Seasar2 HTTP over AMF component S2Flex2-components S2Flex2 component

S2Flex2-components クライアント側の接続コンポーネント - S2Flex2Serviceクラス - このクラスを使用し、サーバに接続 SWCファイルで提供

S2Flex2Service S2Flex2Serviceの使用方法 Seasar2に、次のようなインターフェースを実装した コンポーネントが登録されているとします インターフェース public interface HelloService { /** * 引数の数だけ“hello”を連結して返す */ public String hello(int num); }

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; } }

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); }

S2Flex2Service S2Flex2Serviceの定義 //タグで接続するサービスを定義 <seasar:S2Flex2Service id=quot;service“ destination=“helloServicequot; result=quot;handleResult(event)“ fault=quot;handleFault(event)quot; /> サービス呼び出し //サービス呼び出し service.hello(2);

呼び出しの流れ S2Flex2Service destination:helloService service.hello(2) メソッド:hello 引数:2 Seasar2 helloService S2Flex2 String hello(int num) 呼び出し成功: ResultEvent result:”hellohello” handleResultメソッド 呼び出し失敗: handleFaultメソッド FaultEvent message:エラー内容

S2Flex2Service destination=S2のコンポーネント名 呼び出し時メソッド=コンポーネントのメソッド名 <seasar:S2Flex2Service id=quot;service“ destination=“helloServicequot; result=quot;handleResult(event)“ fault=quot;handleFault(event)quot; /> service.hello(2);

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);

S2Flex2 Client Server Flex2 Application JavaEE Application Seasar2 HTTP over AMF component S2Flex2-components S2Flex2 component

S2Flex2 AMFGateway - サーブレット(RemotingGatewayクラス) - AMF0とAMF3を解釈し、Seaser2管理下の コンポーネントを呼び出す - Flex2から来たAMFデータを元に、Javaのデータ 型に変換

AMF AMF(ActionMessageFormat) AMF0とAMF3があり、AMF3はFlashPlayer9 以降でサポート - Flex2ではAMF3を利用 オープンなフォーマット仕様 ・http://download.macromedia.com/pub/labs/amf/amf3_spec_121207.pdf

AMF 圧縮したバイナリ形式のフォーマット - データサイズが小さいため、通信が速い - JSONの4倍、XMLの10倍 型サポート - Stringやintなどのプリミティブ - 型付オブジェクトもサポートするため、 データクラスをそのまま転送可能

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)

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

@RemotingService サービスとして公開するコンポーネント - @RemotingServiceアノテーション、もしくは REMOTING_SERVICE変数を宣言する ことで公開可能

@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; } }

デモ Hello 足し算 DTOで通信

設計パターン&Tips セッション情報・ステートはFlex側で保持する - 入力・画面遷移ごとにサーバ通信を行わない サーバ通信の結果受け取りは非同期である ため、非同期前提の設計にする サーバ側は極力HttpSesionの利用を避け、 引数でもらう値のみでビジネスロジックが完 結するようにする

設計パターン&Tips HttpServletRequest,HttpSessionが必要な 場合は、@Export、@Importのアノテーション が利用できる - がしかし制御が難しいので、HttpServletRequest をスレッドローカルに格納する方法も検討した方が いい

設計パターン&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; } れる }

設計パターン&Tips サーバ側の受け口は、1箇所に固めた方がい い - @RemotingServiceをつけると、どのコンポーネン トでも公開できるが、後で分かりにくくなるので、 「service」などのパッケージを作り、そこに公開用の コンポーネントを固める。Daoはそのコンポーネント から呼ぶようにする。

設計パターン&Tips 競合フレームワークの検討 - BlazeDS Adobeのオープンソース(LGPLv3) AMF通信のほか、サーバプッシュ、メッセージングなどの機能を備える DIコンテナ非依存(Seaser2やSpringと連携可能) 設定がわりとめんどくさい - LiveCycleDataServices Adobeの商用サーバ AMF通信のほか、RTMP(Realtime Message Protcol)やPDF生成をサポート お値段がたかい

まとめ S2Flex2を使用すれば、Flashとの高速な通 信を手軽に利用できる Seaser2の機能をすべて利用可能 サーバプッシュを使いたい場合は、BlazeDS などを検討 エンジョイFlex2!

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

S2Flex2 - Seasar - DI Container with AOP -

S2Flex2. This page is still under construction. Trans. by H.Ozawa: Copyright© 2004-2006, The Seasar Foundation and the others. All rights reserved. ...
Read more

Payao: a community platform for SBML pathway model curation

Payao adopts community standards, accepting Systems Biology Markup Language (SBML; Hucka et al., 2003) ... (AMF3) protocol on S2Flex2, ...
Read more

suz-lab - suz-lab - Google Project Hosting

suz-lab; Groups; suz-lab-suz-env-local -suz-env-server -suz-s2-uploader -suz-as2-remoting -suz-demo-pv3d -suz-demo-php -suz-demo-s2flex2 -suz-demo-mule .
Read more

BIOINFORMATICS APPLICATIONS NOTE doi:10.1093 ...

BIOINFORMATICS APPLICATIONS NOTE Vol. 26 no. 10 2010, pages 1381–1383 doi:10.1093/bioinformatics/btq143 ... Java on Seaser Framework 2.0 with S2Flex2.
Read more

UserManual_en - Django AMF

Example of calling calculateService.calculate method from Flex2 using S2Flex2-components † This example uses S2Flex2-components. Read more

Payao: a community platform for SBML pathway model curation.

... available for model curation service at http://www.payaologue.org. Web site implemented in Seaser Framework 2.0 with S2Flex2, MySQL 5.0 and Tomcat ...
Read more

Seasar - DI Container with AOP -

Support questions relating to Seasar2. Seasar2 News; July 24,2006 Add Samples page. ... S2Flex2: Library to connect Flex2 and S2Container. S2Hessian:
Read more

Payao: a community platform for SBML pathway model ...

Web site implemented in Seaser Framework 2.0 with S2Flex2, MySQL 5.0 and Tomcat 5.5, with all major browsers supported. Contact: pj.ibs@onatik. 1 INTRODUCTION.
Read more