public var - Flex User Group

FDSでWEBメッセンジャー
Flex User Group（ http://www.fxug.net/ ）
クラスメソッド株式会社（ http://www.classmethod.jp/ ）
個人Blog（ http://d.hatena.ne.jp/sato-shi/ ）
横田聡（ yokota.satoshi@classmethod.jp ）
自己紹介
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]
レッスン１
Eclipse 3.1.2 インストール
Flex Builder 2 Plug-In インストール
Flex Data Services ２ Express インストール
MySQL 5.0 インストール
– DBとテーブル作成
レッスン２
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>
レッスン３
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;
}
}
レッスン４
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;
}
}
}
レッスン５
設定ファイルに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>
レッスン６
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>
レッスン７
ログインハンドラの記述
– 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();
}
レッスン８
ユーザリストハンドラの記述
–
–
ユーザリストからユーザリスト辞書を作成
コンシューマを購読させる
//ユーザーリスト取得ハンドラ
private function getUserListHandler(event:ResultEvent):void{
userList = event.result as ArrayCollection;
createUserDictionary(userList);
subscribeConsumer();
}
レッスン９
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();
}
レッスン１０
Selectorの書き方
"*" ...
"/" ...
"+" ...
"-" ...
"not" "like" ...
"not" "in" ...
"not" "between" ...
"=" ...
"<>" ...
">" ...
">=" ...
"<" ...
"<=" ...
– SQL文形式
– 一致するメッセージ
のみ購読する
– メッセージのヘッダ
情報から条件指定
– 指定時にサーバに
購読条件が指定される
– 条件外のメッセージは配信されない
レッスン１１
メッセージを送る１
– 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>
レッスン１２
メッセージを送る２
– ヘッダとボディに情報を付加して送る
– ユーザリスト辞書を使って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="";
}
レッスン１３
メッセージを受け取る
– 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;
}
レッスン１４
アプリケーションサーバの設定をする
– 今回はJRun
– Tomcat、JOTM、ActiveMQを使っても実現可能
Tomcat・・・http://tomcat.apache.org/
JOTM・・・ http://jotm.objectweb.org/
ActiveMQ・・・http://www.activemq.org/site/home.html
レッスン１５
リソース情報としてJMSの宛て先を登録
– C:¥fds2¥jrun4¥servers¥default¥SERVERINF¥jrun-resources.xml

<jms-destination>
<jndi-name>jms/topic/flex/FlexMessengerTopic</jndi-name>
<destination-name>FlexMessengerTopic</destination-name>
<destination-type>javax.jms.Topic</destination-type>
</jms-destination>
レッスン１６
設定ファイルに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>
レッスン１７
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>
レッスン１８
見た目をカスタマイズ
– スタイルシートの指定
– Flex Style Explorer がオススメ
Application {
backgroundColor: #ffffff;
backgroundGradientColors: #99ccff, #cccccc;
color: #000000;
}
レッスン１９
動きをカスタマイズ
– 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>
レッスン２０
開発中のデバック作業
– 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 オープン！（技術情報公開）
ありがとうござました。

Download Report