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>
浙公网安备 33010602011771号