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

• はじめてのFlexコンポーネント
• 光るボタンを作ろう
• ソースコード閲覧用コンポーネント
• SWC形式での配布

前回より、Adobe Flex 2/3でのコンポーネントの作り方を紹介しています。今回は、光るボタンコンポーネントを作ることにより、コンポーネントについて基本的な部分を掘り下げてみたいと思います。

今回作るコンポーネントのあらまし

ここで作るのは、ピカピカ光るボタンコンポーネントです。コンポーネント製作の練習としては、とても良い題材です。

• ここで作るコンポーネントの実行例
• http://aoikujira.com/demo/hakkaku/rc/20080718/DemoFlushBut..
• ソースファイル
• http://aoikujira.com/demo/hakkaku/rc/20080718/FlushButton…

（１）「DemoFlushButton」プロジェクトの作成

ここでは、Flex Builder 3 を使ってコンポーネントを作ることを前提にしていますが、フリーのSDKを使った開発でも、それほど違いはないと思います。

それでは、新規プロジェクトを作りましょう。ここでは、光るボタンということで、FlushButton というコンポーネントを作ろうと思います。そこで、プロジェクト名も、FlushButton としたいところですが、Flex Buider 3では、プロジェクト名と同じコンポーネントは作れないようになっていますので、プロジェクトの名前を「DemoFlushButton」としたいと思います。

メインメニューの[ファイル]から[新規]-[Flexプロジェクト]をクリックします。そして、プロジェクト名を「DemoFlushButton」として、[次へ]をクリックしていきます。

（２）新規 MXML コンポーネント「FlushButton」の作成

プロジェクトの雛形が生成されたところで、コンポーネントのファイルを作成します。メニューの[ファイル]から[新規]-[新規 MXML コンポーネント]をクリックします。

そして、ファイル名に、[FlushButton]と記入し、ベースを[Button]にして、[終了]ボタンをクリックします。

すると、次のような雛形が生成されるはずです。

file:FlashButton.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml">

</mx:Button>

以上で、Button をベースにしたコンポーネントが完成したことになります。これは、Button を継承した FlushButton クラスを作ったのと同じ意味になります。（Flexの仕組みでは、MXML形式のファイルも、最終的には、ActionScriptのクラスファイルに変換されるのです。）

（３）デモ用の画面にボタンを配置する

では、まだ何も手を加えていませんが、FlushButton が表示されるかどうか、デモ用の画面「DemoFlushButton.mxml」に、ボタンを表示させてみます。

まず、ネームスペースを定義します。ファイル「DemoFlushButton.mxml」の冒頭のApplication タグを次のように書き加えます。これで、カレントディレクトリにある、MXMLコンポーネントを my というネームスペースで利用できるようになります。

<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"

	xmlns:my="*">

次に、FlushButton を配置してみます。<Application> タグの内側に、次のタグを追加します。

	<my:FlushButton label="TEST"/>

（４）一度実行してみる

ここまでの結果を確認してみましょう。実行ボタンをクリックすると、次のようにボタンが表示されるはずです。

既存のコンポーネントをベースにすることで、何も手を加えることなく、コンポーネントを作ることができました。では、ここに手を入れていきましょう。

（５）FlushButton の内容を作る

はじめに、FlushButton の定義は、以下のようにしました。コンポーネントの初期化イベント initiaze でタイマー(Timer)オブジェクトを作成し、一定間隔ごとに背景色を設定しています。ここでは、赤と白の色を交互に表示します。

file:FlushButton.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml"
	initialize="init()">
	<mx:Script>
		<![CDATA[
			private var timer:Timer; // タイマーを定義
			private var color_index:int = 0; // タイマーアニメ用インデックス
			private var colors:Array = [0xFFFFFF, 0xFF0000]; // 色の定義
			// 初期化イベント
			private function init():void {
				timer = new Timer(300);
				timer.addEventListener(TimerEvent.TIMER, timerHandler);
				timer.start();
			}
			// タイマーイベント
			private function timerHandler(e:TimerEvent):void {
				var c:int = colors[color_index];
				this.setStyle("fillColors", [c, c]);
				color_index++;
				if (color_index >= colors.length) color_index = 0;
			}
		]]>
	</mx:Script>

</mx:Button>

ルートとなる <mx:Button> タグに initialize イベントハンドラを設定し、Timer オブジェクトを初期化するところが一番のポイントです。その後は、一定の間隔で、タイマーイベントのイベントハンドラ(timerHandler()メソッド)が呼び出され、色を変更する処理を行います。

（４）再度実行してみる

FlushButton ができましたので、実行してみましょう。

ボタンがピカピカ光れば、FlushButton の完成です。

（５）改良してみよう

ここまでで、光るボタンを作ることができました。しかし、常にピカピカ光っているボタンというのは、あまり、使いどころがないのではないでしょうか。ここぞ、という時にだけ光ってもらいたいものです。

そこで、flush プロパティを用意し、ここを true に設定すると光り始め、false にすると止まるようにします。

そのために、次の、flush プロパティの定義を、FlushButton.mxml に追加しましょう。ActionScript の setter/getter 宣言を追加することで　flush プロパティを追加することができます。

file:FlushButton,mxml に追加する内容

    // flush プロパティの定義 (setter/getter)
    private var __flush:Boolean = false;
    public function get flush():Boolean {
            return __flush;
    }
    public function set flush(v:Boolean):void {
            __flush = v;
            callLater(changeFlush);
    }
    private function changeFlush():void {
            if (__flush) {
                    timer.start();
            } else {
                    timer.stop();
                    color_index = 0;
                    timerHandler(null);
            }
    }

そして、DemoFlushButton.mxml の <FlushButton> タグを次のように書き換えます。これで、ボタンをクリックすると、光りだし、もう一度、クリックすると、光りが止まります。

	<my:FlushButton id="f_btn" label="TEST"
		flush="false"
		click="f_btn.flush = !f_btn.flush"/>

作っていて、ちょっとはまってしまったのが、FlushButton.mxml の changeFlush() メソッドの呼び出しタイミングです。一番はじめは、callLater() メソッドを使わず、以下のようにしていました。

    public function set flush(v:Boolean):void {
            __flush = v;
            changeFlush(); // バグあり
            // callLater(changeFlush);
    }

ところが、DemoFlushButton の FlushButton タグのプロパティを設定した場合、initialization イベントよりも先にプロパティが設定されるので、Timer オブジェクトが生成される以前に、Timer オブジェクトを操作することになり、null の変数へのアクセスというエラーが出てしまいました。

そこで、callLater() メソッドを使うことにより、初期化イベントの後(つまり、Timerオブジェクトが生成された後)に、光る・光らないの設定を行うことができるようになります。

このように、コンポーネントを作る場合には、プロパティやイベントの実行順序に気をつける必要があります。

ちなみに、MXMLのコンポーネントを初期化する場合には、preinitialize、initialize や creationComplete のイベントを利用して初期化処理を行います。

（６）さらに改良してみよう

そして、コンポーネントにメタタグを追加することで、Flex Builder での入力を支援することができるようになります。例えば、enabled プロパティを設定しようとすると、true/false の選択肢が表示されます。

これを、先ほどつけた flush プロパティでも出るようにしたいものです。実は、このために、メタタグを記述する必要があります。以下の一行を、flush の setter/getter 定義の直前に記述します。

[Inspectable(category="General", enumeration="true,false", defaultValue="false")]

すると、次のように、Flex Builder 2/3からコード補完が使えるようになりました。

まとめ

以上、今回は、コンポーネント製作の練習として、光るボタンを作ってみました。独自プロパティの追加方法や、イベント発生のタイミングに注意しないといけない点、Flex Builder 2/3 でのコード補完の表示方法も紹介しました。

• ここで作るコンポーネントの実行例
• http://aoikujira.com/demo/hakkaku/rc/20080718/DemoFlushBut..
• ソースファイル
• http://aoikujira.com/demo/hakkaku/rc/20080718/FlushButton…