![[PukiWiki]](http://www.masatom.in/pukiwiki/image/pukiwiki.png "[PukiWiki]"){kind=small}
Flex/配列を使う
http://www.masatom.in/pukiwiki/Flex/%C7%DB%CE%F3%A4%F2%BB%C8%A4%A6/
|
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>
このファイルは、
である、ととらえることができそうです。 さてそのデータファイルから、配列(というかデータモデル)を生成するには、以下の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}">
とするのもありみたいです。これをやる意味は、先の本のチュートリアルでは後に、データを外部から取得する形式に変更するから、その切替を簡単にするため、データを一端データモデルに格納するとあります。とりあえずまだ読み進めないとわかんないなあ。 この記事は
現在のアクセス:16155 |
arraySample2.png
arraySample1.png
