MXML を利用したモジュール開発

まずは、MXML を利用したモジュールの開発です。ルートタグに <mx:Module> を指定します。

以下はその一例です。

<?xml version="1.0" encoding="utf-8"?>
<!--MyModuleA.mxml-->
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
    implements="IMyModule" >

    <mx:Script>
        <![CDATA[
            [Bindable]
            public var moduleText:String;
            
            public function setText(text:String):void
            {
                moduleText = text;
            }
        ]]>
    </mx:Script>
    
    <mx:Label text="ModuleA: {moduleText}" color="blue" fontSize="24"/>

</mx:Module>

この MXML では IMyModule を実装しています。IMyModule は、自分で定義した setText メソッドをもつインターフェースです。

// IMyModule.as
package
{
    public interface IMyModule
    {
        function setText(text:String):void;
    }
}

通常の Flex のビルド手順と同じようにして MyModuleA.mxml をビルドすると、MyModuleA.swf が生成されます。この SWF は単独で実行しても何も表示されません。シェルからロードしたときのみ表示されます。

ActionScript を利用したモジュール開発

では、ActionScript でモジュールを作成してみましょう。MXML のときと同様に、Module クラスを継承して実装します。

// MyModuleB.as
package
{
import mx.controls.Label;
import mx.core.Application;
import mx.modules.Module;

public class MyModuleB extends Module implements IMyModule
{
    private var _label:Label;
    
    public function MyModuleB()
    {
        _label = new Label();
        _label.setStyle("color", "#ff0000");
        _label.setStyle("fontSize", 24);
        addChild(_label);
        setText("");
    }

    public function setText(text:String):void
    {
        _label.text = "ModuleB: " + text;
    }
}
}

コンパイルすると MyModuleB.swf が生成されます。こちらのソースコードでも IMyModule インターフェースを実装しています。

次回予告

２通りの方法でモジュールを作成するところまで見てきました。

次回はモジュールをロードする「シェル」のソースコードを作成していきます。