使用组合框、步进器.ppt

第11章 使用组合框、步进器、拾色器、进度条、分割线 除前面讲述的控件外，Flex还为一些特殊界面元 素定义相应的组件。包括：组合框、步进器、拾 色器、进度条和分割线。本章将对这些组件进行 逐一介绍。 11.1 使用组合框 使用组合框，用户可以自己输入内容，也可以从组合框中的列表中选择需 要的内容。在Flex中，组合框控件（ComboBox Control）实现了上述功能 。 组合框控件分为2部分，文本输入区域和下拉箭头。用户可以在文本输入 区域输入内容，单击下拉箭头可弹出下拉列表，在列表中选择相应的内容 。下面是一个组合框控件的示例。图为控件的初始状态，图为单击下拉箭 头弹出列表时状态。 11.1.1 组合框控件标签 组合框控件对应的MXML标签为。在 组合框控件中，有些功能类似于列表类控件。有 些功能，如在列表条目项上显示提示等，可以参 照列表控件，这里不再详述。除此之外一些常用 的属性如表所示。 11.1.2 组合列表框控件事件 在列表框控件中，常用的事件有以下几种。 change：当选择的内容发生改变时触发该事件。 open：在弹出下拉列表框时触发该事件 close：当关闭列表时触发该事件 scroll：显示下拉列表框时，用户鼠标在列表项 上移动时触发的事件 其中，open和close事件是mx.events.ListEvent 类型的事件。 有一点需要说明，控件弹出列表后，单击需要的 内容选择时，不会发生itemClick事件，这点与列 表控件不同。 11.1.3 创建组合列表框控件 创建组合列表框控件，使用标签，设定相关的属性，并定义事件处理 。下面以图11.1为例介绍控件的创建过程。 图11.1的例子比较简单，只需定义列表和控件的数据即可，没有对触发的事件进行处 理。代码如下。 上海 北京 广州 深圳 香港 11.2 使用数字步进器 在用户界面中，数字步进器控件（NumericStepper Control）可 以帮助用户快速地输入数字。数字步进器可以根据步进器中的上 下箭头调整数据。用户只能步进器规定的数值范围之内进行选择 。在Flex中，可以通过数字步进器控件实现上述功能。 数字步进器控件分为2个部分，文本输入部分和上下箭头部分。用 户在文本输入部分输入数字，利用上下箭头改变数字，图是使用 数字一个输入时间的例子。 11.3 使用拾色器 拾色器是页面中常见的元素。拾色器用来为背景 、文本等其他元素选择各种颜色的外观。在Flex 中，与之对应的为拾色器控件（ColorPicker Control）。图为拾色器控件的一个实例。图中拾 色器控件处于初始状态，如果需要选择其他颜色 ，单击右下角的箭头打开色版。 11.3.1 拾色器控件标签 拾色器控件的MXML标签为。该 组件常用属性表所示。 11.3.2 拾色器控件的事件 由于拾色器控件与组合框控件有些类似，在打开 色版以及选择完颜色后关闭面板都会出发相应的 事件。分别对应为Open和Close事件，具体可以参 看组合框控件。除Open和Close事件外，该控件还 可触发如下的事件。 change：用户利用色版改变颜色时触发该事件。 itemRollOut：当鼠标从色版上移出时触发该事件 。 itemRollOver：当鼠标在色版上移过时，触发该 事件。 上述三个事件为mx.events.ColorPickerEvent事 件。 11.3.3 创建拾色器控件 创建拾色器控件，只需在应用界面代码中合适的位置插入 标签。例如。 上面的代码创建了一个id标识为myColorPicker的拾色器。在选择完颜色 后，可以在代码中利用myColorPicker. selectedColor获得选择的颜色值 。下面是一个利用拾色器控件改变容器背景的例子， 11.4 进度条 在用户界面中，常使用进度条来显示任务的进行状况。例如下载文件时利 用进度条显示下载的进度。在Flex中，与进度条功能对应的是进度条控件 （ProgressBar Control）。 根据外观，进度条控件分为2类，如下所示。 确定型进度条（Determinated）：随着完成任务所需时间的减少，进度条 逐渐添满整个进度区域，不确定型进度条（Indeterminated）：与 determinated类型的进度条不同，它不会随时间的推移逐渐添满进度区域 ，而是在任务完成之前一直显示循环滚动状态， 11.4.1 进度条控件标签 进度条控件对应的MXML标签为 。该控件的常用属性如表所示。 11.4.2 创建进度条控件 创建进度条控件时，首先根据需求定义进度条的 模式，再插入控件的MXML标签，定义相应的属性 ，最后定义进度条事件的处理方法。图利用滚动 条显示照片下载的进度。 11.5 分割线 在构建页面中，有时需要插入分割线显示地分割 容器中的各区域，使界面元素更加整齐。在Flex 中，与之对应的为垂直线控件(VRule Control)和 水平线控件(HRule Control)，如图所示。 11.5.1 垂直线控件和水平线控件 垂直线控件的MXML标签是。水平线控 件的MXML标签为。垂直线控件与水平 线控件只在外观上略有差异，控件的属性和创建 方法均一致，所以这里以垂直线控件为例介绍它 的常用属性及创建过程。 在创建分割线控件的一般只使用strokeWidth属性 定义分割线的宽度。还可以根据strokeColor和 shadowColor定义分割线的外观。 11.5.2 创建垂直线控件和水平线控件 创建垂直线控件和水平线控件，与其他控件相比 更为简单，也可将其看做静态的界面元素，只需 在需要的地方插入即可。下