(3)YUIの使い方 その２

AKABANA YUI


今回は、同梱のデモを使わず、一から作成してみます。
題材は、サーバー通信を行わない足し算アプリです。

前提条件として、「(2)YUIの使い方 その１」はクリアしたものとします。




1.ApplicationタグをYuiApplicationに変更する

ルートとなるmxmlのルートタグmx:Applicationをyui:YuiApplicationに変更します。
また、xmlns:yuiを指定します。

■Main.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"
    layout="absolute">
</yui:YuiApplication>

この時点でコンパイルエラーが出る場合は、swcファイルの作成時に、名前空間を指定していない可能性があります。
前回の記事を見ながら、再度swcを作成してみて下さい。


2.AddView.mxmlを作成する

足し算を行う画面を作成します。ここでは簡略化のため、デザイン的要素は排除しています。
バインディングしたい部分にはidを付与します。

■view/AddView.mxml(2007/8/13 修正)

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
    <mx:TextInput x="41" y="65" id="arg1"/>
    <mx:TextInput x="236" y="65" id="arg2"/>
    <mx:Button x="404" y="65" label="=" id="add"/>
    <mx:Label x="209" y="67" text="+"/>
    <mx:TextInput x="452" y="65" id="sum"/>
</mx:Canvas>


3.AddDto.asを作成する

dtoクラスを以下のように作成します。
各プロパティ(クラス変数)はpublicとし、setter,getterを使用しません。
変数名は、先ほど作成した画面のidと同一にします。

■dto/AddDto.as

package dto{
    import view.AddView;
    [Bindable]
    public class AddDto {
        public var arg1:String;
        public var arg2:String;
        public var sum:String;
        
        public function AddDto(){
            arg1 = "10";
            arg2 = "110";
            sum = "1110";
        }
    }
}


4.AddViewLogic.asを作成する

コアとなるクラスを作成します。
このクラスでLogicを記述します。

■logic/AddLogic.as

package logic{
    import dto.AddDto;
    import view.AddView;
    import flash.events.MouseEvent;
    public class AddViewLogic {
        [View]
        public var addView:AddView;
        [Model(bindView="addView")]
        public var addViewDto:AddDto;
        
        public function addClickHandler( event:MouseEvent ):void{
            var sum:Number = Number(addViewDto.arg1) + Number(addViewDto.arg2);
            addViewDto.sum = String(sum);
        }
    }
}


5.mxmlにAddView,AddViewLogicタグを記述する

■view/YuiSample.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
    xmlns:view="view.*"
    xmlns:logic="logic.*">
    <!-- ビュー -->
    <view:AddView id="addView"/>
    <!-- ビューロジック -->
    <logic:AddViewLogic id="addViewLogic"/>
</mx:Canvas>

現在、Viewの中にコンテナ系は使えません（VBOXやHBOXなど）。
→開発中のyuiでは、コンテナにも対応しています。


6.ルートとなるmxmlに先ほど作成したmxmlタグを記述する

■Main.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" layout="absolute"
    xmlns:view="view.*" xmlns:logic="logic.*">
    
    <view:YuiSample />

</yui:YuiApplication>


7.AddViewLogicクラスに具体的なロジックを記述する

ここでは4.で作成したaddClickHandlerメソッドの中身を指します。


8.実行する

FlexBuilder2系の場合は、残念ながらDebugモードでしか動きません。
さらに、2系の場合は、yui-metadata-config.xml（YUIに同梱してます）をlib/に配置し、
追加コンパイラ引数に

  • load-config+=lib/yui-metadata-config.xml

と追記する必要があります。

でないと、メタ情報が保持されません。

FlexBuilder3の場合は、特に問題ありません。

追記：FlexBuilder3でも必要です。

というわけで、次回の記事を書くまでにFlexBuilder3を急遽インストールしてみます。


次回は(4)YUIの使い方 その３ということで、

Serviceを使ってサーバーサイドとの連携についてやってみたいと思います。



ではenjoy 週末！