FlexBuilder入门指南

 本文和大家重点学习一下FlexBuilder教程，FlexBuilder实现了代码与界面分开，FLEX的类程序扩展名为*.as，语法与java/c++很象，FLEX程序文件扩展名为.mxml，其实就是拥有很多特殊元素的XML文件。

FlexBuilder教程

一，概述

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

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

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

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

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

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

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

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

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

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

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

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

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

<mx:ComboBoxidmx:ComboBoxid="userRating"width="100%"> 
<!--Aninlinedataprovider--> 
<mx:Array> 
<mx:Objectdatamx:Objectdata="0"label="Zero"/> 
<mx:Objectdatamx:Objectdata="1"label="One"/> 
</mx:Array> 
</mx:ComboBox> 

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

<mx:Script> 
<![CDATA[  
[Bindable]  
privatevarsubscriptions:ArrayCollection=  
newArrayCollection  
(  
[  
{data:0,label:"Print"},  
{data:1,label:"Website"},  
]  
);  
 
]]> 
</mx:Script> 
<mx:FormItemlabelmx:FormItemlabel="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]  
publicvardp:Array=[1,2,3,4];  
]]> 
</mx:Script> 
 
<mx:ArrayCollectionidmx:ArrayCollectionid="myAC"source="{dp}"/> 
 
<mx:Repeateridmx:Repeaterid="r"dataProvider="{myAC}"> 
<mx:Buttonidmx:Buttonid="repbutton"label="button{r.currentItem}"/> 
</mx:Repeater> 
 

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

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

<mx:PhoneNumberValidatoridmx:PhoneNumberValidatorid="pnV"source="{phoneInput}"property="text"/> 
 
<mx:TextInputidmx:TextInputid="phoneInput"/> 

 2)，用AS编程实现验证<mx:Script>

<![CDATA[  
importmx.validators.PhoneNumberValidator;  
//创建验证器  
privatevarv:PhoneNumberValidator=newPhoneNumberValidator();  
privatefunctioncreateValidator():void{  
//设置验证器  
v.source=phoneInput;  
v.property="text";  
}  
]]> 
</mx:Script> 
 
<mx:TextInputidmx:TextInputid="phoneInput"creationComplete="createValidator();"/> 
 
还可以加入按钮触发器，并修改默认提示错误//trigger:表示触发验证事件的对象  
//triggerEvent:表示对象触发验证事件的时机(如click,mouseOver等)  
//requiredFieldError属性表示必填项没填入数据的时的提示错误信息  
//wrongLengthError:表示输入的数据阿拉伯数字长度小于10时提示的错误信息  
//invalidCharError:表示输入数据不是阿拉伯数字时提示的错误信息  
<mx:PhoneNumberValidatoridmx:PhoneNumberValidatorid="pnV"source="{phoneInput}"property="text" 
trigger="{btn}"triggerEvent="click"  
requiredFieldError="此项为必填"invalidCharError="请输入阿拉伯数字"wrongLengthError="请至少输入请输入10个阿拉伯数字"/> 
 
<mx:TextInputidmx:TextInputid="phoneInput"/> 
<mx:Buttonlabelmx:Buttonlabel="Button"id="btn"/> 
 

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

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

1)，Image(图画)控件:可外载或内嵌多种富媒体资源:JPEG、GIF、PNG位图、SVG矢量图(只能内嵌),SWF动画(非Flex的SWF应用程序。),SWF库按钮(Button)，SWF库动画(MovieClip)，//外载一个富媒体，可使用绝对或者相对路径。
但加入SWF文件时，可用use-network参数指定其使用网络或者本地文件二者之一。
 

<mx:Imageidmx:Imageid="myLogo0"source="assets/logo.png"/> 
 
//简单地内嵌一个富媒体.png,.jpg,.gif,  
.swf(可将嵌入的SWF文件的实例当作MovieClip.MovieClipAsset类的实例处理,  
不能直接访问嵌入的SWF文件的属性或方法。  
但可用LocalConnection以允许SWF之间进行通信。)，  
.SVG(可将嵌入的SVG文件的实例当作Sprite.SpriteAsset类的实例处理。)  
<mx:Imageidmx:Imageid="myLogo"source="@Embed('assets/logo.png')"/> 
 
//在脚本中定义富媒体对象，然后在MXML中可以多次嵌入  
<mx:Script> 
<![CDATA[  
[Embed(source="assets/logo.png")]  
[Bindable]  
 
publicvarLogo:Class;  
]]> 
</mx:Script> 
 
<mx:Imageidmx:Imageid="myLogo"source="{Logo}"/> 
<mx:Imageidmx:Imageid="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]  
publicvarFancyBorderImage:Class;  
]]> 
</mx:Script> 
 
<mx:Imagesourcemx:Imagesource="{FancyBorderImage}"width="146"height="82"/> 
 
//嵌入SWF库资源  
 
<mx:Script> 
<![CDATA[  
[Embed(source="assets/library.swf",symbol="BadApple")]  
 
[Bindable]  
publicvarBadApple:Class;  
]]> 
</mx:Script> 
 
<mx:Imageidmx:Imageid="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:SWFLoaderidmx:SWFLoaderid="loader1"source="FlexApp.swf"/> 
//内嵌入SWF程序  
<mx:SWFLoaderidmx:SWFLoaderid="loader2"source="@Embed(source='flexapp.swf')"/> 
//还可以在FDS环境下加入MXML文件，要以buttonicon.mxml.swf形式加入，以提示FDS编译该文件。  
<xmlversionxmlversion="1.0"> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> 
<mx:SWFLoadersourcemx:SWFLoadersource="buttonicon.mxml.swf"scaleContent="false"/> 
</mx:Application> 

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

<mx:Script> 
<![CDATA[  
importmx.core.SoundAsset;  
importflash.media.*;  
[Embed(source="assets/pie-yan-knee.mp3")]  
[Bindable]  
//MP3的一个新实例  
publicvarSong:Class;  
//将该实例创建为一个SoundAsset  
publicvarmySong:SoundAsset=newSong()asSoundAsset;  
publicvarchannel:SoundChannel;  
//使用SoundAsset类的play()方法来播放MP3文件的实例  
publicfunctionplaySound():void  
{  
//先消音，防止同时多次播放  
stopSound();  
//播放该音频，并存储返回的SoundChannel对象结束播放。  
channel=mySong.play();  
}  
 
publicfunctionstopSound():void  
{  
//当音频播放时，调用SoundChannel对象的stop()方法以停止播放  
if(channel!=null)channel.stop();  
}  
]]> 
</mx:Script> 
<mx:Buttonlabelmx:Buttonlabel="play"click="playSound();"/> 
<mx:Buttonlabelmx:Buttonlabel="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-CaseA-Z*/  
U+005B-U+0060,/*PunctuationandSymbols*/  
U+0061-U+007A,/*Lower-Casea-z*/  
U+007B-U+007E;/*PunctuationandSymbols*/  
 
}  
 
.MyTextStyle  
{  
font-family:Copacetix;  
font-size:24pt;  
}  
 
</mx:Style> 
 
<mx:TextstyleNamemx:TextstyleName="MyTextStyle"text="Embeddedfontsrock!"width="100%"/> 
 

 【编辑推荐】

1. 安装FlexBuilder开发利器的两种方式
2. 从Flex Builder更名看Flash平台战略
3. Flex及FlexBuilder2.0开发环境详解
4. FlexBuilder3.0与Eclipse3.4的完美结合
5. 学习笔记 FlexBuilder2.0中如何使用基于Lists的控件