經驗總結 解析Flex3與Flex4之間的區別
本文和大家重點討論一下Flex3與Flex4之間的區別,簡要概述Flex4的主要目的和架構區別并介紹組件、布局、狀態使用和效果方面的變化。希望本文的介紹能讓你有所收獲。
Flex3與Flex4之間的區別
Flex4(代碼名:Gumbo)發行版在Flex3基礎上做出重大改動。Flex4引入了一個新的組件和外觀架構。但是作為Flex3開發人員,您在使用Flex4編譯Flex3應用程序時可能不會遇到太多難題,因為新發行版的目的之一是保持與Flex3的向后兼容性。
在本文中,我將簡要概述Flex4的主要目的和架構區別并介紹組件、布局、狀態使用和效果方面的變化。我還將針對使用Flex4編譯Flex3應用程序時遇到的情況回答一些提問。本文無法涵蓋Flex4的所有新增功能。相關信息請閱讀Flex4新增功能一文。
必備知識
本文假設您熟悉Flex3Framework。
將應用程序遷移到FLEX4
將Flex3應用程序遷移到Flex4時,步驟并不復雜。除了一些缺陷修復以及默認主題稍有變化,您的應用程序通常可以像Flex3中那樣正常運行(或更好)。但您必須注意幾點。
◆播放器依賴性
請務必針對FlashPlayer10進行編譯。Flex4SDK需要FlashPlayer10支持。
字體選擇器需要一個命名空間
CSS字體選擇器將Flex類命名為style。例如,以下是Button和DateField的字體選擇器:
- Button{
- cornerRadius:10;
- }
- DateField{
- color:#780800;
- }
從Flex4SDK開始,當應用程序使用字體選擇器時,需要命名空間。如果您只在Flex應用程序中使用MXML2006命名空間,請將以下默認命名空間聲明添加到CSS中:
- <mx:Style>
- @namespace"http://www.adobe.com/2006/mxml";
- …
- </mx:Style>
如果在應用程序中使用多個命名空間,您需要在CSS中提供各個命名空間。有關示例,請參閱本文稍后部分中的Flex4中的命名空間與包。
此外,如果應用程序使用StyleManager.getStyleDeclaration("Button")等方法,字體選擇器必須包含它的包。例如,對getStyleDeclaration()的調用將改為StyleManager.getStyleDeclaration("mx.controls.Button")。
◆主題更改
Flex3(MX)組件的默認主題現在是Spark主題。因此,當您使用Flex4SDK編譯應用程序時,它的外觀和大小可能有所不同。但是,如果要使用Flex3的外觀,您還是可以做到的,因為Flex4包含Flex3的Halo主題。要使用Halo主題進行編譯,您可以使用附加編譯器參數-compatibility-version=3.0。在FlashBuilder4中,您可以在“PropertiesPanel”(屬性面板)中這樣做。在“PropertiesPanel”(屬性面板)中,選擇“FlexCompiler”(Flex編譯器)并單擊“UseFlex3compatibilitymode”(使用Flex3兼容性模式)復選框(請參閱圖1)。
您也可以通過“Properties”(屬性)->“FlexTheme”(Flex主題)面板將主題從默認Spark主題改為Halo。在“FlexTheme”(Flex主題)面板中,單擊Halo主題(請參閱圖2)。
圖2.從“PropertiesPanel”(屬性面板)中選擇“HaloTheme”(Halo主題)
如果您選擇使用新的Spark主題,請注意許多可用于Halo主題的樣式無法用于Spark主題。Spark主題只支持數量有限的樣式。要了解Spark外觀可以使用哪些樣式,您應當參閱ASDoc。將為每個組件列出的各個樣式指定一個“主題”。如果未指定主題,表示該樣式既可用于Halo,也可用于Spark主題。Flex4還加入了一種設計用于快速模型的線框外觀。線框主題不支持樣式更改。
除了主題更改外,Flex4應用程序的默認預下載器也已經改為mx.preloaders.SparkDownloadProgressBar。這個更輕量級的預下載器可以縮短一些啟動時間。如果要使用Flex3預下載器,您只需更改一行代碼。在Application標簽中添加以下內容:preloader="mx.preloaders.DownloadProgressBar"。
如果要將應用程序從Flex3遷移到Flex4,我不建議將各個Flex3MX組件替換為它們對應的Flex4組件。這樣投入時間可能并不是一個好方法。您應當為新的應用程序轉而使用Flex4組件架構。
◆自動庫位置更改
在Flex3中,自動庫位于{sdk}/frameworks/libs中,而在Flex4中,它位于{sdk}/frameworks/libs/automation中。用戶應當確保frameworks/libs中沒有自動庫副本。
◆FLEX4架構變化概述
Flex4SDK的重要主題之一是“用心設計”。這個目標涉及在設計人員和開發人員之間創造一個更順暢的工作流程。為了幫助實現這一點,該框架將組件可視部分與其剩余行為明確劃分開。在Flex3中,組件的代碼包括以其行為、布局和可視變化為中心的邏輯。在Flex4中,組件被劃分為不同的類,各個類負責處理特定的行為。
【編輯推薦】