Flex Builder教程

Flex Builder教程

一，概述

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

Flex Builder(FB)之于MXML就如DREAWEAVER之于HTML。FB实现了代码与界面分开，FLEX的类程序扩展名为*.as，语法与java/c++很象，FLEX程序文件扩展名为.mxml，其实就是拥有很多特殊元素的XML文件。

二，使用MXML组件构建用户界面

MXML 语言支持两种用户界面组件类型: 控件和容器。容器是包含控件和其他容器的屏幕的矩形区域。控件是表单元素,如按钮、文本字段和列表框。

可以使用Flex Component ExplorerFlex MXML组件浏览工具来查看所有控件的代码和样例。

1，加入常用可视控件: 使用可视控件组织界面，可以定义组件属性供外部访问

A,基于文本的控件(Text controls): Label(单行文本显示)、Text(多行文本显示)、TextInput(单行文本显示与输入)、 TextArea(多行行文本显示与输入)和 RichTextEditor (富文本显示与输入)控件。用于显示文本和/或接收来自用户的文本输入，都有一个 text 属性用于设置要显示的文本。使用 RichTextEditor 控件可以输入文本、编辑文本和设置文本格式。用户通过使用位于 RichTextEditor 控件底部的子控件,应用文本格式和 URL 链接。

B,基于按钮的控件组件(Button 系列,Form controls):Button(激活时会发出click和buttonDown事件)、LinkButton(用于打开URL)、CheckBox(标签会被自动裁剪以适合控件边界。)、RadioButton(指由 <mx:RadioButtonGroup> 标签创建的组) 和 PopupButton 控件(常用于打开List控件或Menu控件签。)。

2，加入基于列表的控件，并获取数据

基于列表的控件: 是在其继承层次结构内的某些点上扩展 ListBase 类的那些控件。它们包括 ComboBox、List、HorizontalList、DataGrid、Tile、Menu 和 Tree 控件。都可从某数据提供程序的数据获得数据列表。

另: 许多标准控件 (包括 ColorPicker 和 MenuBar 控件) 也是数据提供程序控件。

可以使用两种方法设置组件的数据提供程序:

1)，直接在MXML标签中加入数据，将 Array 或 Collection 定义为取得数据提供程序的控件的子标签。该方法具有实施快速的优点,适合与静态数据一起使用及用于原型设计。?????????????????<mx:ComboBox id="userRating" width="100%">
????????????????????<!-- An inline data provider -->
????????????????????<mx:Array>
????????????????????????<mx:Object data="0" label="Zero" />
????????????????????????<mx:Object data="1" label="One" />
????????????????????</mx:Array>
????????????????</mx:ComboBox>

2)，使用数据绑定: 使用[Bindable]元数据标签(属性非默认绑定,必须明确的声明被绑定的属性)，将控件绑定到使用 ActionScript 定义的现有 Array 或 Collection。

????<mx:Script>
????????<![CDATA[
????????????[Bindable]
????????????private var subscriptions:ArrayCollection =
????????????????new ArrayCollection
????????????????(
????????????????????[
????????????????????????{data:0,label:"Print"},
????????????????????????{data:1,label:"Website"},
????????????????????]
????????????????);
????????
????????]]>
????</mx:Script>
????????????<mx:FormItem label="Subscriptions:" width="100%">
????????????????<mx:List
????????????????????id="userSubscriptions" rowCount="3"
????????????????????allowMultipleSelection="true" width="100%"
???????