第4章 Flex 4系统组件：基本组件

,第4章Flex4系统组件：基本组件,4.1Flex4组件简介,4.2Flex4常用可视化组件,4.3其他可视化组件,4.1Flex4组件简介,4.1.1Flex4组件概述Flex4组件是指用MXML标准和ActionScript3.0代码定义的一种可重用的控件。使用Flex4组件能够构建丰富的应用程序界面，大大提高了软件的开发效率。Flex4组件根据组件的定义方式可以分为系统预定义组件和用户自定义组件。,4.1.2Flex4组件的特点,Flex4提供多种方法对组件进行设置，如回应用户的动作，以及控制组件的文本字体和大小等，主要可以设置以下几个方面。（1）属性：是指对组件特征的描述，包含多个方面，如组件的文本、组件的位置和组件的大小等。不同的组件可以设置的属性也不同。（2）样式：是指组件的特色，如字体、字体颜色、字体大小、文本对正等，这些都可以通过样式表单（CSS）定义。（3）事件：是指组件的响应，事件包括组件建立、鼠标行为和按钮动作等。（4）行为：是指组件对用户动作或应用改变的可视改变，如使用鼠标移动和改变组件大小。,4.1.3使用组件的方法,1拖曳MXML标签在Flex应用程序的设计模式中，基本组件都在“组件”窗口的“控件”列表中，如图所示。可以拖动其中的标签到MXML编辑器中，选中该控件，在“属性”和“外观”窗口中对控件进行设置。,4.1.3使用组件的方法,例如，在MXML文件中定义一个输入框组件，可以单击“TextInput”标签，按住鼠标左键，将其拖动到编辑器中。选中该组件，可以任意调整组件的大小和位置。在“属性”窗口设置其ID值，以及在输入框中输入要显示的文本，如图所示。,4.1.3使用组件的方法,如果要对组件进行更进一步的设置，如设置其派发的事件等，可以通过单击“属性”窗口右上角的切换按钮将属性窗口切换到“类别视图”，如图所示。,4.1.3使用组件的方法,2编写MXML代码使用MXML代码添加组件的语法格式如下：例如，以下代码定义一个输入框：,4.1.4组件的大小与定位,1定义组件的大小Flex4中定义组件大小的方式主要有以下几种。（1）设置默认大小。Flex4中所有的组件都有默认的大小，例如以下代码：Panel组件是Flex的容器组件，title属性指定容器显示的标题。程序中Panel容器和TextInput组件的大小都没有定义，所以Flex使用它们的默认值，如图所示。,4.1.4组件的大小与定位,（2）设置绝对大小。通过将组件的width和height属性设置为像素值，可以设置组件的宽度和高度的绝对值，将组件定义为绝对大小。例如：效果如图所示。,4.1.4组件的大小与定位,（3）设置相对大小。将组件的width和height属性设置为百分比，表示组件宽度和高度相对于父类容器（包含组件的容器）宽度和高度的百分比值。设定相对大小以后，组件随父类容器的大小改变而改变。例如：效果如图4.6所示。,4.1.4组件的大小与定位,（4）使用约束布局定义组件大小。Flex4中进行约束布局的主要属性如下所示。top：从组件的上边缘到锚点目标的上边缘的垂直距离。bottom：从组件的下边缘到锚点目标的下边缘的垂直距离。left：从组件的左边缘到锚点目标的左边缘的水平距离。right：从组件的右边缘到锚点目标的右边缘的水平距离。horizontalCenter：从组件中心到锚点目标的内容区域中心的水平距离。verticalCenter：从组件中心到锚点目标的内容区域中心的垂直距离。baseline：从锚点目标到控件的基线位置的垂直距离。percentWidth：以组件父项大小百分比的方式指定组件宽度的数字，允许的值为0100。percentHeight：以组件父项大小百分比的方式指定组件高度的数字，允许的值为0100。,4.1.4组件的大小与定位,效果如图所示。,4.1.4组件的大小与定位,2组件的定位组件的定位指的是定义组件在页面中的位置。除了可以通过对组件进行约束布局的方式定位，还可以通过x（横坐标）和y（纵坐标）属性指定。x和y属性以像素值为单位，默认值都为0，即将该组件放置于父类容器的左上角（0,0）位置。例如：效果如图所示,4.2Flex4常用可视化组件,4.2.1文本组件1标签组件Label组件是文本标签组件，可以显示一行或多行文本，但不能编辑文本。Label组件使用text属性设置标签文本，例如：效果如图所示。,4.2.1文本组件,2输入框组件TextInput组件是文本输入组件，供用户输入和编辑单行统一格式文本。可以使用text属性设置要显示的文本或获取用户已输入的文本。当用户在输入框输入文本时，text属性的值自动变化。该属性是一个字符串。如果用户输入数值123.45，会将该数值报告为123.45，而不是123.45。例如：TextInput还包含以下常用属性。displayAsPasswordeditableenabledmaxCharswidthInCharsvisiblescaleXscaleY,4.2.1文本组件,当用户在输入框中按下【Enter】键时，将触发TextInput控件的enter事件，语法格式如下：例如，在一个输入框中输入内容后按下【Enter】键，在另一个输入框中显示该内容，代码可写为：在第二个输入框中输入信息，按下【Enter】键，效果如图4.10所示。,4.2.1文本组件,3文本区域组件TextArea组件也是一个文本输入组件，但可以供用户输入和编辑多行文本。默认情况下，文本在组件的右边缘换行。如果文本超出了TextArea范围，会自动显示垂直滚动条。TextArea组件的使用与TextInput类似。如果不需要显式多种格式的文本，将text属性设置为一个纯文本字符串，否则需要使用content属性，编译时获得和设置富文本内容。例如：ThisisHTMLtextamultiline,editableTextArea!,4.2.1文本组件,运行效果如图所示。,4.2.1文本组件,4富文本组件RichEditableText和RichText组件都是富文本组件。RichEditableText用于显示、滚动、选择和编辑各种格式的文本。由于性能原因，RichText只能显示一行或多行富文本，不能编辑、滚动、选择和设置可单击的超链接。默认情况下，RichEditableText具有透明背景，但不支持绘制边框。例如：,4.2.1文本组件,运行效果如图所示，其中第一个组件可编辑，第二个组件不可编辑。,4.2.1文本组件,5富文本编辑器组件RichTextEditor组件是Halo组件，在Flex4仍然可以使用。命名空间使用mx，但在FlashBuilder4的组件窗口中没有该组件的标签。这个组件可以输入文本并设置其格式。用户可以更改的文本特征包括字体系列、颜色、大小和样式，以及其他属性（如文本对齐方式、项目符号和URL链接）。例如：效果如图所示。,4.2.2按钮组件,1普通按钮Button组件是Flex应用程序中最常用的组件，用于在MXML中使用标签定义一个普通的矩形按钮。基本的语法格式如下：id属性定义按钮的唯一标志名称，label属性定义按钮上显示的文本，color属性定义按钮中文本的颜色，click事件在单击按钮时触发。例如以下的按钮：,4.2.2按钮组件,效果如图所示。,4.2.2按钮组件,Button组件常用的属性还有以下几个。styleName：指定组件使用的类的形式；visible：指定组件是否可见，默认为true；enabled：设为false时会禁用按钮，按钮颜色变灰，默认为true；emphasized：设置为true会将emphasized样式追加到按钮的styleName属性，默认为false。按钮组件常用的事件如下所示。click：单击事件；mouseDown：按钮按下事件；doubleClick：双击事件；mouseMove：鼠标在按钮上移动事件；mouseOut：鼠标移出按钮事件；mouseOver：移动鼠标到按钮上事件；mouseUp：按钮弹起事件。,4.2.2按钮组件,以上示例中“cornerRadius=”40“”表示将按钮边框的圆角半径设为25像素，“fontStyle=”italic“”表示将按钮文本的字体设为斜体，“fontFamily=”黑体“”表示将文本字体设为黑体，“fontSize=”15“”表示将按钮文本的字体大小设为15。按钮的效果如图所示。,4.2.2按钮组件,2弹出式按钮PopUpButton组件是弹出式按钮组件，包含一个主按钮和一个辅助按钮，后者称为弹出按钮。主按钮是一般的按钮，可以用标签属性显示文本信息，单击主按钮时将调度click事件。PopUpButton组件是Halo组件，所以在MXML中使用标签定义一个弹出式按钮，例如：PopUpButton组件除了继承Button组件的属性、样式、事件和方法外，还具有以下几个特征。（1）使用Popup属性对应弹出的列表和菜单。（2）open()和close()方法可以在ActionScript代码中打开或关闭弹出控件。（3）当弹出控件打开或关闭时，调度open或close事件。（4）popUpIcon属性可以在按钮中嵌入图标，改变按钮的外观，用法与icon属性类似。程序定义了一个弹出式按钮。当按钮布置完成的时候调度creationComplete事件，执行初始化函数loadMenu()。,4.2.2按钮组件,程序运行效果如图所示。,4.2.2按钮组件,3弹出菜单按钮PopUpMenuButton组件继承自PopUpButton，也是一个弹出菜单按钮。与PopUpButton不同的是，PopUpMenuButton不需要与列表或菜单组件绑定，可以使用数据源直接设置菜单项。例如：标签专门用于包含非可视化组件-,4.2.2按钮组件,4按钮条在Flex4中使用标签定义按钮条。整个组件只有一个单一的监听事件change，当某个按钮被选择时，该事件被触发。在按钮条中，某个按钮被单击时，即显示为被按下的状态。当单击其他按钮时，当前被按下的按钮就会恢复正常状态，新单击的按钮变为被按下的状态。标签使用dataProvider属性绑定按钮条中按钮的文本内容。例如，以下程序定义一个按钮条，单击相应的按钮会在文本区域中显示相应内容。,4.2.2按钮组件,程序运行效果如图所示。,4.2.2按钮组件,5切换按钮在Flex4中使用标签定义切换按钮。可以使用selected属性通过编程方式，获取或设置切换按钮的弹起或按下状态，true表示按下，false表示弹起。例如。运行效果如图所示。,4.2.2按钮组件,6复选框按钮CheckBox组件是常用的图形控件，由一个方形的小框和标注文本组成。复选框可以出现被选择和未被选择两种状态。在Flex4中使用标签定义一个复选框，例如：使用selected属性标志复选框的选中状态，true表示选中，false则表示未选中。label属性标志复选框的标注文本。当单击复选框时，将调度click事件。例如，以下程序定义一组复选框，当用户选择某个复选框后，触发click事件。,4.2.2按钮组件,运行效果如图所示。,4.2.2按钮组件,7单选按钮RadioButton组件是单选按钮组件。一个单选按钮是由一个小圆形选择按钮和文本标注组成的。单选按钮通常用于在一组互相排斥的选项中做出一种选择。每一组选项都具有相同的组名，每次只能选择一个选项，当选择了一个选项时，其他选项都变为未选状态。在Flex4中使用标签定义单选按钮，例如：selected属性标志单选按钮的选中状态，true表示选中，false表示未选中。groupName属性设置单选按钮的组名。定义一组相同组名的单选按钮就可以实现单选功能。,4.2.2按钮组件,例如，以下程序用于选择一个单选答案：importmx.controls.Alert;,4.2.2按钮组件,运行效果如图所示。,4.2.2按钮组件,8单选分组按钮RadioButtonGroup组件用于定义一组单选按钮，在设计模式中定义方法比逐个定义单选按钮方便。在设计模式拖动一个RadioButtonGroup标签到编辑器中。在弹出的“插入单选按钮组”窗口中填写组名，在“单选按钮”框修改要显示的按钮标注文本，如图所示，完成后单击“确定”按钮。如果要添加或删除某一个单选按钮，单击“添加”或“删除”按钮即可。,4.2.2按钮组件,代码如下：,4.2.2按钮组件,8链接LinkButton组件其实就是一个没有边框的Button组件，实现的功能与Button组件类似，可以打开一个新窗口或者进行其他操作，在Flex4中可以通过为Button定义皮肤代替LinkButton。LinkButton组件是Halo组件，使用标签定义。为使LinkButton组件能够执行某些操作，必须像Button组件一样，指定click事件处理函数。例如：除了使用文本作为链接，还可以使icon属性指定图标作为链接。例如：9链接条LinkBar组件与ButtonBar组件类似，按钮条定义一系列的按钮，而链接条则定义一系列的链接，并放置在一个水平的条上。标签使用dataProvider属性绑定链接条中链接的文本内容，当单击其中某个链接时触发itemClick事件。例如，以下程序定义了一个链接条，单击相应的链接会在文本区域中显示相应内容。,4.2.2按钮组件,运行效果如图所示。,4.2.3警告组件,警告组件是消息提示框组件，与Web开发中经常使用JavaScript中的alert消息提示框类似，用于提示用户一些信息。Flex4中使用Alert.show()方法调用一个警告组件，弹出一个对话窗口，可能包含消息、标题、按钮（“确定”、“取消”、“是”和“否”的任意组合）和图标。Alert组件在ActionScript中定义，不能在MXML创建Alert组件。如果要使用Alert类的show()方法，首先必须引入Alert类：importmx.controls.Alert;show()方法的语法格式如下：Alert.show(text,title,flags,parent,closeHandler,iconClass,defaultButtonFlag);,4.2.3警告组件,show()方法中的所有参数都为可选参数。（1）text：指定在警告对话框中显示的文本，此文本将居中显示。（2）title：指定警告对话框标题栏中显示的文本，此文本左对齐。（3）flags：设置Alert组件中放置的按钮，有效值为Alert.OK（“确认”）、Alert.CANCEL（“取消”）、Alert.YES（“是”）和Alert.NO（“否”）。（4）parent：弹出消息提示框的父类，默认值为null。（5）closeHandler：指定在按下Alert组件上的任意按钮时将调用的事件处理函数。（6）iconClass：指定位于Alert组件中文本左侧的图标的类，默认值为null。（7）defaultButtonFlag：提示框焦点默认按钮（默认值为4）。,4.2.3警告组件,例如，以下语句创建一个不带标题栏的Alert组件：Alert.show(hello);效果如图4.24所示。,4.2.3警告组件,以下程序创建了一个带有“是”和“否”按钮的提示对话框，单击不同按钮将有相应提示。效果如图所示。,4.2.4菜单组件,1Menu组件Menu组件是普通的菜单组件，它通过用户行为触发，弹出菜单项。Menu组件没有可视化的MXML标签，只能通过ActionScript代码定义。（1）创建组件。如要创建Menu组件，首先需要导入Menu类，如下所示：importmx.controls.Menu;创建一个Menu类的实例，语法格式如下：var变量名:Menu=Menu.createMenu(parent,mdp,showRoot);参数parent是用于放置Menu组件的容器，如果未设置则默认为null；mdp参数定义菜单组件的数据源；showRoot参数是一个布尔标志，用于设置是否显示XML数据中的根节点。例如：varmyMenu:Menu=Menu.createMenu(null,myMenuData,false);指定的数据源myMenuData既可以是ActionScript代码定义的数据源，例如：varmenuData:Array=label:菜单1,label:菜单2,label:菜单3;,4.2.4菜单组件,（2）绑定数据源。创建Menu实例后，可以通过设置Menu类的labelField属性绑定到数据源中，将其作为标签显示的字段名称，默认为“label”。例如，绑定XML数据源中的属性如下所示：myMenu.labelField=label;（3）显示组件。创建完Menu实例后并不显示Menu组件。如果要显示Menu组件，必须使用Menu类的show()方法，语法格式如下：Menu对象.show(x,y);（4）添加监听。创建Menu组件后，如果要监听用户对菜单的操作，需要添加监听事件，语法格式如下：Menu对象.addEventListener(事件名,处理函数名);,4.2.4菜单组件,Menu组件常用的事件如下所示。change：当用户改变菜单项的选择时触发；itemClick：当用户选择菜单项或子菜单项时触发；menuShow：当用户打开菜单或子菜单时触发。以下程序定义一个菜单组件。当用户选择其中一个选项时，使用Alert组件弹出菜单项的内容。效果如图所示。,4.2.4菜单组件,2MenuBar组件MenuBar组件是菜单条组件，即把最上面一级的菜单项在一个水平条中排列显示。菜单条与菜单一样，都是从数据源获取数据，支持相同的事件。但与菜单不同的是，菜单条一直保持可视状态，可以使用MXML标签创建，如图所示，MenuBar组件显示最上一级的菜单项。,4.2.5下拉框组件,在Flex3中使用ComboBox组件定义一个下拉框组件，而在Flex4中则使用DropDownList组件定义，在MXML中使用标签。例如：prompt属性用于指定在下拉框的提示区域中显示的字符串，选择下拉列表中的某个项目后将用选定项目中的文本替换该提示。如果要在已创建的下拉框中添加下拉列表，则必须使用DropDownList组件的dataProvider属性指定数据源，使用labelField属性指定绑定的字段。例如，定义一个ArrayCollection数组集合：publicvartdataProvider:ArrayCollection=newArrayCollection(label:中国,value:1,label:美国,value:2,label:日本,value:3);将tdataProvider指定为DropDownList组件的数据源：,4.2.5下拉框组件,指定了下拉列表的内容后，可以使用selectedIndex或selectedItem属性访问下拉列表中选项的位置和内容。例如：dl.selectedItem.labelDropDownList组件常用的事件如下所示。change：当用户选择的项目发生改变时触发。valueCommit：当以编程方式更改selectedItem属性的值时触发close：当以任何原因关闭下拉列表时触发。open：当用户单击锚点按钮用于显示下拉列表时触发。,4.2.5下拉框组件,例如，以下程序创建一个下拉框组件，当用户选择一个项目时则显示项目的内容和位置。运行结果如图所示。,4.2.6图像组件,1Image组件Image组件可以在应用程序的界面上显示图片文件，可以导入JPEG、PNG、GIF和SWF格式的文件。Image组件是Halo组件，使用标签定义。Image组件使用source属性指定图片资源；使用Embed标记绑定数据源；使用Embed标记时，Flex编译器将会把图片资源打包到生成的Flash文件中，这就意味着Flash文件的运行将不会依赖于图片资源。例如：效果如图所示。,4.2.6图像组件,2BitmapImage组件BitmapImage组件用于在其父元素的坐标空间中定义一个矩形区域，并使用从源文件提取的位图数据进行填充。BitmapImage组件是Spark组件，使用标签定义。使用source属性指定用于位图填充的源文件。如果使用某个图像文件作为源，则文件类型可以是PNG、GIF或JPG类型，而且必须使用Embed标记。例如，以下程序在宽500像素、高150像素的区域内显示图片，如果图片小于该区域则重复显示该图片以填充区域：,4.2.6图像组件,效果如图所示。,4.2.7列表组件,1List组件List组件是最简单的数据类控件，显示垂直的单行数据列表，如图所示。如果列表中的数据过长，则会出现一个垂直的滚动条。当用户改变列表中的选项时触发change事件，例如。,4.2.7列表组件,TileLayout布局包含以下几个常用属性。orientationrequestedColumnCountrequestedRowCountverticalGaphorizontalGapcolumnWidthrowHeight例如，以下程序可以通过控制显示的行数或列数选择是垂直排列还是水平排列数据项。,4.2.7列表组件,运行结果如图所示。,4.2.7列表组件,2Tree组件Tree组件以树形结构显示数据列表，使用户可以查看以可扩展树形式排列的层次结构数据，如图4.34所示。Tree组件使用标签定义，Tree组件使用dataProvider绑定数据源；使用labelField属性绑定数据源中的数据字段；使用showRoot属性指定是否显示根节点，默认值为true；使用openItems属性保存已经打开的项目；当用户选择的项目发生改变时，触发change()事件。例如。,4.2.7列表组件,运行结果如图所示。,4.2.8数据表格组件,DataGrid组件是数据表格组件，是应用程序中常用的数据展示组件，效果如图4.36所示。,4.2.8数据表格组件,DataGrid组件与List组件相似，但DataGrid组件可以显示多个数据列，更适合显示具有多个属性的对象。DataGrid组件具有以下几个特征。（1）列可以具有不同宽度或同一固定宽度。（2）用户可以在运行时调整尺寸。（3）用户可以在运行时对其重新排序。（4）可选择自定义列标题。（5）可以在任意列使用自定义组件，用于显示除文本之外的数据的功能。（6）支持数据翻页。（7）支持通过单击列对数据进行排序。,4.2.8数据表格组件,在Flex4中使用标签定义数据表格组件，DataGrid组件使用dataProvider属性绑定数据源，并经常使用XMLList作为数据源。DataGrid组件使用columns属性指定包含DataGridColumn对象的数组，每一个DataGridColumn对象对应一个可以显示的列。DataGridColumn对象使用dataField属性绑定数据源中的字段列；使用headerText属性指定自定义列标题，如果省略该属性，则列标题默认为数据源中的节点名；使用width属性指定列的宽度。例如：,4.2.9日期组件,1DateChooser组件DateChooser组件是日期选择组件。该组件显示月份名称、年份名称，并显示包含当月的所有日期的网格（每列标有对应的星期日期），系统当前的日期会在网格中加上阴影。用户可以选择一个日期、某个日期范围或者多个日期。该组件还包含前进和后退箭头按钮，用于改变年份和月份，效果如图所示。,4.2.9日期组件,DateChooser组件常用的属性有如下几种。（1）yearNavigationEnabled：如果为true，则显示的年份旁边会出现向上和向下按钮，可以使用这两个按钮更改年份，默认为false。（2）showToday：如果为true，则在组件中加亮显示今天，默认为true。（3）selectableRange：指定可以从中选择的日期范围。（4）disabledRanges：禁用一天或多天。（5）selectedRanges：选择多个日期。（6）selectedDate：此属性为Date对象，保存用户在组件中选择的日期。当用户选中的日期发生改变时将触发DateChooser组件的change事件，例如。运行结果如图所示。,4.2.9日期组件,2DateField组件DateField组件是日期条组件，有一个用于显示日期的文本字段，字段右侧带有日历图标。单击DateField组件边框内的任意位置时，将弹出一个DateChooser组件，显示当月的所有日期。DateField组件使用标签定义，将editable属性设置为true，可以在文本字段中输入日期，默认为false。DateField组件的其他用法与DateChooser组件类似，例如。运行结果如图所示。,4.2.10进度条组件,进度条组件为随时间而变的任务进度提供了形象化的表示，主要分为确定和不确定两种类型。确定型进度条是随时间而变的任务进度的线性表示，以进度所用百分比显示，如图4.40所示。在任务范围已知的情况下可使用确定型进度条。不确定型进度条是在任务范围未知时基于时间的进度，如图4.41所示。,4.2.10进度条组件,在MXML中使用标签定义一个进度条组件，常用的属性如下所示。（1）label：随进度栏显示的文本，默认值为“正在加载0%”。（2）labelPlacement：标签的位置，有效值为right、left、bottom、center和top。（3）indeterminate：设为true时显示不确定型的进度条，默认值为false。（4）direction：进度条填充的方向，有效值为right（向右填充）和left（向左填充），默认值为right。（5）chromeColor：组件的主要颜色。（6）source：指定进度条正在度量的组件，只能在事件模式和轮询模式下使用。（7）mode：使用mode属性定义进度条的操作模式，即更新进度条的方法。,4.2.10进度条组件,在创建ProgressBar组件后，可以使用组件的setProgress()方法设置进度栏的状态，用于反映在使用手动模式时完成的进度量。语法格式如下：ProgressBar对象.setProgress(value,total);参数value表示当前值，参数total表示总计值或目标值。例如。程序运行后每单击一次“Run.”按钮，进度条加载5%，效果如图所示。,4.3其他可视化组件,4.3.1颜色选择器组件在MXML中使用标签定义。ColorPicker组件使用selectedColor属性设置在颜色选择器组件中选中的颜色值，使用showTextField属性指定在颜色选择器中是否显示颜色标签或十六进制颜色值的文本框。例如：,4.3.1颜色选择器组件,运行结果如图所示。,4.3.2直线组件,直线组件可以定义一条直线，用于在容器中作分割线。在Flex4中使用标签定义一根直线，使用如下属性定义直线的位置。xForm：直线的起始x位置；xTo：直线的结束x位置；yForm：直线的起始y位置；xTo：直线的结束y位置。,4.3.2直线组件,标签的color属性用于定义线条的颜色；weight属性用于定义线条的粗细；caps属性用于指定线条末端处端点类型，有效值为round、square和none，默认值为null。例如。运行结果如图所示。,4.3.3选项卡组件,TabBar组件是选项卡组件，用于显示一组相同的选项卡。一次可以选择一个选项卡，且默认情况下选择第一个选项卡。Flex4中使用标签定义一个TabBar组件。TabBar组件使用dataProvider属性绑定选项卡的内容，当用户选择的选项卡发生改变时触发change事件。