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

使用檢視狀態

 

 

1.建立一個顯示購物車的檢視狀態

 

<mx:State name="cartView"><br /><mx:SetProperty target="{products}" name="width" value="0"/><br /><mx:SetProperty target="{products}" name="height" value="0"/><br /><mx:SetProperty target="{cartBox}" name="width" value="100%"/><br /><mx:AddChild relativeTo="{cartBox}" position="lastChild"><br /><mx:DataGrid id="dgCart" width="100%"><br /> <mx:columns><br /><mx:DataGridColumn headerText="Column 1" dataField="col1"/><br /><mx:DataGridColumn headerText="Column 2" dataField="col2"/><br /><mx:DataGridColumn headerText="Column 3" dataField="col3"/><br /></mx:columns><br /></mx:DataGrid><br /></mx:AddChild><br /></mx:State><br /></mx:states>

 

新視圖的意思表示：將左側VBox的長和寬置零，右側VBox佔據整個螢幕，並且添加一個用於顯示的DataGrid

2.在第三部分中添加的有一個標籤為"View Cart"的LinkButton，將其"click"屬性值設為“click="this.currentState='cartView'" ” id設為"linkbutton1"

3.在新視圖中的DataGrid下邊添加一個按鈕用於繼續購物，如下所示：

<mx:AddChild relativeTo="{cartBox}" position="lastChild"><br /><mx:LinkButton label="Continue Shopping" click="this.currentState=''"/><br /></mx:AddChild>4.在新視圖中不需要顯示linkbutton1 這個按鈕，將其刪除

<mx:RemoveChild target="{linkbutton1}"/>

5.所有代碼如下所示：

<?xml version="1.0" encoding="utf-8"?><br /><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"><br /><mx:states><br /><mx:State name="cartView"><br /><mx:SetProperty target="{products}" name="width" value="0"/><br /><mx:SetProperty target="{products}" name="height" value="0"/><br /><mx:SetProperty target="{cartBox}" name="width" value="100%"/><br /><mx:AddChild relativeTo="{cartBox}" position="lastChild"><br /><mx:DataGrid id="dgCart" width="100%"><br /><mx:columns><br /><mx:DataGridColumn headerText="Column 1" dataField="col1"/><br /><mx:DataGridColumn headerText="Column 2" dataField="col2"/><br /><mx:DataGridColumn headerText="Column 3" dataField="col3"/><br /></mx:columns><br /></mx:DataGrid><br /></mx:AddChild><br /><mx:AddChild relativeTo="{cartBox}" position="lastChild"><br /><mx:LinkButton label="Continue Shopping" click="this.currentState=''"/><br /></mx:AddChild><br /><mx:RemoveChild target="{linkbutton1}"/><br /></mx:State><br /></mx:states><br /><mx:ApplicationControlBar dock="true" width="100%" height="90"><br /><mx:Canvas width="100%" height="100%"><br /><mx:Label x="0" y="0" text="Flex"/><br /><mx:Label x="0" y="41" text="GROCER"/><br /><mx:Button label="View Cart" id="btnViewCart" right="90" y="0"/><br /><mx:Button label="Checkout" id="btnCheckout" right="10" y="0"/><br /></mx:Canvas><br /></mx:ApplicationControlBar><br /><mx:Label text="(c) 2006, FlexGrocer" bottom="10" right="10"/><br /><mx:HBox x="0" y="0" width="100%" height="100%" id="bodyBox"><br /><mx:VBox width="100%" height="100%" id="products"><br /><mx:Label text="Milk" id="prodName"/><br /><mx:Label text="$1.99" id="price"/><br /><mx:Button label="Add To Cart" id="add"/><br /></mx:VBox><br /><mx:VBox height="100%" id="cartBox"><br /><mx:Label text="Your Cart Total: $"/><br /><mx:LinkButton label="View Cart" click="this.currentState='cartView'" id="linkbutton1"/><br /></mx:VBox><br /></mx:HBox></p><p></mx:Application><br />