[Flex3]CodeZine：Flex基礎講座（パート1）をFlex3で書き直してみる
何か参考になるドキュメントに沿って学んだ方がいいと思って、CodeZineのFlexの記事を参考にしようと思います。まずはCodeZine：Flex基礎講座（パート1）:はじめてのFlexアプリケーション開発（Flex, ActionScript, MXML, Macromedia Flex）に沿って学習。ただし、この記事は古いバージョンのFlexの記事なので、Flex3で使えない（と思った）ところこはドキュメントを探って自分で変更してみます。ということで、気になったところだけピックアップ。
ComboBoxコントロールのdataProviderに指定するデータモデルは、mx:Arrayで定義してもいいし、mx:ArrayCollectionで定義してもよさそうです。今回のサンプルではどちらでも動きました。
ComboBoxコントロールのdataProviderに指定するデータモデルの個々のアイテムをmx:Objectで指定していますが、個々のアイテムのlabelやdataはmx:Objectタグの要素で定義してもかまいませんし、CodeZineのサンプルのようにmx:Objectタグの子タグで定義してもかまいません。ただし、子タグで指定する場合はlabelやdataではなく、mx:labelやmx:dataというように、名前空間の名前をしっかりとつけます。
??<mx:ArrayCollection id="coffeeArray">
????<mx:Object label="Rea Sea" data="Smooth and fragrant"/>
????<mx:Object label="Andes" data="Rich and pungent"/>
????<mx:Object>
??????<mx:label>Blue Mountain</mx:label>
??????<mx:data>Delicate and refined</mx:data>
????</mx:Object>
??</mx:ArrayCollection>
Flex3のListコントロールには、addItemというメソッドがないようです。代わりにdataProviderプロパティのaddItemメソッドを使うとListコントロールにアイテムを追加できそうです。このとき、ListコントロールのdataProviderには空のmx:ArrayCollectionのidを関連づけておくのがポイントです。
そして、ListBoxコントロールのdataProviderに指定するデータモデルは、ComboBoxコントロールとは違い、mx:Arrayで定義するのではなく、mx:ArrayCollectionで定義します。ListBoxの親クラスであるListBaseのdataProviderプロパティの説明に、
If you set the dataProvider property to an Array, it will be converted to an ArrayCollection.
とあるので、結果的にmx:ArrayCollectionが入るためです。（XMLオブジェクトを入れた場合は別です。）
??<!-- Data Models -->
??<mx:ArrayCollection id="cartArray">
??</mx:ArrayCollection>
??<!-- Scripts -->
??<mx:Script><![CDATA[
????private function addToCart():void
????{
??????cartArray.addItem(coffeeCombo.selectedItem.label);
????}
??]]></mx:Script>
??<!-- View -->
??<mx:Panel title="list sample">
????<mx:List id="cartList" rowCount="5" dataProvider="{cartArray}"/>
??</mx:Panel>
というわけで、出来上がったのがこちら。
<?xml version="1.0" encoding="utf-8"?>
<!--
??記事:
???? Flex基礎講座（パート1）:はじめてのFlexアプリケーション開発
???? [初級] MXMLを利用した簡易商品カタログ兼ショッピングカートの作成
????
???? Robert Crooks [著], マクロメディア株式会社 [訳]
???? 公開：05/07/28
????
???? http://codezine.jp/a/article/aid/106.aspx
間違っていたり、もっといい方法がある場合はコメントかトラックバックで指摘していただけると助かります。
??元のソースコードの著作権:
????Robert Crooks, マクロメディア株式会社
??元のソースコードの配布元:
????CodeZine
????http://codezine.jp/
–>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
??<!– Data Models –>
??<mx:ArrayCollection id=”coffeeArray”>
????<mx:Object label=”Rea Sea” data=”Smooth and fragrant”/>
????<mx:Object label=”Andes” data=”Rich and pungent”/>
????<mx:Object>
??????<mx:label>Blue Mountain</mx:label>
??????<mx:data>Delicate and refined</mx:data>
????</mx:Object>
??</mx:ArrayCollection>
??<mx:ArrayCollection id=”cartArray”>
??</mx:ArrayCollection>
??<!– Scripts –>
??<mx:Script><![CDATA[
????private function addToCart():void
????{
??????cartArray.addItem(coffeeCombo.selectedItem.label);
????}
??]]></mx:Script>
??<!– View –>
??<mx:Panel title=”CodeZine Flex First Application Sample”>
????<mx:Label text=”Coffee Blends”/>
????<mx:ComboBox id=”coffeeCombo” dataProvider=”{coffeeArray}”/>
????<mx:Text text=”Description: {coffeeCombo.selectedItem.data}”/>
????<mx:Button label=”Add to Cart” click=”addToCart()”/>
????<mx:List id=”cartList” rowCount=”5″ dataProvider=”{cartArray}”/>
??</mx:Panel>
</mx:Application>
参考になりました！
ありがとうございます。