Flex 4.1 SDK
mx:Treeコンポーネントを使用して静的 xml データをロードし、ツリー形式にします。左側の部分にツリーがあり、右側の主要部分が Flex IFrame コンポーネントを含む境界コンテナーになる HDDivided ボックスがあります。
creationComplete イベントで、Tree コンポーネントの dataprovider に静的 xml データを割り当てています。ツリーに xml データがロードされます。ツリーで特定のリーフ ノードを選択すると、選択したノード データに対応する html コンテンツが右側の部分 (つまり、Border Container 内の IFrame) に読み込まれます。問題はありません。
私が抱えている問題は、フレックスモジュールをロードした後です。
ステップ1 ：
最上位のノードを選択せずに、E の下のノード E1 を選択 (クリック) しています。対応する HTML コンテンツがスムーズに読み込まれます。
ステップ2：
次に、D ブランチの下にある D2 ノードを選択すると、D2 の選択は行われず、E1 自体に保持されます。明らかに、itemClick ハンドラーは選択されたアイテムを E1 として持ち、同じ E1 コンテンツが再度読み込まれます。
選択は D2 に変更されません。
むしろ、D1、C1、C2 など、D2 以外のノードを選択すると、ノードの選択が変更され、対応するノードの HTML コンテンツが適切に読み込まれます。
選択が変わらないのはなぜですか? ツリーの最後のノードに問題がありますか?
test.xml
<root>
<A label="A">
<menu label="A1" />
<menu label="A2" />
<menu label="A3" />
<menu label="A4" />
</A>
<B label="B">
<menu label="B1" />
<menu label="B2" />
<menu label="B3" />
</B>
<C label="C">
<menu label="C1" />
<menu label="C2" />
<menu label="C3" />
</C>
<D label="D">
<menu label="D1" />
<menu label="D2" />
</D>
<E label="E">
<menu label="E1" />
</E>
</root>
FxTree.mxml (アプリケーション コンテナ)
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%"
creationComplete="onCreationComplete(event)">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Declarations>
<fx:XML id="xmldata" source="/xml/test.xml"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.events.ListEvent;
[Embed('/assets/icons/branch.png')]
public const branchIcon:Class;
[Embed('/assets/icons/nobranch.png')]
public const nobranchIcon:Class;
[Embed('/assets/icons/chart.png')]
public const chartIcon:Class;
[Bindable]
private var treeData:XMLListCollection;
/**
* Function for setting the node icons
* of 'systemdashboardTree'
*/
private function setTreeIcon(item:Object):Class {
var iconClass:Class;
var classType:String = XML(item).attribute("icon");
if(classType!="")
return this[classType];
else
return null;
}
/**
* Function called on 'creationComplete' event
* for feeding data to 'systemdashboardTree'
*/
protected function onCreationComplete(event:FlexEvent):void
{
treeData = new XMLListCollection(new XMLList(xmldata));
fxTree.dataProvider = treeData;
}
/**
* Function which handles the systemdashboardTree's
* itemDoubleClick event
*/
protected function onItemDoubleClick(event:ListEvent):void
{
var item:Object = Tree(event.currentTarget).selectedItem;
if (fxTree.dataDescriptor.isBranch(item)) {
fxTree.expandItem(item, !fxTree.isItemOpen(item), true);
}
}
/**
* Function for loading the selected dashboard
*/
private function loadDashboard(event:ListEvent):void {
var item:Object = event.currentTarget.selectedItem;
Alert.show(item.@label);
}
]]>
</fx:Script>
<s:Panel height="100%"
width="100%"
title="FxTree"
borderColor="#CCCCCC">
<mx:HDividedBox height="100%" width="100%">
<s:BorderContainer height="100%" width="20%" borderColor="#CCCCCC">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:Tree id="fxTree"
width="100%" height="100%"
labelField="@label"
showRoot="false"
allowMultipleSelection="false"
doubleClickEnabled="true"
itemClick="loadDashboard(event)"
itemDoubleClick="onItemDoubleClick(event)"
borderSkin="{null}"/>
</s:BorderContainer>
<s:BorderContainer id="dashboardContainer" height="100%" width="80%" borderColor="#CCCCCC" />
</mx:HDividedBox>
</s:Panel>
</s:Application>
これは、アプリケーションで使用した実際のコードです。
TestModule.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" width="100%" height="100%">
<fx:Declarations>
<fx:XML id="data" source="/xml/Test.xml"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.events.FlexEvent;
[Bindable]
private var treeData:XMLListCollection;
]]>
</fx:Script>
<mx:Tree id="trendsTree"
width="50%" height="50%"
labelField="@label"
dataProvider="{data}"
horizontalCenter="0" verticalCenter="0"
showRoot="false"/>
</mx:Module>
Test.xml
<root>
<A label="A">
<menu label="A1" />
<menu label="A2" />
<menu label="A3" />
<menu label="A4" />
</A>
<B label="B">
<menu label="B1" />
<menu label="B2" />
<menu label="B3" />
</B>
<C label="C">
<menu label="C1" />
<menu label="C2" />
<menu label="C3" />
</C>
<D label="D">
<menu label="D1" />
<menu label="D2" />
</D>
<E label="E">
<menu label="E1" />
</E>
</root>