PDA

View Full Version : Tree menu / navigation


camcim
12-27-2006, 12:10 AM
Hi,
Can anyone lead me in the right direction when it comes to page navigation via a tree menu?
If I have the following:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/index.html">
<mx:Tree id="tree1" dataProvider="{MailBox}" labelField="@label" showRoot="true" width="160"/>

<mx:XMLListCollection id="MailBox" source="{Folders}"/>
<mx:XMLList id="Folders">

<folder label="Mail">
<folder label="INBOX"/>
<folder label="Sent" />
<folder label="Trash" />
</folder>

</mx:XMLList>
</mx:Application>

how can i add a viewStack that would change depending on what node was active? Ie. If INBOX was clicked it would display that stack and so on.

Cheers

Tink
12-27-2006, 01:10 AM
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>
<![CDATA[

import mx.core.Container;

private function onTreeChange( event:Event):void
{
var stackChild:Container = Container( myViewStack.getChildByName( tree.selectedItem.@label ) );
if( stackChild ) myViewStack.selectedChild = stackChild;
}

]]>
</mx:Script>

<mx:XMLListCollection id="MailBox" source="{Folders}"/>
<mx:XMLList id="Folders">

<folder label="Mail">
<folder label="INBOX"/>
<folder label="Sent" />
<folder label="Trash" />
</folder>

</mx:XMLList>

<mx:HBox width="100%" height="100%">

<mx:Tree id="tree" dataProvider="{MailBox}" labelField="@label" showRoot="true" width="160" change="onTreeChange( event );"/>

<mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%">

<mx:Canvas id="INBOX" backgroundColor="#FFFFCC" label="INBOX" width="100%" height="100%">
<mx:Label text="INBOX" color="#000000"/>
</mx:Canvas>

<mx:Canvas id="Sent" backgroundColor="#CCFFFF" label="Sent" width="100%" height="100%">
<mx:Label text="Sent" color="#000000"/>
</mx:Canvas>

<mx:Canvas id="Trash" backgroundColor="#FFCCFF" label="Trash" width="100%" height="100%">
<mx:Label text="Trash" color="#000000"/>
</mx:Canvas>
</mx:ViewStack>

</mx:HBox>

</mx:Application>