Flex權威指南3學習筆記之一——介面知識(四)

運用視圖實現介面的切換

 

1.在DashBoard.mxml中，添加一個ApplicationBar，並在其中添加四個LinkButton用於切換

<mx:ApplicationControlBar dock="true"><br /><mx:LinkButton label="All"><br /><mx:LinkButton label="Sales"><br /><mx:LinkButton label="Categories"><br /><mx:LinkButton label="Comparison"><br /></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%"<br />title="Category Chart"><br /><mx:ControlBar><br /></mx:ControlBar><br /></mx:Panel><br /><mx:Panel id="comp"<br />width="100%" height="100%"<br />title="Comparison Chart"><br /><mx:ControlBar><br /></mx:ControlBar><br /></mx:Panel>

4.添加要切換的各個檢視狀態：

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

5.給四個linkButton添加click屬性，用於切換

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