使用简单的控件

显示图片

打开前面完成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:Image source="assets/dairy_milk.jpg" scaleContent="true"/>

修改代码如下

<mx:Image source="@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:Text text="{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"/>  运行页面，如下