« Flex2でドラッグ&ドロップ | トップページ | Flex2のカスタムコントロールにイベントを作成する »

2006年8月30日 (水)

Flex2のカスタムコントロールを作る

複数の画面で共通で使うものは部品化しておくと便利です。
今日は、Flex2でこのような部品を作成するサンプルを書いてみたいと思います。
サンプルのMXMLファイル(CustomControl.zip)

カスタムコントロールを作成する際は、Javaのパッケージや.NETの名前空間のように機能などでグループを 作成すると、使用する際にわかりやすくなります。
Flex2は、Javaのようにディレクトリ構成がそのままパッケージとなり、ファイル名がコントロール名となるようです。
今回のサンプルは、C:\Flex2という名前のフォルダに作成するものとして進めたいと思います。

まずC:\Flex2にcontrolsというフォルダを作り、使いまわす部品となるmxmlを以下のように記述し、controlsフォルダにExampleBox.mxmlという名前で保存します。
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox borderStyle="solid" 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    initialize="initBox()"
    width="300" height="300">

    <mx:Script>
    <![CDATA[
    
    private var boxTitle:String = "";
    
    private function initBox() : void
    {
        this.titleLabel.text = this.boxTitle;
    }
    
    public function set title(value:String) : void
    {
        this.boxTitle = value;
        
        if(this.titleLabel != null)
            this.titleLabel.text = value;
    }
    
    public function get title() : String
    {
        return this.boxTitle;
    }
    
    ]]>
    </mx:Script>
    
    <mx:Label id="titleLabel" />
</mx:VBox>
VBoxの中にLabelがあるだけの簡単なものです。
プロパティとして、ラベルに文字を設定する title というプロパティを作成してみました。
ActionScript3はプロパティもサポートしていて、set/getというキーワードを使って上記のようにプロパティを定義します。

このコントロールのプロパティは、標準のコントロールと同様にタグでプロパティを設定できるのですが、設定時には まだコントロールが初期化されていないようで、Labelのインスタンスがまだ生成されていません。
仕方がないので、一旦クラス変数に格納しておいて、initialize イベントでLabelの text プロパティにセットするようにしています。


次に、このコントロールを使用する側のmxmlファイルをC:\Flex2に作成します。
mxmlファイルは以下のように記述します。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:custom="controls.*"
    width="100%" height="100%"
    horizontalAlign="left">
    
    <mx:HBox>
        <custom:ExampleBox title="共通パーツ1" backgroundColor="#5555ff" />
        <custom:ExampleBox title="共通パーツ2" backgroundColor="#ff5555" />
    </mx:HBox>
    
</mx:Application>
先ほど作成したコントロールを使用するために重要なのは、ルートタグ(この例ではmx:Application)に、 xmlns:custom="controls.*"
を記述する点です。
これにより、controlsフォルダ内にあるコントロールを、customという名前空間で修飾したタグで標準のコントロールのように配置できます。
名前空間に指定している custom というのは任意のもので構いません。

あとは、
<custom:ExampleBox title="共通パーツ1" backgroundColor="#5555ff" />
のようにmxmlのファイル名をタグ名として記述して配置します。
コントロールに作成した title というプロパティも、他のプロパティと同様に属性として値を設定できます。

また、上の例ではExampleBoxには作成していないbackgroundColorに値を設定し、実際に背景色が指定の色に塗りつぶされますが、 これは、ExampleBoxのルートタグがVBoxであるため、ExampleBoxはVBoxの派生クラスとなっていて、ExampleBoxはVBoxが持つプロパティや スタイルなどを継承してるためです。
もちろん、ActionScript上でも
var ctrl:ExampleBox = new ExampleBox();
var box:VBox = ctrl;
のように、ExampleBox型のインスタンスをVBox型の変数に格納することが出来ます。

|

« Flex2でドラッグ&ドロップ | トップページ | Flex2のカスタムコントロールにイベントを作成する »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12438/11677521

この記事へのトラックバック一覧です: Flex2のカスタムコントロールを作る:

« Flex2でドラッグ&ドロップ | トップページ | Flex2のカスタムコントロールにイベントを作成する »