资源与教程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(指由 标签创建的组) 和 PopupButton 控件(常用于打开List控件或Menu控件签。)。

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

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

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

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

　　1)，直接在MXML标签中加入数据，将 Array 或 Collection 定义为取得数据提供程序的控件的子标签。该方法具有实施快速的优点, 适合与静态数据一起使用及用于原型设计。

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

　　[Bindable]

　　private var subscriptions:ArrayCollection =

　　new ArrayCollection

　　(

　　[

　　{data:0, label:"Print"},

　　{data:1, label:"Website"},

　　]

　　);

　　]]>

　　id="userSubscriptions" rowCount="3"

　　allowMultipleSelection="true" width="100%"

　　dataProvider="{subscriptions}"

　　/>

　　3， 使用REPEATER: 是非可视控件，类似于编程语言里的For循环，可在执行期复制其它组件。的卷标要自己输入，而dataProvider可在区段之中，以[Bindable]的Metadata定义之数组作连结。REPEATER还可嵌套使用。

　　[Bindable]

　　public var dp:Array=[1,2,3,4];

　　]]>

　　4, 加入数据验证:数据模型支持自动数据验证，这就意味着你可以很方便地使用Flex验证器。as3.0验证的类包为mx.Validators.包中有一个基类Validator,其他的类都为其子类:

　　1)，用标签实现验证: //绑定验证对象:source:表示验证的对象，property:表示验证对象的属性

　　2)，用AS编程实现验证

　　import mx.validators.PhoneNumberValidator;

　　// 创建验证器

　　private var v:PhoneNumberValidator = new PhoneNumberValidator();

　　private function createValidator():void {

　　// 设置验证器

　　v.source = phoneInput;

　　v.property = "text";

　　}

　　]]>

　　还可以加入按钮触发器，并修改默认提示错误 //trigger:表示触发验证事件的对象

　　//triggerEvent:表示对象触发验证事件的时机(如click,mouseOver等)

　　//requiredFieldError属性 表示必填项没填入数据的时的提示错误信息

　　//wrongLengthError:表示输入的数据阿拉伯数字长度小于10时提示的错误信息

　　//invalidCharError:表示输入数据不是阿拉伯数字时提示的错误信息

　　trigger="{btn}" triggerEvent="click"

　　requiredFieldError="此项为必填" invalidCharError="请输入阿拉伯数字" wrongLengthError="请至少输入请输入10个阿拉伯数字" />

　　3)，高级用法: 使用正则表达式创建自定义验证器

　　想要了解更多有关flex的知识可以查询：天地会。