【Data and Communicationsレポート】
■■ 1章 Flex2の概要 ■■
※前回と教本の内容が同じのため、講師の発言のみを記述する
■Flex Data Services(FDS)
1)特徴
・FDS自体はJavaのアプリケーションなので、
動作させるにはJavaのアプリケーションサーバー(TomcatやJBoss等)が必要になる。
FDSにはJRunの簡易版が入っている。
・OCC:オフライン実行をサポートしている。
(非同期接続)
・ページング(10件毎にクライアントに送る等)機能が備わっているため、
大容量のデータ送信が可能。
・FDSサーバーにMXMLファイルを配置しておくと、
クライアントからアクセスがあったタイミングで動的にコンパイルし、SWFをクライアントに返す。
・SWFはサーバーにキャッシュされるので、次回からは(内容に変更がなければ)キャッシュSWFが使用される。
・キャッシュはメモリキャッシュなので通常は中を見ることはできないが、
設定ファイルの設定によっては、内容を抽出することが可能。
・RPC(リモートプロシージャコール)サービス
□HTTPService
□WEBService
↑FDSがなくてもよい
-----------------------------------
↓FDSが必要
□RemoteObjectService
■■ 2章 Webサービスへのアクセス ■■
■Webサービス
1)Webサービスとは
ネットワーク(インターネット)を通じて、公表、実行可能な自己完結したアプリケーション。
2)特徴
・メッセージングのベース:XML
・転送手段:HTTP
・サービス実行手段:SOAP
・公開手段:UDDIやWSDL
■使用手順
1)設定
※FLex2.0はWSDL1.1に対応
C:\fds2\jrun4\servers\default\flex\WEB-INFserver-config.wsddに使用するクラスを表記
(記述例)
<service name="SimpleService" provider="java:RPC">
<parameter name="methodName" value="*"/>
<parameter name="className" value="services.SimpleService"/>
2)インスタンスの生成
WebServiceオブジェクトをインスタンス化する。
(記述例)
<mx:WebService id="wsData" wsdl="http://somewhere.com/MyWS?wsdl"
/>
3-1)トリガーを与える:引数なし
(記述例)
load="wsData.outMethod()"
3-2)トリガーを与える:引数あり
・明示的に引数を渡す
(記述例)
load="wsData.outMethod('XXXX','TTTT')"
・パラメータバインディングを使用する
バインドによって引数を渡す場合はsendメソッドを使用することに注意。
(記述例)
<mx:WebService id="simpletest"
wsdl="http://anysite/FlecSimpleWS?wsdl">
<mx:operation name="methodOne"
result="handlerOne(event.result)">
<mx:request>
<fname>{myModel.fname}</fname>
<lname>{myModel.lname}</lname>
</mx:request>
</mx:operation>
<mx:WebService>
4-1)結果処理:バインディング
※Webサービスの場合は呼び出したメソッド名が入るので注意!
(記述例)
<mx:Label text={wsData.arrayOutMethod.lastResult} />
4-2)結果処理:result(fault)ハンドラ処理
・(記述例)
[ハンドラ定義]
private function wsHandler(event:ResultEvent):void
{
dataBack = event.result as ArrayCollection;
}
[ハンドラ呼び出し]
<mx:WebService
id="wsData"
wsdl="http://somewhere.com/MyWS?wsdl"
load="wsData.outMethod()"
result="wsHandler(event)" />
・Flex2.0.1では
private function faultHandler(event:mx.rpc.events.FaultEvent):void
{
mx.controls.Alert.show(event.fault.faultCode);
mx.controls.Alert.show(event.fault.faultString);
}
の引数をevent:mx.rpc.events.FaultEventの様には記述できないらしく、
インポートすることが必要
・同一WebServiceから複数のメソッドを呼び出したい時は
resultハンドラの宣言をWebServiceのインラインタグではなく、開始タグと終了タグの間で宣言する。
(記述例)
<mx:WebService id="wsData"
wsdl="http://127.0.0.1:8700/Simple?wsdl"
load="outMethod();arrayOutMethod()"> ← 呼び出しメソッドの宣言
<mx:operation name="outMethod" result="wordHandler(event)"
/>
<mx:operation name="arrayOutMethod" result="arrayHandler(event)"
/>
</mx:WebService>
■■ 3章 Flex Data Servicesの概要 ■■
■プロジェクト構成
・Javaクラス:C:\fds2\jrun4\servers\default\flex\WEB-INF\classes
・Javaソース:C:\fds2\jrun4\servers\default\flex\WEB-INF\src
・教本で使用しているDBアプリ:HSQLDB(hsqldb.jar) (PureJava)
※前バージョンのセミナーではMySQLを使用していたが、こちらの方が設定が楽
・DBレコード:C:\fds2\jrun4\servers\default\flex\WEB-INF\db
※これらのファイルの中を見るにはツールが必要になる。
eclipseのプラグインで見ることが可能らしい。
・html-template:SWFが埋め込まれたHTMLファイルが格納されている
■コンパイルプロセス
1)サーバーコンパイル
・FDSを使用するFlexプロジェクトはテストサーバーのディレクトリにコンパイルするか、
ブラウザリクエストに応答して必要なHTMLやSWFを作成する。
・SWFは一度生成されるとサーバーにキャシュされるので、コンパイルプロセスが発生するのは
初回リクエスト時のみ。
2)ローカルコンパイル
・FDSを使用しないFlexプロジェクトではローカルコンパイルを行い、
結果をローカルの出力ディレクトリ(デフォルトではbinのサブディレクトリ)に出力する。
■Flex Proxy Service
・Flash
PlayerはWEBサーバーのドメインとデータをやりとりするドメインが異なる場合に、
使用を禁止している。
・回避策としては異なるドメインのサーバー(のルート)にcrossdomain.xmlを配置する方法があるが
対象サーバーが管理下にないデータサーバ等の場合は面倒な場合もある。
・FDSを利用すると異なるドメインのサーバ間の中継を行える。
使用するにはproxyの設定ファイル(proxy-config.xml)に記述を追加する。
自分の環境のファイルを修正すればいいので、管理が楽。
■■ 5章
リモートオブジェクトサービスからJavaクラスへのアクセス ■■
■リモートオブジェクトサービス内容
・FDSで提供されるサービスの一つで、FlexからJavaクラスのパブリックメソッドが呼び出せる。
・他のRPCと同様に、非同期で呼び出しが行われ、
結果はデータバインディング、イベントハンドラで処理される。
・リモートオブジェクトサービスはAMF(Action Message
Format)を使用して、
FlexクライアントとFDSでデータ交換を行う。
■設定方法
1)宛先
・各宛先は一つのJavaクラスを示し、<destination>タグで作成される。
(記述例)
remoting-config.xml内
<destination id="myJavaClass">
<properties>
<source>package.ClassName</source>
<scope>application</scope>
</properties>
</destination>
2)アダプタ
・(記述例)
<adapters>
<adapter-definition id="java-object"
class="flex.messaging.services.remoting.adapters.JavaAdapter"
default="true"/>
</adapters>
3)チャ(ン)ネル
・デフォルト
(記述例)
remoting-config.xml内
<default-channels>
<channel ref="my-amf"/>
</default-channels>
・新規に追加する場合はservices-config.xmlに記述する。
(記述例)
services-config.xml内
<channels>
<channel-definition id="my-amf"
class="mx.messaging.channels.AMFChannel">
<endpoint
uri="http://{server.name}:{server.port}/{context.root}/messagebroker/amf"
class="flex.messaging.endpoints.AMFEndpoint"/>
<properties>
<polling-enabled>false</polling-enabled>
</properties>
</channel-definition>
</channels>
■使用手順
1)インスタンスの生成
RemoteObjectオブジェクトをインスタンス化する。
(記述例)
<mx:RemoteObject id="myService" destination="myJavaClass"
result="resultHandler(event)" />
3-1)トリガーを与える:引数なし
(記述例)
<mx:Button label="get Data" click="myService.getData()" />
3-2)トリガーを与える:引数あり
・明示的に引数を渡す
(記述例)
load="myService.outMethod('XXXX','TTTT')"
・パラメータ連結
パラメータ連結によって引数を渡す場合はsendメソッドを使用することに注意。
(記述例)
<mx:RemoteObject id="myRemoteObject"
destination="myService">
<mx:method name="getOneItem"
result="getOneItemHandler(event)">
<mx:arguments>
<arg1>{text1.text}</arg1>
<arg2>{text2.text}</arg2>
</mx:arguments>
</mx:method>
<mx:RemoteObject>
4-1)結果処理:バインディング
(記述例)
<mx:Label text={myService.getData.lastResult} />
4-2)結果処理:result(fault)ハンドラ処理
・(記述例)
[ハンドラ定義]
private function myResultHandler(event:ResultEvent):void
{
dataBack = event.result as ArrayCollection;
}
[ハンドラ呼び出し]
<mx:RemoteObject
id="myRemoteObject"
destination="myService"
result="myResultHandler(event)" />
・同一RemoteObjetから複数のメソッドを呼び出したい時は<mx:method>タグを使用する。
(記述例)
<mx:RemoteObject id="myService" destination="myJavaClass"
fault="faultHandler(event)">
<mx:method name="getAll" result="getAllHandler(event)" />
<mx:method name="getOne" result="getOneHandler(event)" />
</mx:RemoteObject>
■ActionScriptとJavaの間でのデータ交換
1)Java→ActionScript
・Flexで黙示的に処理されないJavaオブジェクトの場合は、Publicのgetter、setterメソッドペア内の値と、
パブリック変数内の値がObjetのプロパティとしてクライアントに渡される。
・プライベートプロパティ、定数、静的プロパティ、読み取り専用プロパティは変換されない。
2)ActionScript→Java
・クライアントからJavaオブジェクトにBooleanやNumber値を渡す際、
Flexはnull値をプリミティブ型のデフォルトとして解釈する。
例えばdouble,float,long,int,short,byteでは0、
charでは\u0000、booleanではfalseとなる。
3)カスタムオブジェクト
・リモートオブジェクトサービスではクライアント、サーバー層の両方で
データに関しては値(value)オブジェクトを用いて表現する。
・JavaVOでは通常プライベートプロパティおよび黙示的なgetter、setterを使用して
データを公開し、アクセスする。
・ActionScriptVOでは値オブジェクトのデータはパブリックプロパティとして公開するか、
黙示的なgetter、setter持つプライベートプロパティとして公開する。
・ActionScriptVOは[Bindable]指定を行い、パブリックプロパティを連結可能にする。
・ActionScriptVOは[RemoteClass]指定を行い、クライアントサイドのVOとサーバーサイドのVOの
マッピングを可能にする。
・ActionScriptVO
(記述例)
package valueobject {
[Bindable]
[RemoteClass(alias="valueobjects.Sandwich")]
public class Sandwich {
public var sandwichId:int;
public var sandwichName:String="";
}
}
■■ 6章 データの検証とフォーマット ■■
■フォームデータの検証
1)MXML
・TextInputコントロールの検証
(記述例)
<mx:TextInput id="phoneInput" />
<mx:PhoneNumberValidator id="phoneV"
source="{phoneInput}" ←コントロールのidをバインド
property="text"> ←型
・データが入力された場合のみチェックしたい場合はrequiredをfalseにする。
2)ActionScript
・TextInputコントロールの検証
(記述例)
private var v:PhoneNumberValidator;
private function createValidator():void
{
v = new PhoneNumberValidator();
v.source = phoneInput;
v.property = "text";
}
■イベントでの検証トリガ
指定したイベントにより検証がトリガされる。
(記述例)
<mx:NumberValidator id="amountV"
source="{amountInput}" property="text"
trigger="{submitButton}" ←コントロールidをバインド
triggerEvent="click" /> ←イベントの種別
■ActionScriptでの検証トリガ
・自動検証を無効にして、明示的にvalidate()メソッドを呼び出す。
・利点としては、その時点で必要な検証ルールのみを実行可能になることと、
検証の結果に応じて対応を組み込む事が可能になる事が挙げられる。
・(記述例)
[MXML]
<mx:NumberValidator id="amountV"
source="{amountInput}" property="text"
triggerEvent="" />
←ブランクに設定して自動検証を無効にする
[ActionScript]
private function caluclate():void
{
var event:ValidationResultEvent = amountV.validate();
if(event.type == ValidationResult.VALID){
成功時処理
}else{
失敗時処理
}
}
■正規表現
1)MXML
(記述例)
<mx:RegExpValidator id="regExpV"
source="{input}"
property="text"
expression=".\\.pdf"
flags="i" /> ← 大文字小文字の区別をしない
2)ActionScript
(記述例)
var pattern:RegExp = new RegExp(".\\.pdf","i");
var result:int = myString.Search(pattern);
if(result == -1){
パターンが一致しない
}
■データのフォーマット
FlexではデータのフォーマットにFormatterのサブクラスを使用する。
(記述例)
・Formatterクラスのインスタンス化
<mx:CurrencyFormatter id="myFormatter" precision="0" />
※precision:小数点の桁数
decimalSeparatorTo:小数点区切り
thousandsSeparatorTo:桁区切り
・値のフォーマット
<mx:Label text="{myFormatter.format(myNumber)}" />
■■ 7章 複雑なデータの操作 ■■
■collectionクラス
1)インターフェース
・IList:set、get、remove操作を提供する。
・ICollectionView:データをソートまたはフィルターを使用して表示することができる。
・IViewCursor:ICollectionViewを双方向で公開するインターフェースを提供する。
■データのフィルター
(記述例)
[イベント呼び出し元]
<mx:ComboBox id="categorySelect"
dataProvider="{categoryList}"
labelField="category_name"
change="filterByCategory(event)" />
[イベントハンドラ]
private function filterByCategory(event:Event):void
{
foodList.filterFunction = catFilter;
foodList.refresh(); ←ビューにフィルタを適用します。
}
[フィルター処理]
※戻りはBoolean、引数はObjectになることに注意
private function catFilter(item:Object):Boolean
{
return item.category_name ==
categorySelect.selectedItem.category_name;
}
■データソート
(記述例)
[イベントの呼び出し元]
<mx:Button id="myButton" label="Sort Items"
click="sortItems()"/>
[イベントハンドラ]
private function sortItems():void
{
var foodSort:Sort = new Sort();
foodSort.fields=[new SortField("product_name")];
foodList.sort=foodSort;
foodList.refresh();
}
■データカーソル
カーソル操作(カーソルの移動、アイテムの追加・削除)を行うときは
必ず対象のArrayCollectionにソートを適用する(ソートしないとエラーが発生)。
(記述例)
[検索するパラメータ]
<mx:Object id="searchState">
<mx:state>HI</mx:state>
<mx:city>Honolulu</mx:city>
</mx:Object>
[カーソル使用]
private var myCursor:Cursor = myArrayCollection.createCursor();
myCursor.findFirst(searchState);
searchStateの検索結果に基づいて、カーソルを適切な位置に移動する。
オブジェクトは myCursor.current で取得できる。
■■ 8章 Flex Message Serviceの使用 ■■
■役割
・メッセージ送り手:プロデューサー
・メッセージ受け手:コンシューマー
■設定
※設定ファイルの雛形がある(C:\fds2\resources\config)。
1)宛先
・サービス設定ファイル(messaging-config.xml)で宛先の設定を行う。
各宛先は<destination>タグで作成される。
・(記述例)
<destination id="myChatDestination">
中略
</destination>
※サービス設定ファイルのパス:C:\fds2\jrun4\servers\default\flex\WEB-INF\flex\
2)アダプタ
・選択できるアダプタとしてデフォルトのサービス設定ファイルには、
前もって定義されたアダプタが含まれている。
・ActionScriptアダプタ:Flexクライアントアプリケーションのみを含むアプリケーションに使用される。
デフォルトのアダプタとなっている。
・JMSアダプタ:Flexだけでなく、Javaベースのクライアントアプリケーションを使用できる。
・(記述例)
デフォルトのアダプタ以外を利用するときは以下を<destination>タグに追加する。
<adapter ref="jms" />
・(参考)ColdFusionと連携できるアダプタ
<adapter-definition id="cfgateway"
class="coldfusion.flex.CFEventGatewayAdapter"/>
3)チャンネル
・メッセージチャンネルを選択して、通信のフォーマット方法や送信方法を決定する。
・(記述例)
宛先のメッセージチャンネルを選択するには以下を<destination>タグに追加する。
<channels>
<channel ref="my-rtmp" />
</channels>
■使用手順
1)プロデューサー
・インスタンス生成
(記述例)
<mx:Producer id="producer" destination="chatDistination" />
・メッセージ作成
・送信
メッセージはAsyncMessageクラスを使用してパッケージ化されサーバーに送信される。
(記述例)
private function send():void {
var message:AsyncMessage = new AsyncMessage();
message.headers.user = user;
message.body = msg.text;
producer.send(message);
msg.text="";
}
2)コンシューマー
・インスタンス生成
(記述例)
<mx:Consumer id="consumer" destination="chatDistination" />
・サブスクライブ
subscribe()はメッセージをConsumerの事前定義された宛先に送信する。
一旦、コンシューマーがサブスクライブされると、MessageServiceによって
その宛先に送信されたすべてのメッセージはこのConsumerコンポーネントに転送される。
・受信処理
メッセージが受信されるとコンシューマーはmessageイベントをブロードキャストする。
messageイベントを受信するには<mx:Consumer>の宣言にイベントハンドラを宣言する。
(記述例)
<mx:Consumer id="consumer" destination=" chatDestination"
message="messageHandler(event)" />
■■ 9章 Flex Data Management Serviceの使用 ■■
■設定
※設定ファイルの雛形がある(C:\fds2\resources\config)。
1)宛先
・サービス設定ファイル(data-management-config.xml)で宛先の設定を行う。
各宛先は<destination>タグで作成される。
・(記述例)
<destination id="myChatDestination">
中略
</destination>
※サービス設定ファイルのパス:C:\fds2\jrun4\servers\default\flex\WEB-INF\flex\
2)アダプタ
・アダプタを選択することにより、サーバー上でのデータの永続性を決定する。
・ActionScriptアダプタ:サーバーメモリにデータ更新内容を格納し、
その変更内容はFDSが再起動されると失われる。
・Javaアダプタ:Javaクラスを介してDB等とデータのやり取りを行う。
これがデフォルトのアダプタをなっている。
・(記述例)
デフォルトのアダプタ以外を利用するときは以下を<destination>タグに追加する。
<adapter ref="actionscript" />
3)チャンネル
・メッセージチャンネルを選択して、通信のフォーマット方法や送信方法を決定する。
・(記述例)
宛先のメッセージチャンネルを選択するには以下を<destination>タグに追加する。
<channels>
<channel ref="my-rtmp" />
</channels>
・<channels>または<default-channels>タグに複数のチャンネル設定が存在する場合は、
記述されている順番に使用されるが、何らかの理由で使用できない場合は、
次のチャンネルが使用される。
■使用方法
1)DataServiceオブジェクトのインスタンス生成
・(記述例)
<mx:DataService id="dsSandwiches" destination="sandwich" />
2)JavaDTOクラスの作成
・サーバー層において、DTOはJavaクラスまたはCoidFusionコンポーネントとして構築される。
・Javaクラスでは通常はプライベートプロパティとパブリックなgetter、setterメソッドで構成される。
3)ActionScriptDTOの作成(DTOのマッピング)
・クライアント層において、DTOはActionScriptクラスとして構築される。
・通常はパブリックプロパティまたはパブリックなgetter、setterメソッドを持つ
プライベートなプロパティで構成される。
・ActionScriptDTOでは[Managed]、[RemoteClass]のメタタグを使用する。
※[Managed]:コンパイルされたオブジェクトがDataServiceコンポーネントが必要とする
適切なイベントやエラーを生成するようにする。
※[RemoteClass]:クライアントサイドのDTOをサーバーサイドのDTOにマッピングする。
4)Javaアセンブラクラスの作成
・DB等にアクセスする操作用クラス。
・クライアントからデータアクセスするには、予めdata-management-config.xmlに
アセンブラクラスと操作メソッドの設定を行っておく。
5)操作メソッドの呼び出し
・fill(),count(),get(),sync()をクライアントサイドから呼び出し
戻り値のデータを取得する。
・(記述例)
private function onCreationComplete():void {
dsSandwiches.fill(sandwiches); ← sandwiches:ArrayCollectionのid
}
■変更の管理
・デフォルトはautoCommitプロパティがtrueのため、クライアントに変更がある度に
サーバー側のデータも更新されてしまうが、autoCommitをfalseにして、
明示的にコミットやロールバックを行うことも可能である。
・(記述例)
<mx:Button label="Save"
enabled="{dsSandwiches.commitRequired}"
click="dsSandwiches.commit()"/>
<mx:Button label="Cancel"
enabled="{dsSandwiches.commitRequired}"
click="dsSandwiches.revertChanges()"/>
■クラス作成に関して
・DataServiceを利用するには複数のクラスの作成が必要となるが、
ColdFusionウィザードを用いるとアセンブラ、DAO、VOを自動生成してくれる。
Flex BuilderにCFの拡張機能を導入する必要がある。
・JavaDaoというフリーソフトもあるらしい・・。
■■ 10章 E4XのコントロールへのXML追加 ■■
■E4Xとは
・E4XとはECMAScript for XML
の意で、ECMAScriptでXMLデータを使用した作業するための
新しいクラスおよび機能のセットの事
■E4Xの演算子
1)ドット『.』演算子
・XMLオブジェクトの子エレメントを示す。
・(表示例)
mealsXML.serving[0].hearty.meat -> pastrami
<serving time="lunch">
<lite cost="10.95">
<meat>turkey</meat>
</lite>
<hearty cost="12.95">
<meat>pastrami</meat>
</hearty>
</serving>
2)括弧『()』演算子
・E4X XML構造内の式を評価する。
・(記述例)
mealsXML.serving.lite.(meat=='turkey')
3)属性『@』演算子
・XMLオブジェクトの属性を識別する。
・(記述例)
mealsXML.serving.hearty.(@cost==9.95)
4)下位『..』アクセス演算子
・XMLオブジェクトの下位エレメントを示す。
・(記述例)
mealsXML..lite
■XMLオブジェクトの使用
1)XMLタイプ変換
・XMLオブジェクトからStringへ変換するにはtoString()メソッドを使用する。
toString()メソッドはXMLオブジェクトからすべての名前空間、タグ、属性、コンテンツを含む
文字列を返す。
・StringからXMLオブジェクトへ変換するにはXMLクラスをインスタンス化し、
String文字列を引数として指定する。
(記述例)
var myXML:XML = new XML(<products></products>)
2)XMLListCollection
・XMLListCollectionクラスはXMLListオブジェクトにコレクション機能を与える。
・XMLListCollectionオブジェクトはデータプロバイダとして使用され、
基本となるXMLデータに変更があった場合のデータプロバイダの自動更新を有効にする。
■■ その他(メモ) ■■
・講師メールアドレス:taira@m-school.biz
■■ 不明点 ■■
・FDSで実現している機能を他のツールで補完することは可能なのだろうか?
以上
最終更新:2006年12月27日 11:24