使用简单的控件

显示图片

打开前面完成EComm.mxml文件，代码如下

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"><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:AddChild relativeTo="{cartBox}" position="lastChild"><mx:DataGrid id="dgCart" 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:AddChild relativeTo="{cartBox}" position="lastChild"><mx:LinkButton label="Continue Shopping" click="this.currentState=''"/></mx:AddChild><mx:RemoveChild target="{linkbutton1}"/></mx:State></mx:states><mx:ApplicationControlBar dock="true" width="100%" height="90"><mx:Canvas width="100%" height="100%"><mx:Label x="0" y="0" text="Flex"/><mx:Label x="0" y="41" text="GROCER"/><mx:Button label="View Cart" id="btnViewCart" right="90" y="0"/><mx:Button label="Checkout" id="btnCheckout" right="10" y="0"/></mx:Canvas></mx:ApplicationControlBar><mx:Label text="(c) 2006, FlexGrocer" bottom="10" right="10"/><mx:HBox x="0" y="0" width="100%" height="100%" id="bodyBox"><mx:VBox width="100%" height="100%" id="products"><mx:Label text="Milk" id="prodName"/><mx:Label text="$1.99" id="price"/><mx:Button label="Add To Cart" id="add"/></mx:VBox><mx:VBox height="100%" id="cartBox"><mx:Label text="Your Cart Total: $"/><mx:LinkButton label="View Cart" click="this.currentState='cartView'" id="linkbutton1"/></mx:VBox></mx:HBox></mx:Application> 往Milk对应的Lable下面添加图片控件，设置属性为：Source：”assets/dairy_milk.jpg”，Scale Content：true。

对应的代码为

<mx:Imagesource="assets/dairy_milk.jpg" scaleContent="true"/>

修改代码如下

<mx:Imagesource="@Embed('assets/dairy_milk.jpg')"scaleContent="true"/>

Embed使编译时就把.jpg文件嵌入到swf文件中，在运行时，加载图片会更快，也无需访问网络，不过会增加swf文件的大小。

运行结果如下

建立详细的信息视图

在页面的源码模式下，给image控件加上mouseOut和mouseOver事件

<mx:Image source="@Embed('assets/dairy_milk.jpg')" scaleContent="true"

              mouseOver="this.currentState='expanded'"mouseOut="this.currentState=''"/>

当鼠标移入图片是，切换到expanded视图，当鼠标移出图片时，回到默认视图。

建立expanded视图，代码如下

<mx:State name="expanded"><mx:AddChild><mx:VBox x="200" width="100%"><mx:Text text="Text" width="50%"/><mx:Label text="Certified Organic"/><mx:Label text="Low Fat"/></mx:VBox></mx:AddChild></mx:State> 运行页面如下：当鼠标进入图片，将会显示详细信息视图

使用数据绑定将数据结构链接到简单的控件

在前面完成的EComm.mxml文件中，在<mx:Application>下面添加如下xml格式的代码，即是添加一个简单的数据结构

<mx:Model id="groceryInventory"><groceries><catName>Dairy</catName><prodName>Milk</prodName><imageName>assets/dairy_milk.jpg</imageName><cost>1.20</cost><listPrice>1.99</listPrice><isOrganic>true</isOrganic><isLowFat>true</isLowFat><description>Direct from California where cows are happiest!</description></groceries></mx:Model> 修改Text组件的text属性，使之绑定到数据结构中

<mx:Texttext="{groceryInventory.description}" width="50%"/>

其中groceryInventory是Model中的id，description是其中的一个属性，

运行页面，如下

上面显示的信息是在model中定义的。

使用Form布局容器布置简单的控件

新建DataEntry.mxml文件，编写代码如下

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"><mx:Model id="prodModel"><groceries><catName>Dairy</catName><prodName>Milk</prodName><imageName>assets/dairy_milk.jpg</imageName><cost>1.20</cost><listPrice>1.99</listPrice><isOrganic>true</isOrganic><isLowFat>true</isLowFat><description>Direct from California where cows are happiest!</description></groceries></mx:Model><mx:Script><!--[CDATA[import flash.net.FileReference;public function fileBrowse():void{var myFileRef:FileReferenceList = new FileReferenceList();myFileRef.browse();}]]--></mx:Script><mx:Form><mx:FormHeading label="{prodModel.catName}"/><mx:FormItem label="Product Name"><mx:TextInput id="product" text="{prodModel.prodName}"/></mx:FormItem><mx:FormItem label="ProductNameUnit" direction="horizontal"><mx:ComboBox/><mx:TextInput/></mx:FormItem><mx:FormItem label="Cost"><mx:TextInput id="cost" text="{prodModel.cost}"/></mx:FormItem><mx:FormItem label="List Price"><mx:TextInput id="listPrice" text="{prodModel.listPrice}"/></mx:FormItem><mx:FormItem label="Description"><mx:TextInput id="Description" text="{prodModel.description}"/></mx:FormItem><mx:FormItem label="Organic"><mx:CheckBox id="isOrganic" selected="{prodModel.isOrganic}"/></mx:FormItem><mx:FormItem label="Is Low Fat?"><mx:CheckBox id="isLowFat" selected="{prodModel.isLowFat}"/></mx:FormItem><mx:FormItem label="Image Path"><mx:TextInput id="imageName" text="{prodModel.imageName}"/><mx:Button label="Browse" click="fileBrowse()"/></mx:FormItem><mx:FormItem><mx:HBox><mx:Button label="Update"/><mx:Button label="Delete"/></mx:HBox></mx:FormItem></mx:Form></mx:Application> 运行页面，如下

 

将单选按钮和数据字段添加到Dashboard

开打前面完成的Dashboard.mxml文件，代码如下

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"><mx:ApplicationControlBar dock="true"><mx:LinkButton label="All"click="this.currentState=''"/><mx:LinkButton label="Sales"click="this.currentState='fullSales'"/><mx:LinkButton label="Categories"click="this.currentState='fullType'"/><mx:LinkButton label="Comparison"click="this.currentState='fullComp'"/></mx:ApplicationControlBar><mx:states><mx:State name="fullSales"><mx:SetProperty target="{rightCharts}"name="width" value="0"/><mx:SetProperty target="{rightCharts}"name="height" value="0"/></mx:State><mx:State name="fullType"><mx:SetProperty target="{sales}"name="width"value="0"/><mx:SetProperty target="{sales}"name="height"value="0"/><mx:SetProperty target="{comp}"name="width"value="0"/><mx:SetProperty target="{comp}"name="height"value="0"/></mx:State><mx:State name="fullComp"><mx:SetProperty target="{sales}"name="width"value="0"/><mx:SetProperty target="{sales}"name="height"value="0"/><mx:SetProperty target="{type}"name="width"value="0"/><mx:SetProperty target="{type}"name="height"value="0"/></mx:State></mx:states><mx:Panel id="sales"width="100%" height="100%"title="Sales Chart"><mx:ControlBar></mx:ControlBar></mx:Panel><mx:VBox id="rightCharts"width="100%" height="100%" ><mx:Panel id="type"width="100%" height="100%"title="Category Chart"><mx:ControlBar></mx:ControlBar></mx:Panel><mx:Panel id="comp"width="100%" height="100%"title="Comparison Chart"><mx:ControlBar></mx:ControlBar></mx:Panel></mx:VBox></mx:Application> 界面如下

在<mx:ApplicationControlBar>内部的最后面添加一个spacer

<mx:Spacer width="100%"/>

为了增加前四个linkbutton和后面控件的空间。

在spacer后面添加如下控件

<mx:Label text="Start Date"/><mx:DateField id="startDate"/><mx:Label text="End Date"/><mx:DateField id="endDate"/><mx:RadioButtonGroup id="grossOrNetGroup"/><mx:RadioButton id="gross" groupName="grossOrNetGroup" label="Gross Sales"data="GROSS" selected="true"/><mx:RadioButton id="net" groupName="grossOrNetGroup" label="Net Sales" data="NET"/> 运行页面，如下