【软件工程】Flex_Builder教程.doc

《【软件工程】Flex_Builder教程.doc》由会员分享，可在线阅读，更多相关《【软件工程】Flex_Builder教程.doc（27页珍藏版）》请在三一办公上搜索。

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

2、lex 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 系列,Form controls):B

4、utton(激活时会发出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: 是非可视控件，类似于编程语言里的For循环，可在执行期复制其它组件。的

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

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

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

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

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

11、x 应用程序中嵌入一种字体并将它用作基于文本的组件的样式。 下面的示例创建引用嵌入的字体的 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 */ U+004

12、1-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可以一绑多或者多绑一。 1，

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

14、有 Flex 容器类的基本类。扩展 Container 类的容器添加它们自己的功能以进行子组件布局。Application 容器是的Flex应用程序的唯一根部容器, 代表整个 Flash Player 绘图表面。 1，布局容器: 使用布局容器可进行用户界面布局。 A, 面板(Panel)容器 显示一个标题栏、一个标题、一个边框及其子级。默认情况下, Panel 容器会对子组件进行垂直布局, 并且可以通过将布局属性设置为 absolute 或 horizontal来覆盖此设置。 B, HDividedBox容器 对子组件进行水平布局, 除了在子级之间插入一个可调整的分割线之外, 它与 HBox

15、容器很相似。 VDividedBox 容器对子组件进行垂直布局, 而且也在子级之间插入一个可调整的分割线。 C, 平铺(Tile)容器 以多行或多列的形式排列其子级。 D, 表单(Form)容器 以标准的表单格式排列其子级。 E, ApplicationControlBar 容器 容纳提供全局导航和应用程序命令的组件, 并可以停靠在 Application 容器的上边缘。 F, ControlBar容器将控件置于 Panel 或 TitleWindow 容器的下边缘。 G, 另外可使用Spacer控件来辅助布局。Spacer控件并非容器，而是基于百分比的可用于挤占留空以准确定位的一个不可见控件

16、。 2, 导航容器: 使用导航容器可以控制其他容器的多个子级之间的用户移动或导航。导航器容器不能直接嵌套控件，只能嵌套容器。 A，手风琴(Accordion)容器 定义一个子面板序列, 但一次仅显示一个面板。 若要导航容器, 用户会单击与他们需要访问的子面板相对应的导航按钮。 使用 Accordion 容器, 用户可以按任何顺序访问子面板以在表单中前后移动。 B, TabNavigator容器 创建和管理一组选项卡, 使用它们可在其子级中间导航。 TabNavigator 容器的子级是其他容器。 TabNavigator 容器为每个子级创建一个选项卡。 当用户选中某个选项卡时, TabNavi

17、gator 容器会显示相关联的子级。 C, ViewStack容器 由彼此堆叠在一起的子容器的一个集合组成, 一次只有一个容器是可见的或活动的。 ViewStack 容器不为用户定义切换当前活动容器的内置机制；您必须使用 LinkBar、TabBar、ButtonBar 或 ToggleButtonBar 控件或自己在 ActionScript 中构建逻辑让用户来更改当前活动的子级。 3, 使用容器Containers进行定位布局 定位方式有三种: A, 自动定位:多数Flex容器使用默认预定义的规则来自动定位你在其中定义的所有的子组件。 B, 使用绝对定位: 用于使控件重叠 C, 使用基于约

18、束的布局: 可以锚定容器的边缘或者中心点，然后控件就会随着容器的伸缩而伸缩 Canvas容器，和layout属性为absolute的Application或Panel容器才能进行绝对定位，或约束布局。 4，使用视图状态(或ViewStack导航容器)进行用户界面切换导航 可以为一个Flex程序或组件定义几种视图状态，然后通过改变(切换)视图状态而改变用户界面。(ViewStack导航容器可实现同样效果) 1)，设计基础状态(Base state,Start,currentState=):就是在默认状态下设计用户界面。 2)，设计视图状态(currentState=SomeState):在设计模

19、式中，在状态查看（Window States）上点击新状态/New State 按钮。然后在此状态下编辑的界面即为该视图的对应界面。 3)，创建用户行为切换控件: 定义用户变换状态的点击事件处理器。一般是使用一个LinkButtun，激活currentState=SomeState以切换到某界面，激活currentState=以回到默认界面。 五，使用CSS格式化组件1. 文字横竖排列Aligning Text Vertically & Horizontally 样式对于定义Flex应用程序的外观和感觉 (外观) 很有用。您可以使用它们来更改单一组件的外观, 或在所有组件上应用它们。 在 Fl

20、ex 中应用样式有许多方法。 某些样式提供更多粒度控制并能以编程方式被执行。其他样式不像那么灵活, 但可能需要较少的计算。在 Flex 中, 可以使用以下几种方法将样式应用到控件: 1, 使用本地样式定义 2, 使用外部样式表 3, 使用线上样式 4, 使用 setStyle() 方法 六，使用特效丰富用户体验1, 添加效果 1), 效果是在较短时间上发生的对组件的更改。 效果的例子有: 淡化组件、调整组件大小和移动组件。 一种效果与一个触发器相结合才能形成一个行为, 如组件上的鼠标单击、组件获得焦点或组件变成可见的。 在 MXML 中, 您将效果应用为控件或容器的属性。 Adobe Flex

21、 提供具有默认属性的一组内置效果。 作为对某些用户或编程操作的响应, 行为使您可以将动画、动作和声音添加到应用程序中。 例如, 您可使用行为在获得焦点时弹出对话框, 或是在用户输入无效的值时发出声音。 Flex 触发器属性是作为层叠样式表 (CSS) 样式被实施的。 在 Adobe Flex 2 语言参考中, 触发器被列出在标题“效果”的下面。 若要创建行为, 您定义一个具有唯一 ID 的特定效果并将它绑定到触发器。 例如, 下面的代码创建两个缩放效果: 一个用于轻微缩小组件, 一个用于将组件还原至其原始大小。 这些效果通过使用它们的唯一 ID 被分配到“按钮”组件上的 mouseDownEf

22、fect 和 mouseUpEffect 触发器上。 注意如何将 Panel 容器的 autoLayout 属性设置为 false。这样是为了阻止在按钮改变大小时面板改变大小。 2)，使用效果方法和事件 您可以调用效果上的方法来改变它们播放的方式。 例如, 可以通过调用效果的 pause() 方法来暂停效果, 并通过使用其 resume() 方法来继续该效果。可以通过调用效果的 end() 方法来结束该效果。 当效果开始和效果结束时, 它也会发出 startEffect 和 endEffect 事件。 您可以监听这些事件并响应您的事件状态中的更改。 下面的示例使用“移动”效果的方法和事件来创建

23、一个简单的游戏。 该游戏的目标是使直升飞机尽可能接近靶而又不撞到它。 靠得越近, 赢得的点数越多。 3, 使用过渡增加用户界面切换效果 过渡(transition,变换)是定义在视图状态切换之间播放的一种或多种视觉效果。过渡不会替换效果；即, 您仍可以将单一效果应用到一个组件, 并通过使用一个效果触发器或者 playEffect()方法来调用该效果。创建过渡样例如下: /fromState 属性指定当应用该过渡时您要更改的视图状态/toState 属性指定您要更改为的视图状态/effect 属性是对要播放的 Effect 对象的引用/ 和 标签分别引发并行或按顺序播放的效果/效果标签4, 为用

24、户提供工具提示 Adobe Flex ToolTip 使您能够为您的用户提供有帮助的信息。当用户在图形组件上移动鼠标指针时, 会弹出包含文本信息的工具提示。您可以使用工具提示来指导用户完成使用应用程序或自定义它们来提供其他功能。 扩展 UIComponent 类 (该类实现 IToolTipManagerClient 界面) 的每个可视 Flex 组件都支持 toolTip 属性。您将 toolTip 属性的值设置为一个文本字符串, 并且, 当鼠标指针悬停在该组件上时, 会显示该文本字符串。 尽管长消息很难读取, 但对工具提示文本的大小不存在任何限制。当工具提示文本达到工具提示框的宽度时, 文

25、本会自动换至下一行。可以在工具提示文本中添加换行符。在 ActionScript 中, 您使用 n 转义的新行字符。在 MXML 标签中, 您使用 XML 实体。 可以通过使用层叠样式表 (CSS) 语法或 mx.styles.StyleManager 类更改工具提示文本和工具提示框的外观。对工具提示样式的更改适用于当前应用程序中的所有工具提示。 5, 控制光标 使用Flex光标管理器可以控制 Flex 应用程序中的光标图像。 例如, 如果应用程序执行的处理需要用户等待, 直到处理完成为止, 则可以将光标更改为某个自定义的光标图像, 比如沙漏, 以使它反映该等待期。 您还可以更改光标以向用户提

26、供反馈, 指示用户可以执行的操作。 例如, 您可以使用一个光标图像来指示用户输入被启用, 而使用另一个光标图像来指示输入被禁用。 CursorManager 类控制一个光标优先顺序列表, 在其中具有最高优先级的光标当前是可见的。 如果光标列表包含具有相同优先级的多个光标, 则光标管理器会显示最近创建的光标。 1), 使用默认的忙光标 Flex 定义了一个默认的忙光标, 可用来指示应用程序正在处理, 且在应用程序对用户输入作出响应之前, 用户应等待, 直到处理完成。 默认的忙光标是一个动画时钟。 可以使用以下几种方式来控制忙光标: 可以使用 CursorManager 方法来设置和删除忙光标。

27、可以使用 SWFLoader、WebService、HttpService 和 RemoteObject 类的 showBusyCursor 属性自动显示忙光标。 下面的示例使用 CursorManager 类的静态 setBusyCursor() 和 removeBusyCursor() 方法, 根据切换按钮的状态显示和隐藏默认的 Flex 忙光标。 2), 使用自定义光标 可以使用 JPEG、GIF、PNG 或 SVG 图像, Sprite 对象或 SWF 文件作为光标图像。 若要使用光标管理器, 您将 mx.managers.CursorManager 类导入到应用程序中, 然后引用其属

28、性和方法。 下面的示例嵌入一个在 Adobe Flash 中创建的沙漏的 SWF 动画, 并将它用作一个自定义光标。 在该示例中, 创建自定义光标的方法是, 调用 CursorManager 类的 setCursor() 静态方法, 然后将它传送给对您希望用作自定义光标的嵌入资源的类的引用。 可以通过调用 CursorManager 类的 removeCursor() 静态方法并将它传送给 CursorManager 类的 currentCursorID 静态属性来删除活动的自定义光标。 七，使用ActionScript处理事件1, 事件模型与机制 Flex的事件模型基于DOM3事件模型。通过

29、创建注册事件监听器(事件处理程序,事件处理器,是函数方法用于响应指定的事件)，可以在组件的实例发出某个事件(如用户何时与界面组件交互, 以及在组件的外观或生命周期中何时发生重要的变化, 如组件的创建或破坏或调整其大小等)时, 对象事件自动派发此事件到所有注册过的监听器。 1)，事件流:当一个事件被派发出来时, 事件对象从根节点开始自上而下开始扫描display list(如), 一直到目标对象, 检查每个节点是否有相应的监听器。目标对象指的是display list中产生事件的对象. 比如:。如果此时 resize了VBox, 则会从根(Application)开始, 下来检查Panel, HBox, 直到目标对象-产生resize事件的VBox为止. 2), 事件的派发 Flex中可以通过dispatchEvent()方法手工派发事件, 所有UIComponent的子类都可以调用此方法. 语法: /参数event_type是Event对象的type属性/函数的返回值总是True.objectInstance.dispatchEvent(new Event(event_type):Boolean可以使用此方法派发任意事件, 而不仅仅是用户自定义事件, 比如: 可以派