Developing Rich Client Applications

【Developing Rich Client Applicationsレポート】

■■　1章 Flex2の概要　■■

■RIAの特徴
　 ・必要な場合にのみサーバーにリクエストを出す
　　(クライアントサイドである程度処理を行えるのでサーバーの負荷を軽減)
　 ・クラサバ型のアプリケーション(リッチなGUI)、
　　WEB型アプリケーション(HTTPプロトコル、クライアントにアプリケーションの配布不要)の
　 　利点を併せ持つ

■AdobeFlex2の製品群
1)FlexBuilder2
　 ・MXML、ASコードからSWFを作成するコンパイラが内蔵
　　　※SWF・・ブラウザーでフラッシュプレイヤーで再生可能なファイル
　 ・Eclipseフレームワークを使用して作成

2)Adobe Flex2 SDK・・開発ツール
　・※SDKのみあればFlex2アプリケーションの開発をすることは可能だが、
　　 　開発効率などを考えるとFlexBuilder等のIDEは必須。

■Flex Data Services
1)構成
　Flex Data Servicesは以下の３つのサービスから構成される
　 ・Message Service
　 ・RPC Services
　　　※PRC(リモートプロシジャーコール)
　 ・Data Management Service

2)(主な)特徴
　・SWFのファイルがないサーバーにもアクセス可能にする
　　(通常はセキュリティの面からSWFファイルのないサーバーへのアクセスは禁止されている)
　・リモートオブジェクト(javaオブジェクト、ColdFusionコンポーネント)へのアクセス
　 ・複数クライアント間のデータ共有
　 ・サーバーサイドからのプッシュ型のデータ配信

■MXML
1)MXMLとは
　FlashアプリケーションのGUIを開発できるXMLベースのマークアップ言語

2)コンパイルの流れ
　・MXML　→　AC　→　SWF
　・AC　→　SWF
　コンパイルされたSWFはサーバーにキャッシュされる

■ヘルプやその他のリソース
　URLの最後に_jpを入力すると日本語のページへ


■■　2章 FlexBuilder2　ファーストステップ　■■

■Eclipse解説
1)Eclipse画面
　・ワークベンチ(作業台)の中にエディター、ビューが配置されている
　・(開発、デバッグ、Java)パースペクティブ(画面の構成)場合によって切り替える
　・デバッグパースペクティブではTrace()の内容をコンソールに表示する
　 ・ブレークポイントに設定できるのはASコードのみ

2)Eclipse操作
　 ・対象単語でshift+F2で詳細ヘルプ
　 ・単語の選択の場合　Ctrl+space

3)プロジェクト作成
　・『Flexデータサービス』は、FDSを使用する際に選択する


■■　3章 FLexによるRIA開発の基礎知識　■■

■MXMLのタグ解説
1)プロパティの設定
　プロパティの設定は二通り存在する
　(設定1)<mx:Label text="Hello" />
　(設定2)<mx:Label>
　　　 　 <mx:text>Hello</mx:text>
　　　 </mx:Label>

2)コメント
　XMLスタイルのコメント、<!-- コメント内 -->を使用する

3)Application
　・layout:　absolute(絶対座標)の場合はx,yの座標指定を行う
　・xmlns：名前空間宣言、接頭辞宣言

4)コンテナ
　コンテナ内にコントロールを配置し、レイアウトの制御を行う
　・VBox(縦配置)
　・(横配置)
　・Canvas(x,yの座標指定を行う)

5)Textinput
　・restrict:ユーザーがテキストフィールドに入力できる文字のセットの指定
　　(例)restrict="0-9a-zA-Z"
　　※正規表現とは異なる

6)Label　
　・設定できるテキストは一行(改行不可)
　・ユーザーからの入力はできない。

7)Script
　・ActionScriptを記述可
　・[CDATA]内ではタグ等のエスケープ('<'(&lt;))が必要なくなる

■データバインディング
　あるオブジェクトのデータを別のオブジェクトにバインドするプロセス
　・記述例
　　(例1:中括弧)
　　<mx:Label id="labelOne" text="hello" />
　　<mx:Label text="{labelOne.text}" />

　　(例2:Bindingタグ)
　　<mx:Label id="labelTwo" text="hello" />
　　<mx:Label id="labelThree" />
　　<mx:Binding source="labelTwo.text"destination="labelThree.text">

　・[Bindable]を記述すると変数の中身が変更されたとき、バインド側も自動更新される

■カスタムコンポーネント
　すべてのアプリケーションコードを一つのファイルにまとめると、
　可読性(メンテナンス性)や再利用性が下がるため、
　分割されたMXMLファイルを用いてアプリケーションを
　構成することが効率がよい方法といえる

・カスタムコンポーネントでは<mx:application>の代わりに別のタグを利用する
　ベースタグとして<mx:Canvas>がよく用いられる

・<呼び出し方法>
　名前空間宣言：xmlns:comp="conmponent.*"
　<comp:Component1 />
　※接頭辞：comp
　※フォルダ名：conmponent
　※ファイル名:Component1.mxml


■■　4章 イベントの処理　■■

■イベントの種類
　以下の２つから構成される
　1)システムイベント
　　・プログラムコードの実行により発生
　　・creationCompleteイベントはよく使用する
　　　アプリケーションの起動時に各オブジェクトの初期状態を設定する場合に使用可能
　　　Initializeだと発生が早すぎて子オブジェクトと適切に連携できない場合あり

　2)ユーザーイベント
　　・ユーザーアクションへの応答で発生

■設定例
　<mx:Script>
　　<![CDATA[
　　　private function clickHandler():void
　　　{
　　　　myL.text="Button Clicked";
　　　　myButton.label="Button Clicked";
　　　}
　　]]>
　</mx:Script>

　<mx:Label id="myL"/>
　<mx:Button id="myButton"
　　label="Click Me"
　　click="clickHandler()"/>　←　呼び出し

　※デザインモードのFlexプロパティからも設定可能

■イベントオブジェクト
　flash.events.Eventクラスが基底クラスとなる

　1)イベントオブジェクトの(主な)プロパティ
　　・type:イベントの型
　　・(current)target:ボタンをクリックした場合はボタンオブジェクト
　　　※発生するイベントによって取得できる情報が異なる
　　　※currentTarget:現在のターゲット、target:大元のターゲット

　2)設定例
　<mx:Script>
　　<![CDATA[
　　　private function aHandler(event:Event):void
　　　{
　　　　 label1.text=event.currentTarget.value + " " +
　　　}
　　]]>
　</mx:Script>

　(呼出)
　<mx:button label="Click Me" id="button1" click="aHandler(event)"/>

　3)イベントリスナー
　　タグだけでなく、ASからもクリックハンドラの設定を行える
　　object.addEventListener(eventType:String,Listener:Function):void

■■　5章 シンプルなコントロールの使用　■■

■Flexコントロール
　すべてのコントロールクラスはUIComponentクラスを継承する

　1)text
　　・widthを指定すると、改行が無視される

　2)htmlText
　　・HTMLタグを理解(改行に<BR>が使用できる)

　3)Image
　　・コンパイル時に画像の埋め込み
　　　<mx:image source="@Embed('XXXX.svg')" />


■■　6章コンテナを使用したアプリケーションのレイアウト　■■
■■　7章制約ベースのレイアウトを使用したアプリケーションのレイアウト　■■

■コンテナのプロパティ
　・gap　コントロール間の隙間
　・padding　コンテナ－コントロール間の隙間
　・required:<mx:FormItem label="E-mail Address:" required="true">
　　『必須』が表示されるだけで、チェックをするわけではない

■コンテナの種類
　大きく分けるとFlex2のコンテナはレイアウト、ナビゲータコンテナが存在する
　※無駄なコンテナを入れると計算等で表示が遅くなるので注意
　※ネストコンテナの制約は直属の親コンテナに基づく
　1)Application
　　・各Flexアプリケーションのルートコンテナで、FlashPlayer描画エリア全体を示す
　　・絶対配置をサポート(他にPanel、Canvas等)
　　・layoutプロパティがabsoluteに設定されていない場合、x、yプロパティは
　　　無視される

　2)Panel
　　・モジュールのラップ

　3)Form、FormHeading、FormItem
　　フォームの整理、レイアウトを行う

　4)Grid
　　HTMLの<table>のように子要素をセルの行、列として配置する
　　[タグの比較]
　　　table　 　 　　Grid
　　　tr　 　 　　GridRow
　　　td　 　 　　GridItem
　　　rowspan　 　 rowSpan
　　　colspan　 　 colSpan

　5)VBox,HBox
　　コンポーネントの垂直または水平レイアウト

　6)VDividedBox、HDividedBox
　　配置された子コンポーネントを分割線で分離

　7)tile
　　幅または高さの大きいコントロールに合わせて配置を行う

　8)Controlbar
　　Panel、TitleWindowで使用される


■■　8章　アプリケーションデザインでのビューステートの使用　■■

■ビューステートの特徴
　・ビューステートは同じアプリケーション内で複数の異なるプレゼンテーションレイアウトを定義する
　・各個別のレイアウトをステートという
　・ユーザーイベントまたはシステムイベントを使用してステートを変更する
　・コード自体は複雑になるが、カスタムコンポーネント内にビューステートを作成すると可読性があがる

■ビューステートの制御
　通常はデザインモードで設定する方が便利
　(例)ボタンのクリックイベントでステート変更
　　[ベースステート→formsステート]
　　　<mx:button id="b1" label="Add a button"click="currentState='forms'">
　　[formsステート→ベースステート]
　　　<mx:button id="b2" label="Remove Added button"click="currentState=''">
　　　※currentStateの設定を空にした場合はベースステートへの切り替えとなる

■ビューステートのプロパティ
　・basedOn
　　デフォルトのベース以外のステートに新規のステートを追加した際に
　　設定されるプロパティ


■■　9章ナビゲーションコンテナを使用したナビゲーションの作成　■■

■ナビゲーションコンテナの特徴
　複数の子コンテナ間でのユーザーの動作を制御する

■ナビゲーションコンテナの種類
　※ナビゲーションコンテナの内側にレイアウトコンテナ(CanvasやHbox等)を定義して、
　　さらにその中にコンテンツ配置しなければならない
　1)Accordion
　　ユーザーがレイアウト可能な子コンテナを持つ(TabNavigator、ViewStackも同様)

　2)ButtonBar
　　子コンテナを持たないため、ViewStackを利用する(LinkBar、TabBarも同様)

　3)LinkBar

　4)TabBar

　5)TabNavigator

　6)ToggleButtonBar

　7)ViewStack
　　LinkBarやTabBarと連携させて使用する


■■　10章 アプリケーションのルック ＆フィールのカスタマイズ　■■

■ビヘイビア
　コンポーネントに適用される動的なエフェクト(効果)
　1)トリガ
　　・ユーザーによるクリックなどのアクションの事
　　・トリガ自体はイベントではないため、トリガにイベントを関連付けるまでは
　　　何も発生しない

　2)エフェクト
　　・トリガよりエフェクトが開始される
　　・単一のトリガで複数のエフェクトを発生させることが可能
　　・mx:sequenceブロック内のエフェクトは上から順番に実行される
　 ・mx:parallelブロック内のエフェクトは同時に実行される

■トランジション
　ビューステートに適用される動的なエフェクト

■スタイルの設定

　1)メソッドでの定義
　　※setStyle()メソッドはFlexFrameworkでリソースを大量に消費する呼び出しのため、
　　なるべく使用は避ける

　2)MXMLタグ内で定義(インライン定義)
　　・(記述例)
　　　<mx:Text text="Appetizers" color="#dd7142" />
　　・MXML用のスタイル構文はCSSスタイル構文と若干用語が異なるので注意
　　　(例)
　　　font-weight　→　fontWeight

　3)styleブロック内で定義
　 ・CSSスタイル構文を使用可能
　　・(記述例)
　　　<mx:Styles>
　　　　.headerText{font-family:3;}
　　　</mx:Styles>

　4)CSS外部ファイルで定義
　 ・CSSスタイル構文を使用可能
　　・外部CSSはコンパイル時に適用される
　 ・(記述例)
　 　<mx:Style source="XXX.css" />

■スタイル適用優先順位
　1.インライン
　2.クラスセレクタ(.class)
　3.タイプセレクタ
　4.グローバルセレクタ
　　すべてのコンポーネントに影響する特別なセレクタ
　　・(記述例)
　　　<mx:Styles>
　　　　global{color: #009900;}
　　　</mx:Styles>


■■　11章MXMLおよびActionScriptデータモデルの使用　■■

■MVCデザインパターン
　Flexのデータモデリングは、Model-View-Controller(MVC)デザインパターンに基づいている

　1)MVCの要素
　　以下の要素で構成されている
　　・モデル
　　　データ要素を管理し、変更指示に応答
　　・ビュー
　　　表示領域を制御し、データの表示を行う
　　・コントローラ
　　　モデルおよびビューに影響するイベントの処理

　2)MVCの利点
　　・再利用性
　　・管理性
　　・多く実績を持つ開発手法

■クラスの宣言

1)MXMLデータモデル
　・mx:Modelブロック内に記述
　・(記述例)
　　<mx:Model>
　 　<employee>
　　　　<name>
　　　　　<first>Yamada</first>
　　　　　<last>Hanako</last>
　　　　</name>
　　　</employee>
　　</mx:Model>

2)ActionScriptデータモデル
　・(記述例)food.maindishクラスパスにあるPasta.asというファイルに記述
　　package food.maindish
　　{
　　　public class Pasta
　　　{
　　　　public var cookingTime:int;
　　　　public var cost:Number;
　　　}
　　}

■クラス(インスタンス)の生成
　1)コンストラクタに引数が存在しない場合
　　・MXML: <Pasta id="ziti" />
　　・ActionScript: private var ziti:Pasta = new Pasta();

　2)コンストラクタに引数が存在する場合
　　・MXML:記述できない
　　・ActionScript: private var ziti:Pasta = new Pasta(10,1000);

■バインドプロパティの作成
　データバインディングとは、あるオブジェクトのプロパティ値を
　別のオブジェクトのプロパティ値に動的に反映させるプロセスの事
　1)バインド方法
　　・ActionScriptクラスのプロパティをデータバインドする場合は
　　　クラス定義でバインド可能であることを宣言する必要がある
　　・すべてのプロパティをバインドする場合はクラスをバインド対応にする
　　　(記述例)
　　　package food.maindish
　　　{
　　　　[Bindable]
　　　　public class Pasta
　　　　{
　　　　　public var cookingTime:int;
　　　　　public var cost:Number;
　　　　}
　　　}
　　・一部のプロパティだけをバインドする場合はそれらのプロパティだけをバインド対応にする
　　　(記述例)
　　　package food.maindish
　　　{
　　　　public class Pasta
　　　　{
　　　　　[Bindable]
　　　　　public var cookingTime:int;
　　　　　public var cost:Number;
　　　　}
　　　}

■thisキーワード
　・thisはアプリケーション自身を参照する
　　(記述例)
　　<mx:Application>
　　　<mx:Label text="{this.width}" />　←この場合のthisはアプリケーション自身を参照している
　・カスタムコンポーネント内では、カスタムコンポーネント自身を参照する
　・ActionScript内ではそのクラス自身を参照する

■メソッドの定義
　ActionScriptではオーバーロードはできない

■メソッドの呼び出し
　1)通常のメソッド
　　(設定例)
　　　クラス名:Pasta
　　　メソッド名:alDente()
　　　インスタンス名:gnocchi
　　(呼び出し例)
　　　<mx:Label text="{gnocchi.alDente()}"/>

　2)静的メソッド
　　(設定例)
　　　クラス名:Pasta
　　　メソッド名:alDente()
　　(呼び出し例)
　　　<mx:Label text="{Pasta.alDente()}">


■■　12章カスタムイベントを使用したコンポーネント間でのデータ交換　■■

■バインディングを使用する際の問題点
　・コンポーネントの詳細なオブジェクト情報を知る必要があるため、
　　コンポーネント間の結合が密になり、再利用や管理が困難となる
　　　　　　　　　　↓
　　疎結合なコンポーネント間のデータ交換が必要となる
　　具体的方法としては、発生したイベントを表示側コンポーネントに通知すると同時にデータを送信し、
　　オブジェクトを直で参照する必要をなくした

■カスタムイベントを用いたデータの交換
　・イベントの宣言はMetadataタグを利用する
　・イベントはflash.events.Eventsクラスのインスタンスをサブクラス化し、
　　(必要に応じて)カスタムプロパティを追加する。
　・イベントサブクラスのコンストラクタではsuper()を呼び出す必要がある
　・イベントサブクラスではクローンをオーバーライドする必要がある
　・dispatchEventを実行することで、イベントを設定している箇所へ通知される


■■　13章 HTTPServiceでのXMLデータ取得　■■

■HTTPService
　・HTTPServiceのsendメソッドを利用してサービスリクエストを行い、
　　応答データはlastResultに格納する
　　※データの内部はxmlの構造に依存する
　　(記述例)
　　　インスタンス生成：<mx:HTTPService id="test"url="http://mydomain.com/XXX.xml">
　　　呼び出し：<mx:Button label="Retrieve Data" click="test.send()"/>
　　　結果取得：<mx:Label text="{test.lastResult()}">
　・lastResultのデータはArrayCollectionオブジェクトに代入してから
　　利用すると利用しやすい
　　(データバインディングの時に配列だと正常に動作しない場合がある)
　・結果処理方法として、リザルトイベントも利用できる
　・イベントでエラーが発生したときは、リザルトイベントハンドラは呼び出されず、
　　(定義していれば)faultで設定したエラーイベントハンドラが呼び出される
　　(記述例)
　 　<mx:HTTPService id="sanData"
　 　 url="assets/sandwichDataFault.xml"
　 　 result="sanDataHandler(event)"
　 　 fault="faultHandler(event)"/>
　・適切なcrossdomain.xmlファイルを使用すると、他のドメインにアクセスできる。
　　ファイルはWEBサーバーのルートに配置する必要がある


■■　14章 Repeaterを使用したデータのループ　■■

　1)Repeaterクラスプロパティ
　　・currentIndex:処理中のdataProviderの要素を示す番号で、
　　　0から付与され、ループが完了した時点で値がundefinedとなる
　　・currentItem:処理中のdataProviderのオブジェクトを参照し、
　　　ループが完了した時点で値がundefinedとなる

　2)getRepeaterItemとcurrentItem
　　・同じデータを参照しているが、用途が異なる
　　　getRepeaterItemはMXMLのデータバインディングだが、
　　　currentItemはループしている間しか有効ではない値なので
　　　ループ処理後に参照してはいけない
　　　(記述例)
　 　　<mx:Repeater id="steakRepeater" dataProvider="{steakData}">
　　　 　 <mx:Button label="Button {steakRepeater.currentIndex}:{steakRepeater.currentItem}"
　　　 　 click="displayData(event.target.getRepeaterItem())"/>
　 　　</mx:Repeater>


■■　15章 DataGridを使用したデータの表示　■■

■DataGrid
　・DataGridColumn(列):列をカスタマイズしたい場合に使用する
　　<mx:DataGridColumn dataField="reviewer" headerText="Reviewer"/>
　　dataField：バインド列
　　headerText:タイトル
　・Gridに格納するデータはArrayCollectionオブジェクトに代入してから
　　利用すると利用しやすい
　・列のデータフォーマットを変更する場合はlabelFunctionプロパティを使用します
　　(記述例)
　　　<mx:DataGridColumn dataField="myDate" headerText="Date"labelFunction="dateFormatFunc" />
　　　※headerText:列名
　　　　labelFunction:フォーマット用定義関数
　・labelFunctionで呼び出すことができる関数の引数はもう決められている
　　private functionmyDateFormat(item:Object,column:DataGridColumn):String
　　{
　 　return "各自定義";
　　}

■アイテムレンダラーとアイテムエディタ
　・DataGridでは各アイテムがテキスト文字列として表示されることが前提となっているが、
　　別のデータを表示する場合はアイテムレンダラーまたはアイテムエディタを使用する必要がある
　・アイテムレンダラーはデータを表示する目的で使用し、アイテムエディタはデータの入力や編集を可能にする
　・(アイテムエディタ記述例)
　　<mx:DataGridColumn dataField="rating"
　　　headerText="Rating"
　　　itemEditor="mx.controls.NumericStepper"
　　　editorDataField="value"/>
　・(アイテムレンダラー記述例)
　　<mx:DataGridColumn dataField="rating"
　　　headerText="Rating Info"
　　　itemRenderer="RatingDetail"/>
　　　※RatingDetail:カスタムコンポーネント名


■■　その他(メモ)　■■

　・コンパイルするとbinのフォルダにswfファイルがコピーされる
　・ValueObject=DTO(データトランスファーオブジェクト)
　・C:ds2jrun4insniffer.exe(パケットモニタ)


■■　不明点　■■

　・リソースを多く消費する操作として、setStyle()やコンテナの多用等が本講座では挙げられていたが、他にもあるのか？
　・MXMLファイル内で定義した変数のスコープは、ファイルスコープなのか？
　　スコープを局所的にしたり、逆に複数コンポーネント間でグローバルにすることは可能か？
　・講義で提供されたプロジェクト(プログラム)を実行する際に、外部(既に作成済み)のswfを参照すると、
　　なぜかエラーになって実行に失敗するが(指定のファイルにアクセスできない旨のメッセージ)、
　　ブラウザを再起動するとエラーが出なくなる。
　　(講師の方ははっきりした理由はわからないが、メモリが少ないと不安定になる事があるとの事でしたが、
　　会社で使用しているマシンでも同様の現象が起こったのでちょっと気になっています)

以上