自作コンポーネントを作る

最後に自作コンポーネントを作る方法を簡単にご紹介しましょう。前回作った「ロゴジェネレータ」をFlexのコンポーネントにしてみましょう。

まずは完成形のFlashをご覧ください。次のようになります。

フォントサイズを動的に変えられるようになりました。前回よりもアプリケーションっぽくなりましたね。

ソースコードは次の3つのファイルから成り立っています。

• ComponentTest.mxml
• LogoGenerator.as
• Web2Badge.as

ビルドするには，3つのファイルを同じフォルダにダウンロードして，ComponentTest.mxmlをコンパイルしてください。

mxmlc ComponentTest.mxml

LogoGeneratorコンポーネントの埋め込み

それでは，MXMLから見ていきましょう。今までのものより複雑になっているので，LogoGeneratorコンポーネントを利用しているところに注目します。

<?xml version="1.0" encoding="UTF-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:comp="*">                         <!-- (1) -->
    <mx:Panel width="100%" height="100%"
        title="Logo Generator (Flex version)"
             :
             :
        <mx:Canvas width="100%" height="100%"
            borderColor="0xcccccc" borderStyle="solid">
            <comp:LogoGenerator id="logo"/> <!-- (2) -->
        </mx:Canvas>
    </mx:Panel>
</mx:Application>

<mx:Application>タグに「xmlns:comp="*"」という属性が追加されています（1⁠）⁠。これは，トップレベルのパッケージ空間のコンポーネントをcompという名前空間で利用することを意味します。

（2）では先ほど定義したcomp名前空間を利用して，LogoGeneratorコンポーネントを埋め込んでいます。

TextInputコンポーネントとHSliderコンポーネントでは，値が変更された際に，LogoGeneratorコンポーネントのプロパティを更新しています。

    <mx:TextInput id="input1" text="Logo Generator"
             :
        change="logo.text = input1.text"/>

    <mx:HSlider id="slider"
             :
        change="logo.fontSize = slider.value"/>

全てのコンポーネントはUIComponentクラスを継承する

次に，LogoGeneratorクラスをFlexのコンポーネントにしていきます。

前回作成したLogoGeneratorクラスはSpriteを継承していましたが，このままではエラーになってしまいます。Flexのコンポーネントは，全てUIComponentクラスを継承する必要があります。LogoGeneratorクラスの宣言を次のように書き換えます。

    import mx.core.UIComponent;

    // LogoGenerator クラス
    public class LogoGenerator extends UIComponent {

プロパティの定義

コンポーネントらしくするために，表示する文字列を表すtextプロパティと，フォントサイズを表すfontSizeプロパティを実装します。

textプロパティは次のように定義しています。

    // text プロパティの実体
    private var _text:String;                     // (1)

    // text プロパティの getter
    public function get text():String {           // (2)
        return _text;
    }

    // text プロパティの setter
    public function set text(value:String):void { // (3)
        _text = value;
        update();
    }

プロパティは，実体を表すインスタンス変数（1）とgetter（2⁠）⁠，setter（3）から成り立っています。

getterはtextプロパティを取得するときに呼ばれるメソッドです。functionのあとに，「⁠get」というキーワードをつけて宣言します。ここではgetterは_textの値をそのまま返すように定義しています。

setterはtextプロパティの値に代入されるときに呼ばれるメソッドです。functionのあとに「set」をつけて宣言します。ここでは，代入された値を_textに上書きしたあと，update()メソッドを呼び出して表示を更新しています。

update()メソッドの修正

update()メソッドはtextプロパティの値を表示するように，fontSizeプロパティの値に応じて文字の大きさを変えるように修正しています。

また，update()メソッドの最後でinvalidateSize()メソッドを呼び出しているところに注目です。invalidateSize()は，コンポーネントのサイズが変わったことをFlexフレームワークに通知するためのメソッドです。

Flexフレームワークはサイズが変わったという通知を受けると，コンポーネントのmeasure()メソッドを呼び出します。measure()はUIComponentから継承するメソッドです。デフォルトでは何もしないメソッドなので，コンポーネントのサイズを適切に設定できるようoverrideキーワードをつけて再定義します。

    protected override function measure():void {
        measuredWidth = badge.x + badge.width;
        measuredHeight = reflection.y + reflection.height;
    }

measuredWidthおよびmeasuredHeightプロパティにサイズを設定することで，正しくコンポーネントのサイズがフレームワークに通知されます。その結果として，フォントサイズを変更すると，適切にスクロールバーが表示されるようになります。

まとめ

だいぶ駆け足でしたが，Flex 3フレームワークの特徴的な機能を紹介しました。

Flexはコンポーネントも豊富で奥も深いので，詳しく学習されたい方は，Adobe-Flex：Flexドキュメンテーションの「Flex 3開発ガイド」や「Adobe Flex 3コンポーネントの作成と拡張」などを参考にしてみるとよいでしょう。

次回は最終回です。今，注目のAIRをご紹介します。