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