本文和大家重點(diǎn)學(xué)習(xí)一下FlexBuilder教程，F(xiàn)lexBuilder實(shí)現(xiàn)了代碼與界面分開，F(xiàn)LEX的類程序擴(kuò)展名為*.as，語法與java/c++很象，F(xiàn)LEX程序文件擴(kuò)展名為.mxml，其實(shí)就是擁有很多特殊元素的XML文件。

FlexBuilder教程

一，概述

Flex語言包含了一個(gè)豐富的用戶界面組件庫，MXML（一種基于XML的標(biāo)記語言）和ActionScript（基于ECMA262的、強(qiáng)類型面向?qū)ο缶幊陶Z言）。MXML用于排布用戶界面和處理應(yīng)用中其他方面的問題，而ActionScript用來處理用戶交互邏輯。由于Flash平臺(tái)的普及，F(xiàn)lex使開發(fā)者可以開發(fā)廣泛的應(yīng)用程序。開發(fā)者可以使用工業(yè)標(biāo)準(zhǔn)（如XML，CSS和SVC）和他們所熟悉的模式和范例來創(chuàng)建應(yīng)用。Flex的分離協(xié)作方式和Flex公用組件模型也使得開發(fā)者和界面設(shè)計(jì)者能更好的進(jìn)行協(xié)作，在可靠的、易于維護(hù)的架構(gòu)上生產(chǎn)出在用戶體驗(yàn)方面有突破性的產(chǎn)品。

FlexBuilder(FlexBuilder)之于MXML就如DREAWEAVER之于HTML。FlexBuilder實(shí)現(xiàn)了代碼與界面分開，F(xiàn)LEX的類程序擴(kuò)展名為*.as，語法與java/c++很象，F(xiàn)LEX程序文件擴(kuò)展名為.mxml，其實(shí)就是擁有很多特殊元素的XML文件。

二，使用MXML組件構(gòu)建用戶界面

MXML語言支持兩種用戶界面組件類型:控件和容器。容器是包含控件和其他容器的屏幕的矩形區(qū)域?？丶潜韱卧?如按鈕、文本字段和列表框。

可以使用FlexComponentExplorerFlexMXML組件瀏覽工具來查看所有控件的代碼和樣例。

1，加入常用可視控件:使用可視控件組織界面，可以定義組件屬性供外部訪問

A,基于文本的控件(Textcontrols):Label(單行文本顯示)、Text(多行文本顯示)、TextInput(單行文本顯示與輸入)、TextArea(多行行文本顯示與輸入)和RichTextEditor(富文本顯示與輸入)控件。用于顯示文本和/或接收來自用戶的文本輸入，都有一個(gè)text屬性用于設(shè)置要顯示的文本。使用RichTextEditor控件可以輸入文本、編輯文本和設(shè)置文本格式。用戶通過使用位于RichTextEditor控件底部的子控件,應(yīng)用文本格式和URL鏈接。

B,基于按鈕的控件組件(Button系列,Formcontrols):Button(激活時(shí)會(huì)發(fā)出click和buttonDown事件)、LinkButton(用于打開URL)、CheckBox(標(biāo)簽會(huì)被自動(dòng)裁剪以適合控件邊界。)、RadioButton(指由<mx:RadioButtonGroup>標(biāo)簽創(chuàng)建的組)和PopupButton控件(常用于打開List控件或Menu控件簽。)。#p#

2，加入基于列表的控件，并獲取數(shù)據(jù)

基于列表的控件:是在其繼承層次結(jié)構(gòu)內(nèi)的某些點(diǎn)上擴(kuò)展ListBase類的那些控件。它們包括ComboBox、List、HorizontalList、DataGrid、Tile、Menu和Tree控件。都可從某數(shù)據(jù)提供程序的數(shù)據(jù)獲得數(shù)據(jù)列表。

另:許多標(biāo)準(zhǔn)控件(包括ColorPicker和MenuBar控件)也是數(shù)據(jù)提供程序控件。

可以使用兩種方法設(shè)置組件的數(shù)據(jù)提供程序:

1)，直接在MXML標(biāo)簽中加入數(shù)據(jù)，將Array或Collection定義為取得數(shù)據(jù)提供程序的控件的子標(biāo)簽。該方法具有實(shí)施快速的優(yōu)點(diǎn),適合與靜態(tài)數(shù)據(jù)一起使用及用于原型設(shè)計(jì)

<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)，使用數(shù)據(jù)綁定:使用[Bindable]元數(shù)據(jù)標(biāo)簽(屬性非默認(rèn)綁定,必須明確的聲明被綁定的屬性)，將控件綁定到使用ActionScript定義的現(xiàn)有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循環(huán)，可在執(zhí)行期復(fù)制其它組件。<mx:Repeater>的卷標(biāo)要自己輸入，而dataProvider可在<mx:Script>區(qū)段之中，以[Bindable]的Metadata定義之?dāng)?shù)組作連結(jié)。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,加入數(shù)據(jù)驗(yàn)證:數(shù)據(jù)模型支持自動(dòng)數(shù)據(jù)驗(yàn)證，這就意味著你可以很方便地使用Flex驗(yàn)證器。as3.0驗(yàn)證的類包為mx.Validators.包中有一個(gè)基類Validator,其他的類都為其子類:

1)，用標(biāo)簽實(shí)現(xiàn)驗(yàn)證://綁定驗(yàn)證對(duì)象:source:表示驗(yàn)證的對(duì)象，property:表示驗(yàn)證對(duì)象的屬性
 

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

 2)，用AS編程實(shí)現(xiàn)驗(yàn)證<mx:Script>

<![CDATA[  
importmx.validators.PhoneNumberValidator;  
//創(chuàng)建驗(yàn)證器  
privatevarv:PhoneNumberValidator=newPhoneNumberValidator();  
privatefunctioncreateValidator():void{  
//設(shè)置驗(yàn)證器  
v.source=phoneInput;  
v.property="text";  
}  
]]> 
</mx:Script> 
 
<mx:TextInputidmx:TextInputid="phoneInput"creationComplete="createValidator();"/> 
 
還可以加入按鈕觸發(fā)器，并修改默認(rèn)提示錯(cuò)誤//trigger:表示觸發(fā)驗(yàn)證事件的對(duì)象  
//triggerEvent:表示對(duì)象觸發(fā)驗(yàn)證事件的時(shí)機(jī)(如click,mouseOver等)  
//requiredFieldError屬性表示必填項(xiàng)沒填入數(shù)據(jù)的時(shí)的提示錯(cuò)誤信息  
//wrongLengthError:表示輸入的數(shù)據(jù)阿拉伯?dāng)?shù)字長度小于10時(shí)提示的錯(cuò)誤信息  
//invalidCharError:表示輸入數(shù)據(jù)不是阿拉伯?dāng)?shù)字時(shí)提示的錯(cuò)誤信息  
<mx:PhoneNumberValidatoridmx:PhoneNumberValidatorid="pnV"source="{phoneInput}"property="text" 
trigger="{btn}"triggerEvent="click"  
requiredFieldError="此項(xiàng)為必填"invalidCharError="請(qǐng)輸入阿拉伯?dāng)?shù)字"wrongLengthError="請(qǐng)至少輸入請(qǐng)輸入10個(gè)阿拉伯?dāng)?shù)字"/> 
 
<mx:TextInputidmx:TextInputid="phoneInput"/> 
<mx:Buttonlabelmx:Buttonlabel="Button"id="btn"/> 
 

 
3)，高級(jí)用法:使用正則表達(dá)式創(chuàng)建自定義驗(yàn)證器#p#

5，加入資源(圖片,音頻,視頻,程序):運(yùn)行時(shí)外載和編譯時(shí)直接內(nèi)嵌兩種方式，外載方式要多花一段載入時(shí)間，但使用簡單；內(nèi)嵌方式可直接調(diào)用資源，但加重了程序的負(fù)擔(dān)(體積變大，且圖片編輯后需要重新編譯)

1)，Image(圖畫)控件:可外載或內(nèi)嵌多種富媒體資源:JPEG、GIF、PNG位圖、SVG矢量圖(只能內(nèi)嵌),SWF動(dòng)畫(非Flex的SWF應(yīng)用程序。),SWF庫按鈕(Button)，SWF庫動(dòng)畫(MovieClip)，//外載一個(gè)富媒體，可使用絕對(duì)或者相對(duì)路徑。
但加入SWF文件時(shí)，可用use-network參數(shù)指定其使用網(wǎng)絡(luò)或者本地文件二者之一。
 

<mx:Imageidmx:Imageid="myLogo0"source="assets/logo.png"/> 
 
//簡單地內(nèi)嵌一個(gè)富媒體.png,.jpg,.gif,  
.swf(可將嵌入的SWF文件的實(shí)例當(dāng)作MovieClip.MovieClipAsset類的實(shí)例處理,  
不能直接訪問嵌入的SWF文件的屬性或方法。  
但可用LocalConnection以允許SWF之間進(jìn)行通信。)，  
.SVG(可將嵌入的SVG文件的實(shí)例當(dāng)作Sprite.SpriteAsset類的實(shí)例處理。)  
<mx:Imageidmx:Imageid="myLogo"source="@Embed('assets/logo.png')"/> 
 
//在腳本中定義富媒體對(duì)象，然后在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像框縮放功能就可以保持邊框的清晰,  
(旋轉(zhuǎn)嵌入的scale-9圖像的實(shí)例會(huì)關(guān)閉該圖像的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)設(shè)置翻轉(zhuǎn)的圖片:使用CSS為外觀外載/內(nèi)嵌翻轉(zhuǎn)的圖像

可以定義一個(gè)現(xiàn)有的CSS類型選擇器為該類型的所有組件設(shè)置外觀。還可以進(jìn)一步創(chuàng)建自定義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應(yīng)用程序(可以使用AS與其通信)，當(dāng)然也能用于加入Image控件所能加入的富媒體資源。//外載入SWF程序
 

<mx:SWFLoaderidmx:SWFLoaderid="loader1"source="FlexApp.swf"/> 
//內(nèi)嵌入SWF程序  
<mx:SWFLoaderidmx:SWFLoaderid="loader2"source="@Embed(source='flexapp.swf')"/> 
//還可以在FDS環(huán)境下加入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應(yīng)用程序中通過使用[Embed]元數(shù)據(jù)標(biāo)簽嵌入MP3文件并播放它。注意音頻文件的體積要優(yōu)化。

<mx:Script> 
<![CDATA[  
importmx.core.SoundAsset;  
importflash.media.*;  
[Embed(source="assets/pie-yan-knee.mp3")]  
[Bindable]  
//MP3的一個(gè)新實(shí)例  
publicvarSong:Class;  
//將該實(shí)例創(chuàng)建為一個(gè)SoundAsset  
publicvarmySong:SoundAsset=newSong()asSoundAsset;  
publicvarchannel:SoundChannel;  
//使用SoundAsset類的play()方法來播放MP3文件的實(shí)例  
publicfunctionplaySound():void  
{  
//先消音，防止同時(shí)多次播放  
stopSound();  
//播放該音頻，并存儲(chǔ)返回的SoundChannel對(duì)象結(jié)束播放。  
channel=mySong.play();  
}  
 
publicfunctionstopSound():void  
{  
//當(dāng)音頻播放時(shí)，調(diào)用SoundChannel對(duì)象的stop()方法以停止播放  
if(channel!=null)channel.stop();  
}  
]]> 
</mx:Script> 
<mx:Buttonlabelmx:Buttonlabel="play"click="playSound();"/> 
<mx:Buttonlabelmx:Buttonlabel="stop"click="stopSound();"/> 
 

 5),加入字體:您希望在Flex應(yīng)用程序中嵌入一種字體并將它用作基于文本的組件的樣式。

下面的示例創(chuàng)建引用嵌入的字體的font-family名稱的一個(gè)類選擇器。接著它會(huì)創(chuàng)建一個(gè)Text控件并將其樣式設(shè)置為該類選擇器。

提示:您在嵌入字體以節(jié)省文件大小時(shí)僅可以從字體添加某些字符,方法是指定您的@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開發(fā)利器的兩種方式
2. 從Flex Builder更名看Flash平臺(tái)戰(zhàn)略
3. Flex及FlexBuilder2.0開發(fā)環(huán)境詳解
4. FlexBuilder3.0與Eclipse3.4的完美結(jié)合
5. 學(xué)習(xí)筆記 FlexBuilder2.0中如何使用基于Lists的控件