目錄
- 利用 Flex 開發移動應用程式
- 不僅僅是移動
- 将 Flex 3 項目遷移到 Flex 4
- 其他 Flash Builder 改進
- 後續内容
要求
預備知識
Flex 3 SDK 和 Flex Builder 3 的實踐知識将幫助您最大限度地從本文中受益。
使用者級别
中級
必需的産品
- Flash Builder （下載下傳試用版）
- Flex （下載下傳試用版）
自 Flex 3 和 Flex Builder 3 于 2008 年 2 月釋出以來，世界已經發生了翻天覆地的變化。Adobe 将 Flex Builder 重新命名為 Flash Builder——部分目的在于強調它的價值不僅僅是一種有用的 Flex 開發工具，而且還是最進階的 ActionScript 開發環境。除此之外，Flash Player 和 AIR 運作時已經實作了顯著的進步，新架構也已經出現，包括文本布局架構 (TLF) 和開源媒體架構 (OSMF)。所有這些新增内容使開發人員現可輕松建立多種不同類型的應用程式，包括移動應用程式在内。利用 Flex 4.5 SDK 和 Flash Builder 4.5，開發人員可以建立獨立、跨平台的 AIR 應用程式，其外觀和操作就像安卓手機和平闆電腦、RIM Blackberry Playbook 甚至蘋果 iPhone 和 iPad 裝置上的本機應用程式一樣。
如果您親自嘗試過 Flex 3 SDK 風格的編碼，那麼了解 Flex SDK 以及開發環境中存在變化的一切方面可能有些困難。在這篇文章中，我将填補這一空缺，簡要介紹 SDK 和 Flash Builder 中的新增内容。本文中還包含一個代碼示例，同時也提供了各主題其他參考資料的連結。如果您是一名 Flex 3 開發人員，這篇文章将幫助您了解 Flex 3 與 Flex 4.5 之間存在着怎樣的差别，以及在使用 Flex 4.5 SDK 開發移動應用程式時需要學習哪些知識。
利用 Flex 開發移動應用程式
最引人注目的新功能就是使用 Flex SDK 編寫移動應用程式的能力。為每種尺寸的智能手機和平闆電腦等移動裝置一次性編寫本機應用程式，随後即可跨多家供應商、多種裝置進行釋出，這樣的能力對于以多種移動平台為目标的開發人員來說是一項顯著的優勢。要編寫移動 Flex 應用程式，您需要使用 Flex SDK 4.5 或更新版本，這些版本針對移動裝置進行了優化，包含支援觸摸技術的新控件。
Spark
對于 Flex 4 和 Flex 4.5 來說，您需要了解的第一件事就是 Spark 元件。
Spark 是在 Flex 4 SDK 中引入的，旨在使 Flex 開發人員能夠編寫更加健壯、直覺的代碼，同時利用 Spark 皮膚模型将可視化屬性（使用 MXML 編寫）與功能（使用 ActionScript 編寫）分離開來。您一定會發現，使用 Spark 編寫的代碼更具簡潔、聲明式的特征，實際上也更易于維護。在 Flex 4.5 SDK 中，Spark 得到了改進，增加了支援觸摸技術的元件、特定于移動的優化等等。通過這樣的改進，Adobe 就為開發多螢幕應用程式提供了出色的架構。
如果您在 Flash Builder 中建立一個 Flex 4.5 MXML 應用程式，則主應用程式檔案将包含以下内容：
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"> 作為一名 Flex 3 開發人員，您可能會注意到的第一個差别就是Application标簽的名稱空間是s 而非 mx；這是包含 Spark 元件的名稱空間。您還會注意到，這裡添加了 MXML 2009 名稱空間，即 fx。從 Flex 4 開始，Flex 元件與特殊語言标簽分離開來。新元件納入 Spark 名稱空間，舊元件保留在 MX 名稱空間之中，不适合上述任一類别的特殊語言标簽将歸入 fx 名稱空間。
注意：有關 Spark 的深入介紹、元件架構的詳盡說明以及更多内容，請閱讀 Deepa Subramaniam 的文章Spark 架構與元件集概述。
Spark 狀态與過渡
Spark 和 MX 元件均基于 mx.core.UIComponent 類，這提供了按照您認為恰當的幾乎任何方式混合使用它們的能力。您可以在 Spark 容器内使用 MX 元件、在 MX 容器内使用 Spark 元件，或者在同一個應用程式内并列使用兩種元件——就像它們處于同一個元件集内一樣。
然而，Spark 與 MX 元件模型之間最大的差異之一就是定義和處理應用程式狀态的方式。
在基于 MX 的 Flex 應用程式中，如果您使用了多種狀态，或者狀态之間存在諸多顯著差異，則代碼的狀态定義部分很快就會變得極難處理。利用 Spark，狀态管理将更加輕松。
使用全新的 Spark 狀态文法，您的 states 塊将更加簡潔，因為它僅需要列舉出所有可能的狀态，而不必定義其差異。舉例來說：
<s:states>
<s:State name="stageOne" />
<s:State name="stageTwo" />
<s:State name="stageThree" />
</s:states> 使用 Spark 元件，狀态的添加、删除和重定位将由各 UI 元件本身處理。考慮以下按鈕：
<s:Button id="panic" label="Don't click me!" x="20" y="20" /> 此代碼定義了一個帶有“Don't click me!”的标簽的按鈕，此按鈕的顯示位置是 20, 20。為将其包含在狀态stageOne和stageThree 中，而不包含在stageTwo中，請添加includeIn屬性：
<s:Button id="panic" label="Don't click me!" x="20" y="20" includeIn="stageOne,stageThree" /> includeIn屬性列舉了顯示元件的所有狀态，如果狀态更改為清單中沒有的一個狀态，則元件将被删除。如果屬性未設定（如原始按鈕代碼中那樣），則控件将包含在所有狀态之中。
要重新定位按鈕，您可以使用點标記來設定特定于狀态的屬性值。考慮這個示例：
<s:Button id="panic" label="Don't click me!" x="20" y="20" x.stageThree="50" y.stageThree="100" /> 在這裡，x 和 y 屬性在最初仍然均為 20，但在狀态更改為 stageThree 時，它們将分别修改為 50 和 100。不帶點标記的普通 x 和 y 屬性指定了未顯式自定的所有狀态的值。Flash Builder 4 及更新版本支援這種文法，也會當您在 Design View 中重定位一個特定屬性處于活動狀态的元素時作出這些代碼修改。
與全新的 States 文法相結合，即可更加輕松地定義和讀取過渡。Flex 在過渡方面也更加智能化，如果過渡屬性可以推導得出，那麼您就可以隐式使用它們。舉例來說，如果您希望一個元件淡入顯示屏，則可使用上述includeIn屬性，在第二個狀态中将其添加到顯示中，同時隻需将該元件指定為淡入過渡的目标即可，例如：
<s:transitions>
<s:Transition fromState="stageTwo" toState="stageThree">
<s:Sequence>
<s:AddAction target="{panic}" />
<s:Fade target="{panic}" />
</s:Sequence>
</s:Transition>
</s:transitions>
<s:Button id="panic" label="Don't click me!" x="20" y="20" x.stageThree="50" y.stageThree="100" /> 就上述代碼而言，Flex 将識别出“panic”按鈕在前一個狀态 (stageTwo) 中不存在，是新添加的，是以将從 alpha 0 淡入到 1.0，而且無需您指定這些值。淡出、移動和其他過渡也可利用同類智能。
您還會注意到我使用了新增的<s:Sequence> 标簽——這是 Flex 4.0 SDK 中新增的。該标簽的子标簽能夠順序執行，支援精确控制過渡效果。類似地，您可以使用<s:Parallel>标簽同時執行多個過渡。
除了淡入之外，還有其他許多選項，您可以在 Spark 效果 (PDF) 文檔中了解全部 Spark 效果和濾鏡。
Spark 皮膚與 FXG
在 Spark 中，功能（使用 ActionScript 編寫）與顯示代碼（使用 MXML 編寫）的分離使得代碼更易于維護，也使得皮膚制作更加輕松。除此之外，FXG 的引入也改進了皮膚制作，這是一種建立充分利用 Flash Player 功能的矢量圖的聲明式文法。
借用 Ryan Frishberg 精彩的文章 Flex 4 中的皮膚簡介中的部分示例代碼，使用 FXG 建立形狀是非常簡單的：
<s:Rect id="rect" width="200" height="30">
<s:fill>
<s:SolidColor color="0x77CC22" />
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x131313" weight="2"/>
</s:stroke>
</s:Rect> 這裡建立了一個具有指定寬度和高度、實心填充色和實心輪廓色的矩形。當然，建立簡便、添加圓角、邊框和您能想到的矢量圖的其他很多相關内容也是非常容易的。
為了簡化皮膚制作過程，Flex 4 引入了一種皮膚協定 (skinning contract)，它支援元件資料、狀态和皮膚部件無縫、直覺地協同工作。在為現有元件制作皮膚時，協定是預定義的，在建立自己的元件時，您将自行定義協定的各個方面。
有關 FXG、編寫和了解皮膚協定、編寫可制作皮膚的元件的更多資訊，請參見 Flex 4 中的皮膚簡介。如果您正在為移動應用程式設計元件和皮膚，則還應閱讀 Jason San Jose 有關優化皮膚的系列文章，第一篇是 Flex 移動皮膚——第 1 部分：經過優化的皮膚制作基礎知識。
支援移動開發的新元件
并非 Flex 中的所有元件都開箱即用地提供了移動裝置模式，是以 Adobe 建立了一些新元件，專門為移動而優化，同時支援觸摸技術，這将您熟悉的 Flex 中的快速開發引入了移動領域。
使用者已經開始希望移動應用程式能夠提供某些體驗：帶有導航按鈕或者标簽的頁眉和/或頁腳區域、中間區域的某種形式的資訊清單。對于具有這種風格的應用程式來說，不同形式的新增 ViewNavigator 元件使得一切更加輕松，正如其名稱所表示的那樣，它能管理視圖間的導航。
除此之外，Flash Builder 4.5 中還添加了 New Flex Mobile Project 向導，提供了多種模闆，利用各種 ViewNavigator 幫助您立即開始開發工作（如圖 1 所示）。
圖 1：在 Flash Builder 4.5 中建立一個 Flex Mobile AIR 項目
在 Application Template 頁籤中，您可以選擇以下三個選項之一：
- Blank 模闆建立一個基本、空白的移動應用程式，附帶支援為多種平台進行編譯所必不可少的 XML 配置。
- View-Based Application 模闆使用 ViewNavigatorApplication 和一個入門視圖建立簡單的基本視圖。基于視圖的應用程式所遵循的設計準則與使用者對于安卓裝置的期待相符。導航往往通過裝置上的硬體按鈕控制，而非使用螢幕上的可視化元素控制。
- Tabbed Application 模闆使用 TabbedViewNavigatorApplication 建立和配置帶有頁籤的基本視圖，為您在向導中指定的各頁籤建立空白的 ViewNavigator 視圖，并将其連接配接在一起。帶有頁籤的應用程式所遵循的設計準則與使用者對于蘋果 iOS 裝置的期待相符。導航完全通過螢幕上的控件實作。
上述模闆僅适用于 Flex (MXML) 項目。如果您選擇編寫一個僅有 ActionScript 的項目，那麼久需要從零開始編寫一切内容。
許多 Flex 元件都為移動技術進行了優化，使您能夠為智能手機和平闆電腦建構各種各樣的應用程式。此類裝置種類繁多，本文無法一一探讨，但如果您正在開發移動應用程式，那麼就應該通覽 Flex 4.5 文檔，自行熟悉其中的内容。特别應該關注有關 Spark 容器、項目渲染器、基于清單的控件、資料網格和網格控件以及文本控件。
不僅僅是移動
除了新增的移動特性之外，Flex 4.5 SDK 還包括适合日常使用的大量新增和更新的元件、雙向綁定支援、全新的文本和媒體架構等等。
新增和更新的元件的數量過多，無法在此處全部列出，但部分重要元件包括：
- 新增——Containers、Layouts、VideoDisplay、VideoPlayer、SkinnablePopupContainer 和 Module
- 更新——DataGrid、Form、Image、Formatters 和 Validators
雙向綁定
雙向綁定解釋起來非常簡單，但有着無比強大的實力。隻要在綁定中的括号前方添加一個 @ 符号，更改就能同時傳播到兩個方向。
下面的示例将有助于表明我之是以如此欣賞這種特性的原因。
在下面的代碼中有一個字元串變量、一個與字元串雙向綁定的 TextInput、一個按照舊方法綁定到相同字元串的标簽。在 TextInput 發送更改時，字元串将因雙向關系而更新，這也會導緻标簽更新。
<fx:Declarations>
<fx:String id="foo" />
</fx:Declarations>
<s:TextInput id="ex" text="@{foo}" />
<s:Label id="disp" text="{foo}" /> TLF 和 OSMF
Flex 4.5 充分利用了全新的文本布局架構 (TLF) 和開源媒體架構 (OSMF)。全新的 VideoDisplay 和 VideoPlayer 元件依靠 OSMF 來實作 HTTP 視訊流。在全新的 Adobe TV 界面中，您可以看到這種功能的一個出色示例，它僅緩沖目前位置以後的一小部分視訊。就像是某些網站中的無限滾動系統，它能識别位置接近緩沖區結束的時候，并檢索更多視訊流。TLF 用于啟用擴充特性，例如從右到左的文本、垂直文本和超過三十種書面語言——在顯示外語内容時，這對于按照外語内容的目标閱讀方式顯示内容極為有用。此外它還提供了一種強大的 API，支援文本列、富控件——包括字距調整和連字等。您可以在 Adobe Labs 的富文本編輯器示範中嘗試許多此類 TLF 特性。
運作時共享庫
Flex 4.5 SDK 利用了比 Flex 3 更加标準的運作時共享庫 (RSL)，提供了帶寬、加載時間和性能方面的改進。RSL 是一種通過将共享資産外化到可獨立下載下傳并緩存在用戶端中的獨立檔案來減小應用程式 SWF 檔案大小的方式。這些共享資産可由任意多個應用程式在運作時加載和使用，但僅傳輸到用戶端一次，這與 HTML web 應用程式外化和緩存 JavaScript 檔案與鏡像的方式極為相似。
Flex 編譯器改進
Flex 4.5 編譯器同樣也得到了進一步的優化。現在，完整生成所占用的記憶體更少，完整和增量生成所需的編譯時間更短，RSL 連結邏輯也得到了改進。在大中型 Flex 項目中，編譯時間的改進高達 20%，完整生成過程中的記憶體占用減少也達到了 20%。
将 Flex 3 項目遷移到 Flex 4
您可能認為将 Flex 3 應用程式遷移到 Flex 4 是極為困難、耗時的，但實際上這非常簡單。随着架構不斷成熟，文法變化越來越少。
有關此主題的更多資訊，請參見 Joan Lafferty 的 Flex 3 與 Flex 4 之間的差異。您也可能希望閱讀 Greg Lafrance 的系列文章，第一篇是将 Flex 3 應用程式遷移到 Flex 4——第 1 部分：将 Flex 3 Dashboard 應用程式導入 Flash Builder 4。
其他 Flash Builder 改進
除了新移動工作流之外，Flash Builder 4.5 還引入了一些全新的編輯器和生産力增強。Quick Assist 就是一種出色的生産力特性，它使您能夠像已經具備依賴項（變量、類、方法等）一樣編寫代碼。Flash Builder 可識别依賴項，并幫助您自動生成它們。現在，您不會再看到紅色的錯誤訓示符，而是會在任何不存在的變量、方法等項目上看到一個金色的 Quick Assist 訓示符。要生成所需的對象，将滑鼠定位在突出顯示的一個或多個詞内，并按下 Command+1 (MAC) 或 Ctrl+1 (PC) 即可。
Quick Assist 也是智能化的，它将在目前檔案的恰當的類、本地方法内生成類變量。在生成函數時（如圖 2 所示），它會檢查傳遞給它的任何參數類型，以便生成正确類型的參數 stub（如圖 3 所示），如果傳回值将儲存在任意位置，則它能夠正确地設定函數的傳回類型。
圖 2：Quick Assist 識别可生成的函數。
圖 3：Quick Assist 代碼生成的結果。
Flash Builder 4.5 經過預先配置，附帶數十種代碼模闆，這與 Eclipse 使用者熟悉的 Snippet 相似。它們使得迅速便捷地插入常用代碼段成為可能，并且還可選擇由其提示您該代碼的某些部分。您還可以修改數百種現有模闆或者添加自己的模闆。
針對使用者體驗設計人員或互動設計人員組成的團隊的工作流同樣也引起了一定的關注。在 Flash Builder 内，您現在可以建立新的 Flash Catalyst 相容項目，支援在 Flash Builder 和 Flash Catalyst 之間往返。
有關 Quick Assist、代碼模闆和 Flash Catalyst 相容項目的更多資訊，請參見 Serge Jesper 在 Adobe TV 上釋出的視訊 Flash Builder 4.5 新增功能。
後續内容
至此，您應該已經熟悉了 Flex 4.5，甚至可能在考慮編寫一個移動應用程式。有關本文所述主題的更多具體資訊，請通路上文中提到的連結。Flex 在多螢幕和移動應用程式開發領域前景光明，我非常高興能夠脫離為多種平台開發獨立本機應用程式的窘境，順應未來，也非常高興能夠開發基于螢幕大小而非制造商的應用程式。
本文遵守知識共享—署名-非商業性使用-相同方式共享3.0 Unported License (Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License)許可條件。
原文連結：A Flex 3 developer's introduction to Flex 4.5 and Flash Builder 4.5