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%">
                   
                    <mx:Array>
                        <mx:Object data="0" label="Zero" />
                        <mx:Object data="1" label="One" />
                    </mx:Array>
                </mx:ComboBox>
textstyle
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%"
                    dataProvider="{subscriptions}"
                />

3， 使用REPEATER: 是非可视控件，类似于编程语言里的For循环，可在执行期复制其它组件。<mx:Repeater>的卷标要自己输入，而dataProvider可在<mx:Script>区段之中，以[Bindable]的Metadata定义之数组作连结。REPEATER还可嵌套使用。
  <mx:Script>
    <![CDATA[
      [Bindable]
      public var dp:Array=[1,2,3,4];
    ]]>
  </mx:Script>
  <mx:ArrayCollection id="myAC" source="{dp}"/>
   
  <mx:Repeater id="r" dataProvider="{myAC}">
    <mx:Button id="repbutton" label="button {r.currentItem}"/>
  </mx:Repeater>

4, 加入数据验证:数据模型支持自动数据验证，这就意味着你可以很方便地使用Flex验证器。as3.0验证的类包为mx.Validators.包中有一个基类Validator,其他的类都为其子类:
1)，用标签实现验证: //绑定验证对象:source:表示验证的对象，property:表示验证对象的属性
 <mx:PhoneNumberValidator id="pnV" source="{phoneInput}" property="text"/>
 <mx:TextInput id="phoneInput"/>
2)，用AS编程实现验证 <mx:Script>
 <![CDATA[
 import mx.validators.PhoneNumberValidator;
 // 创建验证器
 private var v:PhoneNumberValidator = new PhoneNumberValidator();
 private function createValidator():void {
 // 设置验证器
 v.source = phoneInput;
 v.property = "text";
 }
 ]]>
 </mx:Script> 

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。