Flex Builder教程(1)

一，概述 二，使用MXML组件构建用户界面 三，数据绑定 四，界面布局和导航 五，使用CSS格式化组件 六，使用特效丰富用户体验 七，使用ActionScript处理事件 八，数据服务器访问概述 九，HTTPService 十，WebService 十一，Flex Data Services 十二，其它RemoteObject技术 十三, 创建自定义组件 参见

一，概述

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%"
                    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>  

 <mx:TextInput id="phoneInput" creationComplete="createValidator();"/>

还可以加入按钮触发器，并修改默认提示错误

//trigger:表示触发验证事件的对象
//triggerEvent:表示对象触发验证事件的时机(如click,mouseOver等)
//requiredFieldError属性 表示必填项没填入数据的时的提示错误信息
//wrongLengthError:表示输入的数据阿拉伯数字长度小于10时提示的错误信息
//invalidCharError:表示输入数据不是阿拉伯数字时提示的错误信息 
 <mx:PhoneNumberValidator id="pnV" source="{phoneInput}" property="text" 
 trigger="{btn}" triggerEvent="click" 
 requiredFieldError="此项为必填" invalidCharError="请输入阿拉伯数字" wrongLengthError="请至少输入请输入10个阿拉伯数字" />  

 <mx:TextInput id="phoneInput"/> 
 <mx:Button label="Button" id="btn"/>

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

5， 加入资源(图片,音频,视频,程序):运行时外载和编译时直接内嵌两种方式，外载方式要多花一段载入时间，但使用简单；内嵌方式可直接调用资源，但加重了程序的负担(体积变大，且图片编辑后需要重新编译)

1)，Image(图画)控件: 可外载或内嵌多种富媒体资源: JPEG、GIF、PNG位图、SVG矢量图(只能内嵌) , SWF动画(非Flex的SWF应用程序。),SWF库按钮(Button)，SWF库动画(MovieClip)，

//外载一个富媒体，可使用绝对或者相对路径。
但加入SWF文件时，可用use-network参数指定其使用网络或者本地文件二者之一。
<mx:Image id="myLogo0" source="assets/logo.png"/>

//简单地内嵌一个富媒体.png,.jpg,.gif,
.swf(可将嵌入的SWF文件的实例当作 MovieClip.MovieClipAsset 类的实例处理,
不能直接访问嵌入的SWF文件的属性或方法。
但可用 LocalConnection以允许SWF之间进行通信。)，
.SVG(可将嵌入的SVG文件的实例当作Sprite.SpriteAsset类的实例处理。)
<mx:Image id="myLogo" source="@Embed('assets/logo.png')"/>

//在脚本中定义富媒体对象，然后在MXML中可以多次嵌入
    <mx:Script>
        <![CDATA[
            [Embed(source="assets/logo.png")]
            [Bindable]

            public var Logo:Class;            
        ]]>
    </mx:Script>

    <mx:Image id="myLogo" source="{Logo}"/>
    <mx:Image id="myLogo2" source="{Logo}"/>

//在脚本中定义图片的scale-9像框缩放功能就可以保持边框的清晰,
(旋转嵌入的scale-9 图像的实例会关闭该图像的scale-9功能。)。
<mx:Script>
        <![CDATA[
            [Embed(
                source="assets/fancy_border.png", 
                scaleGridTop="55", scaleGridBottom="137", 
                scaleGridLeft="57", scaleGridRight="266"
            )]
            
            [Bindable]
            public var FancyBorderImage:Class;
        ]]>
    </mx:Script>

    <mx:Image source="{FancyBorderImage}" width="146" height="82"/>

//嵌入 SWF 库资源
  
    <mx:Script>
    <![CDATA[
            [Embed(source="assets/library.swf", symbol="BadApple")]

            [Bindable]
            public var BadApple:Class;
        ]]>
    </mx:Script>

    <mx:Image id="badApple" source="{BadApple}" width="150" 

height="151.8"/>

2) 设置翻转的图片:使用 CSS为外观外载/内嵌翻转的图像

可以定义一个现有的CSS类型选择器为该类型的所有组件设置外观。还可以进一步创建自定义CSS 类。

<mx:Style>
        Button 
        {
            upSkin: Embed("assets/box_closed.png");
            overSkin: Embed("assets/box.png");
            downSkin: Embed("assets/box_new.png");
        }
    </mx:Style>
  
    <mx:Button/>

3), SWFLoader控件: 通常用来加入Flex应用程序(可以使用AS与其通信)，当然也能用于加入Image控件所能加入的富媒体资源。

//外载入SWF程序
<mx:SWFLoader id="loader1" source="FlexApp.swf"/>
//内嵌入SWF程序
<mx:SWFLoader id="loader2" source="@Embed(source='flexapp.swf')"/>
//还可以在FDS环境下加入MXML文件，要以buttonicon.mxml.swf形式加入，以提示FDS编译该文件。
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:SWFLoader source="buttonicon.mxml.swf" scaleContent="false"/> 
</mx:Application>

4), 加入MP3音频: 您可以在 Flex 应用程序中通过使用[Embed]元数据标签嵌入MP3文件并播放它。注意音频文件的体积要优化。

<mx:Script>
        <![CDATA[
            import mx.core.SoundAsset;
            import flash.media.*;
            [Embed(source="assets/pie-yan-knee.mp3")]
            [Bindable]
          //MP3 的一个新实例
            public var Song:Class;
          //将该实例创建为一个 SoundAsset
            public var mySong:SoundAsset = new Song() as SoundAsset;
            public var channel:SoundChannel;
          //使用 SoundAsset 类的 play() 方法来播放 MP3 文件的实例  
            public function playSound():void 
            {
                // 先消音，防止同时多次播放
                stopSound();             
                // 播放该音频，并存储返回的SoundChannel对象结束播放。
                channel = mySong.play();
            }
            
            public function stopSound():void 
            {
                // 当音频播放时，调用SoundChannel对象的 stop() 方法以停止播放
                if ( channel != null ) channel.stop();
            }
        ]]>
    </mx:Script>
        <mx:Button label="play" click="playSound();"/>
        <mx:Button label="stop" click="stopSound();"/>

5), 加入字体: 您希望在 Flex 应用程序中嵌入一种字体并将它用作基于文本的组件的样式。

下面的示例创建引用嵌入的字体的 font-family 名称的一个类选择器。 接着它会创建一个 Text 控件并将其样式设置为该类选择器。

提示: 您在嵌入字体以节省文件大小时仅可以从字体添加某些字符, 方法是指定您的 @font-face 声明的 unicode-range 属性。

<mx:Style>
        @font-face 
        {
            font-family: Copacetix;

            src: url("assets/copacetix.ttf");
            unicode-range:
                U+0020-U+0040, /* Punctuation, Numbers */

                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;    
        }

    </mx:Style>

    <mx:Text styleName="MyTextStyle" text="Embedded fonts rock!" width="100%"/>

三，数据绑定

以MXML标记来描述UI，数据绑定(Data binding)来连接数据，这样就真正实现了UI和程序逻辑的分离。Data binding可以一绑多或者多绑一。

1， 在MXML中使用大括号{}语句: 格式为:{源对象.属性}。可直接传送给目标对象；高级用法是在{}中包含AS表达式、AS函数或者E4X表达式

2， 在MXML中使用<mx:Binding>标签:这是{}语句的替代用法，格式为:<mx:Binding source="源对象.属性" destination="目标对象.属性"/>；高级用法是在标签中包含AS表达式或者E4X表达式

//在Model数据中使用{}语句来绑定数据
    <mx:Model id="thing1">
        <data>
            <part>{input1.text}</part>
        </data>
    </mx:Model>
    //用<mx:Binding>标签来绑定数据
    <mx:Binding source="input2.text" destination="thing1.part"/>

    <mx:TextInput id="input1"/>
    <mx:TextInput id="input2"/>
    
    <mx:TextArea text="{thing1.part}"/>

3， 使用AS类来绑定:使用mx.binding.utils.BindingUtils的bindProperty()或者bindSetter() 方法

四，界面布局和导航

容器定义了Flash Player的绘图表面的一个矩形区域。子容器包括控件和容器。Container 类是所有 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 容器的下边缘。

G, 另外可使用Spacer控件来辅助布局。Spacer控件并非容器，而是基于百分比的可用于挤占留空以准确定位的一个不可见控件。

2, 导航容器: 使用导航容器可以控制其他容器的多个子级之间的用户移动或导航。导航器容器不能直接嵌套控件，只能嵌套容器。

A，手风琴(Accordion)容器 定义一个子面板序列, 但一次仅显示一个面板。 若要导航容器, 用户会单击与他们需要访问的子面板相对应的导航按钮。 使用 Accordion 容器, 用户可以按任何顺序访问子面板以在表单中前后移动。

B, TabNavigator容器 创建和管理一组选项卡, 使用它们可在其子级中间导航。 TabNavigator 容器的子级是其他容器。 TabNavigator 容器为每个子级创建一个选项卡。 当用户选中某个选项卡时, TabNavigator 容器会显示相关联的子级。

C, ViewStack容器 由彼此堆叠在一起的子容器的一个集合组成, 一次只有一个容器是可见的或活动的。 ViewStack 容器不为用户定义切换当前活动容器的内置机制；您必须使用 LinkBar、TabBar、ButtonBar 或 ToggleButtonBar 控件或自己在 ActionScript 中构建逻辑让用户来更改当前活动的子级。

3, 使用容器Containers进行定位布局

定位方式有三种:

A, 自动定位:多数Flex容器使用默认预定义的规则来自动定位你在其中定义的所有的子组件。

B, 使用绝对定位: 用于使控件重叠

C, 使用基于约束的布局: 可以锚定容器的边缘或者中心点，然后控件就会随着容器的伸缩而伸缩

Canvas容器，和layout属性为absolute的Application或Panel容器才能进行绝对定位，或约束布局。

4，使用视图状态(或ViewStack导航容器)进行用户界面切换导航

可以为一个Flex程序或组件定义几种视图状态，然后通过改变(切换)视图状态而改变用户界面。(ViewStack导航容器可实现同样效果)

1)，设计基础状态(Base state,Start,currentState=''):就是在默认状态下设计用户界面。

2)，设计视图状态(currentState='SomeState'):在设计模式中，在状态查看（Window > States）上点击新状态/New State 按钮。然后在此状态下编辑的界面即为该视图的对应界面。

3)，创建用户行为切换控件: 定义用户变换状态的点击事件处理器。一般是使用一个LinkButtun，激活currentState='SomeState'以切换到某界面，激活currentState=''以回到默认界面。