| Flex 2 開発ガイド > Flex アプリケーションのユーザーインターフェイスの作成 > データプロバイダおよびコレクションの使用 > 階層データプロバイダの使用 > XML データプロバイダの使用 | |||
|
|||
|
|||
|
|||
ツリーのデータは、通常は XML 形式でサーバーから取得しますが、<mx:Tree> タグ内に整形式の XML を記述して定義することもできます。DefaultDataDescriptor クラスは、整形式 XML データプロバイダを処理できます。
MXML で XML オブジェクトまたは XMLList オブジェクトを定義するには、<mx:XML> タグまたは <mx:XMLList> タグを使用します。ActionScript の XML および XMLList クラスとは異なり、これらのタグでは、XML テキスト内で MXML バインディング式を使用して、可変データからノードの内容を取得できます。たとえば次のように、ノードの名前属性をテキスト入力値にバインドできます。
<mx:XMLList id="myXMLList">
<child name="{textInput1.text}"/>
<child name="{textInput2.text}"/>
</mx:XMLList>
XML オブジェクトは、階層データコントロールの dataProvider として直接使用できます。ただし、オブジェクトが動的に変更される場合は、次のようにする必要があります。
こうすると、コンポーネントで動的データを確実に表すことができます。XMLListCollection クラスは、IList インターフェイスと ICollectionView インターフェイスのすべてのメソッドの使用をサポートしており、XMLList クラスの最もよく使用されるメソッドの多くを追加しています。XMLListCollection の使用の詳細については、XMLListCollection クラスの使用を参照してください。
次のコード例では、2 つの Tree コントロールを定義しています。1 つ目のコントロールでは XML オブジェクトを直接使用し、2 つ目のコントロールではデータソースとして XMLListCollection オブジェクトを使用しています。
<?xml version="1.0"?>
<!-- dpcontrols\UseXMLDP.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:XML id="capitals">
<root>
<Capitals label="U.S. State Capitals">
<capital label="AL" value="Montgomery"/>
<capital label="AK" value="Juneau"/>
<capital label="AR" value="Little Rock"/>
<capital label="AZ" value="Phoenix"/>
</Capitals>
<Capitals label="Canadian Province Capitals">
<capital label="AB" value="Edmonton"/>
<capital label="BC" value="Victoria"/>
<capital label="MB" value="Winnipeg"/>
<capital label="NB" value="Fredericton"/>
</Capitals>
</root>
</mx:XML>
<!-- Create an XMLListCollection representing the Tree nodes.
capitals.Capitals is an XMLList with both Capitals elements. -->
<mx:XMLListCollection id="capitalColl" source="{capitals.Capitals}"/>
<!-- When you use an XML-based data provider with a tree
you must specify the label field, even if it
is "label". The XML object includes the root,
so you must set showRoot="false". Remember that
the Tree will not, by default, reflect dynamic changes
to the XML object. -->
<mx:Tree id="Tree1" dataProvider="{capitals}" labelField="@label"
showRoot="false" width="300"/>
<!-- The XMLListCollection does not include the XML root. -->
<mx:Tree id="Tree2" dataProvider="{capitalColl}" labelField="@label"
width="300"/>
</mx:Application>
この例は、Tree コントロールで階層データプロバイダを使用する場合の 2 つの重要な機能を示しています。
showRoot プロパティに false を指定します。Tree コントロールのデフォルトの showRoot 値は true です。ただし、XMLList コレクションは単一のルートを持たないので、通常は showRoot プロパティを使用する必要はありません。 labelField プロパティを指定する必要があります。これは、属性を表すために @ 記号を使用しなければならないためです。XMLListCollection クラスは、XMLList オブジェクトにコレクション機能を提供するもので、attributes()、children()、elements() など、ネイティブ XMLList クラスの一部の XML 操作メソッドを使用できます。サポートされるメソッドの詳細については、『Adobe Flex 2 リファレンスガイド』の XMLListCollection を参照してください。
次の簡単な例では、XMLListCollection オブジェクトを List コントロールのデータプロバイダとして使用しています。ここでは、XMLListCollection メソッドを使用して、データプロバイダおよび List コントロールにおけるその表現にアイテムを動的に追加および削除しています。選択可能な商品の表現には Tree コントロールを、買物リストの表現には List コントロールを使用しています。
ユーザーは Tree コントロール (データプロバイダとして静的 XML オブジェクトを使用) でアイテムを選択してボタンをクリックし、List コントロールにアイテムを追加します。ユーザーがボタンをクリックすると、イベントリスナーが XMListCollection の addItem() メソッドを使用して、選択されている XML ノードを XMLListCollection に追加します。データプロバイダはコレクションなので、List コントロールが更新されて新しいデータが表示されます。
ユーザーがアイテムを削除するときも同様に、リストでアイテムを選択して [Remove] ボタンをクリックします。イベントリスナーは XMListCollection の removeItemAt() メソッドを使用して、データプロバイダおよび List コントロールにおけるその表現からアイテムを削除します。
<?xml version="1.0"?>
<!-- dpcontrols\XMLListCollectionWithList.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="400">
<mx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.collections.ArrayCollection;
// An XML object with categorized produce.
[Bindable]
public var myData:XML=
<catalog>
<category name="Meat">
<product name="Buffalo" cost="4" isOrganic="No"
isLowFat="Yes"/>
<product name="T Bone Steak" cost="6" isOrganic="No"
isLowFat="No"/>
<product name="Whole Chicken" cost="1.5" isOrganic="Yes"
isLowFat="No"/>
</category>
<category name="Vegetables">
<product name="Broccoli" cost="2.16" isOrganic="Yes"
isLowFat="Yes"/>
<product name="Vine Ripened Tomatoes" cost="1.69" isOrganic="No"
isLowFat="Yes"/>
<product name="Yellow Peppers" cost="1.25" isOrganic="Yes"
isLowFat="Yes"/>
</category>
<category name="Fruit">
<product name="Bananas" cost="0.95" isOrganic="Yes"
isLowFat="Yes"/>
<product name="Grapes" cost="1.34" isOrganic="No"
isLowFat="Yes" />
<product name="Strawberries" cost="2.5" isOrganic="Yes"
isLowFat="Yes"/>
</category>
</catalog>;
// An XMLListCollection representing the data
// for the shopping List.
[Bindable]
public var listDP:XMLListCollection = new XMLListCollection(new XMLList());
// Add the item selected in the Tree to the List XMLList data provider.
private function doTreeSelect():void
{
if (prodTree.selectedItem)
listDP.addItem(prodTree.selectedItem.copy());
}
// Remove the selected in the List from the XMLList data provider.
private function doListRemove():void
{
if (prodList.selectedItem)
listDP.removeItemAt(prodList.selectedIndex);
}
]]>
</mx:Script>
<mx:Tree id="prodTree" dataProvider="{myData}" width="200"
showRoot="false" labelField="@name"/>
<mx:HBox>
<mx:Button id="treeSelect" label="Add to List"
click="doTreeSelect()"/>
<mx:Button id="listRemove" label="Remove from List"
click="doListRemove()"/>
</mx:HBox>
<mx:List id="prodList" dataProvider="{listDP}" width="200"
labelField="@name"/>
</mx:Application>
Flex 2.01