はじめてのFlex その7

今回はYUI Frameworkを導入してみます。
YUIは「ゆい」と読みますす。

まずは以下のURLからakabana.yui-frameworksをダウンロードします。
http://akabana.sandbox.seasar.org/ja/downloads.html

Flex Builder 3を起動し、ファイル→新規→Flexプロジェクトを選び、

• プロジェクト名：HelloYuiWorld
• アプリケーションの種類：Webアプリケーション

を指定して「終了」ボタンでプロジェクトを作成します。

ファイル→インポート→Flexプロジェクトを選び、

• アーカイブファイル：今ダウンロードしたファイル

を指定して「終了」ボタンでyui-frameworksプロジェクトをインポートします。

※問題ビューに「不明な Flex SDK : "Flex Moxie M2"」と表示されている場合、プロジェクトyui-frameworksを右クリックしてプロパティを開き、Flex ライブラリコンパイラの「Flex SDKのバージョン」を「デフォルトのSDKを使用する」に変更しておきます。
（1.0.0-alpha7で発生）

プロジェクトyui-frameworksの中から以下のファイルをプロジェクトHelloYuiWorldの下にコピーします。

• yui-frameworks/target/swc/yui-frameworks.swc → HelloYuiWorld/libs/yui-frameworks.swc
• yui-frameworks/src/main/resources/yui-metadata-config.xml → HelloYuiWorld/libs/yui-metadata-config.xml

プロジェクトHelloYuiWorldを右クリックしてプロパティを開き、
「Flexコンパイラ」の「追加コンパイラ引数」を
「-locale ja_JP -load-config+=../libs/yui-metadata-config.xml」
に変更します。

これで環境が整いました。
試しに前回までのプログラムをYUIに移植してみます。

HelloYuiWorld.mxml

<?xml version="1.0" encoding="utf-8"?>
<yui:YuiApplication
	xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:yui="http://akabana.seasar.org/yui/mxml"
	xmlns:view="view.*"
	xmlns:logic="logic.*"
	layout="absolute">
	
    <view:HelloView id="helloView"/>
    <logic:HelloViewLogic id="helloViewLogic"/>

</yui:YuiApplication>

view/HelloView.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
	<mx:VBox>
		<mx:FormItem label="メッセージ" required="true">
			<mx:TextInput id="message"/>
		</mx:FormItem>
		<mx:Button label="click me!" id="clickMe"/>
	</mx:VBox>

	<mx:StringValidator id="messageValidator" required="true" source="{message}" property="text" requiredFieldError="メッセージを入れてください。"/>
</mx:Canvas>

logic/HelloViewLogic.as

package logic {
	
	import flash.events.*;
	import mx.controls.*;
	
	import view.*;
	import dto.*;
	
	public class HelloViewLogic {
		
		[View]
		public var helloView:HelloView;
		
		[Model(bindView="helloView")]
		public var helloViewDto:HelloViewDto; 
		
		public function clickMeClickHandler(event:MouseEvent):void {
			if (helloViewDto.message == "") {
				return;
			}
			Alert.show(helloViewDto.message);
		}
	}
}

dto/HelloViewDto.as

package dto {
	
	[Bindable]
	public class HelloViewDto {
        public var message:String = "Hello World!";
    }
}

これを実行すると前回までと同様の結果が表示されます。