flex>按钮 小强斋

按钮

Flex中的按钮控件分为几种，

普通按钮
按钮条
单选框
复选框
弹出式按钮
文本链接按钮

一、普通按钮
普通按钮在大部分应用程序中都会出现，使用的频率非常高。按钮是最简单直接的来与用户交互的方式之一，在Flex中也提供了按钮Button控件.

1.1 使用Button控件设计按钮
在Flex中提供了按钮Button控件，用来设计按钮。按钮的设计相对简单，只需从工具面板中将其拖放到设计窗口即可。重点看的是生成按钮Button控件之后的MXML代码。

<mx:Button x="80" y="37" label="按钮" fontSize="12"/>

1.2 按钮中嵌入图片
在设计按钮样式时，除了可以更改按钮的文字外，还可以在按钮中嵌入图片资源。

<mx:Button x="40" y="33" label="有图片的按钮" 
		icon="@Embed(source='assets/buttonIcon.jpg')"  
		fontSize="14"/>

1.3 设置按钮样式
在设计按钮的样式中，不只能只显示一种图片，还可以根据不同的按钮状态显示不同的按钮样式。如当鼠标经过、按下、释放等状态时，都会有各自状态的图片显示。

<mx:Button x="57" y="54"
		upSkin="@Embed(source='assets/buttonUp.jpg')"
		overSkin="@Embed(source='assets/buttonOver.jpg')"
		downSkin="@Embed(source='assets/buttonDown.jpg')"/>

1.4按钮条的设计

<?xml version="1.0"?>
<!-- Simple example to demonstrate the ButtonBar control. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
 
 <mx:Script>
  <![CDATA[
   
   import mx.events.ItemClickEvent;
   
   // Event handler function to print a message
   // describing the selected Button control.
   private function clickHandler(event:ItemClickEvent):void {
    myTA.text="Selected button index: " + String(event.index) +
     "\n" + "Selected button label: " + event.label;
   }
  ]]>
 </mx:Script>
 
 <mx:Panel title="ButtonBar Control Example" height="75%" width="75%"
     paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"
     color="0xffffff" borderAlpha="0.15">
  
  <mx:Label width="100%" color="0x000000"
      text="Select a button in the ButtonBar control."/>
  
  <mx:TextArea id="myTA" width="100%" height="100%" color="0x000000"/>
  <!--给ButtonBar添加itemClick事件-->
  <mx:ButtonBar itemClick="clickHandler(event);" color="0x000000">
   <mx:dataProvider>
    <mx:Array>
     <mx:String>Flash</mx:String>
     <mx:String>Director</mx:String>
     <mx:String>Dreamweaver</mx:String>
     <mx:String>ColdFusion</mx:String>
    </mx:Array>
   </mx:dataProvider>
  </mx:ButtonBar>
 </mx:Panel>
</mx:Application>

1.5 按钮事件
在按钮设计中，除了通过设置相应属性改变标签描述和样式外，应用最多的还是按钮事件，尤其是按钮的单击事件。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			// 单击次数
			private var clickTime:int = 0;
			
			/**
			 * 鼠标单击事件
			 * */
			private function Button1_Click(e:MouseEvent):void
			{
				// 累加次数
				clickTime += 1;
				// 设置文本控件显示内容
				Label1.text = "单击了" + clickTime.toString() + "次。";
			}
		]]>
	</mx:Script>
	<mx:Button x="77" y="69" label="单击这里" click="Button1_Click(event)" fontSize="12"/>
	<mx:Label id="Label1" x="77" y="19" text="Label" width="157" fontSize="14"/>
</mx:Application>

二、 单选框的设计
在用表单调查表中，可以使用选择框来减少用户的操作。单选框是在一组选择框中只能选取一个选项，在限制选项选择时最为有用。

2.1 使用RadioButton控件设计单选框
在Flex中，提供了单选框RadioButton控件，使用此控件可以设计单选框按钮。

<mx:RadioButton x="41" y="36" label="男" fontSize="12" />
	<mx:RadioButton x="94" y="36" label="女" fontSize="12" />

2.2 使用单选框组
单选框是可以以分组的形式组合在一起的，这样就可以同时有多个最别的单选框可供选择。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			/**
			 * 更改事件
			 * */
			private function radiogroup1_change():void
			{
				// 设置文本控件的显示内容
				lblSelectedText.text = "你选择的项是：" + radiogroup1.selection.label;
			}
		]]>
	</mx:Script>
	<mx:RadioButtonGroup id="radiogroup1" change="radiogroup1_change()"/>
	<mx:RadioButton x="39" y="28" label="男" groupName="radiogroup1" fontSize="12"/>
	<mx:RadioButton x="39" y="54" label="女" groupName="radiogroup1" fontSize="12"/>
	<mx:Label x="39" y="101" text="Label" fontSize="14" id="lblSelectedText"/>
</mx:Application>

2.3 使用单选框组件，创建一个简单的加减法计算器。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			/**
			 * 计算按钮的单击事件
			 * */
			private function btnCalculate_click():void
			{
				// 计算结果
				var result:Number = 0;
				// 判断操作符
				switch(rdgOperate.selection.value)
				{
					case 0:
						// 加法计算
						result = Number(txtValue1.text) + Number(txtValue2.text);
						break;
					case 1:
						// 减法计算
						result = Number(txtValue1.text) - Number(txtValue2.text);
						break;
					default:
						break;
				}
				
				// 设置文本控件的内容
				lbResult.text = "计算结果为" + result.toString();
			}
		]]>
	</mx:Script>
	<mx:TextInput id="txtValue1" x="24" y="22" width="53"/>
	<mx:TextInput id="txtValue2" x="183" y="22" width="53"/>
	<mx:RadioButtonGroup id="rdgOperate"/>
	<mx:RadioButton x="94" y="22" value="0" label="+" groupName="rdgOperate"/>
	<mx:RadioButton x="135" y="22" value="1" label="-" groupName="rdgOperate"/>
	<mx:Button x="262" y="20" label="计算" fontSize="12" click="btnCalculate_click()"/>
	<mx:Label id="lbResult" x="346" y="24" text="Label" fontSize="12"/>
</mx:Application>

三、复选框
除了单选之外，多选也是平时用的最多的。在Flex中同样也提供了相应的复选框的控件，以提供选择多个内容的表单方式。

3.1 使用CheckBox控件设计复选框
创建一个按钮CheckBox控件有两种方式：一种是直接拖放控件到设计视图中；另一种是编写代码。第一种方式拖放控件到设计视图中相对直观，不用编写代码。在开发小型的应用程序的时候，可以提高开发效率。

<mx:CheckBox x="56" y="37" label="足球" fontSize="14" selected="true"/>
	<mx:CheckBox x="56" y="67" label="篮球" fontSize="14"/>
	<mx:CheckBox x="56" y="97" label="乒乓球" fontSize="14"/>

3.2 使用ActionScript控制复选框
在实际开发中，通常会遇到使用ActionScript脚本语言来获取或设置复选框的内容的情况。本节将会讨论如何使用ActionScript脚本语言获取多个复选框的内容。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<mx:Script>
		<![CDATA[
			/**
			 * 复选框的 change 事件
			 * */
			private function checkBox_change(e:Event):void
			{
				// 判断该项目是否选中
				if(e.target.selected)
				{
					// 获取选择的项目
					lbItems.text = lbItems.text + e.target.label + " ";
				}
				else
				{
					// 删除选择的项目
					lbItems.text = lbItems.text.replace(e.target.label + " ", "");
				}
			}
		]]>
	</mx:Script>
	
	<mx:CheckBox x="56" y="37" label="足球" fontSize="14" change="checkBox_change(event)"/>
	<mx:CheckBox x="56" y="67" label="篮球" fontSize="14" change="checkBox_change(event)"/>
	<mx:CheckBox x="56" y="97" label="乒乓球" fontSize="14" change="checkBox_change(event)"/>
	<mx:Label id="lbItems" x="56" y="145" text="您选择的项目是：" width="354" fontSize="14"/>
	
</mx:Application>

3.3 动态创建复选框很多情况下，都需要动态的创建复选框。动态创建复选框就会使用到ActionScript语言，动态的创建，动态的设置其属性和事件。本节将会讲述如何动态的创建复选框，并动态的设置属性和事件。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="initApp()">
	<mx:Script>
		<![CDATA[
			import mx.controls.CheckBox;
			
			/**
			 * 动态创建复选框，并设置其属性和事件
			 * */
			private function initApp():void
			{
				// 定义数组
				var items:Array = ["足球", "篮球", "排球", "乒乓球", "体操", "田径"];
				
				// 遍历数组，批量创建复选框
				for(var i:int=0; i<items.length; i++)
				{
					// 创建复选框
					var checkBox:CheckBox = new CheckBox();
					// 设置标识
					checkBox.id = "checkBox" + i.toString();
					checkBox.label = items[i].toString();
					// 设置标签字体大小
					checkBox.setStyle("fontSize", 14);
					// 位置
					checkBox.x = 100;
					checkBox.y = (i + 1) * 25;
					// 设置事件
					checkBox.addEventListener(Event.CHANGE, checkBox_change);
					
					// 增加控件到舞台
					this.addChild(checkBox);
				}
			}
			
			/**
			 * 复选框的 change 事件
			 * */
			private function checkBox_change(e:Event):void
			{
				// 判断该项目是否选中
				if(e.target.selected)
				{
					// 获取选择的项目
					lbItems.text = lbItems.text + e.target.label + " ";
				}
				else
				{
					// 删除选择的项目
					lbItems.text = lbItems.text.replace(e.target.label + " ", "");
				}
			}
		]]>
	</mx:Script>
	<mx:Label id="lbItems" x="10" y="200" text="您选择的项目是：" width="354" fontSize="14"/>
</mx:Application>

四、弹出式按钮的设计
弹出式按钮是有两个横向排列的按钮组成的，一个是主体按钮，另一个是一个小的弹出式按钮。当使用鼠标单击这个弹出式按钮的时候，就会弹出一个菜单。

4.1 创建PopUpButton控件, 获取弹出式按钮菜单的内容
在Flex中，已经提供了设计弹出式按钮的控件。使用PopUpButton控件，可以很容易的设计出一个弹出式按钮。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.events.MenuEvent;
			import mx.controls.Menu;
			import mx.events.ItemClickEvent;
			
			private var itMenu:Menu;
			/**
			 * 初始化数据，创建数据源
			 * */
			private function initApp():void
			{
				// 创建一个菜单
				itMenu = new Menu();
				// 定义一个数组对象，作为数据源
				var dp:Object = [
									{label:"台式机"},
									{label:"笔记本"},
									{label:"打印机"},
									{label:"数码相机"}
								];
				// 菜单对象与数据源绑定
				itMenu.dataProvider = dp;
				itMenu.addEventListener("itemClick", itemClickHandler);
				// 设置弹出的菜单
				puBtnIT.popUp = itMenu;
			}
			
			/**
			 * 选择菜单事件
			 * */
			private function itemClickHandler(event:MenuEvent):void
			{
				// 获取菜单选项内容
				var label:String = event.item.label;
				lbSelectItem.text = label;
				// 设置按钮标签内容，并关闭菜单
				puBtnIT.label = label;
				puBtnIT.close();
				// 设置菜单的索引为选项的索引值
				itMenu.selectedIndex = event.index;
			}
		]]>
	</mx:Script>
	<mx:PopUpButton fontSize="14" id="puBtnIT" label="请选择产品类型" 
		creationComplete="initApp()"  x="46" y="26" />
	<mx:Label id="lbSelectItem" x="206" y="32" text="没有选择任何类型" fontSize="14" />
</mx:Application>

5 链接按钮的设计
链接按钮是一个以文本链接形式的按钮，使用链接按钮可以在浏览器中打开一个链接。

5.1 创建LinkButton控件
在Flex中提供了设计链接按钮的控件，使用LinkButton控件就很容易设计出一个链接按钮。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:LinkButton x="50" y="36" label="影视金曲" fontSize="14" 
		click="navigateToURL(new URLRequest('http://list.mp3.baidu.com/list/tvs.html?id=1?top5'),'_blank')"/>
	<mx:LinkButton x="138" y="36" label="经典老歌" fontSize="14" 
		click="navigateToURL(new URLRequest('http://list.mp3.baidu.com/list/oldsong.html?top6'),'_blank')"/>
	<mx:LinkButton x="226" y="36" label="热门对唱" fontSize="14" 
		click="navigateToURL(new URLRequest('http://list.mp3.baidu.com/list/duichang.html?top20'),'_blank')"/>
</mx:Application>

5.2 设置样式
如果链接按钮的默认样式不能满足需求，还可以自定义按钮的样式。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Style>
		LinkButton
		{
			<!-- 设置圆角 -->
			cornerRadius : 10;
			<!-- 设置鼠标滑过的颜色 -->
			rollOverColor : "0x00FFFFFF";
			<!-- 设置鼠标选中的颜色 -->
			selectionColor : "0x3A7EE4";
		}
	</mx:Style>
	
	<mx:LinkButton x="50" y="36" label="古典音乐" fontSize="14" />
	<mx:LinkButton x="138" y="36" label="民族音乐" fontSize="14" />
	<mx:LinkButton x="226" y="36" label="流行音乐" fontSize="14" />
	
</mx:Application>

6、简易计算器
计算器是日常生活中最常见也是最常用到的计算工具，本章将会制作一个简易计算器，并详细讲解其设计思路和相关算法。

<?xml version="1.0"?>
<!-- Simple example to demonstrate the ButtonBar control. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	
	<mx:Script>
		<![CDATA[
			
			import mx.events.ItemClickEvent;
			
			// Event handler function to print a message
			// describing the selected Button control.
			private function clickHandler(event:ItemClickEvent):void {
				myTA.text="Selected button index: " + String(event.index) +
					"\n" + "Selected button label: " + event.label;
			}
		]]>
	</mx:Script>
	
	<mx:Panel title="ButtonBar Control Example" height="75%" width="75%"
			  paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"
			  color="0xffffff" borderAlpha="0.15">
		
		<mx:Label width="100%" color="0x000000"
				  text="Select a button in the ButtonBar control."/>
		
		<mx:TextArea id="myTA" width="100%" height="100%" color="0x000000"/>
		<!--给ButtonBar添加itemClick事件-->
		<mx:ButtonBar itemClick="clickHandler(event);" color="0x000000">
			<mx:dataProvider>
				<mx:Array>
					<mx:String>Flash</mx:String>
					<mx:String>Director</mx:String>
					<mx:String>Dreamweaver</mx:String>
					<mx:String>ColdFusion</mx:String>
				</mx:Array>
			</mx:dataProvider>
		</mx:ButtonBar>
	</mx:Panel>
</mx:Application>