hirossy javaとFlex2と。 このページをアンテナに追加 RSSフィード

2007-07-13 YUIのつづき

[][](3)YUIの使い方 その2


今回は、同梱のデモを使わず、一から作成してみます。

題材は、サーバー通信を行わない足し算アプリです。

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




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.xmlYUIに同梱してます)をlib/に配置し、

追加コンパイラ引数

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

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

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

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

追記:FlexBuilder3でも必要です。

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


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

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



ではenjoy 週末!