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

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

本連載では、Adobe Flex 2/3 に対応したコンポーネントの作り方を紹介します。Flex を使えば、Web ブラウザ上に複雑なインターフェースを持つアプリケーションを作ることができます。しかも、自分で標準のコントロールを拡張してコンポーネントを作るのも簡単です。本稿ではどんな手順でコンポーネントを作っていくのかを紹介します。

第一回目の今回は、チェックボックスのついたリストコンポーネントを作ってみます。

Adobe Flex とは？

Flex は、一言で言うと、プログラマー向きの Flash 制作ツールです。MXMLと呼ばれる、簡単なXMLタグとActionScript3.0を組み合わせて、UIの高度なアプリケーションを手軽に作ることができます。

MXMLとActionScript3.0の関係は、HTMLとJavaScriptの関係と似ており、MXMLで画面レイアウトをデザインし、ActionScript3.0でそこに動的な要素を加えていくというスタイルで開発を行っていきます。

Flexでは豊富なコンポーネントが、その魅力の１つで、ボタン、リストなどは当然のこと、ツリーやグリッドなど高度なコンポーネントが豊富に用意されています。どんなコンポーネントが用意されているのかを見る方法があります。

豊富なコンポーネントがあるのに自作する必要があるの？

さて、本稿では、Flexのコンポーネント制作方法について紹介します。すでに、Flexでは多くのコンポーネントが用意されているので、自作する必要はないのでは？と思います。

しかし、実際に開発を行ってみると、「このコンポーネントに、ｘｘの機能があったらいいのに・・・」ということが多くあります。「豊富なコンポーネント」という謳い文句に、はじめからの期待が大きすぎるのかもしれませんが、何か、痒い所に手が届かない感じがすることがあります。

そこで、コンポーネントの自作を行うことになるのですが、Flexでは、拍子ぬけするほど、簡単に自作コンポーネントを作ることができるので、あの機能が用意されていないのは、自分でコンポーネントを作る練習をさせるためなのでは？！と感じることもしばしばです。とにかく、手軽に自作コンポーネントが作成できるので、ぜひ、本稿をきっかけにコンポーネント開発に手を出してみてください。

カスタムコンポーネントの一覧サイトの紹介

Flex のカスタムコンポーネントは、さまざまな、開発者のブログなどで多く公開されています。これを集めたのが、次のサイトです。

Flex-Component.org

いろいろなFlexコンポーネントを紹介しているページです。実は、筆者の管理するサイトです。便利なコンポーネントを作ったり、見つけたりした時に、このサイト上で紹介していくつもりです。

FlexBox (英語)

140以上のコンポーネントが登録されています。UIもFlexで作られていてクールです。ただ、登録数が多いのに分類化されていないので、ちょっと探しづらい気がします。将来的に改善されそうですが。

カスタムコンポーネントの使い方

多くのコンポーネントは、ソースファイルそのまま、あるいは、".swc"の形式のものです。

ソースファイルそのままのもの

たとえば、Test.mxml というソースファイルで提供されているコンポーネントを利用する場合には、MXMLアプリケーションと同じフォルダに Test.mxml をコピーします。そして、以下のように、ネームスペース「xmlns:myCompo="*"」を宣言します。

<mx:WindowedApplication
  xmlns:mx="http://www.adobe.com/2006/mxml"
  xmlns:myCompo="*"
  >

すると、ネームスペース＋コンポーネント名のタグを利用することができます。

  <myCompo:Test />

SWC形式のコンポーネント

SWC形式は、ソースファイルを、Flashバイナリにコンパイルされたものです。これを使うには、Flex Builder のメインメニューから[プロジェクト - プロパティ]をクリックして、画面左のリストから[Flexビルドパス]を選択し、ライブラリパスのタブをクリックします。そして、[SWC]の追加をクリックして、SWCファイルをプロジェクトに追加します。

そして、デザインタブに切り替え、コンポーネントパネルの「カスタム」に入っているコンポーネントをステージに配置します。

そして、ソースビューに切り替えてみると、自動的に、ns1 などのネームスペースが宣言されていることが分かります。

<mx:WindowedApplication
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:ns1="com.xxx.xxx.*">
    <ns1:Test x="10" y="10" />

はじめての自作コンポーネント～CheckList の制作

それでは、ここまでで、コンポーネントについての最低限の知識が揃いましたので、今回サンプルとして作る CheckList コンポーネントについて確認してみましょう。

このコンポーネントは、リストボックスの各アイテムに、チェックボックスがあるというもので、複数の値の中から任意のものをユーザーに選択してもらう場合などに利用してもらうことができるでしょう。

以下のFlashがそのサンプルです。クリックするとブラウザで実行します。(Flash Player 9以降が必要です)

CheckListコンポーネントのサンプル

正式版は、以下より入手できます:
http://www.libspark.org/browser/as3/KujiraFlexCompo/CheckL..

手順(1) プロジェクトを作成する

Flex Builder を利用している場合は、新規Flexプロジェクトを作成します。コンポーネントをテストするために、「TestCheckList」という名前でプロジェクトを作成します。

手順(2) 新規 MXML ファイルを作成する

ファイルメニューから[新規 - MXMLコンポーネント]を作成します。ファイル名を、CheckList.mxml とし、ベースを List にして、[終了] ボタンをクリックします。

手順(3) コンポーネントを記述する

まずは最低限の機能を持ったコンポーネントを作ります。そこで、CheckList.mxml のコンポーネントを次のように記述します。

file:CheckList.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:List xmlns:mx="http://www.adobe.com/2006/mxml">

  <mx:itemRenderer>
    <mx:Component>
      <mx:HBox>
        <mx:CheckBox id="a_chk"
          label="{data.label}"
          selected="{data.selected}"
          change="data.selected = a_chk.selected"/>
      </mx:HBox>
    </mx:Component>
  </mx:itemRenderer>

</mx:List>

これは、List コンポーネントの itemRenderer を使って、リストボックスの中に、CheckBox コンポーネントを表示しているものです。このように、Flex では、既存のコンポーネントにコンポーネント拡張のための仕組みが備わっているのです。

※ itemRenderer についは、Flexのマニュアルの「アイテムレンダラーとアイテムエディタの使用」の項目を読んでみると良いでしょう。

手順(4) コンポーネントを利用するテストアプリの作成

この CheckList コンポーネントをテストするために、「TestCheckList.mxml」を次のように記述します。（ただし、一部問題があります。）

file:TestCheckList.mxml

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

<mx:WindowedApplication
	xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	xmlns:myCompo="*"
	backgroundColor="#ffffff">
	<mx:Label text="必要な材料を選んでください。" x="10" y="10"/>

	<myCompo:CheckList id="check_list"
		change="info_txt.text = check_list.selectedItem.selected"
		dataProvider="{a_dp}" width="224" x="10" y="36" height="138"/>

	<mx:ArrayCollection id="a_dp">
		<mx:Object label="ニンジン" selected="true"/>
		<mx:Object label="ピーマン" selected="true"/>
		<mx:Object label="ニンニク" selected="true"/>
		<mx:Object label="トマト" selected="true"/>
	</mx:ArrayCollection>

	<mx:TextInput id="info_txt"
		x="10" y="182" width="224"/>
</mx:WindowedApplication>

CheckList にアイテムを表示するために、dataProvider に Object の一覧を設定します。このとき、label と selected の値を設定しておくと、それが、CheckList に反映されます。

手順(5) 実行してみる

実行してみると、以下のように、CheckList に値が表示されます。

CheckListコンポーネントのサンプル

どうでしょうか。List の itemRenderer を使うテクニックは、Flex を使う上で覚えておいて損のないテクニックですが、これを別のファイルにまとめることにより、コンポーネントとして、簡単に再利用することができるようになっているのです。

CheckList の改良

さて、上の手順で、CheckList が完全でないことを示しましたが、何が問題なのでしょうか。まず、デバッグモードで、TestCheckList アプリケーションを実行してみると、いくつかの警告が表示されると思います。

それは、以下のようなものです。itemRenderer でデータバインディングの仕組みを使っているのですが、変数の型が合わないので警告が表示されてしまうのです。この警告はそれほど実害はないものの、警告が出ているのは気持の悪いものです。

warning: unable to bind to property 'selected' on class 'Object' (class is not an IEventDispatcher)

そこで、CheckList.mxml の <mx:itemRenderer>タグを次のように書き換えます。これで、データバインディングの際に明確な型を与えることができるので、警告を抑えることができます。

<mx:itemRenderer>
  <mx:Component>
    <mx:HBox>
      <mx:Script>
        <![CDATA[
          private function getLabel():String {
            return String(data.label);
          }
          private function getSelected():Boolean {
            return Boolean(data.selected);
          }
        ]]>
      </mx:Script>
      <mx:CheckBox id="a_chk"
        label="{getLabel()}"
        selected="{getSelected()}"
        change="data.selected = a_chk.selected"/>
    </mx:HBox>
  </mx:Component>
</mx:itemRenderer>

あるいは、データバインディングの data に明確な型を与えるために次のようなクラスを定義する方法もあります。明確な型を与えるために、label や selected をクラスのプロパティとして定義し、メタタグの[Bindable]でデータバインディングが行われることを明示するのです。

package
{
	public class CheckListItem
	{
		[Bindable]
		public var label:String = "";
		[Bindable]
		public var selected:Boolean = false;

		public function CheckListItem()
		{
		}

	}
}

また、チェックボックスがチェックされた時にも、イベントが実行されるように工夫してみましょう。何かしらの独自イベントを発生させるときには、次のように、<mx:Metadata>タグを定義します。以下は、例として、select イベントが利用できるようにしています。以下のタグを定義すると、select というイベントが使えるようになります。

<mx:Metadata>
  [Event(name="select", type="flash.events.Event")]
</mx:Metadata>

しかし、List では、すでに ListEvent.CHANGE のイベントが定義されていますので、これを利用して、チェックボックスの値が変化したときにも、List のイベント CHANGE が発生するようにしてみます。

<mx:Script><![CDATA[
	// チェックボックスがチェックされた時に実行されるイベントハンドラ
	public function changeHandler(data:Object, v:Boolean):void {
		data.selected = v;
		dispatchEvent(new ListEvent(ListEvent.CHANGE));
	}
～省略～
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:CheckBox id="a_chk"
	label="{getLabel(data)}"
	selected="{getSelected(data)}"
	change="outerDocument.changeHandler(data, a_chk.selected)"/>

ポイントとなるのは、２点です。まず、CheckBox の値が変化したとき、change イベントが発生したときに、itemRendererの外側にあるメソッド changeHandler() を実行している点、そして、changeHandler() メソッドの中で、dispatchEvent を使って、自分でイベントを発生させているという点です。

まとめ

以上、Flexのコンポーネントについてのあらましと、簡単なチェックボックスを持つリストを作ってみました。コンポーネントの制作の基礎知識と、どのようにしてコンポーネントを作ることができるのかを紹介しました。

今回見たように、コンポーネントを作るのは、それほど大変なことではないので、ぜひ挑戦してみてください。汎用的に使えば、コンポーネントの再利用が大いに促進されるでしょう。

また、今回作った CheckList に関しては、以下のURLでメンテナンスしていくつもりですので、実践？で使ってみたいときは、ぜひ使ってみてください。

http://www.libspark.org/browser/as3/KujiraFlexCompo/CheckL..