Apache Flexのコンポーネントの作り方

3315 ワード
AIR ActionScript Flex ActionScript テキストリンク

はじめに

Apache Flexで独自のコンポーネント（カスタムコンポーネント）を作成します。
例として、「Hello XXX」と表示するだけのコンポーネントを作成します。
また、作成したコンポーネントを利用する方法を書きます。

コンポーネントの作成

HelloLabel.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark">
    <fx:Script>
        <![CDATA[
            [Bindable]
            public var yourName:String;
        ]]>
    </fx:Script>
    <s:Label text="Hello {yourName}" />
</s:Group>

「Hello XXX」と表示するためのコンポーネントを作成します。
mxmlのファイル名の「HelloLabel」の部分がコンポーネントの名前になります。
yourNameに指定された値によって、表示が変わるようにしています。

作成したコンポーネントの利用方法

Main.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:c="*"
                       width="400" height="300">

    <fx:Style>
        * { 
            font-family: "Meiryo";
        }
    </fx:Style>

    <!-- 作成したコンポーネント -->
    <c:HelloLabel left="10" top="10" yourName="World"/>

</s:WindowedApplication>

コンポーネントのmxmlファイルが同じフォルダーにある場合、s:WindowedApplicationタグでxmlns:c="*"のように指定します。
（もし、componentsフォルダーを作って、そこにコンポーネントのmxmlファイルを格納した場合は、xmlns:c="components.*"のように指定します）

利用したい箇所で、c:HelloLabelタグを記載することで、作成したコンポーネントを利用できます。

今回、xmlns:cにしていますが、「c」の部分は、任意の文字列を指定できます。