yuiを使ったFlexアプリを作って、
便利さを体感しよう

特集：デザイナとプログラマを“結”ぶオープンソース（後編）

クラスメソッド株式会社
渡邊 佳一
2008/10/30

自動イベントハンドリング機能の利用

　Actionを作成したので処理を追加していきます。このサンプルの機能は画面を操作してデータを編集し、印刷するというものです。そのため、Actionに、初期化時にデータをChartとDataGridに代入するための関数と、Buttonを押された際に印刷処理をするためのイベントハンドラを定義します。

ExampleAction.as

package yui.example.datavisualization.action { import flash.events.MouseEvent; import org.seasar.akabana.yui.framework.event.FrameworkEvent; public class ExampleAction {     public function ExampleAction() { }     public function onAssembleCompleteHandler(         event:FrameworkEvent ):void { }     public function printButtonClickHandler(         event:MouseEvent ):void { } }}

　onAssembleCompleteHandlerと、printButtonClickHandlerを定義しています。この2つの関数は、Auto Event Handlerの命名規則に従って定義しているので、自動的にViewにひも付けられます。

　onAssembleCompleteHandlerで対象となっているAssembleCompleteイベントは、Viewごとにすべての自動イベント登録を完了した際に送出されるイベントです。つまり、イベントハンドラが登録されていることが保証され、確実にイベントハンドラの呼び出しを約束します。onで定義されているので、この関数はViewに対して登録されます。printButtonClickHandlerはViewに定義されたprintButtonというidを持つコンポーネントがClickイベントを送出した際のイベントハンドラとして登録されます。

　次に、このActionに定義されたイベントが正しく呼び出されるか確認してみましょう。

ロギングAPIも使ってみよう

　Actionに定義されたイベントハンドラが正しく定義されているかどうかを確認するにはLogging APIを使用して確認します。以下のように、Actionに記述を追加してください。

ExampleAction.as

package yui.example.datavisualization.action { import flash.events.MouseEvent; import org.seasar.akabana.yui.framework.event.FrameworkEvent; import org.seasar.akabana.yui.logging.Logger; public class ExampleAction {     public function ExampleAction() { }     public var logger:Logger = Logger.getLogger(ExampleAction );     public function onAssembleCompleteHandler(         event:FrameworkEvent ):void {         logger.debug( ">>> call onAssembleCompleteHandler <<<" );     }     public function printButtonClickHandler(         event:MouseEvent ):void {         logger.debug( ">>> call printButtonClickHandler <<<" );     } }}

　Logger変数をフィールドとして定義しました。そして、それぞれの関数内で【Logger.変数】を利用して、コンソールに表示する文字列を渡しています。ここではdebug関数を利用しましたが、Logging APIでは、ログレベルに合わせて出力するかどうかを設定できます。それぞれの関数の使い分けは、以下の表のようになります。

表

ログレベル 用途 debug アプリケーションのデバッグ時に出力するLogメッセージを記録する場合 info アプリケーションの進行状態などのLogメッセージを記録する場合 warm アプリケーション操作に影響のあるLogメッセージを処理する場合 error アプリケーションの動作を実行できる可能性があるエラーなどのLogメッセージを記録する場合 fatal 非常に害があり、最終的にアプリケーション障害を発生させるLogメッセージを記録する場合

■ 必要なクラスしか参照しない

　では、［デバッグ実行］をしてログを確認してみましょう。

図11　アプリケーション実行時のログ

　エラーが発生しました。これは、FlexアプリケーションにExampleActionがクラスとして認識されていないために起こったエラーです。Flexアプリケーション、つまりSWFファイルはファイルサイズを最小限に抑えるため必要なクラスの参照しか持ちません。

　yuiによって関連付けられるActionやHelper、Logicなどのレイヤオブジェクトは実際、アプリケーションの階層の中には含まれず、どこからも参照されないため、このような現象が起きます。

■ CSSファイルにクラスの参照を持たせる

　これを回避するためには、いくつかやり方があるのですが、yuiではCSSファイルにクラスの参照を持たせることで解決する方法を推奨しています。そのやり方を以下に示します。

1. 「src」フォルダ上で右クリックして表示された［メニュー］から［新規］→［CSSファイル］を選択
   
2. ［親フォルダを入力または選択（E）：］と書いてある下のテキストフィールドに「yui-example/src/assets」と、［ファイル名：］と書いてある右のテキストフィールドに「exampleClasses」とそれぞれ入力して［終了］ボタンを押下する
   
   

   図12　新規CSSファイル作成画面

   
   
3. 作成したCSSファイルを以下のように書き換えて、CSSファイルをmain.mxmlに読み込ませる

exampleClasses.css

ExampleView {     action:ClassReference(         "yui.example.datavisualization.action.ExampleAction");     helper:ClassReference(         "yui.example.datavisualization.helper.ExampleHelper");     logic:ClassReference(         "yui.example.datavisualization.logic.ExampleLogic"); }

main.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"   xmlns:akabana="http://akabana.seasar.org/yui/mxml"   xmlns:dv="yui.example.datavisualization.view.*"   layout="vertical">   <mx:Style source="assets/exampleClasses.css" />   <dv:ExampleView />   <akabana:YuiFrameworkMixin >   <akabana:conventions>       yui.example.datavisualization     </akabana:conventions>   </akabana:YuiFrameworkMixin> </mx:Application>

　Flexでは、このようにCSSファイルにクラスを埋め込むことができます。これを利用して、ExampleActionやExampleHelper、ExampleLogicをFlexアプリケーションに認識させることでそれぞれのクラスが使えます。ここでは、スタイルプロパティとしてそれぞれのレイヤの名前が付いています。これは分かりやすさのためであって、対象のクラスがClassReferenceによって参照されていれば、どんなスタイルプロパティ名でも問題はありません。

　では再度、デバッグ実行してみましょう。

図13　アプリケーション実行時のログ

　今度はうまくいきました。「>>> call onAssembleCompleteHandler <<<」の文字列が表示されているのが分かります。実行したFlexアプリケーションの「印刷」というラベルが付いたボタンを押下すると、そのたびに「>>> call printButtonClickHandler <<<」という文字列が出力されるのを確認できると思います。

　これで、Viewからのイベントに対して、Actionの処理を呼ぶことができました。この時点では、まだデータが表示されません。次ページからはLogicを使って、データを取得する処理を追加したいと思います。

1-2-3-4

INDEX
特集：デザイナとプログラマを“結”ぶオープンソース（後編）　 yuiを使ったFlexアプリを作って、便利さを体感しよう
	Page1 yuiの便利さは体感しないと分からない！ yuiを使ってデザイナと協業するための環境作り yuiを利用するまえに
	Page2 まずは、デザイナが画面を作成 命名規則を利用したAction・Helper・Logicの作成
	Page3 自動イベントハンドリング機能の利用 ロギングAPIも使ってみよう
	Page4 ActionクラスからLogicを利用する HelperでUIの更新 人がお互い助け合うように

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）