第06章简单界面控件实现-(公开课件).pptVIP

第6章 简单界面控件实现 用户界面常见的元素在Flex中都可以使用相应的组件实现。例如用户界面上常见的按钮，在Flex中对应有按钮控件（Button Control）。 本章介绍如何利用控件实现一些简单而且常用的界面元素。这些常用控件的属性，一部分继承UIComponents类的属性，一部分为控件特有的属性。本章不再对公共属性进行过多的阐述，详情可以参照上一章。 6.1 按钮 在用户与界面进行交互的过程中，按钮扮演了十分重要的角色。用户单击按钮后与界面发生了交互事件，界面通过业务逻辑执行相应的功能。在Flex中，按钮对应于可视化控件中的按钮控件（Button Control）。最常用的按钮控件是一个矩形按钮，当然，也可以定义四角的弯曲程度、颜色、图片等外观特征。图是一个最简单的按钮。 6.1.1 按钮控件标签 按钮控件对应的MXML标签为mx:Button。除继承UIComponents类的属性外，它还包括一些常用属性，如表所示。 6.1.2 创建按钮控件 创建按钮只需在要MXML代码中加入mx:Button，并根据相应的需求定义mx:Button相应的属性即可。如果单击按钮需要触发事件则需要定义click属性，并编写相应的方法负责事件处理。图的代码如下所示。 mx:Button label=我是一个按钮/ 这是一个最简单的方式，它只显示了按钮文字。没有定义单击按钮后的事件。 6.1.3 使用按钮控件与用户交互 界面上定义按钮的目的，通过单击按钮来触发相应的事件，为用户提供与界面交互的通道。在mx:Button中，使用click属性指定单击按钮后负责事件处理的方法名，即单击事件的事件侦听器。该方法在mx:Script中定义。重新定义图中的按钮，为其添加click事件处理程序。单击按钮后，弹出一个对话框，如图所示。 6.2 单选框和复选框 如果需要实现在众多的选项中进行选择时，可以考虑使用单选框控件（RadioButon Control）和复选框控件（CheckBox Control）。图6.4和图6.5分别显式了简单的单选框和复选框控件，用户在查询帐单时可以在控件中选择查询的月份。 6.2.1 单选框控件 单选框控件（RadioButton Control）由2个或者2个以上的单选框（radioButton）组成。所有的单选框组成一个单选框组（group），每个单选框称为该组的一个成员。在单选框组中，只有一个成员可以被选中。当一个成员被选中时，其他成员呈未选中状态。 单选框控件对应的MXML标签为mx:RadioButton。它继承mx.controls.Button类的所有特性。所以单选框控件有时与按钮控件行为有些相似。单选框控件常用属性如表所示。 6.2.2 创建单选框控件 创建单选框控件时，在需要加入控件的地方插入mx: RadioButton标签，然后定义单选框组、单选框标签等相应的属性。图6.3的代码如下所示。 mx:RadioButton groupName= month id=jan label=一月的帐单 width=150/ mx:RadioButton groupName= month id=feb label=二月的帐单 width=150 / mx:RadioButton groupName= month id=mar label=三月的帐单 width=150 / mx:RadioButton groupName= month id=apr label=四月的帐单 width=150 / 注意：每次都为单选框指定groupName，避免发生不必要的混乱。 6.2.3 使用单选框控件与用户交互 在单击单选框进行选择时触发click事件。所以在编写click事件处理函数的时候，需要将event作为参数传递给事件处理方法。以图6.4的一组单选框为基础，，使用户在选择相应选项的时发生click事件，在文本框中显示选项的内容，结果如图所示。 6.2.4 使用单选框组 在上面定义单选框控件时，采用在每个单选框分别定义click事件的方式，如果选择框组件很多时，这种方法就显得比较笨重了。 针对上述的情况，Flex为多个单选框控件提供了单选框组，即mx:RadioButtonGroup标签。使用单选框组时，在创建所有的单选框控件前，应首先创建mx:RadioButtonGroup组件。这样，在定义单选框事件触发的时候，就不用在每个单选框内定义click属性，而是通过mx:RadioButtonGroup对所有的单选框事件进行统一处理。由itemClick指定事件处理方法。 在使用mx:RadioButtonGroup时，为了区分不同单选框