FlexBuilder學(xué)習(xí)教程
本文和大家重點(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語言包含了一個豐富的用戶界面組件庫，MXML（一種基于XML的標(biāo)記語言）和ActionScript（基于ECMA262的、強(qiáng)類型面向?qū)ο缶幊陶Z言）。MXML用于排布用戶界面和處理應(yīng)用中其他方面的問題，而ActionScript用來處理用戶交互邏輯。由于Flash平臺的普及，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ū)域。FlexBuilder控件是表單元素,如按鈕、文本字段和列表框。
可以使用FlexComponentExplorerFlexMXML組件瀏覽工具來查看所有控件的代碼和樣例。
1，加入常用可視控件:使用可視控件組織界面，可以定義組件屬性供外部訪問
◆基于文本的控件(Textcontrols):Label(單行文本顯示)、Text(多行文本顯示)、TextInput(單行文本顯示與輸入)、TextArea(多行行文本顯示與輸入)和RichTextEditor(富文本顯示與輸入)控件。用于顯示文本和/或接收來自用戶的文本輸入，都有一個text屬性用于設(shè)置要顯示的文本。使用RichTextEditor控件可以輸入文本、編輯文本和設(shè)置文本格式。用戶通過使用位于RichTextEditor控件底部的子控件,應(yīng)用文本格式和URL鏈接。
◆基于按鈕的控件組件(Button系列,Formcontrols):Button(激活時會發(fā)出click和buttonDown事件)、LinkButton(用于打開URL)、CheckBox(標(biāo)簽會被自動裁剪以適合控件邊界。)、RadioButton(指由
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%">
- <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>
- [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:Script>
- [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ù)模型支持自動數(shù)據(jù)驗(yàn)證，這就意味著你可以很方便地使用Flex驗(yàn)證器。as3.0驗(yàn)證的類包為mx.Validators.包中有一個基類Validator,其他的類都為其子類:
1)，用標(biāo)簽實(shí)現(xiàn)驗(yàn)證://綁定驗(yàn)證對象:source:表示驗(yàn)證的對象，property:表示驗(yàn)證對象的屬性
- <mx:PhoneNumberValidatoridmx:PhoneNumberValidatorid="pnV"source="{phoneInput}"property="text"/>
- <mx:TextInputidmx:TextInputid="phoneInput"/>
2)，用AS編程實(shí)現(xiàn)驗(yàn)證
- 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)提示錯誤//trigger:表示觸發(fā)驗(yàn)證事件的對象
- //triggerEvent:表示對象觸發(fā)驗(yàn)證事件的時機(jī)(如click,mouseOver等)
- //requiredFieldError屬性表示必填項(xiàng)沒填入數(shù)據(jù)的時的提示錯誤信息
- //wrongLengthError:表示輸入的數(shù)據(jù)阿拉伯?dāng)?shù)字長度小于10時提示的錯誤信息
- //invalidCharError:表示輸入數(shù)據(jù)不是阿拉伯?dāng)?shù)字時提示的錯誤信息
- <mx:PhoneNumberValidatoridmx:PhoneNumberValidatorid="pnV"source="{phoneInput}"property="text"
- trigger="{btn}"triggerEvent="click"
- requiredFieldError="此項(xiàng)為必填"invalidCharError="請輸入阿拉伯?dāng)?shù)字"wrongLengthError="請至少輸入請輸入10個阿拉伯?dāng)?shù)字"/>
- <mx:TextInputidmx:TextInputid="phoneInput"/>
- <mx:Buttonlabelmx:Buttonlabel="Button"id="btn"/>
3)，高級用法:使用正則表達(dá)式創(chuàng)建自定義驗(yàn)證器
5，加入資源(圖片,音頻,視頻,程序):運(yùn)行時外載和編譯時直接內(nèi)嵌兩種方式，外載方式要多花一段載入時間，但使用簡單；內(nèi)嵌方式可直接調(diào)用資源，但加重了程序的負(fù)擔(dān)(體積變大，且圖片編輯后需要重新編譯)
1)，Image(圖畫)控件:可外載或內(nèi)嵌多種富媒體資源:JPEG、GIF、PNG位圖、SVG矢量圖(只能內(nèi)嵌),SWF動畫(非Flex的SWF應(yīng)用程序。),SWF庫按鈕(Button)，SWF庫動畫(MovieClip)，//外載一個富媒體，可使用絕對或者相對路徑。
但加入SWF文件時，可用use-network參數(shù)指定其使用網(wǎng)絡(luò)或者本地文件二者之一。
- <mx:Imageidmx:Imageid="myLogo0"source="assets/logo.png"/>
- //簡單地內(nèi)嵌一個富媒體.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')"/>
- //在腳本中定義富媒體對象，然后在MXML中可以多次嵌入
- <mx:Script>
- [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í)例會關(guān)閉該圖像的scale-9功能。)。
- <mx:Script>
- [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>
- [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)的圖像
可以定義一個現(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>
- importmx.core.SoundAsset;
- importflash.media.*;
- [Embed(source="assets/pie-yan-knee.mp3")]
- [Bindable]
- //MP3的一個新實(shí)例
- publicvarSong:Class;
- //將該實(shí)例創(chuàng)建為一個SoundAsset
- publicvarmySong:SoundAsset=newSong()asSoundAsset;
- publicvarchannel:SoundChannel;
- //使用SoundAsset類的play()方法來播放MP3文件的實(shí)例
- publicfunctionplaySound():void
- {
- //先消音，防止同時多次播放
- stopSound();
- //播放該音頻，并存儲返回的SoundChannel對象結(jié)束播放。
- channel=mySong.play();
- }
- publicfunctionstopSound():void
- {
- //當(dāng)音頻播放時，調(diào)用SoundChannel對象的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名稱的一個類選擇器。接著它會創(chuàng)建一個Text控件并將其樣式設(shè)置為該類選擇器。
提示:您在嵌入字體以節(jié)省文件大小時僅可以從字體添加某些字符,方法是指定您的@font-face聲明的unicode-range屬性。
- <mx:Style>
- @font-face
- {
- font-family:Copacetix;
- src:url("assets/copacetix.ttf");
- unicode-range:
- U+0020-U+0040,
- U+0041-U+005A,
- U+005B-U+0060,
- U+0061-U+007A,
- U+007B-U+007E;
- }
- .MyTextStyle
- {
- font-family:Copacetix;
- font-size:24pt;
- }
- mx:Style>
- <mx:TextstyleNamemx:TextstyleName="MyTextStyle"text="Embeddedfontsrock!"width="100%"/>
三，F(xiàn)lexBuilder中數(shù)據(jù)綁定
以MXML標(biāo)記來描述UI，數(shù)據(jù)綁定(Databinding)來連接數(shù)據(jù)，這樣就真正實(shí)現(xiàn)了UI和程序邏輯的分離。Databinding可以一綁多或者多綁一。
1，在MXML中使用大括號{}語句:格式為:{源對象.屬性}。可直接傳送給目標(biāo)對象；高級用法是在{}中包含AS表達(dá)式、AS函數(shù)或者E4X表達(dá)式
2，在MXML中使用
- <mx:Modelidmx:Modelid="thing1">
- <data>
- <part>{input1.text}part>
- data>
- mx:Model>
- //用<mx:Binding>標(biāo)簽來綁定數(shù)據(jù)
- <mx:Bindingsourcemx:Bindingsource="input2.text"destination="thing1.part"/>
- <mx:TextInputidmx:TextInputid="input1"/>
- <mx:TextInputidmx:TextInputid="input2"/>
- <mx:TextAreatextmx:TextAreatext="{thing1.part}"/>
3，使用AS類來綁定:使用mx.binding.utils.BindingUtils的bindProperty()或者bindSetter()方法
【編輯推薦】
