1、第6章 简单界面控件实现,用户界面常见的元素在Flex中都可以使用相应的组件实现。例如用户界面上常见的按钮，在Flex中对应有按钮控件（Button Control）。 本章介绍如何利用控件实现一些简单而且常用的界面元素。这些常用控件的属性，一部分继承UIComponents类的属性，一部分为控件特有的属性。本章不再对公共属性进行过多的阐述，详情可以参照上一章。,6.1 按钮,在用户与界面进行交互的过程中，按钮扮演了十分重要的角色。用户单击按钮后与界面发生了交互事件，界面通过业务逻辑执行相应的功能。在Flex中，按钮对应于可视化控件中的按钮控件（Button Control）。最常用的按钮控件
2、是一个矩形按钮，当然，也可以定义四角的弯曲程度、颜色、图片等外观特征。图是一个最简单的按钮。,6.1.1 按钮控件标签,按钮控件对应的MXML标签为。除继承UIComponents类的属性外，它还包括一些常用属性，如表所示。,6.1.2 创建按钮控件,创建按钮只需在要MXML代码中加入，并根据相应的需求定义相应的属性即可。如果单击按钮需要触发事件则需要定义click属性，并编写相应的方法负责事件处理。图的代码如下所示。这是一个最简单的方式，它只显示了按钮文字。没有定义单击按钮后的事件。,6.1.3 使用按钮控件与用户交互,界面上定义按钮的目的，通过单击按钮来触发相应的事件，为用户提供与界面交互
3、的通道。在中，使用click属性指定单击按钮后负责事件处理的方法名，即单击事件的事件侦听器。该方法在中定义。重新定义图中的按钮，为其添加click事件处理程序。单击按钮后，弹出一个对话框，如图所示。,6.2 单选框和复选框,如果需要实现在众多的选项中进行选择时，可以考虑使用单选框控件（RadioButon Control）和复选框控件（CheckBox Control）。图6.4和图6.5分别显式了简单的单选框和复选框控件，用户在查询帐单时可以在控件中选择查询的月份。,6.2.1 单选框控件,单选框控件（RadioButton Control）由2个或者2个以上的单选框（radioButton
4、）组成。所有的单选框组成一个单选框组（group），每个单选框称为该组的一个成员。在单选框组中，只有一个成员可以被选中。当一个成员被选中时，其他成员呈未选中状态。 单选框控件对应的MXML标签为。它继承mx.controls.Button类的所有特性。所以单选框控件有时与按钮控件行为有些相似。单选框控件常用属性如表所示。,6.2.2 创建单选框控件,创建单选框控件时，在需要加入控件的地方插入标签，然后定义单选框组、单选框标签等相应的属性。图6.3的代码如下所示。注意：每次都为单选框指定groupName，避免发生不必要的混乱。,6.2.3 使用单选框控件与用户交互,在单击单选框进行选择时触发c
5、lick事件。所以在编写click事件处理函数的时候，需要将event作为参数传递给事件处理方法。以图6.4的一组单选框为基础，使用户在选择相应选项的时发生click事件，在文本框中显示选项的内容，结果如图所示。,6.2.4 使用单选框组,在上面定义单选框控件时，采用在每个单选框分别定义click事件的方式，如果选择框组件很多时，这种方法就显得比较笨重了。 针对上述的情况，Flex为多个单选框控件提供了单选框组，即标签。使用单选框组时，在创建所有的单选框控件前，应首先创建组件。这样，在定义单选框事件触发的时候，就不用在每个单选框内定义click属性，而是通过对所有的单选框事件进行统一处理。由i
6、temClick指定事件处理方法。 在使用时，为了区分不同单选框事件触发，需要每个单选框设置自己的value属性。这样当选择某个单选框时，的事件处理方法方法才能判断出到哪个单选框被选择。对于:RadioButtonGroup来说，选择某个单选框是触发的不再是click事件，而是itemClick事件。,6.2.5 复选框控件,复选框控件（CheckBox Control）与单选框外形相类似，但在同一组（group）中的单选框只能进行单项选择。而在复选框控件中，没有组的概念，可以进行多项选择。 复选框控件对应的MXML标签为。它的属性也继承Button类的属性，Flex没有为其添加特殊的属性。在
7、创建复选框控件的时候，创建过程与单选框控件类似。图6.5的代码如下所示。,6.3 链接条和标签条,链接条控件（LinkBar Control）是由一组链接按钮构成。通过单击不同的链接按钮来触发相应事件。链接条控件通常与导航类容器一起使用。通过单击不同的标签在不同的容器之间切换。 标签条控件（TabBar Control）组件由一组标签(Tab)组成，其功能与链接条控件相似。通过单击不同的标签，在堆叠容器中切换不同的容器。图分别显示链接条控件组件和标签条控件组件。,6.3.1 链接条控件,链接条控件由数个链接按钮控件（LinkButton Control）组成。例如，图6.7中“国际新闻”、娱乐
8、等4个条目由4个链接按钮控件组成。链接按钮控件类似于网页上常见的链接，通过单击链接按钮可以触发相应的事件。 链接条控件对应的MXML标签为，该组件的常用属性如表所示。,6.3.2 标签条控件,标签条控件（如图）的功能与链接条控件的功能类似。标签条控件对应的MXML标签为。该控件的属性以及创建的方法都可以参考标签条控件。 虽然标签条和链接条都常用于容器组件中，但是，Flex还是将二者都归类于控件。所以在ActionScript中，不可以使用容器中常用的Container.addChild()和Container.removeChild()方法来为控件添加LinkButton或者标签，只能使用类似
9、于addItem()和removeItem()这样的方法，通过改变dataProvider中的内容达到改变控件标签的目的。,6.4 使用提醒对话框,在提示用户操作信息结果返回时，常使用弹出对话框进行说明。在Flex中，可以提醒控件（Alert Control）用来提示用户的操作，向用户返回信息等。可以把Alert控件看作是一个带有标题的弹出式对话框。除显示标题以及信息外，Alert控件还可以显示Ok、Cancel等按钮，以及为这些按钮定义事件。图为一个Alert控件的例子。,6.4.1 Alert.show(),Alert.show()是Alert控件的核心方法。不仅用来弹出提醒对话框，控件的
10、标题、信息等属性都需要在该方法参数中进行定义。Alert.show()的参数如表所示。,6.4.2 提醒控件的公共属性,提醒控件提供一些公共的属性，可以利用这些属性修改控件的外部特性。对表的中属性设定不同的值，即可修改相应按钮上的显示文字。,6.4.3 创建提醒控件,创建提醒控件时，需要使用Alert.show()方法弹出提醒对话框。下面以一个单击按钮弹出提醒控件为例，详细介绍如何创建提醒控件。,6.5 使用文本,在Flex中，可以使用文本类控件显示和编辑页面的文字，接受用户的键盘输入等文字操作。文本类控件包括5个控件，如表所示。,6.5.1 文本类控件属性,对于文本类控件，最基本的属性为te
11、xt属性，该属性定义显示的文字。但是text属性只显示文字，不包括文字的大小等外观特性。对于复杂的文字，例如XML、特殊符号显示都有特殊的规定，避免编译器的错误识别。 除text属性外，Flex还支持在文本类控件内使用HTML文字标签，即使用htmlText属性。使用HTML文字标签可以在文本类控件显示多样的文字，显示多种颜色和字体的文字。 在所有的文本类控件中都可以使用text和htmlText属性定义显示的文字，下面对这2个属性进行简要的介绍。,6.5.2 标签控件,标签控件（Label Control）常用来显示单行的文字。但该控件不能接受文字输入、编辑文字，以及鼠标选取复制文字。在程序
12、内部可以改变通过text属性改变显示的文字，也可以利用HTML标签改变颜色或者字体等。 Label控件对应的MXML标签为，利用text属性可以设定显示的文字，如图，显示了一行说明文字。,6.5.3 文本控件,文本控件（Text Control）可以显示多行文字。它同标签控件类似，但标签控件的文字不能使用鼠标选中。在文本控件中，可以自动调整控件大小以显示完整的文字内容，但只能在指定大小的区域内显示文字。除此之外，该控件不支持滚动栏，如果文字超出控件的边界，只能通过鼠标或者键盘上的方向键查看，不芡龆覆榭础 图为一个文本控件的例子，该控件中的文字已经超过了控件的边界。图为利用鼠标选中后看到的剩余文
13、字。,6.5.4 文本输入控件,文本输入控件（TextInput Control）是单行输入控件，常用来填写信息。例如在注册用户填写用户名、密码等。图为一个输入用户信息的示例，由标签控件和文本输入控件组成。,6.5.5 文本区域控件,本文区域控件（TextArea Control）与文本输入控件一样，都可以接受用户键盘的输入，但本文区域控件可以接受多行文字的输入。本文区域控件支持滚动条，在文字超出控件边界的时候，可以拖动滚动条查看。图为一个本文区域控件的例子。,6.5.6 富文本编辑控件,富文本编辑控件（RichTextEditor Control）类似于网页上的复合文字编辑框。该控件是多种控件与面板容器（Panel Container）的组合，如图所示。,
