FlexBuilder學習教程
本文和大家重點學習一下FlexBuilder教程，FlexBuilder實現了代碼與界面分開，Flex的類程序擴展名為*.as，語法與java/c++很象，Flex程序文件擴展名為.mxml，其實就是擁有很多特殊元素的XML文件。
FlexBuilder教程
一、概述
Flex語言包含了一個豐富的用戶界面組件庫，MXML（一種基于XML的標記語言）和ActionScript（基于ECMA262的、強類型面向對象編程語言）。MXML用于排布用戶界面和處理應用中其他方面的問題，而ActionScript用來處理用戶交互邏輯。由于Flash平臺的普及，Flex使開發(fā)者可以開發(fā)廣泛的應用程序。開發(fā)者可以使用工業(yè)標準（如XML，CSS和SVC）和他們所熟悉的模式和范例來創(chuàng)建應用。Flex的分離協(xié)作方式和Flex公用組件模型也使得開發(fā)者和界面設計者能更好的進行協(xié)作，在可靠的、易于維護的架構上生產出在用戶體驗方面有突破性的產品。
FlexBuilder(FlexBuilder)之于MXML就如DREAWEAVER之于HTML。FlexBuilder實現了代碼與界面分開，Flex的類程序擴展名為*.as，語法與java/c++很象，Flex程序文件擴展名為.mxml，其實就是擁有很多特殊元素的XML文件。
二、使用MXML組件構建用戶界面
MXML語言支持兩種用戶界面組件類型:控件和容器。容器是包含控件和其他容器的屏幕的矩形區(qū)域。FlexBuilder控件是表單元素,如按鈕、文本字段和列表框。
可以使用FlexComponentExplorerFlexMXML組件瀏覽工具來查看所有控件的代碼和樣例。
1，加入常用可視控件:使用可視控件組織界面，可以定義組件屬性供外部訪問
◆基于文本的控件(Textcontrols):Label(單行文本顯示)、Text(多行文本顯示)、TextInput(單行文本顯示與輸入)、TextArea(多行行文本顯示與輸入)和RichTextEditor(富文本顯示與輸入)控件。用于顯示文本和/或接收來自用戶的文本輸入，都有一個text屬性用于設置要顯示的文本。使用RichTextEditor控件可以輸入文本、編輯文本和設置文本格式。用戶通過使用位于RichTextEditor控件底部的子控件,應用文本格式和URL鏈接。
◆基于按鈕的控件組件(Button系列,Formcontrols):Button(激活時會發(fā)出click和buttonDown事件)、LinkButton(用于打開URL)、CheckBox(標簽會被自動裁剪以適合控件邊界。)、RadioButton(指由
2，加入基于列表的控件，并獲取數據
基于列表的控件:是在其繼承層次結構內的某些點上擴展ListBase類的那些控件。它們包括ComboBox、List、HorizontalList、DataGrid、Tile、Menu和Tree控件。都可從某數據提供程序的數據獲得數據列表。
另:許多標準控件(包括ColorPicker和MenuBar控件)也是數據提供程序控件。
◆可以使用兩種方法設置組件的數據提供程序:
1)，直接在MXML標簽中加入數據，將Array或Collection定義為取得數據提供程序的控件的子標簽。該方法具有實施快速的優(yōu)點,適合與靜態(tài)數據一起使用及用于原型設計。
- <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)，使用數據綁定:使用[Bindable]元數據標簽(屬性非默認綁定,必須明確的聲明被綁定的屬性)，將控件綁定到使用ActionScript定義的現有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í)行期復制其它組件。
- <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,加入數據驗證:數據模型支持自動數據驗證，這就意味著你可以很方便地使用Flex驗證器。as3.0驗證的類包為mx.Validators.包中有一個基類Validator,其他的類都為其子類:
1)，用標簽實現驗證://綁定驗證對象:source:表示驗證的對象，property:表示驗證對象的屬性
- <mx:PhoneNumberValidatoridmx:PhoneNumberValidatorid="pnV"source="{phoneInput}"property="text"/>
- <mx:TextInputidmx:TextInputid="phoneInput"/>
2)，用AS編程實現驗證
- importmx.validators.PhoneNumberValidator;
- //創(chuàng)建驗證器
- privatevarv:PhoneNumberValidator=newPhoneNumberValidator();
- privatefunctioncreateValidator():void{
- //設置驗證器
- v.source=phoneInput;
- v.property="text";
- }
- ]]>
- mx:Script>
- <mx:TextInputidmx:TextInputid="phoneInput"creationComplete="createValidator();"/>
- 還可以加入按鈕觸發(fā)器，并修改默認提示錯誤//trigger:表示觸發(fā)驗證事件的對象
- //triggerEvent:表示對象觸發(fā)驗證事件的時機(如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)，高級用法:使用正則表達式創(chuàng)建自定義驗證器
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>
- [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>
- [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)設置翻轉的圖片:使用CSS為外觀外載/內嵌翻轉的圖像
可以定義一個現有的CSS類型選擇器為該類型的所有組件設置外觀。還可以進一步創(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應用程序(可以使用AS與其通信)，當然也能用于加入Image控件所能加入的富媒體資源。
- //外載入SWF程序
- <mx:SWFLoaderidmx:SWFLoaderid="loader1"source="FlexApp.swf"/>
- //內嵌入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應用程序中通過使用[Embed]元數據標簽嵌入MP3文件并播放它。注意音頻文件的體積要優(yōu)化。
- <mx:Script>
- importmx.core.SoundAsset;
- importflash.media.*;
- [Embed(source="assets/pie-yan-knee.mp3")]
- [Bindable]
- //MP3的一個新實例
- publicvarSong:Class;
- //將該實例創(chuàng)建為一個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應用程序中嵌入一種字體并將它用作基于文本的組件的樣式。
下面的示例創(chuàng)建引用嵌入的字體的font-family名稱的一個類選擇器。接著它會創(chuàng)建一個Text控件并將其樣式設置為該類選擇器。
提示:您在嵌入字體以節(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%"/>
三，FlexBuilder中數據綁定
以MXML標記來描述UI，數據綁定(Databinding)來連接數據，這樣就真正實現了UI和程序邏輯的分離。Databinding可以一綁多或者多綁一。
1，在MXML中使用大括號{}語句:格式為:{源對象.屬性}。可直接傳送給目標對象；高級用法是在{}中包含AS表達式、AS函數或者E4X表達式
2，在MXML中使用
- <mx:Modelidmx:Modelid="thing1">
- <data>
- <part>{input1.text}part>
- data>
- mx:Model>
- //用<mx:Binding>標簽來綁定數據
- <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()方法
【編輯推薦】
