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

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

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

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

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

まずは最低限の機能を持ったコンポーネントを作ります。そこで、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」を 次のように記述します。

<?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 に値が表示されます。