FDSでWEBメッセンジャー Flex User Group( http://www.fxug.net/ ) クラスメソッド株式会社( http://www.classmethod.jp/ ) 個人Blog( http://d.hatena.ne.jp/sato-shi/ ) 横田 聡( [email protected] ) 自己紹介 Flex User Group 発起人 クラスメソッド株式会社 キイロイトリのブログ書いています。 Flashのオーサリングは1週間で挫折。 ActionScript2.0/3.0しか知りません。 FlexとJavaを連携する業務システム開発 を仕事としています。 WEBメッセンジャー? 特定の相手にメッセージを送信する。 専用ソフトをインストールすることが多い。 – – MSNメッセンジャー ICQ WEBはHTTPの世界 – リクエスト&レスポンスの世界 – プッシュ配信が難しい FDSのプッシュ配信機能が使えるかも? FDS(Flex Data Services 2.0)とは? プッシュ配信 データ同期 RPC(Remote Procedure Call)サービス – – オブジェクトマッピング エラーハンドリング Pub/Sub型のメッセージ – JMS(Java Messaging Service) Httpの世界 接続を維持しないステートレスなプロトコル リクエスト無しにデータを取得するのは難しい リクエスト レスポンス JMS(Java Messaging Service) MOM (メッセージ指向ミドルウェア )にアクセ スするための標準API Publish / Subscribe メッセージモデル コンシューマ コンシューマ メッセージ メッセージ コンシューマ コンシューマ コンシューマ メッセージプロデューサ (トピックパブリッシャ) トピック メッセージコンシューマ (トピックサブスクライバ) WEBメッセンジャー・レシピ ユーザ認証してログイン ユーザリストの取得 特定のユーザにメッセージ送信 WEBメッセンジャー・利用技術 RPC・・・RemoteObject 配信/購読・・・Producer / Consumer イベント・・・イベントハンドラー 見た目・・・スタイルシート 動き・・・State / Transition 小技・・・Dictionary, Focus, IMEMode, ObjectUtil, selector, [Bindable] レッスン1 Eclipse 3.1.2 インストール Flex Builder 2 Plug-In インストール Flex Data Services 2 Express インストール MySQL 5.0 インストール – DBとテーブル作成 レッスン2 Flexプロジェクトの作成 – FDSを指定 – サーバーはJRunとする Javaプロジェクトの作成 – JRun内のFlexプロジェクトを指定 まずはHELLO!と表示 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Label text="HELLO!"/> </mx:Application> レッスン3 RemoteObjectを使ってみる – LoginServiceクラスを作成 package net.fxug; public class LoginService { public User login(String id, String password) throws Exception { User user = null; //省略 return user; } public List getUserList() throws Exception { List list = new ArrayList(); //省略 return list; } } レッスン4 Javaオブジェクトを ActionScriptオブジェクトにマッピング package { [Bindable] [RemoteClass(alias="net.fxug.User")] public class User { public var id:String; public var name:String; public var group:String; public var password:String; public function get label():String{ return name; } } } レッスン5 設定ファイルにRemoteObjectを登録 – remoting-config.xml <?xml version="1.0" encoding="UTF-8"?> <service id="remoting-service" class="flex.messaging.services.RemotingService" messageTypes="flex.messaging.messages.RemotingMessage"> <adapters> <adapter-definition id="java-object" class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true"/> </adapters> <default-channels><channel ref="my-amf"/></default-channels> <destination id="login"> <properties> <source>net.fxug.LoginService</source> </properties> </destination> </service> レッスン6 RemoteObjectを使ってみる – Resultイベント・Faultイベントの設定 – 引数の指定 <mx:RemoteObject id="ro" destination="login" showBusyCursor="true" fault="faultHandler(event)"> <mx:method name="login" result="{loginHandler(event)}"> <mx:arguments> <id>{idd.text}</id> <password>{password.text}</password> </mx:arguments> </mx:method> <mx:method name="getUserList" result="{getUserListHandler(event)}"> </mx:method> </mx:RemoteObject> レッスン7 ログインハンドラの記述 – as で強制的に 強制的にキャスト – currentState でステートの ステートの変更 – setFocus でフォーカス移動 フォーカス移動 //ログインハンドラ private function loginHandler(event:ResultEvent):void{ //User型として代入 user = event.result as User; panel.title = "ようこそ ようこそ "+user.name+"さん さん! さん!"; ro.getUserList(); currentState = "messenger"; msg.setFocus(); } レッスン8 ユーザリストハンドラの記述 – – ユーザリストからユーザリスト辞書を作成 コンシューマを購読させる //ユーザーリスト取得ハンドラ private function getUserListHandler(event:ResultEvent):void{ userList = event.result as ArrayCollection; createUserDictionary(userList); subscribeConsumer(); } レッスン9 Object型は[]を用いることで辞書として使える Selectorを使って購読メッセージを指定する //ユーザー辞書の作成 private function createUserDictionary(userList:ArrayCollection):void{ userDic = new Object(); for(var i:int;i<userList.length;i++){ userDic[userList[i].id] = userList[i].name; } } //コンシューマの登録 private function subscribeConsumer():void { consumer.selector = "userId = '"+user.id+"'"; consumer.subscribe(); } レッスン10 Selectorの書き方 "*" ... "/" ... "+" ... "-" ... "not" "like" ... "not" "in" ... "not" "between" ... "=" ... "<>" ... ">" ... ">=" ... "<" ... "<=" ... – SQL文形式 – 一致するメッセージ のみ購読する – メッセージのヘッダ 情報から条件指定 – 指定時にサーバに 購読条件が指定される – 条件外のメッセージは配信されない レッスン11 メッセージを送る1 – ComboBoxにはサーバから取得したユーザリス トをdataProviderとして指定している Userクラスのlabelフィールドを設定しているので、 ComboBoxのラベル表示時に反映されている – IMEConversionMode.JAPANESE_HIRAGAN Aにより、自動的に日本語入力モードになる <mx:HBox width="100%" paddingTop="0" paddingBottom="0" id="hbox1"> <mx:ComboBox id="cmb" dataProvider="{userList}"/> <mx:TextInput id="msg" enter="{sendMessage()}" width="100%" imeMode="{IMEConversionMode.JAPANESE_HIRAGANA}"/> </mx:HBox> レッスン12 メッセージを送る2 – ヘッダとボディに情報を付加して送る – ユーザリスト辞書を使ってIDから名前を取得 //メッセージ送信 private function sendMessage():void { if(cmb.selectedItem.id != user.id){ var message:AsyncMessage = new AsyncMessage(); message.body["msg"] = msg.text; message.headers["userGroup"] = user.group; message.headers["userId"] = cmb.selectedItem.id; message.headers["fromId"] = user.id; producer.send(message); } var txt:String = userDic[user.id] + ": " + msg.text + "¥n"; log.text += txt; msg.text=""; } レッスン13 メッセージを受け取る – Selectorでフィルタされた後のメッセージ – 情報を取り出して表示する // メッセージ受信ハンドラ private function messageHandler(event:MessageEvent):void { var body:Object = event.message.body; var header:Object = event.message.headers; var txt:String = userDic[header.fromId] + ": " + body.msg + "¥n"; log.text += txt; log.validateNow(); log.verticalScrollPosition=log.maxVerticalScrollPosition; } レッスン14 アプリケーションサーバの設定をする – 今回はJRun – Tomcat、JOTM、ActiveMQを使っても実現可能 Tomcat・・・http://tomcat.apache.org/ JOTM・・・ http://jotm.objectweb.org/ ActiveMQ・・・http://www.activemq.org/site/home.html レッスン15 リソース情報としてJMSの宛て先を登録 – C:¥fds2¥jrun4¥servers¥default¥SERVERINF¥jrun-resources.xml <!-- messenger --> <jms-destination> <jndi-name>jms/topic/flex/FlexMessengerTopic</jndi-name> <destination-name>FlexMessengerTopic</destination-name> <destination-type>javax.jms.Topic</destination-type> </jms-destination> レッスン16 設定ファイルにJMSを登録 – messaging-config.xml <destination id="messenger-topic-jms"> <properties> <server> <durable>false</durable> <durable-store-manager>flex.messaging.durability.FileStoreManager</durable-store-manager> </server> <jms> <destination-type>Topic</destination-type> <message-type>javax.jms.ObjectMessage</message-type> <connection-factory>jms/flex/TopicConnectionFactory</connection-factory> <destination-jndi-name>jms/topic/flex/FlexMessengerTopic</destination-jndi-name> <delivery-mode>NON_PERSISTENT</delivery-mode> <message-priority>DEFAULT_PRIORITY</message-priority> <acknowledge-mode>AUTO_ACKNOWLEDGE</acknowledge-mode> <transacted-sessions>false</transacted-sessions> </jms> </properties> <channels> <channel ref="my-rtmp"/> </channels> <adapter ref="jms"/> </destination> レッスン17 FDSをデバッグモードで動かす – コンソールにログを出力される services-config.xml <logging> <target class="flex.messaging.log.ConsoleTarget" level="debug"> <properties> <prefix>[Flex] </prefix> <includeDate>false</includeDate> <includeTime>false</includeTime> <includeLevel>false</includeLevel> <includeCategory>false</includeCategory> </properties> <filters> <pattern>Endpoint.*</pattern> <pattern>Service.*</pattern> <pattern>Configuration</pattern> </filters> </target> </logging> レッスン18 見た目をカスタマイズ – スタイルシートの指定 – Flex Style Explorer がオススメ Application { backgroundColor: #ffffff; backgroundGradientColors: #99ccff, #cccccc; color: #000000; } レッスン19 動きをカスタマイズ – State と Transition を使ってアクションを追加 – Flex Builder を使って自動的にソースを生成 <mx:states> <mx:State name="start"> <mx:RemoveChild target="{box}"/> <mx:RemoveChild target="{loginForm}"/> </mx:State> <mx:State name="login"> <mx:RemoveChild target="{box}"/> <mx:SetProperty target="{panel}" name="height" value="187"/> </mx:State> <mx:State name="messenger"> <mx:RemoveChild target="{loginForm}"/> </mx:State> </mx:states> <mx:transitions> <mx:Transition fromState="*" toState="*"> <mx:Parallel id="t2" targets="{[panel]}"> <mx:Move/> <mx:Fade alphaFrom="0" alphaTo="100" duration="10000" /> </mx:Parallel> </mx:Transition> </mx:transitions> レッスン20 開発中のデバック作業 – Flex Builder のデバックモードでステップ実行 – traceとObjectUtilの組合せ最高! trace(ObjectUtil.toString(someObject)); まとめ と 今後・・・ 少ない行数で結構あっさり出来た!! Selector文を組み合わせれば指定グループ 配信などできる FABridgeを使ってAjaxと連携できればHTML 上にプッシュ配信データを書き込める メッセージのボディにオブジェクトを詰めれる か検討中。(Javaオブジェクト、画像、音声) Tomcat、JOTM、ActiveMQの動作実験必要 FDSクラスタリングの動作実績を作りたい セッションタイムアウトなど気になる Flex 2 の学習には Flex User Group です! ユーザー登録及び勉強会無料です! 一緒に勉強してスキルアップしましょう 最後に クラスメソッドでは、 – RIA案件にチカラを入れています フロントシステムからバックシステムまで トータルでサポートいたします。 VBからリプレース、HTMLからリッチクライアントへ – RIA技術者を募集しています 一緒に飛躍しましょう♪ 社内にはFlexエンジニアがいっぱい。 オープンソースやトレーニングに興味のある人も歓迎 今は勉強中でも歓迎 ¥(^-^)¥ http://www.classmethod.jp/ ClassMethod Labs オープン!(技術情報公開) ありがとうござました。
© Copyright 2024 Paperzz