將 Flex 3 的應用程序遷移到 Flex 4 ―第 1 部分:將 Flex 3 Dashboard 應用程序導入 Flash Builder 4...

　　本系列一共 4 個部分，內容涉及將 Flex 開發人員中心上可用的 Flex 3 Dashboard 演示應用程序導入 Flash Builder 4（用於 Flash 平臺的 Adobe 的 IDE 最新版本），然後將應用程序遷移至 Flex 4 以充分利用 Flex 4 Spark 的架構和組件，本文是第 1 部分。
　　我確實着迷於 Flex 3 Dashboard 應用程序。它是 Flex 的一些強效應用的極佳展示，包括顯示圖表、柵格、表單中的數據，以及可圍繞 UI 拖放的pod中的數據。而且它同時也是將某些迷人的 Flex 功能集成至你自己的應用程序中的絕佳起點。
　　Flash Builder 4 推出時包含 Flex 3.x SDK 和 Flex 4.x SDK。一方面你可以在 Flash Builder 中繼續開發 Flex 3 應用程序，不過遷移至 Flex 4.x 具有明顯的優勢。首先，編譯器速度更快。其次，新的 Spark 組件架構以及新的植皮和狀態模型都是巨大的改進功能。當您也在考慮其它新功能的同時，使用 Flex 4.x SDK 是一個明確的選擇。
　　該系列的第 1 部分（本文）描述了將Flex 3 Dashboard 導入 Flash Builder 4 的同時儘量減少變動的方法。Flex 4.x SDK 推出了新的編譯器，因此導入 Dashboard 需要幾個附加步驟。
　　本系列文章並無改進Dashboard 應用程序架構總體質量的意圖。其目的是提供一個例子，即修改 Flex 3 中創建的應用程序以使用 Flex 4 - 並提供足夠的信息幫助你將自己的 Flex 3 應用程序遷移至 Flex 4。
　　下面是本系列文章涵蓋的一些Flex 4 和一般 Flex 主題： . Flex 3 和 Flex 4 的命名空間的差異
　　. Flex 4 Spark 佈局方案的顯著區別
　　. Flex 4 Spark 植皮模型的顯著區別
　　. 創建和編輯自定義組件的皮膚，包括皮膚狀態
　　. 將 CSS 樣式移入自定義皮膚
　　. 改編 Flex 3 應用程序以使用 Flex 4 的容器和控件 如需試用Dashboard 應用程序，請訪問Flex 3 Dashboard 頁面並單擊體驗應用程序 (Experience The Application) 鏈接。 要完成本系列文章，你需要安裝Flash Builder 4 或 Flash Builder 4.0.1。鑑於你需要Flex 4.1 SDK （如果有，可使用較新版本），使用 Flash Builder 4.0.1 更好。Flex SDK 的 4.1 版本是必須的，因爲它含有所需的重要增強功能，可避免啓動 Dashboard 應用程序時出現運行時錯誤。 如果你有Flash Builder 4 但還沒有 Flex 4.1 SDK，則需要進行下載（如果有，亦可下載最新版本）並將其加入你的 Flash Builder 4 安裝。如果你已經有 Flash Builder 4.0.1，則不需要更新 SDK。
　　請按照以下步驟安裝 Flex 4.1 SDK： 1. 訪問 Flex 4 Downloads頁面。
　　2. 在Latest Milestone Release Builds 部分中下載最新的 Adobe Flex SDK 和 Adobe Add-ons 文件，請勿下載 Open Source Flex SDK 文件。
　　3. ZIP 文件下載完成後，在你的Flash Builder 4 sdks 文件夾中創建一個新文件夾，命名爲 4.1。在 Windows 中，該文件夾的路徑通常爲 C:\Program Files\Adobe\Adobe Flash Builder 4\sdks。
　　4. 將這兩個 ZIP 文件的內容提取至 4.1 文件夾。 要獲取Dashboard 源文件，請直接下載本文的樣本文件 Dashboard-Part1-Start.zip。
　　你也可以在Flex 3 Dashboard 主頁面上下載 Dashboard 源文件 ZIP 存檔。 1. 訪問 Dashboard 源頁面。
　　2. 單擊頁面左下角的Download Source 鏈接。你不需要下載 Flex 3 SDK。 本文的另一個樣本文件Dashboard-Part1-End.zip 含有一個第 1 部分所有步驟已完成的項目。如果需要，你可以使用此項目作爲參考。 當你導入Dashboard 項目時，你還必須選擇該項目的 Flex SDK 版本。本節對這兩個步驟進行描述。 有兩個方法可以將Dashboard 應用程序項目導入 Flash Builder。你可以直接從Dashboard.zip 存檔文件中導入，或者在提取 ZIP 文件內容後將項目導入一個目錄中（參見圖 1）。你可以使用其中一種方法。
　　
　　圖 1. 從項目文件夾中導入。 請按照以下步驟從 ZIP 文件中導入： 1. 選擇File > Import Flex Project in Flash Builder 4。 2. 在Import Flex Project 對話框中，選擇 File 並單擊右邊的 Browse 按鈕。
　　3. 導航至含有 Dashboard.zip 文件的文件夾。
　　4. 選擇該文件並單擊 Open。
　　5. 返回 Import Flex Project 對話框，單擊 Finish。 單擊Finish 之後將彈出一個提示，讓你選擇用哪一個 Flex SDK 編譯該項目（參見圖 2）。Dashboard 項目至少需要 Flex SDK 4.1，或者你可以選擇較新的 Flex 4 SDK 版本（如果有）。 1. 如果你只安裝此教程使用的Flex 4.1 SDK 教程，需要單擊Configure Flex SDKs 鏈接以將其添加爲一個選項。
　　2. 如果你的默認SDK 不是 Flex 4.1，請選擇 Use A Specific SDK 並選擇 Flex 4.1 SDK。 3. 確保Use Flex 3 Compatibility Mode 選項未 選中，因爲你要將 Dashboard 應用程序遷移至 Flex 4。 4. 單擊 OK。
　　
　　圖 2. 選中 Flex 4.1 SDK。
　　5. 如果你從 ZIP 項目存檔文件中導入，並且看到信息說該項目將進行升級（參見圖 3），直接單擊 OK 即可。
　　
　　圖 3. 項目升級提示。
　　6. 導入過程完成後，展開 Dashboard 項目和其在 Package Explorer 視圖（參見圖 4）中的 src 文件夾以查看導入的文件夾和文件。
　　
　　圖 4. 導入之後的項目源文件樹。
　　注：將 Flex 3 Dashboard 應用程序導入 Flash Builder 之後，你可能希望將此已導入但未更改的項目文件保存至另一個位置作爲參考。 項目成功導入之後，你將需要進行幾處代碼更改，以對 Flex 3 SDK 和 Flex 4.x SDK 的不同點進行修正。 注：本文隨後將提到的一些錯誤只有在前幾個錯誤被修復之後纔會顯示，因此你可能還看不見它們。 如果你嘗試建立項目（通過選擇 Project > Build All），你將看到的第一個錯誤是缺失libs文件夾（參見圖 5）。
　　
　　圖 5. Problems 視圖中的錯誤提示缺失 libs 文件夾。 對於新項目，ibs文件夾會通過 Flash Builder 自動創建，但對於不含libs文件夾的導入項目，必須手動創建libs文件夾： 1. 在 Package Explorer 視圖中，右鍵單擊該項目的頂層文件夾Dashboard，然後選擇 New > Folder。
　　2. 輸入libs作爲文件夾名稱。
　　3. 單擊 Finish。 該文件夾可爲空文件夾（參見圖 6），但其必須存在才能消除錯誤。
　　
　　圖 6. Package Explorer 視圖中的新文件夾。 添加libs文件夾之後，再次建立該項目。缺失文件夾錯誤將不再顯示，但你將收到兩個錯誤和兩個警告（參見圖 7）。
　　
　　圖 7. Problems 視圖中顯示的兩個新錯誤和兩個警告。 出現這兩個警告是因爲在 Flex 4.x SDK 中你引用了不同於 Flex 3 SDK 的頂層應用程序的對象和方法。不使用在 Flex 3 中使用的 mx.core.Application 類（例如，Application.application.MY_TOP_VAR_OR_METHOD），在 Flex 4 中你使用 mx.core.FlexGlobals 類（例如，FlexGlobals.topLevelApplication.MY_TOP_VAR_OR_METH OD）。 1. 雙擊第一個警告，打開相關的源代碼文件，然後將光標定位在導致警告的代碼行。 2. 將Application.application替換爲FlexGlobals.topLevelApplication。 3. 對第二個警告重複步驟 1 和步驟 2。
　　4. 保存你的更改。 5. 如果你看見兩個訪問未定義屬性FlexGlobals的錯誤，請將下面一行內容添加至位於另一個導入語句旁邊的 PodLayoutManager.as 的頂端： import mx.core.FlexGlobals; 進行這兩處更改之後再重新建立時，將不再顯示這兩個警告。 這兩個不正確參數編號的錯誤是由 Flex 3.5 SDK 中的 API 更改造成（在 Flex 3.5 SDK 發佈之前，Dashboard 應用程序最初使用較早的 Flex 3 SDK 版本而創建）。這些更改涉及到了 IStroke 和 IFill 接口。出現的問題是，傳送至在接口中定義的兩個方法的參數編號已經更改。
　　要修復以上錯誤，請按照以下步驟： 1. 雙擊第一個錯誤打開 RollOverBoxItemRenderer.as，然後將光標定位在導致該錯誤的行： stroke.apply(g); 出現第一個錯誤是因爲 IStroke 接口法apply()在 Flex 3.5 之前是一個參數，而現在有三個參數。 Flex 3.4 和較早版本： apply(g:Graphics):void Flex 3.5 和Flex 4： apply(graphics:Graphics, targetBounds:Rectangle, targetOrigin:Point):void 2. 將stroke.apply(g);替換爲stroke.apply(g, rc, new Point(rc.left,rc.top));。 3. 將下面的行（如果預先不存在）添加至不含另一個import語句的文件頂端： import flash.geom.Point; 4. 保存你的更改並重新建立項目。將只顯示第二個錯誤。
　　5. 雙擊Problems 視圖中的第二個錯誤，打開 RollOverWedgeItemRenderer.as，然後將光標定位在導致該錯誤的行： f.begin(g,rc); 出現該錯誤是因爲 IFill 接口法begin()在 Flex 3.5 之前是兩個參數，而現在有三個參數。 Flex 3.4 和較早版本： begin(target:Graphics, rc:Rectangle):void Flex 3.5 和 Flex 4： begin(target:Graphics, targetBounds:Rectangle, targetOrigin:Point):void 6. 將f.begin(g,rc);行替換爲f.begin(g,rc, new Point(rc.left,rc.top));即可解決該錯誤。 7. 保存你的更改並重新建立項目。 現在你應該看見兩個新的錯誤和多個警告（參見圖 8）。接下來將修復這些問題。
　　
　　圖 8. Problems 視圖中新出現的錯誤。 要消除以上警告，請按照以下步驟： 1. 打開主應用程序文件 main.mxml。 2. 移除標籤（在第 15 行旁邊）： 3. 保存你的更改並重新建立項目。 此標籤控制的樣式將在本系列文章後續部分的各種自定義皮膚中實施。請勿刪除 styles.css 文件，因爲你在創建自定義皮膚時需要引用它。 要修復剩下的兩個錯誤，請按照以下步驟： 1. 雙擊第一個錯誤，然後在 main.mxml 中，移除 標籤的backgroundSize樣式屬性。 2. 雙擊第二個錯誤，然後在src/com/esria/samples/dashboard/view/ListContent.m xml 中，移除標籤中的themeColor樣式屬性。 3. 保存你的更改並重新建立項目。 至此，最新的警告和錯誤都得到解決，但你還將看見一個 HTML 包相關的新錯誤。接下來你將修復此錯誤。 你需要修復的最後一個錯誤是，Flash Builder 無法創建 HTML 包（參見圖 9）。出現該錯誤是因爲 HTML 模板在 Flex 4 中已經更新以充分利用 SWFObject，這可以提供 Flash Player 檢測的更可靠的方式。
　　
　　圖 9. Problems 視圖中出現的HTML 包錯誤。 該錯誤的修復很簡單： 1. 右鍵單擊錯誤消息然後選擇 Recreate HTML Templates。
　　2. 重新建立項目。
　　3. 驗證 Problems 視圖中無錯誤報告。
　　注：將Flex 3 Dashboard 應用程序導入 Flash Builder 時出現的所有錯誤都被解決之後，你可能希望將此項目文件保存至另一個位置作爲參考。 現在你已經解決了所有出現的錯誤，可以啓動 Flash Builder 4 中的 Dashboard 應用程序，方式是選中 Run > Run Main 或按下 Ctrl+F11（參見圖 10）。
　　
　　圖 10. 用 Flex 4.1 SDK 建立的 Dashboard 應用程序。 啓動該應用程序時，你將注意到顯示內容和該應用程序的 Flex 3 版本大不相同。原因之一是因爲你刪除了標籤，因此該應用程序不再使用應用程序 CSS 樣式引用的圖像。 另一個原因是，該應用程序正在使用 Flex 4.1 SDK。Flex 3 MX 控件的默認外觀和感覺已經發生變化，更類似於新的 Flex 4 Spark 控件的外觀和感覺，而且 MX 控件和容器的某些屬性在 Flex 4 中已發生變化。
　　本系列文章的第 2 部分將引導你遷移該應用程序以使用 Flex 4 Spark 控件和容器，以及新的 Spark 架構。在本系列文章的最後，Dashboard 應用程序將和 Flex 3 版本完全一致。 本文闡述了將 Flex Developer Center Dashboard 演示應用程序（使用 Flex 3 SDK 進行編寫）導入 Flash Builder 4 的方法，作爲遷移該應用程序至 Flex 4 的第一個步驟。
　　現在你已經導入了 Dashboard 項目並解決了轉換至 Flex 4.1 SDK 時突發的最初的錯誤，你可以進入本系列的第 2 部分（即將推出），開始將該應用程序遷移至 Flex 4。
　　關於 Flex 4 的更多信息-尤其是 Dashboard 應用程序相關的特性-請參見以下資源： . Flex 4 幫助 圖表介紹
　　. Flex 4 幫助 深入探討數據
　　. Flex 4 幫助 拖放
　　. Flex 研發人員中心 - Flex 4 的新增功能
　　. Flex 一週視頻培訓（免費） + 根據Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License授予本作品許可。超出本許可證範圍且與本文中包含的示例代碼相關的權限可在Adobe上找到。