上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




Flex3のツリー(Tree)を使用して、ツリー上のノードを選択する事で画面を切り替えるサンプルを作ってみました。
画面左側にツリーを表示し、各ノードを選択する事で画面右のViewStackを切り替えています。



サンプルソース


ツリーの表示はXMLを使用しています。
XML中の属性labelは、ツリーメニュー表示文字列、
XML中の属性idは、ViewStack中のCanvasを切り替えるために使用しています。


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>
<![CDATA[
[Bindable]
public var selectedNode:Object;

public function treeChanged(event:Event):void {
selectedNode=Tree(event.target).selectedItem;
myViewStack.selectedChild = this[selectedNode.@id];
}
]]>
</mx:Script>

<mx:XMLList id="treeData">
<node label="ツリー表示">
<node label="①" id="menu0">
<node label="①-1" id="menu1"/>
<node label="①-2" id="menu2"/>
<node label="①-3" id="menu3"/>
</node>
</node>
</mx:XMLList>

<mx:Panel title="Treeメニュー選択でViewStack切り替えサンプル" height="75%" width="75%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

<mx:Label width="100%" color="blue"
text="ノードを選択する事でViewStackを切り替えます。"/>

<mx:HDividedBox width="100%" height="100%">
<mx:Tree id="tree" width="50%" height="100%" labelField="@label" showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/>
<mx:ViewStack id="myViewStack" width="100%" height="95%" creationPolicy="all">
<mx:Canvas id="menu0">
<mx:Label width="100%" color="blue" text="初期表示"/>
</mx:Canvas>
<mx:Canvas id="menu1" backgroundColor="#f7d3d3" width="100%" height="100%">
<mx:Label color="blue" text="①-1画面を表示"/>
</mx:Canvas>
<mx:Canvas id="menu2" backgroundColor="#D3DDF7" width="100%" height="100%">
<mx:Label color="blue" text="①-2画面を表示"/>
</mx:Canvas>
<mx:Canvas id="menu3" width="100%" height="100%" backgroundColor="#CDF2CC">
<mx:Label color="blue" text="①-3画面を表示"/>
</mx:Canvas>
</mx:ViewStack>
</mx:HDividedBox>
</mx:Panel>

</mx:Application>


動作サンプル



少しでも参考になれば応援お願いします。












上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。