Flex权威指南3学习笔记之二------简单控件的使用

1.插入图片

在名为"product"的VBox中，找到Label“Milk”,在其下面插入如下代码：

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

这样就可以把一张图片显示出来了。

另外，还可以如下添加一张图片：

 

 

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

这样做有两个好处：程序开始时已经加载，不需要等待既可以显示；构建不访问网络的离线应用程序很有用，这样已经包含在生成的SWF中，可以正确显示。当然也有缺点：就是显著增加SWF文件的大小

 

1.建立详细信息视图

a) 使用悬停事件表示应用程序的详细状态。首先要给刚刚添加的Image添加如下属性：mouseOver="this.currentState='expand'"  mouseOut="this.currentState=''"

b) 构建expand状态：

 

<mx:State name="expand"><mx:AddChild><mx:VBox x="200" width="100%"><mx:Label text="Text" width="50%"/><mx:Label text="Certified Organic"/><mx:Label text="Low Fat"/></mx:VBox></mx:AddChild></mx:State>

3.使用数据绑定将数据绑定到简单的控件

在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>

在expand状态中，将Label"Text"的text的属性值为“{groceryInventory.description}” 这样就可以把在XML中的数据description的值"Direct from California where cows are happiest!"读取到expand中。

4.使用Form表单布置简单的控件

Flex中的Form容器会处理表单内的空间布局，自动完成一些琐碎的工作。使用Form容器，能见字段指定为必须的或者可选项、处理错误信息、执行数据检查验证。其中：<mx:Form>是一个容器，<mx:FormHeading>是表单标题组件，<mx:FormItem>是一些特定的表单项目。

1）在DataEntry.mxml中，在<mx:Application>后添加一个XML的数据结构：

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

 

2）在<mx:Model>下边，添加如下表单：

<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" /></mx:FormItem><mx:FormItem><mx:HBox><mx:Button label="Update"/><mx:Button label="Delete"/></mx:HBox></mx:FormItem></mx:Form>

 

按钮“Browse”用于浏览图片，下边将创建一个"fileBrowse"函数，

public function fileBrowse():void{ var myFileRef:FileReferenceList = new FileReferenceList(); myFileRef.browse();}

 

3）给"Browse"添加click事件"click="fileBrowse()""

4)显示结果如下：

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

(1)找到<mx:ApplicationControlBar >，在最后一个LinkButton后添加

<mx:Spacer width="100%"/>，在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"/>