Flex/配列を使う

FlexではActionScript?の記述による配列の定義や、Arrayタグを用いた配列の定義を行うことができます。定義した配列は、プルダウンやデータグリッドにバインドすることができます。非常に強力です。

ActionScript?で定義する、Arrayタグで定義する。 †

<?xml version="1.0" encoding="utf-8"?>
 <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">

   <!-- Primitive型の配列の定義 -->
   <mx:Script>
   <![CDATA[
	 var myArray = [1,2,3,4,5,6,7,8,9];
	]]>
	</mx:Script>
   <!-- Primitive型の配列の定義 以上 -->

   <!-- Objectの配列の定義 -->
   <mx:Array id="myArrayOfObjects"><!-- 変数名をmyArrayOfObjectsとしたのと同義 -->
     <mx:Object label="Q1" volume="1600" revenue="10000"/>
     <mx:Object label="Q2" volume="1500" revenue="9000"/>
     <mx:Object label="Q3" volume="1900" revenue="12000"/>
     <mx:Object label="Q4" volume="2300" revenue="14000"/>
   </mx:Array>
   <!-- Objectの配列の定義 以上 -->

   <mx:HBox>
     <mx:Panel label="Array Samples" title="sample">
       <mx:Form>
         <mx:FormHeading label="My Form"></mx:FormHeading>
         <mx:FormItem label="Pick a Number">
           <mx:ComboBox id="myCombo" dataProvider="{myArray}"/>
           <!-- さっきの配列をBind -->
         </mx:FormItem>
       </mx:Form>
       <mx:ControlBar>
         <mx:Label text="You chose:{myCombo.selectedItem}"/>
       </mx:ControlBar>
     </mx:Panel>
     <mx:Panel title="DataGrid">
       <mx:DataGrid id="datagrid" dataProvider="{myArrayOfObjects}">
         <!-- さっきの配列をBind -->
         <mx:columns>
           <mx:Array>
             <mx:DataGridColumn headerText="Label" columnName="label" />
             <mx:DataGridColumn headerText="Volume" columnName="volume" />
             <mx:DataGridColumn headerText="Revenue" columnName="revenue" />
           </mx:Array>
         </mx:columns>
       </mx:DataGrid>
       <mx:ControlBar>
         <mx:Label text="You chose:{datagrid.selectedItem.label}"/>
       </mx:ControlBar>
     </mx:Panel>
   </mx:HBox>
 </mx:Application>

ファイルからデータを読み込んで定義する。 †

先ほどは配列をソースコード上で定義していましたが、次は配列をXMLを読み込んで作成してみます。同じディレクトリに、hogeData.xmlという配列の元データを配置しました。hogeData.xmlの内容は以下の通り:

<data>
   <hogeModel>
     <label>Q1</label>
     <volume>1600</volume>
     <revenue>10000</revenue>
   </hogeModel>
   <hogeModel>
     <label>Q2</label>
     <volume>1500</volume>
     <revenue>9000</revenue>
   </hogeModel>
   <hogeModel>
     <label>Q3</label>
     <volume>1900</volume>
     <revenue>12000</revenue>
   </hogeModel>
   <hogeModel>
     <label>Q4</label>
     <volume>2300</volume>
     <revenue>14000</revenue>
   </hogeModel>
 </data>

このファイルは、

• hogeModelタグが、子要素(label,volume,revenue)をフィールドに持つデータモデル
• そのモデルの配列(要素数は４個)

である、ととらえることができそうです。

さてそのデータファイルから、配列(というかデータモデル)を生成するには、以下のModelタグを使用します。

<mx:Model id="myArrayOfObjects" source="hogeData.xml"/>

で、hogeData.xmlからmyArrayOfObjects?というモデルを定義するよ、という意味になります。DataGrid?での dataProvider の定義は myArrayOfObjects?.hogeModel とすれば良いみたいです。ちなみに myArrayOfObjects?.hogeModelの「hogeModel」はXMLファイルの要素名に該当します。

結局サンプルは以下の通り:

<?xml version="1.0" encoding="utf-8"?>
 <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
   <!-- Objectの配列の定義 -->
   <mx:Model id="myArrayOfObjects" source="hogeData.xml"/>
   <!-- Objectの配列の定義 以上 -->
   <mx:HBox>
     <mx:Panel title="DataGrid">
       <mx:DataGrid id="datagrid" dataProvider="{myArrayOfObjects.hogeModel}">
         <!-- さっきの配列をBind -->
         <mx:columns>
           <mx:Array>
             <mx:DataGridColumn headerText="Label" columnName="label" />
             <mx:DataGridColumn headerText="Volume" columnName="volume" />
             <mx:DataGridColumn headerText="Revenue" columnName="revenue" />
           </mx:Array>
         </mx:columns>
       </mx:DataGrid>
       <mx:ControlBar>
         <mx:Label text="You chose:{datagrid.selectedItem.label}"/>
       </mx:ControlBar>
     </mx:Panel>
   </mx:HBox>
 </mx:Application>

xmlのスキーマ定義はなくてもいいの？？そのスキーマとオブジェクトとのマッピングは？？とかいろいろ気になるところはありますが、なんだか軽いタッチで非常にわかりやすいですね。でもxmlファイルはmxmlファイルの場所に置いておくと、アクセスされてダウンロードできちゃうよなぁ。

配列からモデルを定義して、DataGrid?に渡す。 †

ひがやすをさんの、Flexでさわっておぼえるリッチクライアントに書いてあるのですが、配列をModelにラップしてそのモデルをDataGrid?に渡すことができます。つまり

<mx:Model id="modelOfArray">
 {myArrayOfObjects}
</mx:Model>

として、

<mx:DataGrid id="datagrid" dataProvider="{myArrayOfObjects}">

を

<mx:DataGrid id="datagrid" dataProvider="{modelOfArray}">

とするのもありみたいです。これをやる意味は、先の本のチュートリアルでは後に、データを外部から取得する形式に変更するから、その切替を簡単にするため、データを一端データモデルに格納するとあります。とりあえずまだ読み進めないとわかんないなあ。

この記事は

• Array で作成される配列と、Modelで作成されるオブジェクトの違いがまだよくわかりませんねえ。 -- 木野? 2005-10-11 08:05:37 (火)

現在のアクセス:23655