Flex 元數據標籤——告訴編譯器如何編譯

Flex 元數據標籤——告訴編譯器如何編譯
雖然多數Flex開發者都使用過[Bindable]標籤,但是很多人都不知道這個標籤的作用甚至不知道該標籤為何物。
[Bindable]就是所謂的元數據標籤。元數據標籤是一種 特殊的標籤,它在代碼中的作用就是向編譯器提供如何編譯程序的信息。實際上,這些標籤並沒有被編譯到生成的SWF文件中,而只是告訴編譯器如何生成SWF 文件。文檔中列出的元數據標籤共有12個,本文將講解這些元數據標籤的定義並給出使用它們的示例,在看完這篇文章之後,你就會明白應該在何時何處在你的 Flex 應用程序中使用元數據標籤了。

     [ArrayElementType]
實際上,定義一個數組通常來說是一件很平常的事情,因為數組中的元素可以是任何類型的。
不過,使用ArrayElementType元數據標籤可以讓你定義數組元素的數據類型。下面的例子展示了如何使用    [ArrayElementType]:
[ArrayElementType(」String」)]
public var arrayOfStrings:Array; [ArrayElementType(」Number」)]
public var arrayOfNumbers:Array;
[ArrayElementType(」mx.core.UIComponent」)]
public var arrayOfUIComponents:Array;
   [Bindable]
Bindable元 數據標籤是最經常用到的一個元數據標籤,因為它使程序組件之間的數據同步變得很容易。Bindable可以用來綁定簡單數據類型、類、複雜數據類型以及函 數。綁定數據的時候,你必須先使用元數據標籤定義一下數據,正如Listing 1中所示的那樣。圖1是Listing 1的代碼運行結果。

Bindable也可以用來綁定到事件。Listing 2展 示了如何使用getter和setter函數將一個屬性綁定到一個事件上。這個例子中有一個叫做phoneNumber的私有變量,還有一個公有的 setter和getter函數。使用Bindable標籤將這個getter方法綁定到了一個叫做phoneNumberChanged的事件上,只要 數據發生改變setter方法就會分派phoneNumberChanged事件。通過使用setter方法,可以在數據賦予私有變量之前對其進行操作。 在這個例子中,數據只有在長度大於等於10的時候才會被格式化。當phoneNumberChanged事件被分派的時候,第二個TextInput組件 會被更新,因為他的text屬性綁定到了phoneNumber變量上。

   [DefaultProperty]
DefaultProperty 元數據標籤用來將一個單一屬性設定為某個類的默認屬性。它允許在一個容器標籤內設定屬性,而不用定義屬性的名字。一個簡單的例子就是一個自定義 Button類。Listing 3展示了一個簡單的Button類,它將label屬性設定為了DefaultProperty。Listing 4展示了label屬性是如何在自定義Button標籤中作為一個字符串定義的。
     [Embed]
Embed元數據標籤用來 導入圖片到程序。可以通過兩種方式使用Embed。你可以將圖片嵌入到ActionScript中並將其指派給一個變量(如同下面代碼中的第一個例子), 或者你也可以將圖片直接指派給組件的屬性(使用下面代碼中的第二個例子所示的語法規則)。
例1:
[Embed(source=」myIcon.gif」)]
[Bindable]
public var myIcon:Class;<mx:Button label=」Icon Button 1〞 icon=」{myIcon}」/>
<mx:Button label=」Icon Button 2〞 icon=」{myIcon}」/>
例2:
<mx:Button label=」Icon Button 1〞 icon=」@Embed(source=myIcon.gif』)」/>
<mx:Button label=」Icon Button 2〞 icon=」@Embed(source=myIcon.gif』)」/>
上面這兩個例子產生的結果是一樣的。創建myIcon類的好處是,它在一個類中只定義一次並可以綁定到程序中的多個組件。
     [Event]
Event元數據 標籤用來聲明那些被自定義類分派的事件。將這個元數據標籤添加到類定義中之後,你就可以在MXML標籤中添加事件處理函數來初始化該自定義類。 Listing 5創建了一個自定義Button類,每當它的label屬性改變的時候就會分派一個事件。Listing 6所顯示的主程序文件初始化了這個自定義Button並創建了事件處理函數,該函數將新的labe屬性值賦給了一個TextArea組件以顯示當前發生的 更改。

     [Effect]
Effect元數據標籤 用來定義一個自定義效果,當某個事件發生的時候該效果會被分派。這個示例可以基於前面Event的例子來創建,通過簡單地更改ButtonLabel類 (Listing 7)中的一行代碼,就定義了一個效果,該效果可以在MXML標籤中直接使用(Listing 8)。
 [IconFile]
IconFile 是用來定義一個jpg,gif或者png文件的文件名的,它在你的自定義類中作為圖標來使用。[Embed]元數據標籤可以用來嵌入圖片、SWF文件、音 樂文件以及視頻文件等,而IconFile則只是用來嵌入用來作為自定義類圖標的文件。下面是一個IconFile的例子:
[IconFile(」icon.png」)]
public class CustomButton extends Button{}
   [Inspectable]
在使 用Flex Builder 2的時候,你可能會希望某些自定義組件的屬性在代碼提示和屬性檢查器(property inspector)中顯示,Inspectable元數據標籤就是用來定義那些屬性的。Listing 9展示的例子定義了一個inspectable的ccType變量,它定義了Visa為默認值、Credit Card為類別並將取值範圍定義為包含了Visa, Mastercard, Discover, 和 American Express的枚舉。

圖6與上面展示的是同樣的代碼,但是這次是設計視圖,所以我們能看到屬性檢查器。你可以看到屬性ccType的類別為Credit Card,它的所有可選的值都在下拉列表中。

     [InstanceType]
當在一個模板對像中聲明一個像IDeferredInstance這樣的變量時,InstanceType元數據標籤就用來聲明對象的類型。下面是InstanceType的用法:
[InstanceType(」package.className」)]
[NonCommittingChangeEvent]
NonCommittingChangeEvent 元數據標籤在某個特定事件發生的時候可以防止變量在事件發生的過程中被更改。Listing 10展 示了它是如何工作的。一個名為s的字符串類型的私有變量被綁定到了名為ti2的TextInput組件上。另外一個id為ti1的TextInput組件 在它的text發生更改的時候就會將s的值設置為它的text屬性的值。另外,當triggerBinding 事件被分派的時候,附加在s變量上的Binding元數據標籤就會進行綁定。只有在Enter鍵在ti1 TextInput組件中被按下時才會分派triggerBinding事件。
     [RemoteClass]
RemoteClass 可以用來將一個ActionScript類綁定到一個Java類或一個ColdFusion CFC。這樣做可以自動轉換數據類型。下面的例子將包com.mydomain中的名為MyClass的ActionScript類綁定到了同一個包中名 為MyClass的Java類:
package com.mydomain {
[Bindable]
[RemoteClass(alias=」com.mydomain.MyClass」)]
public class MyClass {
public var id:int; public var myText:String;
}
}
     [Style]
Style元數據 標籤用來為組件定義自定義樣式屬性的。只需要簡單地將Sytle元數據標籤添加到類的定義當然,然後就可以使用getSytle方法獲取它的值了。 Listing 11 和 12中的例子定義了兩個樣式,分別為borderColor 和fillColor,它們的數據類型都是uint。當類初始化的時候這兩個樣式就會在標籤中被設定。代碼中覆寫了updateDisplayList函 數,用自定義的樣式畫了一個圓形邊框並將其填充。

現在你應該會有這樣的感覺了:「喔,現在我知道在哪裡可以使用它們了」或者「嗯,我想我會在新的項目中嘗試使用這些元數據標籤」。如果你 沒有,那麼你可能需要回過頭去再看一遍這篇文章。OK,我想說的是Adobe Flex小組提供給我們的元數據標籤不只是非常的強大,可以讓我們擴展或自定義我們要做的東西,而且它還非常易於使用。通過使用它們,僅僅幾行代碼就可以 完成一大堆事情。如果不使用這些標籤,你會發現在Flex 2中實現一些東西是很辛苦的。

完美的TabNavigator

因為個人頗喜愛使用TabNavigator組件
但在使用後 也發現許多不完美的地方

例如
當tab數量超過所設定的寬度時,原生的TabNavigator不會自動產生左右拉霸
還有許多類似的編輯面版,最右邊會有下拉選單,可直接選擇跳頁的功能,這個功能原生的也沒有

最近在網路上找到有人寫好的組件 可說是完美的TabNavigator
下面有其展示網頁以及open source的地方
有興趣的可以下載研究看看

效果展示:
http://dougmccune.com/blog/2007/02/07/quest-for-the-perfect-tabnavigator-part-3-with-source/
下載網址:
http://dougmccune.com/flex/supertabnavigator/srcview/

把 Flex SDK 4 整合進 Flex Builder 3

 
Flex SDK 4 已經出來了,可惜還沒有 Flex Builder 4。不過沒關係,看到國外有些人把 Flex SDK 4 整合進去 Flex Builder 3,照樣可以視覺化開發應用程式。以下,野部就詳列操作步驟:

一、下載 Flex SDK 4:
http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4
Adobe Flex SDK (ZIP  82MB)

二、確認 Flash Player 的版本是 10 以上,預設的 9 是不可以搭配 Flex 4 使用的:
http://www.adobe.com/products/flash/about/
記下這一行 「You have version 10,0,12,36 installed」。

三、安裝 Flex SDK 4:

將 Flex SDK 4 解壓縮,並且根據版本序號命名為 4.0.0。將此資料夾移動到 C:\Program Files\Adobe\Flex Builder 3\sdks。此時可以看到之前已經有 2.0.1,3.2.0 兩個資料夾了。

四、設定 Flex Builder 3 呼叫 Flex SDK 4:
首先,先進入「功能表選單 => Project => Properties => Flex Compiler 」,看到右上角「Configure Flex SDKs」,進入之後,我們可以看到,已經有 Flex 2.0.1 Hotfix 3 和 Flex 3.2。現在請按下 Add,Flex SDK location 指向 C:\Program Files\Adobe\Flex Builder 3\sdks\4.0.0,Flex SDK name 會自動出現 Flex 4.0,如果沒有,請自行手動輸入。增加完畢後,請在 Flex 4.0 之前打勾。

五、設定專案使用 Flash Player 10 執行:
通常 Flex Builder 3 的專案都是放在 「我的文件 => Flex Builder 3」 的資料夾下。進入想要用 Flex SDK 4 開發的專案資料夾。用記事本打開 「.actionScriptProperties」檔案,找到「htmlPlayerVersion」,把版本從「9.x.x」改成「10.0.12」。此處原本是可以從 Builder 來改,但是不知道為何改了之後無法存檔,只好用記事本改。

六、測試成功與否,輸入:

   
如果沒有錯誤訊息,表示整合成功。

注意事項:

  1. 每次開一個新專案或者舊專案要用 Flex SDK 4 來建構的話,都必須重複執行步驟五,否則 Flex Builder 3 呼叫預設的 Flash Player 9,會產生錯誤訊息。
    http://blog.shortfusion.com/index.cfm/2008/12/27/Flex4Gumbo-Error-1046-Type-Not-Found-Matrix3d–Easy-Fix
  2. Flex 4 和 Flex 3 的 Application 的 XML 命名空間不太一樣,所以語法上也要有些對應調整,可以參考下面這個範例,要改的地方包含 xmlns、所有標籤前方的 mx: 也都不見了。
    http://blog.flexexamples.com/2008/10/22/setting-text-alignment-on-an-fxtextarea-control-in-flex-gumbo/
  3. 另外,當專案最後產出 swf  的時候,可以在 「功能表選單 => Project => Properties => Flex Compiler 」把 「 -locale en_US 」改成「-locale en_US -debug=false 」可讓每個 swf 減少100KB。但是,這樣做會把除錯訊息整個隱藏,要注意。
  4. 此外,切換到 Design Mode 時會出現 warning 訊息,根據討論區的回應,看來目前 Flex 開發團隊還在處理當中。
    http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72&catid=669&threadid=1407689&enterthread=y