Flex布置介面

建立EComm.mxml檔案。

用設計模式布置電子商務應用程式

開啟EComm.mxml檔案，選擇設計檢視，往視圖裡面拖入ApplicationControlBar組件

設定該組件在視圖裡面的屬性為Dock：true（自動頂到最上方，寬度變為100% ），height：90；如

向ControlBar裡面添加一個Canvas容器，並把Canvas的屬性設定為width：100%，height：100%；如

下面就可以在Canvas裡面添加想要的組件了。

首先拖入一個Lable，屬性設定為：Text：Flex，X：0，Y：0；再拖入一個Lable，屬性設定為：Text：Grocer，X：0，Y：41；再拖入一個Button，屬性設定為：ID：btnViewCart，Lable：View Cart；再添加一個button，屬性設定為：ID：btnCheckout，Lable：Checkout；在拖入一個Lable到右下角，屬性設定為：Text：（c）2010 Flex
Grocer。

在拖入一個HBox，屬性設定為：width100%，height：100%；往HBox裡面添加VBox，屬性設定為：width：100%，height：100%，ID：products，確保已經加到HBox裡面，可以通過Layout面板查看

往VBox裡面拖入Lable，屬性設定為：ID：prodName，Text：Milk，在拖入一個Lable，屬性設定為：ID：price，Text：$1.99，在拖入Button，屬性設定為：ID：add，Lable：Add To Cart。如

運行程式，

從看出，產生的頁面不好看，右邊的兩個按鈕在中間了，因為我們頁面的布局使用了“absolute絕對位置”。

使用基於約束條件的布局

回到頁面的設計試圖，選擇Checkout按鈕，在屬性裡面找到Constraints，並且選中靠右對齊（相對應父容器Canvas），並且把X的值（位移量）改為：10

選擇View Cart按鈕，在屬性裡面找到Constraints，並且選中靠右對齊（相對應父容器Canvas），並且把X的值（位移量）改為：90。

開啟源碼試圖，查看兩個按鈕的源碼，都有一個right屬性：

<mx:Button y="20" label="View Cart" id="btnViewCart" right="90"/><br /><mx:Button y="20" label="Checkout" id="btnCheckout" right="10"/><br /> 往HBox裡面在添加一個VBox，屬性設定為：ID：cartBox，width設定為空白。再在該VBox裡面添加Lable，屬性設定為：Your
Cart Total：$；繼續添加LinkButton，屬性設定為：Lable：View Cart。再次運行頁面，如下

使用檢視狀態

當前我們使用的試圖狀態是基本的試圖狀態（Base state），如下

建立一個狀態，右鍵點擊Base state，選擇new state，輸入名字cartView

 

選中建立的試圖狀態cartView（在cartView試圖狀態下），把products對應的VBox的屬性改為如下：width：0，height：0，即隱藏掉，把cartBox對應的VBox寬度設為：100%。

源碼中多出如下代碼

<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:State><br /></mx:states><br /> 下面開始控制試圖狀態

回到base state基礎的試圖狀態（點擊Base state試圖狀態），選中view cart對應的linkbutton，添加onclick事件，為this.currentState=’cartView’，就是當我們單擊View Cart這個linkbutton的時候，就把當前的試圖狀態改為cartView試圖狀態。

回到cartView試圖狀態，刪除View Cart對應的linkbutton，並添加linkbutton，屬性設定為：Lable：Continue Shopping，On Click：this.currentState=’’（表示回到基礎試圖狀態），在Continue Shopping對應的linkbutton上面添加DataGrid，屬性設定為：width：100%，如下

View Cart試圖狀態的源碼如下

<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:LinkButton label="Continue Shopping" click="this.currentState=''" id="linkbutton2"/><br /></mx:AddChild><br /><mx:RemoveChild target="{linkbutton1}"/><br /><mx:AddChild relativeTo="{linkbutton2}" position="before"><br /><mx:DataGrid 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 /> 運行頁面，如下

點擊“view cart”