Flex 4.1 SDK
I'm using mx:Tree component to load a static xml data to bring it in the tree form. I'm having a HDivided box where my left side portion will have the tree and the right side major portion will be a border container with Flex IFrame component in it.
On creationComplete event, I'm assigning the dataprovider of the Tree component with the static xml data. The tree is loaded with the xml data. If I select any particular leaf node in the tree, the right side portion(i.e IFrame inside a Border Container) should be loaded with the html content corresponding to the selected node data. No issues in that.
The problem I have is after I load the flex module,
Step 1 :
Without selecting any of the top nodes, I'm selecting (clicking) the node E1 under E. The corresponding HTML content is loaded smoothly.
Step 2:
Then, If I select the D2 node under D branch, the selection of D2 is not happening and it is retaining with E1 itself. Obviously, the itemClick handler will have the selected item as E1 and the same E1 content is loaded again.
The selection is not changing to D2.
Rather, If I select any other node than D2, like D1, C1, C2 etc, the selection of the node changes and the corresponding node's HTML content is loaded properly.
Why the selection does not change ? Does the last node in the tree is having any issue ?
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 (Application container)
<?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>
This is the actual code I used in my 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>
