Flex4学习笔记（一）－－基础控件的使用

1.一个最简单的例子，按钮点击事件

	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			protected function btn_clickHandler(event:MouseEvent):void
			{
				var btn:Button = event.target as Button;
				Alert.show(btn.id);
			}
		]]>
	</fx:Script>

	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:Button x="132" y="179" label="按钮1" id="btn1" click="btn_clickHandler(event)"/>
	<s:Button x="280" y="179" label="按钮2" id="btn2" click="btn_clickHandler(event)" />

 

这个例子我添加了两个按钮，共用了同一个事件，在事件里可以通过event.target来判断到底点击的是哪一个按钮。

 

2.加载图片的例子，并且允许手工设置图片的宽和高

	<fx:Script>
		<![CDATA[

			protected function button1_clickHandler(event:MouseEvent):void
			{
				img.width = Number(imgWidth.text);
				img.height = Number(imgHeight.text);
			}

		]]>
	</fx:Script>

	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<mx:Image x="106" y="162" source="@Embed('/test/1.jpg')" width="211" height="182" id="img"/>
	<s:Button x="220" y="38" label="设置" click="button1_clickHandler(event)"/>
	<s:TextInput x="109" y="38" width="35" id="imgWidth"/>
	<s:TextInput x="162" y="38" width="35" id="imgHeight"/>

 

我把1.jpg放到test包里了，写路径的话就需要这么写：@Embed('/test/1.jpg')，不然可以会出现“无法解析用于转换代码”的错误；

Number()用于将给定值转换成数字值，用法很简单；

如果需要让图片加载的时候宽度和高度跟图片原始宽高度一样，可以这么写：<mx:Image x="106" y="162" source="@Embed('/test/1.jpg')" width="100%" height="100%" id="img" autoLoad="true" scaleContent="false"/>

 

3.加载swf的例子

<mx:SWFLoader x="5" y="5" source="@Embed('a.swf')" scaleContent="false" autoLoad="true" width="600" height="500"/>

 

 

4.调色板的使用

	<fx:Script>
		<![CDATA[
			import mx.events.ColorPickerEvent;

			protected function colorpicker1_changeHandler(event:ColorPickerEvent):void
			{
				text1.setStyle("color",event.color);
			}

		]]>
	</fx:Script>

	<s:TextInput id="text1" x="114" y="120" color="#FF0000"/>
	<mx:ColorPicker x="250" y="120" change="colorpicker1_changeHandler(event)"/>

该例子有一个输入框，输入框内文字默认是红色，可以通过调色板修改输入框内字体颜色

 

5.下拉框DropDownList和ComboBox的使用

	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
			[Bindable]
			private var dp:ArrayCollection = new ArrayCollection([{id:1,name:'苹果'},{id:2,name:'梨'},{id:3,name:'香蕉'}]);
			
			protected function func(item:Object):String
			{
				return "水果：" + item.name;
			}

		]]>
	</fx:Script>

	<s:DropDownList x="157" y="89" dataProvider="{dp}" labelField="name" selectedIndex="0"/>
	<s:DropDownList x="157" y="159" dataProvider="{dp}" labelFunction="func" selectedIndex="0"/>
	
	<s:ComboBox x="291" y="89" dataProvider="{dp}" labelField="name" selectedIndex="0"/>
	<s:ComboBox x="291" y="159" dataProvider="{dp}" labelFunction="func" selectedIndex="0"/>

 

使用DropDownList控件，下拉框是只读的，使用ComboBox控件的话，下拉框的内容可以输入；

使用[Bindable]，表示定义的数据可以做为数据源引用，在Flex4中不添加该内容也没有问题，只是代码会有警告提示，建议使用

 

6.使用控件MenuBar添加一个菜单，并且在子菜单点击时执行事件

	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.MenuEvent;

			protected function menubar1_itemClickHandler(event:MenuEvent):void
			{
				Alert.show(event.item.@label);
			}

		]]>
	</fx:Script>

	<mx:MenuBar x="118" y="124" labelField="@label" itemClick="menubar1_itemClickHandler(event)">
		<mx:dataProvider>
			<mx:XMLListCollection>
				<fx:XMLList xmlns="">
					<menu label="aa">
						<item label="aa1" />
						<item label="aa2" />
					</menu>
					<menu label="bb">
						<item label="bb1" />
						<item label="bb2" />
					</menu>					
				</fx:XMLList>
			</mx:XMLListCollection>
		</mx:dataProvider>
	</mx:MenuBar>

 

7.日期控件DateField以及DateChooser的简单用法

	<fx:Script>
		<![CDATA[
			import mx.events.CalendarLayoutChangeEvent;

			protected function datechooser1_changeHandler(event:CalendarLayoutChangeEvent):void
			{
				text1.text = event.newDate.getFullYear().toString() + "-" + (event.newDate.getMonth()+1).toString() + "-" + event.newDate.getDate().toString();
			}

		]]>
	</fx:Script>

	<mx:DateField x="110" y="128" formatString="YYYY-MM-DD" />
	<mx:DateChooser x="374" y="128" change="datechooser1_changeHandler(event)"/>
	<s:TextInput x="374" y="98" id="text1"/>