Flex/配列を使うの変更点

追加された行はこの色です。
削除された行はこの色です。
Flex/配列を使うへ行く。
Flex/配列を使うの差分を削除
#topicpath
----
FlexではActionScriptの記述による配列の定義や、Arrayタグを用いた配列の定義を行うことができます。定義した配列は、プルダウンやデータグリッドにバインドすることができます。非常に強力です。

#contents



*** ActionScriptで定義する、Arrayタグで定義する。 [#l0ae580c]

//ここにコンテンツを記述します。
 <?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>

#ref(arraySample1.png)


***ファイルからデータを読み込んで定義する。 [#yd039520]
先ほどは配列をソースコード上で定義していましたが、次は配列を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>

#ref(arraySample2.png)

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

***配列からモデルを定義して、DataGridに渡す。 [#z8397414]
ひがやすをさんの、[[Flexでさわっておぼえるリッチクライアント:http://www.amazon.co.jp/exec/obidos/redirect?tag=kinosite-22&creative=203&camp=23&link_code=st1&path=ASIN/4844321706]]に書いてあるのですが、配列をModelにラップしてそのモデルをDataGridに渡すことができます。つまり
 <mx:Model id="modelOfArray">
  {myArrayOfObjects}
 </mx:Model>
として、
 <mx:DataGrid id="datagrid" dataProvider="{myArrayOfObjects}">
を
 <mx:DataGrid id="datagrid" dataProvider="{modelOfArray}">
とするのもありみたいです。これをやる意味は、[[先の本:http://www.amazon.co.jp/exec/obidos/redirect?tag=kinosite-22&creative=203&camp=23&link_code=st1&path=ASIN/4844321706]]のチュートリアルでは''後に、データを外部から取得する形式に変更するから、その切替を簡単にするため、データを一端データモデルに格納する''とあります。とりあえずまだ読み進めないとわかんないなあ。




----
この記事は
#vote(おもしろかった[24],そうでもない[23])
#vote(おもしろかった[25],そうでもない[23])
-Array で作成される配列と、Modelで作成されるオブジェクトの違いがまだよくわかりませんねえ。 -- [[木野]] &new{2005-10-11 08:05:37 (火)};

#comment
#topicpath


SIZE(10){現在のアクセス:&counter;}
Flex/配列を使う の変更点

Flex/配列を使うの変更点
