就企業級開發而言，Adobe® Flex SDK 經歷了如此巨大的變化，以致很難相信它還是原來那個產品。本文介紹如何使用開源 Flex 4 beta SDK 探索創建 SaaS（Software as a Service，軟體即服務）RIA（Rich Internet Application）的新特性和新功能。
近年來，RIA 開發和 SaaS 的工具箱和框架的數量一直在增加。2004 年併購 Macromedia 之後，Adobe Systems 繼承了 Flex —— 一個我們現在稱為 RIA 的構建框架。Adobe 決定將 Flex SDK 作為一個開源框架，但是，用於構建 Flex 應用程序的基於 Eclipse 的工具仍舊是需要許可的軟體產品，這個工具的品牌名稱最近由 Adobe Flex Builder 變更為 Adobe Flash Builder。
隨著基於雲的 SaaS 的快速增長，不難發現 Flex 框架是 RIA 開發使用得最為廣泛的工具。Flex 之所以與其他應用程序不同，是因為運行它的引擎 — Flash Virtual Machine — 最初是為富圖形編寫的。富圖形可以用於最大化所謂的用戶體驗設計，這使得 Flex 成為創建高級 UI 的一個好工具。作為 Flash 平台的一部分，Flex 對於生成平滑數據驅動的圖形和高級過渡特別有用。有一點不可否認，Flex 的流行很大程度上源於它創建更好的用戶體驗的能力。
本文將詳細介紹 Flex 4 SDK 的組件，這些組件能夠進一步提高您創建高級 RIA UI 的能力。
皮膚和主題
 |
|
Flex 4 SDK 團隊的三個主要目標之首就是 “Design in Mind”。Flex SDK 產品經理 Matthew Chotin 解釋說：“Design in Mind 主題的最顯著特徵就是我們的新的皮膚和組件架構，即 Spark。Spark 構建於現有的 Halo 架構之上，為開發人員和設計人員提供了一種更具表達能力的機制，使他們能夠相互協作，共同創建他們的 Flex 應用程序的外觀。”
由於這個目標，設計 RIA 比以前任何時候更加容易，Adobe 對於創建一個更統一的產品生命周期的關注意味著，用戶體驗能夠在產品開發生命周期中不斷改善。簡而言之，即使用戶體驗設計預算費用呈線性增長，而 SaaS 的成功幾率將呈指數級增長（如下圖所示）。
 |
Spark 和 SaaS
Spark 庫是 Design in Mind 創新的主要支柱之一，它包含在組件內部管理其狀態的組件。您可以通過擴展 SkinnableComponent（如 清單 1 所示）而不是 UIComponent（這在使用 Halo 庫時使用）來進行控制，從而利用這個功能。另外，您可以使用 MXMLComponent 對象擴展 MXML 組件，使用 Group 對象擴展用於封裝一個組件數組的多個組件，以及使用 SkinnableContainer 對象（如您所料）擴展容器組件。
<?xml version="1.0" encoding="utf-8"?> <s:SkinnableContainer skinClass="mySkin"> <s:layout> <s:VerticalLayout horizontalAlign="center"/> </s:layout> <s:Rect> .... </s:Rect> <s:Button ... /> <s:Button ... /> </s:SkinnableContainer>s |
儘管有人會說這隻會將事情弄得更複雜，但是從事企業級項目的人都會由衷地感激這個主要的架構設計變化，因為它進一步分離和抽象具體組件類型的功能，從而允許進一步定製。
清單 2 中的代碼演示了 Spark 庫中的 Panel 組件僅僅是擴展了 SkinnableContainer 基類。有一點值得注意，在 Spark 庫中，SkinnableContainer 類是 Group 基類的一個擴展，Group 基類也可以按照在 Flex 3 中擴展 UiComponent 的方法進行擴展。
public class Panel extends SkinnableContainer { // The content and layout properties are inherited from SkinnableContainer. // Panel doesn't add much other functionality beyond what's in SkinnableContainer [SkinPart(required="true")] /** * The skin part that defines the appearance of the * title text in the container. */ public var titleField:TextGraphicElement; /** * Title or caption displayed in the title bar. */ public var title:String; // This function is called when the skin part is loaded and assigned. override protected function partAdded(partName:String, instance:*):void { // Assign the content to the header and footer. The main content // assignment is done in the superclass (SkinnableContainer) super.partAdded(partName, instance); if (instance == titleField) { titleField.text = title; } } } |
|
使用 FXG 格式
|
|
Adobe Flash XML Graphics (FXG) 是一種在 Flex 應用程序中定義圖形的聲明語法。Adobe 的 livedocs 技術文檔指出：“ FXG 是一種在支持它的應用程序之間互換圖形的基於 XML 的語言。”
通過使用 FXG 來簡化應用程序開發工作流，您可以利用 FXG 的威力。例如，設計者可以從 Adobe Photoshop® CS4、Illustrator® CS4、Fireworks® CS4 或 Flash Catalyst beta 導出一個 FXG 文檔，而導出的代碼可以直接用於 Flex 4 應用程序。FXG 通常用於 Spark 皮膚，繪製 skin 類的視覺組件。您可以以內聯或定製組件的方式使用 FXG 語法。清單 3 的代碼示例演示了如何向 Spark 皮膚添加 FXG 語法。
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:s="library://ns.adobe.com/flex/spark" height="200" width="200"> <s:layout> <s:HorizontalLayout/> </s:layout> <s:SkinnableContainer id="myContainer" height="200" width="200" > <s:Button label="Click Me" skinClass="skins.FXGButtonSkin"/> </s:SkinnableContainer> </s:Application> |
清單 4 中的代碼演示了如何將 FXG 皮膚用作自定義組件。這種方法是首選的實現方法，因為 Flex 編譯器能夠優化 FXG 代碼。
<?xml version="1.0" encoding="utf-8"?> <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:ai="http://ns.adobe.com/ai/2008" xmlns:d="http://ns.adobe.com/fxg/2008/dt" minWidth="21" minHeight="21"> <fx:Metadata> [HostComponent("spark.components.Button")] </fx:Metadata> <s:states> <s:State name="up"/> <s:State name="over"/> <s:State name="down"/> <s:State name="disabled"/> </s:states> |
[火星人 ] 用於創建 SaaS 的 Flex 4 特性已經有682次圍觀
