当前位置:首页 >> 机械/仪表 >>

第5章 Flex组件简介


Flex组件简介

目录
1 2 3 4 5 6 7 Flex组件概述 Flex组件概述 控件的基本使用方法 工具提示 基于菜单的控件 基于容器的布局规则 Flex容器组件, Flex容器组件,导航控件 容器组件 Form表单使用 Form表单使用

Flex控件概述 控件概述

Flex内建了很多UI控件

, Flex内建了很多UI控件,组件这个概念在 内建了很多UI控件 大多数语言中也被称为控件。 大多数语言中也被称为控件。 Flex控件基本分为三种类型 控件基本分为三种类型: Flex控件基本分为三种类型:
基于文本框的空件

基于按钮的控件

基于列表的控件

可用控件
控件 Alert Button ComboBox DateGrid DateField Image Label List Text TextArea TextInput Tree 功能描述 弹出一个警告框,该控件必须使用代码触发, 弹出一个警告框,该控件必须使用代码触发,所以在组件视图中 没有改组件的图标 显示一个按钮,按钮上可以包含标签文件或者图标, 显示一个按钮,按钮上可以包含标签文件或者图标,或者二者同 时包含 显示一个组合框 显示一个表格格式的列表 显示一个文本框,右边带有日历图标, 显示一个文本框,右边带有日历图标,单击图标可以选择日期 可以动态加载一个GIF、JPEG、PNG、SVG、SWF格式的文件 可以动态加载一个GIF、JPEG、PNG、SVG、SWF格式的文件 GIF 显示一个标签 显示为一个可滚动的单选或者多选列表框 显示一个多行的文本框, 显示一个多行的文本框,文本框中的内容不可编辑 显示一个多行的文本框, 显示一个多行的文本框,文本框中的内容可编辑 显示一个单行文本框, 显示一个单行文本框,文本框中的内容可编辑 以树状形势显示一系列节点数据

可用控件
控件 功能描述

CheckBox ColorPicker DateChooser FormItemLabel HorizontalList HRule、 HRule、VRule HScrollBar、 HScrollBar、 VScrollBar LinBar LinkButton

显示一个复选框 显示包含一个或多个样本的列表, 显示包含一个或多个样本的列表,用户可以从中选 择颜色 显示一个允许用户选择日期的日历 FormItem容器使用该对象显示标签 FormItem容器使用该对象显示标签 水平显示一系列项目 显示一个水平分割线或者是垂直分割线 显示一个水平滚动条或者是垂直滚动条

HSlider、 HSlider、VSlider 显示一个水平刻度尺或者是垂直刻度尺 将多个超链接显示为一行, 将多个超链接显示为一行,超链接具有相同的呈现 显示为一个超链接

可用控件
控件 功能描述

RadioButton

显示为一个单选按钮

RadioButtonGroup 显示为一个单选按钮组 TabBar TileList ToolTip VideoDisplay ButtonBar Menu MenuBar 形成一个水平选项卡 显示一个可以水平、水平排列条目的列表 显示一个可以水平、 显示一个工具提示框 显示流媒体数据 将多个按钮显示为一行, 将多个按钮显示为一行,按钮具有相同的呈现 显示一个菜单, 显示一个菜单,必须使用代码创建 显示一个水平菜单栏

可用控件
控件 功能描述

RichTextEditor

显示一个富文本编辑器 显示一个进步组合框, 显示一个进步组合框,有两个按钮和一个文本框组 成 联机分析处理DataGrid控件,是增强的DataGrid控 联机分析处理DataGrid控件,是增强的DataGrid控 DataGrid控件 DataGrid 件 显示一个按钮, 显示一个按钮,但是单击可以弹出一个类表 显示一个过程条, 显示一个过程条,用于呈现加载内容的进度 该控件用来辅助布局 显示一个SWF文件或者JPEG文件的内容 显示一个SWF文件或者JPEG文件的内容 SWF文件或者JPEG

增强的DataGrid DataGrid控件 AdvancedDataGrid 增强的DataGrid控件 NumbericStepper OLAPDataGrid PopUpButton ProgressBar Spacer SWFLoader

显示为一个按钮, PopUpMenuButton 显示为一个按钮,但是单击可以弹出一个菜单

控件的使用方法

一些控件是可以在MXML标签直接呈现, 一些控件是可以在MXML标签直接呈现, MXML标签直接呈现 另外一些则是在ActionScript中使用, ActionScript中使用 另外一些则是在ActionScript中使用, 例如:Alert控件 控件。 例如:Alert控件。 所有控件都是可以使用ActionScript 所有控件都是可以使用ActionScript 代码呈现,因为MXML MXML标签最终将转换 代码呈现,因为MXML标签最终将转换 ActionScript代码 代码。 成ActionScript代码。

基本的属性设置 在MXML标签中使用控件的主要方面就是属 MXML标签中使用控件的主要方面就是属 性的设置, 性的设置,由于组件都是继承与 mx.core.UIComponent类的 类的。 mx.core.UIComponent类的。

常用的通用属性
属性 enabled height id percentHeight percentWidth styleName toolTip visible width X y 类型 Boolean Number String Number Number String String Boolean Number Number Number 设置激活组件 设置组件高度,以像素为单位, MXML标签属 设置组件高度,以像素为单位,在MXML标签属 性也可以设置百分比 为组件定义一个标识符, 为组件定义一个标识符,并且是唯一的 设置相对父容器的百分比高度,不用加“%” 设置相对父容器的百分比高度,不用加“ 设置相对父容器的百分比宽度,不用加“ 设置相对父容器的百分比宽度,不用加“%” 设置组件的样式, 设置组件的样式,属性值是一个选择符 设置组件的工具提示文本 设置组件是否可见 同height相反 height相反 设置组件的x坐标, 设置组件的x坐标,仅用于绝对定位 设置组件的y坐标, 设置组件的y坐标,仅用于绝对定位 功能描述 将属性设置为true允许定义鼠标左键双击事件 将属性设置为true允许定义鼠标左键双击事件 true doubleClickEnabled Boolean

Show()方法参数 方法参数
参数 message title flags 要显示的消息 警告框标题栏中的文本。参数省略, 警告框标题栏中的文本。参数省略,标题栏为空 指示要显示在窗口中的按钮,默认为“OK”按钮, 指示要显示在窗口中的按钮,默认为“OK”按钮,可以使用一 下一个或多个常量:Alert.OK Alert.CANCEL、Alert.YES、 :Alert.OK、 下一个或多个常量:Alert.OK、Alert.CANCEL、Alert.YES、 Alert.NO 还可以使用Alert.NONMODAL指明窗口为非模式窗口 还可以使用Alert.NONMODAL指明窗口为非模式窗口 Alert.NONMODAL 用来指定控件父窗口,Alert窗口默认在父窗口中心, 用来指定控件父窗口,Alert窗口默认在父窗口中心,一般将 窗口默认在父窗口中心 设置为this 设置为this 用来定义单击按钮时广播的Click事件处理函数, 用来定义单击按钮时广播的Click事件处理函数,单击警告框 Click事件处理函数 中的按钮将触发mx.core.CloseEvent事件,除了标准的click mx.core.CloseEvent事件 中的按钮将触发mx.core.CloseEvent事件,除了标准的click 事件对象属性外CloseEvent事件还有另一个detail属性, CloseEvent事件还有另一个detail属性 事件对象属性外CloseEvent事件还有另一个detail属性,包括 Alert.OK、Alert.CANCEL、Alert.YES、Alert.NO Alert.OK、Alert.CANCEL、Alert.YES、 表示要用做图标的类名 描述

parent

closeHandler iconClass

指示具有初始焦点并在用户按下“Enter” defaultButton 指示具有初始焦点并在用户按下“Enter”时被点击

Alert 属性
属性 buttonFlags buttonHeight buttonWidth cancelLabel defaultButtonFlag iconClass noLabel okLabel yesLabel 描述 show()方法相似 和show()方法相似 定义每个按钮的高度,默认值为22 定义每个按钮的高度,默认值为22 定义每个按钮的宽度,默认值为60 定义每个按钮的宽度,默认值为60 定义cancel cancel按钮的标签文本 定义cancel按钮的标签文本 show()方法相似 和show()方法相似 show()方法相似 和show()方法相似 定义no no按钮的标签文本 定义no按钮的标签文本 定义ok按钮的标签文本 定义ok按钮的标签文本 ok 定义yes yes按钮的标签文本 定义yes按钮的标签文本

使用基于按钮的控件

Button LinkButton CheckBox RadioButton PopupButton

Button控件 控件 Button控件最常用, Button控件最常用,在其上可以设置一个 控件最常用 文本标签、 文本标签、一个图标或者两者都包含 Button按钮有 种状态: 按钮有4 Button按钮有4种状态:
默认状态 默认状鼠标移动到上时状态态 鼠标按下状态 不活动状态

Button属性 属性 Toggle属性值为true时可以将按钮定义为 Toggle属性值为true时可以将按钮定义为 属性值为true 切换状态,例如: 切换状态,例如: <mx:Button label=“Button”toggle Button”toggle=“true”/> label=“Button”toggle=“true”/>

LinkButton控件 控件 LinkButton控件是一个没有边框和背景的 LinkButton控件是一个没有边框和背景的 Button控件 控件, Button控件,可以创建一个单行超文本链 并可以定义图片,例如: 接,并可以定义图片,例如: <mx:LinkButton id="lbtn" label="链接" click="Alert.show('链接 链接')"/> 链接

CheckBox控件 控件 CheckBox控件用来呈现一个复选框, CheckBox控件用来呈现一个复选框,可以 控件用来呈现一个复选框 为该控件定义文本标签, 为该控件定义文本标签,并且可以使用 labelPlacement属性将文本分别设置于复 labelPlacement属性将文本分别设置于复 选框的位置,例如: 选框的位置,例如:

RadioButton控件和 控件和RadioButtonGroup控件 控件和 控件

RadioButton控件用来呈现一个单选框, RadioButton控件用来呈现一个单选框,而 控件用来呈现一个单选框 RadioButtonGroup控件用来呈现一组单选 RadioButtonGroup控件用来呈现一组单选 框,组名使用groupName属性定义,例如: 组名使用groupName属性定义,例如: groupName属性定义

PopUpButton控件 控件 PopUpButton控件由两部分组成, PopUpButton控件由两部分组成,左侧是主 控件由两部分组成 按钮,右侧是一个弹出菜单按钮,例如: 按钮,右侧是一个弹出菜单按钮,例如

使用按钮组 定义一组按钮可以使用,ButtonBar控件、 定义一组按钮可以使用,ButtonBar控件、 控件 toggleButtonBar控件 LinkBar控件 控件、 控件, toggleButtonBar控件、LinkBar控件,例 如:

文本框控件 Flex提供文本框控件有Label、Text、 Flex提供文本框控件有Label、Text、 提供文本框控件有Label TextArea和RichTextEditor控件 TextArea和RichTextEditor控件 TextInput和TextArea控件可以显示又可以 TextInput和TextArea控件可以显示又可以 接受用户输入 Label和Text仅显示文本内容 Label和Text仅显示文本内容 RichTextEditor控件可以输入和设置文本 RichTextEditor控件可以输入和设置文本 格式

动态使用组件 通过使用ActionScript创建组件, 通过使用ActionScript创建组件,必须导 ActionScript创建组件 入组件的类,还必须通过使用addChild addChild() 入组件的类,还必须通过使用addChild() 方法将组件实例添加到显示类表中。 方法将组件实例添加到显示类表中。

时间控件
DateChooser, DateChooser,显示一个包含日 历的面板, 历的面板,允许从中选择日期。

Flex有两个控件 Flex有两个控件 是处理日期

DateField,显示一个文本框, DateField,显示一个文本框, 右边带有日期图标, 右边带有日期图标,单击可以 弹出DateChooser DateChooser, 弹出DateChooser,从中选择 日期

注意:传递参数是选中的日期, 注意:传递参数是选中的日期,使用 selectedDate属性获得 selectedDate属性获得

时间控件 例如: 例如

使用提示工具 每个Flex控件都支持toolTip属性, 每个Flex控件都支持toolTip属性,属性值 Flex控件都支持toolTip属性 是一个文本字符串,当鼠标指定到组件时, 是一个文本字符串,当鼠标指定到组件时, 就会出现一个提示框显示该文本字符串, 就会出现一个提示框显示该文本字符串, 例如: 例如

使用提示工具 注意: HTML还定义了longdesc属性用于 注意:在HTML还定义了longdesc属性用于 还定义了longdesc 呈现较长的字符串说明,但是Flex Flex没有这 呈现较长的字符串说明,但是Flex没有这 样的定义,因为toolTip属性没有长度限制, toolTip属性没有长度限制 样的定义,因为toolTip属性没有长度限制, 长度过长时文本会自动换行, 长度过长时文本会自动换行,在 ActionScript中也可以用换行符 中也可以用换行符“ ActionScript中也可以用换行符“\n”换 行。

创建出错工具提示
使用ToolTipManager类 使用ToolTipManager类 ToolTipManager 可以动态管理ToolTip ToolTip, 可以动态管理ToolTip, 分别创建和删除ToolTip ToolTip, 分别创建和删除ToolTip, 语法: 语法:

ToolTipManager.create ToolTip( ToolTip(text,X,Y,erro rTipBorderStyle): ):IToo rTipBorderStyle):IToo lTip

ToolTipManager.destro yToolTip( yToolTip(toolTip:IToo lTip):void lTip):void

创建出错工具提示
text 参数 X、Y 参数

用来定义提示文本 分别定义ToolTip的坐标, 分别定义ToolTip的坐标,以像 ToolTip的坐标 素为单位 值为字符串,errorTipRight、 值为字符串,errorTipRight、 errorTipAbove和errorTipBelow, errorTipAbove和errorTipBelow, 用来指定箭头方向

errorT ipBord erStyl e参数

创建出错工具提示
注意:由于createToolTip()方法返回一个实 注意:由于createToolTip()方法返回一个实 createToolTip() IToolTip接口对象 可以使用as 接口对象, as运算符或者 现IToolTip接口对象,可以使用as运算符或者 类型函数进行转换成ToolTip类型, ToolTip类型 类型函数进行转换成ToolTip类型,并且 createToolTip()方法提示框是一直存在的 方法提示框是一直存在的, createToolTip()方法提示框是一直存在的, 直到有destroyToolTip()方法将其删除 例如: destroyToolTip()方法将其删除, 直到有destroyToolTip()方法将其删除,例如: var myTip:ToolTip = ToolTipManager.createToolTip(“tip”,10, ToolTipManager.createToolTip(“tip”,10, 10) as ToolTip; var myTip:ToolTip = ToolTip ToolTipManager.createToolTip(“tip”,10 (ToolTipManager.createToolTip(“tip”,10 ,10) );

创建出错工具提示 例如: 例如:

使用基于菜单控件
Menu 控件
Flex内建有 Flex内建有 3种菜单控 件

MenuBar 控件

PopUpMenuBa r控件

使用Menu控件 控件 使用 Menu控件是其他两个控件的基石, Menu控件是其他两个控件的基石,在用户 控件是其他两个控件的基石 单击按钮时就会出现一个菜单, 单击按钮时就会出现一个菜单,然后用户 选择菜单项, 选择菜单项,从而触发事件去执行一定的 程序。不能使用MXML创建Menu控件, MXML创建Menu控件 程序。不能使用MXML创建Menu控件,必须 使用ActionScript创建,例如: ActionScript创建 使用ActionScript创建,例如: Var myMenu:Menu = Menu.createMenu( Menu.createMenu(parent,menuDataProvid er,false); er,false); myMenu.show(x,y); myMenu.show(x,y);

使用Menu控件 控件 使用 parent参数: parent参数:是指父容器的实例名 参数 menuDataProvider参数 参数: menuDataProvider参数:是指菜单的数据 提供者变量名 false参数 参数: false参数:是指表示不显示数据提供者的 根节点,特别用于xml格式数据作为数据提 根节点,特别用于xml格式数据作为数据提 xml 供者时 注意:createMenu() ()方法是静态方法可以 注意:createMenu()方法是静态方法可以 实例化menu show()方法用来显示菜单 menu, 方法用来显示菜单, 实例化menu,show()方法用来显示菜单, 两个参数分别表示全局坐标。 两个参数分别表示全局坐标

使用Menu控件 控件 使用 实例: 实例

菜单项类型 有4种类型的菜单项 普通的菜单项:默认为“normal” 普通的菜单项:默认为“normal” 分割线:type=“separator” 分割线:type=“separator” 复选框类型的菜单项: type=“check” 复选框类型的菜单项: type=“check” toggled=“true” toggled=“true” 单选框类型的菜单项:type=“radio” 单选框类型的菜单项:type=“radio” toggled=“true” groupName属性值相同 toggled=“true” groupName属性值相同 注意:它们都是由type type属性指定 注意:它们都是由type属性指定

菜单项类型 实例: 实例:

菜单数据提供者 Menu控件有数据模型和显示数据的视图组 Menu控件有数据模型和显示数据的视图组 Menu类就是提供这种视图 类就是提供这种视图, 成,Menu类就是提供这种视图,它使用 dataProvider属性来定义要显示的数据 属性来定义要显示的数据, dataProvider属性来定义要显示的数据, 数据提供者可以是多种的数据类型的数据: 数据提供者可以是多种的数据类型的数据: XML格式 其他对象、 格式、 XML格式、其他对象、集合

XML 可以使用<mx:XML>标签和<mx:XMLList> 可以使用<mx:XML>标签和<mx:XMLList>标 签定义,也可以使用XML XMLList对象定 XML和 签定义,也可以使用XML和XMLList对象定 义,这是最常用的数据提供者格式 注意:XML节点的标签名称并不重要, 注意:XML节点的标签名称并不重要,可以 节点的标签名称并不重要 随意改动, 随意改动,属性及其嵌套关系在菜单中才 是最重要的

XML属性 属性
属性名称
label type icon groupName

类型
String 代表菜单显示文本

描述

separator、 定义菜单项的类型,separator、checkBox、 separator、 定义菜单项的类型,separator、checkBox、 check、radio、 radioButton或normal,如果此属性不存在, check、radio、 radioButton或normal,如果此属性不存在,则默 normal、 认值为normal normal。 normal、 认值为normal。 undefined String String 图像资源的类型标识符,仅适用与普通菜单项。 图像资源的类型标识符,仅适用与普通菜单项。 一个标识符,仅用于单选按钮类型的菜单项, 一个标识符,仅用于单选按钮类型的菜单项,可 以关联单选按钮组中的几个单选按钮项。 以关联单选按钮组中的几个单选按钮项。如果使 用默认的数据描述符, 用默认的数据描述符,那么就必须定义该属性 指示check或radio项是处于开启状态还是关闭状 指示check或radio项是处于开启状态还是关闭状 check 默认是false 如果使用默认的数据描述符, false, 态,默认是false,如果使用默认的数据描述符, 那么就必须定义该属性 指示用户是否可以选择此菜单项,默认是true 指示用户是否可以选择此菜单项,默认是true

toggled enabled

逻辑值 逻辑值

其他对象和集合

可以使用数组、Object等定义数据提供者。 可以使用数组、Object等定义数据提供者。 等定义数据提供者

可以使用任何实现了ICollectionView接口对象, 可以使用任何实现了ICollectionView接口对象, ICollectionView接口对象 例如:ArrayCollection、XMLListCollection, 例如:ArrayCollection、XMLListCollection, 这些集合可以使用DefaultDataDescriptor DefaultDataDescriptor有效的 这些集合可以使用DefaultDataDescriptor有效的 处理集合中的数据,如果菜单是动态的, 处理集合中的数据,如果菜单是动态的,那么使 用集合会变得非常有效率

创建MenuBar控件 控件 创建 使用MenuBar组件可以创建带有弹出菜单的 使用MenuBar组件可以创建带有弹出菜单的 MenuBar 对平菜单栏 MenuBar组件可以使用标签来定义 组件可以使用标签来定义, MenuBar组件可以使用标签来定义, dataProvider属性用来定义数据提供者 属性用来定义数据提供者, dataProvider属性用来定义数据提供者, 这也是默认的属性

创建PopUpMenuButton控件 控件 创建

注意
点击右侧的小按钮就会弹出菜单项, 点击右侧的小按钮就会弹出菜单项,并且 仅能定义一层菜单 可以创建一个默认项,例如: 可以创建一个默认项,例如: Menu(myPMB.popUp).selectedIndex myPMB.popUp). Menu(myPMB.popUp).selectedIndex = 2; 当选择一个菜单项是就会在左侧主按钮部 分显示选择的菜单项, 分显示选择的菜单项,选择一个菜单项或 者单击主按钮就会触发 MouseEvent.ITEM_Click事件 MouseEvent.ITEM_Click事件

基于容器的布局规则
Vertical:表示容器中组件自动垂直布局, Vertical:表示容器中组件自动垂直布局, vertical属性值包括left、center和 属性值包括left vertical属性值包括left、center和 right,默认为center right,默认为center 容器中的组 件定位有3 件定位有3 种方式, 种方式,取 决于容器组 件的layout 件的layout 属性 Horizontal:表示容器中组件自动水平布 Horizontal: ,horizontal属性值包括top、middle或 属性值包括top 局,horizontal属性值包括top、middle或 bottom,默认为top bottom,默认为top

Absolute: Absolute:表示容器中组件是根据坐标随 意排列

使用坐标系

全局坐标 系 (global):

? 以舞台左上角为原点,要 以舞台左上角为原点, 检测鼠标指针的全局坐标 位置就必须使用 MouseEvent对象的 对象的stageX MouseEvent对象的stageX 属性和stageY stageY属性 属性和stageY属性

Flex中包含 Flex中包含 3种坐标系

本地坐标 系(local):

是以组件左上角为原点的坐标系, 是以组件左上角为原点的坐标系,检测 鼠标指针的本地坐标系中位置必须使用 MouseEvent对象的localX和localY属性 对象的localX 属性, MouseEvent对象的localX和localY属性, 或者使用组件mouseX mouseY属性 mouseX、 属性。 或者使用组件mouseX、mouseY属性。拖 放时的doDrag()方法的xOffset、 doDrag()方法的xOffset 放时的doDrag()方法的xOffset、 yOffset属性的偏移量 属性的偏移量。 yOffset属性的偏移量。

内容坐标系 (content):

? 是以组件的内容左上角为原 点的坐标系, 点的坐标系,内容区域也就 是组件边框内的区域

坐标控件的点
使用Point类 使用Point类 Point 实例表示坐标 控件的各个点

属性X 属性X:表示当 前坐标系X 前坐标系X轴的 坐标

属性Y 属性Y:表示当 前坐标系Y 前坐标系Y轴的 坐标

坐标系转换
1

contentToGlobal(point:Point):Point,将 contentToGlobal(point:Point):Point,将 ):Point, point从内容坐标系转换到全局坐标系 point从内容坐标系转换到全局坐标系 contentToLocal(point:Point):Point,将 contentToLocal(point:Point):Point,将 ):Point, point从内容坐标系转换成本地坐标系 point从内容坐标系转换成本地坐标系 globalToContent(point:Point):Point,将 globalToContent(point:Point):Point,将 ):Point, point从全局坐标系转换成内容坐标系 point从全局坐标系转换成内容坐标系 globalToLocal(point:Point):Point,将 globalToLocal(point:Point):Point,将 ):Point, point从全局坐标系转换成本地坐标系 point从全局坐标系转换成本地坐标系 localToGlobal(point:Point):Point,将 localToGlobal(point:Point):Point,将 ):Point, point从本地坐标系转换成全局坐标系 point从本地坐标系转换成全局坐标系

2

3

4

5

使用布局容器
布局容器 功能描述 该容器可以容纳提供全局导航和应用程序命令的组件, 该容器可以容纳提供全局导航和应用程序命令的组件, 并可以定位在Application容器的上边缘, Application容器的上边缘 ApplicationControlBar 并可以定位在Application容器的上边缘,一般用来 放置主菜单 Canvas ControlBar Form FormHeading FormItem Grid HBox、VBox、 HBox、VBox、Box 使用绝对定位对子组件进行布局 该容器将控件可以放在Panel或TitleWindow容器的下 该容器将控件可以放在Panel或TitleWindow容器的下 Panel 边缘 该容器以标准的表单格式排列其子组件 定义表单的标题 定义一个表单组成项, 定义一个表单组成项,它一般由一个标签和一些组件 构成 该组件可以让你使用类似HTML表格的方式布局 该组件可以让你使用类似HTML表格的方式布局 HTML Vbox容器垂直布局子组件,Hbox水平布局子组件, Vbox容器垂直布局子组件,Hbox水平布局子组件, 容器垂直布局子组件 水平布局子组件 Box定义direction属性确定是垂直还是水平 定义direction Box定义direction属性确定是垂直还是水平

使用布局容器
布局容器 功能描述 HDividedBox容器对子组件进行水平布局 容器对子组件进行水平布局, HDividedBox容器对子组件进行水平布局,在子级之间插 HDividedBox、 HDividedBox、 入一条可调整的分隔线,VDividedBox容器对子组件进行 入一条可调整的分隔线,VDividedBox容器对子组件进行 VDividedBox 垂直布局, 垂直布局,在子级之间插入一条可调整的分隔线 呈现为水平分割线和垂直分割线, 呈现为水平分割线和垂直分割线,这两个组件不能作为 HRule、 容器使用, HRule、VRule 容器使用,但在容器中使用它们可以将内容从形式上被 分为若干区域 用来加载一个SWF SWF文件 ModuleLoader 用来加载一个SWF文件 Panel Tile TitleWindow Panel容器显示一个带标题栏,一个标题, Panel容器显示一个带标题栏,一个标题,一个边框及其 容器显示一个带标题栏 子级。 子级。 Tile容器以多行或多列的形式排列其子级 Tile容器以多行或多列的形式排列其子级 该组件就像是Panel容器,但被优化以用做弹出窗口, 该组件就像是Panel容器,但被优化以用做弹出窗口,它 Panel容器 可以显示一个关闭按钮, 可以显示一个关闭按钮,并且可以拖拽

使用Grid容器 容器 使用

Grid容器由3 Grid容器由3个基本元素构成 容器由

Grid元素定义表 Grid元素定义表 格,整个表格包 含在<mx:Grid> 含在<mx:Grid> </mx:Grid mx:Grid> 和</mx:Grid>标 签中

GridRow元素定义 GridRow元素定义 表格的一个行, 表格的一个行, 它是单元格的容 器

GridItem元素用来 GridItem元素用来 定义单元格, 定义单元格,所有 单元格在行标签内, 单元格在行标签内, 每个单元格由一对 mx:GridItem> <mx:GridItem> 和 </mx:GridItem mx:GridItem> </mx:GridItem>标 签表示

TitleWindow容器创建弹出对话框 容器创建弹出对话框

TileWindow容器对应TileWindow类 TileWindow容器对应TileWindow类,该类 容器对应TileWindow 包含一个showCloseButton showCloseButton来定义是否呈现 包含一个showCloseButton来定义是否呈现 关闭按钮, 关闭按钮,并且可以在该容器中谈价其他 的容器和组件 使用ActionScript创建TileWindow ActionScript创建TileWindow容器 使用ActionScript创建TileWindow容器 使用MXML标签创建TileWindow MXML标签创建TileWindow容器 使用MXML标签创建TileWindow容器

使用PopUpManager类 类 使用 PopUpManager类的方法可以实现对 PopUpManager类的方法可以实现对 TitleWindow容器的管理 容器的管理, TitleWindow容器的管理,并且这些方法都 是静态的方法
createPopUp()方法 createPopUp()方法 () removePopUp()方法 removePopUp()方法 () addPopUp()方法 addPopUp()方法 () bringToFront()方法 bringToFront()方法 ()

centerPopUp()方法 centerPopUp()方法 ()

createPopUp()方法 createPopUp()方法 ()
该方法是弹出一个对话框并将其置于顶层, 该方法是弹出一个对话框并将其置于顶层,语 法格式 createPopUp( createPopUp(parent,className,modal,child List):IFlexDisplayObject; ):IFlexDisplayObject List):IFlexDisplayObject; Parent参数 参数: Parent参数:用来定义将弹出的对话框放在哪 个显示容器对象内 className参数 是一个类,常用TitleWindow 参数: className参数:是一个类,常用TitleWindow 或者是TitleWindow TitleWindow的扩展 或者是TitleWindow的扩展 Modal参数 是否是模式对话框,默认false 参数: Modal参数:是否是模式对话框,默认false childList参数 参数: childList参数:定义添加弹出窗口的子列表

addPopUP()方法 方法 该方法也是弹出一个对话框并将其置于顶 addPopUP() ()方法可以将任意的组件作 层, addPopUP()方法可以将任意的组件作 为窗口弹出,而不仅仅是TitleWindow TitleWindow, 为窗口弹出,而不仅仅是TitleWindow,只 要弹出的窗口实现了IFlexDisplayObject 要弹出的窗口实现了IFlexDisplayObject 接口就可以,语法格式: 接口就可以,语法格式: addPopUp( addPopUp(window,parent,modal,childLis t):void; Window参数 实现了IFlexDisplayObject 参数: Window参数:实现了IFlexDisplayObject 接口对象

removePopUp()方法 方法 删除一个弹出的对话框, 删除一个弹出的对话框,通常配合 createPopUp()方法或者addPopUp()方法 ()方法或者addPopUp() createPopUp()方法或者addPopUp()方法 使用,语法格式: 使用,语法格式: removePopUp(popUp):void; removePopUp(popUp):void; popUp参数 参数: popUp参数:是一个弹出对话框

bringToFront()方法 方法 该方法可以将弹出的对话框提到最顶端, 该方法可以将弹出的对话框提到最顶端, 位于其他窗口之上,语法格式: 位于其他窗口之上,语法格式: bringToFront(popUp):void bringToFront(popUp):void popUp参数 参数: popUp参数:是一个弹出对话框

centerPopUp()方法 方法 该方法将一个弹出对话框居中放置, 该方法将一个弹出对话框居中放置,语法 格式: 格式: centerPopUp(popUp):void centerPopUp(popUp):void popUp参数 参数: popUp参数:是一个弹出对话框

使用ApplicationControlBar容器创建主菜单 容器创建主菜单 使用

ApplicationControlBar容器可以用来创建 ApplicationControlBar容器可以用来创建 一个类如应用程序主菜单, 一个类如应用程序主菜单,其中可以包含 菜单也可以包含其他控件
Docked模式 Docked模式
? 将dock属性设置为true,菜单栏总是位 dock属性设置为true, 属性设置为true 于应用程序顶部, 于应用程序顶部,滚动条对菜单没有影 响,并且菜单栏与应用程序等宽

Normal模式 Normal模式

? 将dock属性设置为false,这也是默认值, dock属性设置为false,这也是默认值, 属性设置为false 此时菜单栏可以位于应用程序的任何部 位,随滚动条滚动

使用导航容器 导航容器用于控制多个用户界面的移动、 导航容器用于控制多个用户界面的移动、 切换或导航, 切换或导航,每个用户界面都是导航容器 的一个直接子级, 的一个直接子级,直接子级必须是一个容 要么是布局容器, 器,要么是布局容器,要么是另外的导航 容器。 容器。

使用Accordion导航容器 导航容器 使用 Accordion容器定义一系列子面板, Accordion容器定义一系列子面板,一次仅 容器定义一系列子面板 显示一个面板, 显示一个面板,并且每个面板显示一个标 题按钮, 题按钮,用户可以单击按钮进行子面板切 换。

使用TabNavigator导航容器 导航容器 使用 TabNavigator容器与Accordion容器的功能 TabNavigator容器与Accordion容器的功能 容器与Accordion 相似。 相似。

使用ViewStack导航容器 导航容器 使用 ViewStack导航容器可以自定义导航规则, ViewStack导航容器可以自定义导航规则, 导航容器可以自定义导航规则 ViewStack容器不为用户定义切换当前活动 ViewStack容器不为用户定义切换当前活动 容器的内置机制,必须使用LinkBar LinkBar、 容器的内置机制,必须使用LinkBar、 TabBar、ButtonBar或ToggleButtonBar控 TabBar、ButtonBar或ToggleButtonBar控 件让用户来更改当前获得的子级

使用TextField动态设置文本框 动态设置文本框 使用

使用TextField类的方法、属性和事件, 使用TextField类的方法、属性和事件,可 TextField类的方法 以动态创建文本框、定义显示文本, 以动态创建文本框、定义显示文本,而且 还可以对文本框的变动作出响应, 还可以对文本框的变动作出响应,语法格 式: myTextField: Var myTextField: TextField = new TextField(); TextField();

Flex应用程序创建自定义组件 应用程序创建自定义组件

使用MXML文件创建自定义组件 使用MXML文件创建自定义组件 MXML

使用ActionScript类创建自定义组件 使用ActionScript类创建自定义组件 ActionScript

使用MXML文件创建自定义组件 文件创建自定义组件 使用

使用MXML文件创建自定义组件步骤: 使用MXML文件创建自定义组件步骤: MXML文件创建自定义组件步骤
打开Flex工程, 打开Flex工程,从 Flex工程 主菜单选 择”File” ”New”
”MXML Component” 命令就会弹出”New 命令就会弹出”New MXML Component” 窗口

如图: 如图:

使用ActionScript类创建自定义组件 类创建自定义组件 使用

使用ActionScript类创建自定义组件, 使用ActionScript类创建自定义组件,所 ActionScript类创建自定义组件 有的可视化组件都继承UIComponent UIComponent类 有的可视化组件都继承UIComponent类,因 此要使用ActionScript ActionScript类创建自定义组件 此要使用ActionScript类创建自定义组件 必须继承自该组件。 必须继承自该组件。

在程序中使用元数据标签的用法

使用类开发Flex组件时还可以用元数据标 使用类开发Flex组件时还可以用元数据标 Flex 元数据标签是一种特殊的标识, 签,元数据标签是一种特殊的标识,它为 编译器提供信息但并不编译为可执行代码。 编译器提供信息但并不编译为可执行代码。 元数据标签使用“[]”包围, 元数据标签使用“[]”包围,后面紧跟的 是需要进行说明的语言元素,例如: 是需要进行说明的语言元素,例如: Bindable] dp:Array; [Bindable]public var dp:Array;

元数据标签
元数据标签 [ArrayElementType] ArrayElementType] [Bindable] Bindable] [DefaultProperty] DefaultProperty] [Deprecated] [Effect] [Embed] [Event] [Exclude] 功能 定义数组中所允许的数据类型 声明一个属性可以在代码中式用数据绑定表达式 将该属性定义为组件在MXML文件中使用时的默认属 将该属性定义为组件在MXML文件中使用时的默认属 MXML 性 标识一个类或类的元素是不推荐使用的,这样编译 标识一个类或类的元素是不推荐使用的, 器能识别出并在被调用时给出一个警告信息 定义MXML的效果属性名称 定义MXML的效果属性名称 MXML 在编译时导入JPED、PNG、SVG或SWF文件, 在编译时导入JPED、PNG、SVG或SWF文件,也可以 JPED 文件 导入swc文件的图片资源。 swc文件的图片资源 导入swc文件的图片资源。该元数据标识的功能同 等于MXML中的@Embed MXML中的@Embed语法 等于MXML中的@Embed语法 定义MXML的事件属性的名称和类型 定义MXML的事件属性的名称和类型 MXML 是FlexBuilder的标签检查器忽略类元素,语法: FlexBuilder的标签检查器忽略类元素,语法: 的标签检查器忽略类元素 [Exclude(name=“label”,kind label”,kind=“property”)] [Exclude(name=“label”,kind=“property”)]

元数据标签
元数据标签 [lconFile] lconFile] 功能 为组件定义一个图标文件, 为组件定义一个图标文件,是组件在 FlexBuilder的组件视图和大纲视图中以该图标 FlexBuilder的组件视图和大纲视图中以该图标 显示 定义一个属性的列表, 定义一个属性的列表,这样用户就可以在 FlexBuilder中使用属性提示,并且也可以在标 FlexBuilder中使用属性提示, 中使用属性提示 签检查器中使用, 签检查器中使用,同样也定义了属性的所有可 用值 指定IDeferredInstance类型的属性所允许的数 指定IDeferredInstance类型的属性所允许的数 IDeferredInstance 据类型 将actionscript对象映射为java对象 actionscript对象映射为java对象 对象映射为java 定义组件的属性用做样式属性 当一个ActionScript对象被映射到java对象后, 当一个ActionScript对象被映射到java对象后, ActionScript对象被映射到java对象后 被该元数据标识的属性会从发送到服务器端的 数据中忽略掉

[Inspectable] Inspectable]

[InstanceType] InstanceType]

[NonCommittingChangeEvent] 定义事件为一个过渡性质的触发器 NonCommittingChangeEvent] [RemoteClass] RemoteClass] [Style] [Transient]

使用Form容器创建表单布局 使用Form容器创建表单布局 Form

Form容器 容器

可以布局表单控件, 可以布局表单控件,还可以标记哪一个空 间是可选的,而哪一个是必须填写, 间是可选的,而哪一个是必须填写,它还 可以处理错误消息、执行数据检查和验证。 可以处理错误消息、执行数据检查和验证。

Form容器 容器

一个典型的Form容器包含下面的几部分: 一个典型的Form容器包含下面的几部分: Form容器包含下面的几部分 Form容器组件 容器组件, Form容器组件,用于布局 FormHeading组件 嵌在Form 组件, Form组件内 FormHeading组件,嵌在Form组件内 FormItem容器组件 嵌在Form 容器组件, Form组件内 FormItem容器组件,嵌在Form组件内 Form中的控件 中的控件, ComboBox、TextInput等 Form中的控件,如ComboBox、TextInput等, 嵌在FormItem容器组件内, FormItem容器组件内 嵌在FormItem容器组件内,无须为每个控件定 义标签,因为使用FormItem容器组件的label FormItem容器组件的 义标签,因为使用FormItem容器组件的label 属性可以实现。 属性可以实现。 可以在Form Form容器中嵌入其他组件 可以在Form容器中嵌入其他组件

Form容器组件 容器组件

该容器组件是表单中其他组件的容器, 该容器组件是表单中其他组件的容器,用 于定义表单的幅画大小和布局其中的组件, 于定义表单的幅画大小和布局其中的组件, 可以定义衬距、组件间间隙, 可以定义衬距、组件间间隙,还可以定义 标签大小。一个Form Form容器可以包含多个 标签大小。一个Form容器可以包含多个 FormHeading组件及FormItem组件 组件及FormItem FormHeading组件及FormItem组件

FormHeading组件和 组件和FormItem组件 组件和 组件

嵌在Form容器内,用做这个表单的标题。 嵌在Form容器内,用做这个表单的标题。 Form容器内 嵌在Form容器内,FormItem是一个容器组 Form容器内 嵌在Form容器内,FormItem是一个容器组 包含一个或多个控件,一个标签文本。 件,包含一个或多个控件,一个标签文本。

定义默认的提交按钮

使用defaultButton属性可以定义一个默认 使用defaultButton属性可以定义一个默认 defaultButton 的按钮控件, defaultButton属性的值绑 的按钮控件, defaultButton属性的值绑 定于按钮控件的ID 定于按钮控件的ID

指定必须填写字段

使用FormItem容器的required属性可以指 使用FormItem容器的required属性可以指 FormItem容器的required 定其中的控件是否必须填写, 定其中的控件是否必须填写,该属性设为 true, true,那么就会标签文本和控件之间显 示”*”,表示该字段必须填写

习 题

实现使用Form容器组件的注册功 实现使用Form容器组件的注册功 Form 能?

理解每个组件的常用属性, 理解每个组件的常用属性,并实 现每个组件实例。 现每个组件实例。


相关文章:
flex组件详细介绍
Flex入门详细介绍 138页 免费 flex全屏组件 5页 免费 Flex基本组件 5页 2财富值 flex 自定义组件 4页 2财富值 第5章 Flex组件简介 77页 免费 ...
Flex各组件功能展示
Flex组件属性大全 5页 免费 第5章 Flex组件简介 77页 免费 Flex报表技术 43页...borderStyle是组件的样式之一,表示边框样式,默认:none,表示无边框。solid为实心...
Flex简介
第5章 Flex组件简介 77页 免费 Flex I O 简介 8页 免费 Flex技术简介 34页...flex 百科名片 flex 通常是指 Adobe Flex, 是最初由 Macromedia 公司在 2004 ...
附目录flex组件样式属性说明
第5章 Flex组件简介 77页 免费 flex各组件对应的样式属... 11页 免费 Flex...12 深圳太极软件有限公司 1 Application 组件样式属性 backgroundImage 背景图 ...
第五章 电气控制系统
Display Computer 显示计算机 3 Digital Display Terminal 数字显示终端 5 Flex I...the PLC.本手 册的以下章节描述了安装在机架内部或者与机架相连的硬件组件。I...
flex组件
flex组件_计算机软件及应用_IT/计算机_专业资料。此文档中共有70多个flex组件,主要...默认值为 0.5. modalTransparencyBlur:模式窗口打开时, 应用于应用程序的模糊...
flex包含一个基于组件的开发模型
第5章 Flex组件简介 77页 免费 Flex基础培训-4-[自定义... 22页 免费f...、flex 包含一个基于组件的开发模型,你只需要按需求继承现有的组件并扩展 相关...
重写flex组件
flex 自定义组件 4页 2财富值 第5章 Flex组件简介 77页 免费 第12章 Flex...四、AS 方式重写组件常规步骤1、如果有必要,为组件创建所有基于标记(tag-based)...
走近Flex组件系列
走近Flex组件系列_IT/计算机_专业资料。这个很好介绍 更多组件组件系列(一: 走近 Flex 组件系列 一):沿着 ActionScript 我们一路走近 Flex 组件世界提示:阅读本系列...
Flex组件生命周期
Flex组件生命周期_计算机软件及应用_IT/计算机_专业资料...(ActionScript.3.0 编程精髓)第二十 三章的 Event...flex全屏组件 5页 免费 Flex基本组件 5页 1下载券...
更多相关标签:
flex动态添加组件 | flex文件上传组件 | flex 组件 | flex图表组件 | flex 自定义组件 | flex组件库 | flex组件生命周期 | flex 组件置顶 |