软件工程FlexBuilder教程.docx

1、软件工程FlexBuilder教程【软件工程】FlexBuilder教程一，概述Flex语言包含了一个丰富的用户界面组件库，MXML一种基于XML的标记语言和ActionScript基于ECMA 262的、强类型面向对象编程语言。MXML用于排布用户界面和处理应用中其他方面的问题，而ActionScript用来处理用户交互逻辑。由于Flash平台的普及， Flex使开发者能够开发广泛的应用程序。开发者能够使用工业标准如XML，CSS和SVC和他们所熟悉的模式和范例来创建应用。Flex的分离协作方式和Flex公用组件模型也使得开发者和界面设计者能更好的进行协作，在可靠的、易于爱护的架构上生产出在

2、用户体验方面有突破性的产品。 Flex Builder(FB)之于MXML就如DREAWEAVER之于HTML。FB实现了代码与界面分开，FLEX的类程序扩展名为*.as，语法与java/c+专门象，FLEX程序文件扩展名为.mxml，事实上确实是拥有专门多专门元素的XML文件。 二，使用MXML组件构建用户界面MXML 语言支持两种用户界面组件类型: 控件和容器。容器是包含控件和其他容器的屏幕的矩形区域。控件是表单元素, 如按钮、文本字段和列表框。 能够使用Flex Component ExplorerFlex MXML组件扫瞄工具来查看所有控件的代码和样例。 1，加入常用可视控件: 使用可

3、视控件组织界面，能够定义组件属性供外部访问 A, 基于文本的控件(Text controls): Label(单行文本显示)、Text(多行文本显示)、TextInput(单行文本显示与输入)、 TextArea(多行行文本显示与输入)和 RichTextEditor (富文本显示与输入)控件。用于显示文本和/或接收来自用户的文本输入，都有一个 text 属性用于设置要显示的文本。使用 RichTextEditor 控件能够输入文本、编辑文本和设置文本格式。用户通过使用位于 RichTextEditor 控件底部的子控件, 应用文本格式和 URL 链接。 B, 基于按钮的控件组件(Button

4、 系列,Form controls):Button(激活时会发出click和buttonDown事件)、LinkButton(用于打开URL)、CheckBox(标签会被自动裁剪以适合控件边界。)、RadioButton(指由 标签创建的组) 和 PopupButton 控件(常用于打开List控件或Menu控件签。)。 2，加入基于列表的控件，并猎取数据 基于列表的控件: 是在其继承层次结构内的某些点上扩展 ListBase 类的那些控件。它们包括 ComboBox、List、HorizontalList、DataGrid、Tile、Menu 和 Tree 控件。都可从某数据提供程序的数据获

5、得数据列表。 另: 许多标准控件 (包括 ColorPicker 和 MenuBar 控件) 也是数据提供程序控件。 能够使用两种方法设置组件的数据提供程序: 1)，直截了当在MXML标签中加入数据，将 Array 或 Collection 定义为取得数据提供程序的控件的子标签。该方法具有实施快速的优点, 适合与静态数据一起使用及用于原型设计。 2)，使用数据绑定: 使用Bindable元数据标签(属性非默认绑定,必须明确的声明被绑定的属性)，将控件绑定到使用 ActionScript 定义的现有 Array 或 Collection。 3， 使用REPEATER: 是非可视控件，类似于编程语

6、言里的For循环，可在执行期复制其它组件。的卷标要自己输入，而dataProvider可在区段之中，以Bindable的Metadata定义之数组作连结。REPEATER还可嵌套使用。 4, 加入数据验证:数据模型支持自动数据验证，这就意味着你能够专门方便地使用Flex验证器。as3.0验证的类包为mx.Validators.包中有一个基类Validator,其他的类都为其子类: 1)，用标签实现验证: /绑定验证对象:source:表示验证的对象，property:表示验证对象的属性 2)，用AS编程实现验证 还能够加入按钮触发器，并修改默认提示错误 /trigger:表示触发验证事件的对象

7、/triggerEvent:表示对象触发验证事件的时机(如click,mouseOver等)/requiredFieldError属性 表示必填项没填入数据的时的提示错误信息/wrongLengthError:表示输入的数据阿拉伯数字长度小于10时提示的错误信息/invalidCharError:表示输入数据不是阿拉伯数字时提示的错误信息 3)，高级用法: 使用正那么表达式创建自定义验证器 5， 加入资源(图片,音频,视频,程序):运行时外载和编译时直截了当内嵌两种方式，外载方式要多花一段载入时刻，但使用简单；内嵌方式可直截了当调用资源，但加重了程序的负担(体积变大，且图片编辑后需要重新编译)

8、 1)，Image(图画)控件: 可外载或内嵌多种富媒体资源: JPEG、GIF、PNG位图、SVG矢量图(只能内嵌) , SWF动画(非Flex的SWF应用程序。),SWF库按钮(Button)，SWF库动画(MovieClip)， /外载一个富媒体，可使用绝对或者相对路径。但加入SWF文件时，可用use-network参数指定其使用网络或者本地文件二者之一。/简单地内嵌一个富媒体.png,.jpg,.gif,.swf(可将嵌入的SWF文件的实例当作 MovieClip.MovieClipAsset 类的实例处理,不能直截了当访问嵌入的SWF文件的属性或方法。但可用 LocalConnect

9、ion以承诺SWF之间进行通信。)，.SVG(可将嵌入的SVG文件的实例当作Sprite.SpriteAsset类的实例处理。)/在脚本中定义富媒体对象，然后在MXML中能够多次嵌入 /在脚本中定义图片的scale-9像框缩放功能就能够保持边框的清晰,(旋转嵌入的scale-9 图像的实例会关闭该图像的scale-9功能。)。 /嵌入 SWF 库资源 2) 设置翻转的图片:使用 CSS为外观外载/内嵌翻转的图像 能够定义一个现有的CSS类型选择器为该类型的所有组件设置外观。还能够进一步创建自定义CSS 类。 Button upSkin: Embed(assets/box_closed.png)

10、; overSkin: Embed(assets/box.png); downSkin: Embed(assets/box_new.png); 3), SWFLoader控件: 通常用来加入Flex应用程序(能够使用AS与其通信)，因此也能用于加入Image控件所能加入的富媒体资源。 /外载入SWF程序/内嵌入SWF程序/还能够在FDS环境下加入MXML文件，要以buttonicon.mxml.swf形式加入，以提示FDS编译该文件。 4), 加入MP3音频: 您能够在 Flex 应用程序中通过使用Embed元数据标签嵌入MP3文件并播放它。注意音频文件的体积要优化。 5), 加入字体: 您期

11、望在 Flex 应用程序中嵌入一种字体并将它用作基于文本的组件的样式。 下面的例如创建引用嵌入的字体的 font-family 名称的一个类选择器。 接着它会创建一个 Text 控件并将其样式设置为该类选择器。 提示: 您在嵌入字体以节约文件大小时仅能够从字体添加某些字符, 方法是指定您的 font-face 声明的 unicode-range 属性。 font-face font-family: Copacetix; src: url(assets/copacetix.ttf); unicode-range: U+0020-U+0040, /* Punctuation, Numbers */

12、 U+0041-U+005A, /* Upper-Case A-Z */ U+005B-U+0060, /* Punctuation and Symbols */ U+0061-U+007A, /* Lower-Case a-z */ U+007B-U+007E; /* Punctuation and Symbols */ .MyTextStyle font-family: Copacetix; font-size: 24pt; 三，数据绑定以MXML标记来描述UI，数据绑定(Data binding)来连接数据，如此就真正实现了UI和程序逻辑的分离。Data binding能够一绑多或者多绑

13、一。 1， 在MXML中使用大括号语句: 格式为:源对象.属性。可直截了当传送给目标对象；高级用法是在中包含AS表达式、AS函数或者E4X表达式 2， 在MXML中使用标签:这是语句的替代用法，格式为:；高级用法是在标签中包含AS表达式或者E4X表达式 /在Model数据中使用语句来绑定数据 input1.text /用标签来绑定数据 3， 使用AS类来绑定:使用mx.binding.utils.BindingUtils的bindProperty()或者bindSetter() 方法 四，界面布局和导航容器定义了Flash Player的绘图表面的一个矩形区域。子容器包括控件和容器。Conta

14、iner 类是所有 Flex 容器类的差不多类。扩展 Container 类的容器添加它们自己的功能以进行子组件布局。Application 容器是的Flex应用程序的唯独根部容器, 代表整个 Flash Player 绘图表面。 1，布局容器: 使用布局容器可进行用户界面布局。 A, 面板(Panel)容器 显示一个标题栏、一个标题、一个边框及其子级。默认情形下, Panel 容器会对子组件进行垂直布局, 同时能够通过将布局属性设置为 absolute 或 horizontal来覆盖此设置。 B, HDividedBox容器 对子组件进行水平布局, 除了在子级之间插入一个可调整的分割线之外, 它与 HBox 容器专门相似。 VDividedBox 容器对子组件进行垂直布局, 而且也在子级之间插入一个可调整的分割线。 C, 平铺(Tile)容器 以多行或多列的形式排列其子级。 D, 表单(Form)容器 以标准的表单格式排列其子级。 E, ApplicationControlBar 容器 容纳提供全局导航和应用程序命令的组件, 并能够停靠在 Application 容器的上边缘。 F, ControlBar容器将控件置于 Panel 或 TitleWindow 容器的下边缘。