ゼロからはじめるFlex 2 - Flex 2で作る簡単なWebカタログと商品注文フォーム

商品の一覧には、TileListコンポーネントを利用することで、手軽に画像付きのデザイン性の良いものを作成できます。リストやコンボ、グリッドなど、データを表示するコンポーネントでは、「データプロバイダー」という、コントロールとデータを切り離して記述できる仕組みが用意されています。

例えば、今回サンプル商品として以下のデータを利用しますが、XMLとしてデータを記述して、idに「goods_data」という名前を付けておきます。

<mx:ArrayCollection id="goods_data">
    <mx:Object icon="@Embed(source='sample.jpg')"
               label="ズワイカニ"
               price="4000" />
    <mx:Object icon="@Embed(source='sample.jpg')"
               label="タラバカニ"
               price="5000" />
   <mx:Object icon="@Embed(source='sample.jpg')"
               label="サワガニ"
               price="500" />
</mx:ArrayCollection>

そして、これを、TileListコントロールに表示するには、次のようなタグを記述するだけです。dataProvider属性に表示するデータのidを記述します。

<mx:TileList dataProvider="{goods_data}"/>

TileListのアイテム表示方法のカスタマイズ

ところで、TileListは、標準の状態では、アイコン画像とラベルを表示することしかできません。通販ページでは、値段や注文数を表示するようなリストが必要です。そんな場合に用意されているのが、「アイテムレンダラー」という仕組みです。

これは、リストの各アイテムをどのように表示させるのかを、カスタマイズする仕組みです。以下のようなMXMLタグでアイテムの中に何を表示するのか配置方法を記述します。

もし、WindowsのGUIプログラミングで、これと似たようなことを実現しようと思ったら、細かい座標計算などの煩雑なプログラムを記述する必要があります。それと比べると驚くほど簡単にできてしまうことが分かると思います。

<!-- 個々のアイテムの描画方法を指定するアイテムレンダラーの定義 -->
<mx:Component id="item_renderer">
    <mx:VBox width="150" height="150" horizontalAlign="center">
        <mx:Label text="{data.label}" height="16"/>
        <mx:Image source="{data.icon}" width="100" height="75"/>
        <mx:Label text="{'価格 ' + outerDocument.YenFormat(data.price)}" height="16"/>
        <mx:HBox>
            <mx:Label text="購入数"/>
            <mx:NumericStepper id="ns" change="{data.count = ns.value;}"/>
        </mx:HBox>
    </mx:VBox>
</mx:Component>

<!-- 商品表示用のリスト -->
<mx:TileList id="goods_list" width="100%" height="100%"
    dataProvider="{goods_data}"
    itemRenderer="{item_renderer}"/>

ユーザー情報入力フォームを作る

次に、ユーザー情報の入力フォームを作ってみようと思います。ユーザー情報の入力などのフォームを作るのに使えるのは、Formコンポーネントです。そして、入力項目の数だけ、FormItemタグを記述することで、各入力項目をきれいに配置できます。

<!-- 入力フォーム -->
<mx:Form width="100%">
    <mx:FormItem label="お名前" width="100%">
        <mx:TextInput id="name_txt" width="100%" imeMode="JAPANESE_HIRAGANA"/>
    </mx:FormItem>
    <mx:FormItem label="郵便番号">
        <mx:TextInput id="zip_txt" />
    </mx:FormItem>
    <mx:FormItem label="住所" width="100%">
        <mx:TextInput id="addr_txt" width="100%" imeMode="JAPANESE_HIRAGANA"/>
    </mx:FormItem>
    <mx:FormItem label="備考" width="100%">
        <mx:TextInput id="memo_txt" width="100%" imeMode="JAPANESE_HIRAGANA"/>
    </mx:FormItem>
</mx:Form>