第11章使用组合框、步进器.pptVIP

第11章 使用组合框、步进器、拾色器、进度条、分割线 除前面讲述的控件外，Flex还为一些特殊界面元素定义相应的组件。包括：组合框、步进器、拾色器、进度条和分割线。本章将对这些组件进行逐一介绍。 11.1 使用组合框 使用组合框，用户可以自己输入内容，也可以从组合框中的列表中选择需要的内容。在Flex中，组合框控件（ComboBox Control）实现了上述功能。 组合框控件分为2部分，文本输入区域和下拉箭头。用户可以在文本输入区域输入内容，单击下拉箭头可弹出下拉列表，在列表中选择相应的内容。下面是一个组合框控件的示例。图为控件的初始状态，图为单击下拉箭头弹出列表时状态。 11.1.1 组合框控件标签 组合框控件对应的MXML标签为mx:ComboBox。在组合框控件中，有些功能类似于列表类控件。有些功能，如在列表条目项上显示提示等，可以参照列表控件，这里不再详述。除此之外一些常用的属性如表所示。 11.1.2 组合列表框控件事件 在列表框控件中，常用的事件有以下几种。 change：当选择的内容发生改变时触发该事件。 open：在弹出下拉列表框时触发该事件 close：当关闭列表时触发该事件 scroll：显示下拉列表框时，用户鼠标在列表项上移动时触发的事件 其中，open和close事件是mx.events.ListEvent类型的事件。 有一点需要说明，控件弹出列表后，单击需要的内容选择时，不会发生itemClick事件，这点与列表控件不同。 11.1.3 创建组合列表框控件 创建组合列表框控件，使用mx:ComboBox标签，设定相关的属性，并定义事件处理。下面以图11.1为例介绍控件的创建过程。 图11.1的例子比较简单，只需定义列表和控件的数据即可，没有对触发的事件进行处理。代码如下。 ?xml version=1.0? mx:Application xmlns:mx=/2006/mxml fontSize=14 mx:Panel title=组合框控件 height=130 mx:Label text=请选择城市/ !--插入组合框控件，并进行相应设置-- mx:ComboBox y=33 width=124 x=18 !--组合框的列表数据-- mx:ArrayCollection mx:String上海/mx:String mx:String北京/mx:String mx:String广州/mx:String mx:String深圳/mx:String mx:String香港/mx:String /mx:ArrayCollection /mx:ComboBox /mx:Panel /mx:Application 11.2 使用数字步进器 在用户界面中，数字步进器控件（NumericStepper Control）可以帮助用户快速地输入数字。数字步进器可以根据步进器中的上下箭头调整数据。用户只能步进器规定的数值范围之内进行选择。在Flex中，可以通过数字步进器控件实现上述功能。 数字步进器控件分为2个部分，文本输入部分和上下箭头部分。用户在文本输入部分输入数字，利用上下箭头改变数字，图是使用数字一个输入时间的例子。 11.3 使用拾色器 拾色器是页面中常见的元素。拾色器用来为背景、文本等其他元素选择各种颜色的外观。在Flex中，与之对应的为拾色器控件（ColorPicker Control）。图为拾色器控件的一个实例。图中拾色器控件处于初始状态，如果需要选择其他颜色，单击右下角的箭头打开色版。 11.3.1 拾色器控件标签 拾色器控件的MXML标签为mx:ColorPicker。该组件常用属性表所示。 11.3.2 拾色器控件的事件 由于拾色器控件与组合框控件有些类似，在打开色版以及选择完颜色后关闭面板都会出发相应的事件。分别对应为Open和Close事件，具体可以参看组合框控件。除Open和Close事件外，该控件还可触发如下的事件。 change：用户利用色版改变颜色时触发该事件。 itemRollOut：当鼠标从色版上移出时触发该事件。 itemRollOver：当鼠标在色版上移过时，触发该事件。 上述三个事件为mx.events.ColorPickerEvent事件。 11.3.3 创建拾色器控件 创建拾色器控件，只需在应用界面代码中合适的位置插入mx:ColorPicker标签。例如。 mx:ColorPicker id=myColorPicker / 上面的代码创建了一个id标识为myColorPicker的拾色器。在选择完颜色后，可以在代码中利用myColorPicke