Flex权威指南3学习笔记之一------界面知识(四)

运用视图实现界面的切换

 

1.在DashBoard.mxml中，添加一个ApplicationBar，并在其中添加四个LinkButton用于切换

<mx:ApplicationControlBar dock="true"> <mx:LinkButton label="All"> <mx:LinkButton label="Sales"> <mx:LinkButton label="Categories"> <mx:LinkButton label="Comparison"> </mx:ApplicationControlBar>

 

2.在ApplicationControlBar后边添加一个Panel，属性设置如下

<mx:Panel id="sales"width="100%" height="100%"title="Sales Chart">

</mx:Panel>

然后在Panel内如嵌套一个ControlBar

3.在Panel后边添加一个VBox，属性值设置如下：

<mx:VBox id="rightCharts" width="100%" height="100%" >

</mx:VBox>

然后在里边添加两个Panel，这样两个Panel将会垂直排列，一个用于显示分类，一个用于对比。如下所示：

<mx:Panel id="type" width="100%" height="100%" title="Category Chart"> <mx:ControlBar> </mx:ControlBar> </mx:Panel> <mx:Panel id="comp" width="100%" height="100%" title="Comparison Chart"> <mx:ControlBar> </mx:ControlBar> </mx:Panel>

4.添加要切换的各个视图状态：

<mx:states> <mx:State name="fullSales"> <mx:SetProperty target="{rightCharts}" name="width" value="0"/> <mx:SetProperty target="{rightCharts}" name="height" value="0"/> </mx:State> <mx:State name="fullType"> <mx:SetProperty target="{sales}" name="width" value="0"/> <mx:SetProperty target="{sales}" name="height" value="0"/> <mx:SetProperty target="{comp}" name="width" value="0"/> <mx:SetProperty target="{comp}" name="height" value="0"/> </mx:State> <mx:State name="fullComp"> <mx:SetProperty target="{sales}" name="width" value="0"/> <mx:SetProperty target="{sales}" name="height" value="0"/> <mx:SetProperty target="{type}" name="width" value="0"/> <mx:SetProperty target="{type}" name="height" value="0"/> </mx:State> </mx:states>

5.给四个linkButton添加click属性，用于切换

<mx:ApplicationControlBar dock="true"> <mx:LinkButton label="All" click="this.currentState=''"/> <mx:LinkButton label="Sales" click="this.currentState='fullSales'"/> <mx:LinkButton label="Categories" click="this.currentState='fullType'"/> <mx:LinkButton label="Comparison" click="this.currentState='fullComp'"/> </mx:ApplicationControlBar>