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"/> <mx:Button y="20" label="Checkout" id="btnCheckout" right="10"/>  往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> <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”