flex_ViewStack导航容器示例；

=》TVView.mxml自定义组件

<?xml version="1.0" encoding="utf-8"?>

<s:NavigatorContent 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%">
?? ?
?? ?<!--view-->
?? ?<s:Panel title="电视" width="100%" height="100%">
?? ??? ?<s:layout>
?? ??? ??? ?<s:VerticalLayout paddingLeft="20" paddingTop="20" paddingRight="20" paddingBottom="20"/>
?? ??? ?</s:layout>
?? ??? ?
?? ??? ?<s:HGroup width="100%" enabled="false">
?? ??? ??? ?<s:TextInput id="searchfield" width="100%"/>
?? ??? ??? ?<s:Button id="searchBtn" label="Search for TVs"/>
?? ??? ?</s:HGroup>
?? ??? ?
?? ??? ?<s:Line width="100%">
?? ??? ??? ?<s:stroke>
?? ??? ??? ??? ?<s:SolidColorStroke color="0x000000" weight="1" caps="square"/>
?? ??? ??? ?</s:stroke>
?? ??? ?</s:Line>
?? ??? ?
?? ??? ?<s:Spacer height="10"/>
?? ??? ?<s:Label text="搜索结果：抱歉！没有搜到这类型、款式的电视的相关信息！" fontWeight="bold" fontSize="16"/>
?? ?</s:Panel>
?? ?
</s:NavigatorContent>

=》Computer.mxml自定义组件

<?xml version="1.0" encoding="utf-8"?>
<s:NavigatorContent 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%">
?? ?
?? ?<!--view-->
?? ?<s:Panel title="计算机(电脑)" width="100%" height="100%">
?? ??? ?<s:layout>
?? ??? ??? ?<s:VerticalLayout paddingLeft="20" paddingTop="20" paddingRight="20" paddingBottom="20"/>
?? ??? ?</s:layout>
?? ??? ?
?? ??? ?<s:HGroup width="100%" enabled="false">
?? ??? ??? ?<s:TextInput id="comSearch" width="100%"/>
?? ??? ??? ?<s:Button id="comBtn" label="Search for Computer"/>
?? ??? ?</s:HGroup>
?? ??? ?
?? ??? ?<s:Line width="100%">
?? ??? ??? ?<s:stroke>
?? ??? ??? ??? ?<s:SolidColorStroke color="0x000000" weight="1" caps="square"/>
?? ??? ??? ?</s:stroke>
?? ??? ?</s:Line>
?? ??? ?
?? ??? ?<s:Spacer height="10"/>
?? ??? ?<s:Label text="搜索结果：抱歉！没有搜到要查找的计算机类型信息！" fontWeight="bold" fontSize="16"/>
?? ?</s:Panel>
</s:NavigatorContent>

=》ViewStack.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" ?? ??? ??? ??? xmlns:ViewStack="learns.ViewStack.*" ?? ??? ??? ??? minWidth="1024" minHeight="768" pageTitle="ViewStack导航容器示例"> ?? ? ?? ?<!-- Demo_ViewStack导航容器示例 --> ?? ? ?? ?<s:layout> ?? ??? ?<s:VerticalLayout paddingLeft="20" paddingRight="20" paddingTop="10" /> ?? ?</s:layout> ?? ?<fx:Script> ?? ??? ?<![CDATA[ ?? ??? ??? ?import mx.events.IndexChangedEvent; ?? ??? ??? ? ?? ??? ??? ?protected function stack_changeHandler(event:IndexChangedEvent):void ?? ??? ??? ?{ ?? ??? ??? ??? ?// 获取切换到的容器： ?? ??? ??? ??? ?var relatedgroup:Object = event.relatedObject; ?? ??? ??? ??? ? ?? ??? ??? ??? ?// 打印日志： ?? ??? ??? ??? ?trace("=1>Old index: " + event.oldIndex + "; n=2>New index: " + event.newIndex + "; n" + ?? ??? ??? ??? ??? ?"=3>Label of new selection: " + relatedgroup.label + ";"); ?? ??? ??? ?} ?? ??? ??? ? ?? ??? ?]]> ?? ?</fx:Script> ?? ? ?? ?<!--view--> ?? ?<s:ButtonBar dataProvider="{stack}"/> ?? ? ?? ?<mx:ViewStack id="stack" width="650" height="200" change="stack_changeHandler(event)"> ?? ??? ?<ViewStack:TVView label="购买电视" /> ?? ??? ?<ViewStack:ComputerView label="购买电脑" /> ?? ?</mx:ViewStack> ?? ? </s:Application>