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 FlexGrocer。

在拖入一个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"/><mx:Button y="20" label="Checkout" id="btnCheckout" right="10"/> 往HBox里面在添加一个VBox，属性设置为：ID：cartBox，width设置为空。再在该VBox里面添加Lable，属性设置为：YourCart 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><mx:State name="cartView"><mx:SetProperty target="{products}" name="width" value="0"/><mx:SetProperty target="{products}" name="height" value="0"/><mx:SetProperty target="{cartBox}" name="width" value="100%"/></mx:State></mx:states> 下面开始控制试图状态

回到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"><mx:SetProperty target="{products}" name="width" value="0"/><mx:SetProperty target="{products}" name="height" value="0"/><mx:SetProperty target="{cartBox}" name="width" value="100%"/><mx:AddChild relativeTo="{cartBox}" position="lastChild"><mx:LinkButton label="Continue Shopping" click="this.currentState=''" id="linkbutton2"/></mx:AddChild><mx:RemoveChild target="{linkbutton1}"/><mx:AddChild relativeTo="{linkbutton2}" position="before"><mx:DataGrid width="100%"><mx:columns><mx:DataGridColumn headerText="Column 1" dataField="col1"/><mx:DataGridColumn headerText="Column 2" dataField="col2"/><mx:DataGridColumn headerText="Column 3" dataField="col3"/></mx:columns></mx:DataGrid></mx:AddChild></mx:State> 运行页面，如下

点击“view cart”