使用Flex構建Web和移動參考應用程序

 範例文件

• Shopping Cart
• Sales Dashboard
• Expense Tracker

須要的其餘產品

• Android 2.2及更高版本或Android 3.0及更高版本的設備

僅僅在Flash Builder 4和Flex 4 SDK發佈一年後，新的Flash Builder 4.5和Flex 4.5 SDK版本就已面世！Flex 4.5 SDK和Flash Builder 4.5的關注重點是構建以Google Android、Blackberry Tablet OS和Apple iOS操做系統爲目標的移動應用程序的能力。此外，Flex 4.5 SDK針對大型應用程序開發引入了新的Spark組件和改進，而Flash Builder 4.5引入數十個新的編碼生產力功能，以提升ActionScript和MXML開發速度。要了解Flex 4.5 SDK中的新功能和改進功能的更多信息，請查閱 Deepa Subramaniam 的文章。此外，要了解Flash Builder 4.5中的新功能，包括新的面向開發人員的功能以及使用Flash Catalyst CS 5.5的新工做流，請查閱 Andrew Shorten的文章。若是您但願具體瞭解Flex 4.5 SDK和Flash Builder 4.5中新的移動功能，請查閱 Narciso Jaramillo的概述文章。

在本文中，我將介紹如何構建同時適合傳統Web和移動部署的應用程序。咱們將探討咱們所構建的3個參考應用程序，其中每一個應用程序既可在瀏覽器中做爲傳統的Web應用程序運行，又能夠在移動設備上運行。這3個應用程序是 Shopping Cart, Expense Tracker 和 Sales Dashboard 應用程序。咱們將介紹在爲移動和平板設備以及Web構建Flex應用程序時的具體考慮因素。此外，咱們還將介紹個人團隊如何搭建應用程序，以在Web和設備項目之間共享代碼。最後，咱們將探討在爲全部形式的環境構建應用程序時應該考慮的性能因素。

建立新Flex Mobile項目

除了支持Flash Builder 4中可用的全部項目類型，Flash Builder 4.5還引入了其餘Flex項目類型，包括Flex Mobile項目和ActionScript Mobile項目。這些移動項目針對移動應用程序開發進行了調節。Flex Mobile項目可以理解適用於移動設備的移動「安全的」Flex組件。此外，Flash Builder 4.5在建立新移動項目時可爲您提供幫助，不管是Flex Mobile仍是ActionScript Mobile項目。要建立新Flex Mobile項目，請轉到 File > New > Flex Mobile Project。 您將看到Flash Builder會幫助您執行建立和配置一個新的移動項目，包括它的名稱和您但願構建的移動應用程序類型。Shopping Cart、Expense Tracker和Sales Dashboard移動應用程序都使用基於視圖的應用程序類型。這意味着應用程序的每一個視圖都有其本身的View類控制，全部視圖都由一個ViewNavigatorApplication 控制。Shopping Cart和Expense Tracker平板應用程序也由ViewNavigatorApplication控制。可是，Dashboard平板應用程序是一個標準的AIR應用程序，使用一個SplitViewNavigator來管理它的視圖。

Flash Builder 4.5將幫助爲您基於視圖的應用程序建立存根視圖。您而後能夠添加您應用程序的後續視圖。每一個存根視圖從spark.components.View類派 生而來。視圖可理解如何顯示數據並將信息注入到動做欄（Action Bar）。動做欄是每一個應用程序頂部的導航UI。這提供了當前視圖的上下文信息，包括當前視圖的標題和可將用戶導航到應用程序內的特定位置的動做按鈕。

Shopping Cart移動項目將其全部子視圖組織到 com.adobe.mobileshoppingcart.view 包中。您可在其中看到爲Shopping Cart移動應用程序內的每一個後續視圖建立UI的MXML類。例如，CartView.mxml 是用戶選擇了要購買的商品後的結算視圖，或者ItemDetailsView是各個商品的細節視圖（參見圖1）。

圖1. 各個商品的細節視圖由ItemDetailsView.mxml類控制。該視圖知道如何將上下文信息注入到頂部的動做欄導航欄中。在本例中，動做欄中顯示了當前商品的名稱。

專爲在多個屏幕間實現最高代碼重用率而設計

Flash Builder 4.5爲您提供了爲各類不一樣的項目目標（包括針對使用Adobe Flash Player部署的Web，或針對使用Adobe AIR部署的桌面、平板設備或移動設備）開發應用程序所需的全部工做流。針對咱們的團隊，咱們決定在構建Shopping Cart、Expense Tracker和Sales Dashboard應用程序的Web和設備版本時使用一種應用程序體系結構。此應用程序體系結構很是適合跨開發團隊組織代碼，以及保持UI代碼與服務層代 碼分離。此外，此體系結構還容許咱們在Web和移動項目之間共享代碼。（注意：沒有必要使用一種應用程序體系結構來在Web和移動項目之間共享代碼，但對 於咱們這樣的分佈式開發團隊，事實證實應用程序體系結構頗有用）。

咱們選擇的體系結構比較鬆散，基於一種經典的模型-視圖-演示器（MVP）體系結構。MVP使用被動視圖，利用一種正式的控制器來在視圖之間傳遞狀態和UI信息。經過將全部邏輯代碼保存在視圖文件外部，我和個人團隊可以在多個項目中重用核心應用程序代碼。

FXP與FXPL對比

 

將在多個項目之間（在咱們的示例中，在Web項目與移動項目之間）共享的核心應用程序代碼所有包含在一個Flex Library Project（FXLP）中。例如，MobileShoppingCart.fxp、ShoppingCartTablet.fxp和 ShoppingCartWeb.fxp都連接到ShoppingCartLib.fxpl中。ShoppingCartLib.fxpl包含全部在 Web和設備版本之間共享的相關代碼，包括服務層和實用程序類。相似地，DashboardMobile.fxp、 DashboardTablet.fxp和DashboardWeb.fxp都連接到DashboardLib.fxpl和 DashboardChartLib.fxpl中。這些FXPL包含在Sales Dashboard Web和設備應用程序中處理圖表組件和數據管理的共享代碼。最後，CRUDMobile.fxp、CRUDTablet.fxp和CRUDWeb.fxp 連接到共享庫項目CRUDLib.fxpl中。

當使用一個Flex Library項目時，通常的經驗規則是，數據模型、控制器、服務、事件和實用程序類都應包含在內。通常而言，庫項目不該包含任何特定於UI的代碼，除非 能夠在不一樣類型的環境中共享該UI。像MobileShoppingCart.fxp這樣添加特定於移動的UI代碼是Flex Mobile項目的責任，像ShoppingCartWeb.fxp這樣添加特定於瀏覽器（或桌面）的UI的代碼是Flex項目的責任。這一實踐有助於確保跨不一樣的環境出色地封裝和重用通用代碼。

演示器

 

演示器是應用程序體系結構中的重要部分。應用程序的每一個功能狀態都有一個presenter類。演示器的實例注入到視圖文件中，既可經過使用Swiz等框 架進行元數據注入，從一個單一實例模型引用，也能夠經過構造函數傳入演示器。在上面列出的示例項目中，主要類的演示器實例從一種單一實例模型引用，而項目 呈現器的演示器在控制器類中動態建立。例如，MobileShoppingCart.fxp中的ItemDetailsView.mxml類在第36行具備對一個presenter變量的引用。視圖正是從這個presenter對象引用了應用程序的業務邏輯。相似地，每一個Web和移動應用程序的List組件顯示了一組presenter對象。MobileShoppingCart.fxp的MainView.mxml中的List控件顯示了用戶正在查看的一組項。這些數據項是視圖顯示的presenter對象。

視圖顯示的全部屬性由演示器持有。演示器經過事件與視圖通訊。這就是每一個presenter類都擴展EventDispatcher的緣由。請查閱ShoppingCartLib.fxpl項目中包含的ItemPresenter類（com.adobe.shoppingcart.presenter）。請注意，ItemPresenter擴展了EventDispatcher，並在有內容發生更改時分派事件。經過這種方式，演示器公開一個公共方法API，視圖可調用該API來適當地顯示UI。

演示器持有它用於分派事件的IEventDispatcher對象的實例，在本例中爲控制器實例。這是演示器與應用程序的業務邏輯部分通訊的方式。演示器從不持有控制器的實例，或者在此過程當中執行函數調用。爲了保持封裝，演示器僅分派事件。事件是演示器與控制器之間的契約。

控制器

 

控制器控制應用程序的不一樣部分之間的通訊。應用程序狀態決策在控制器內製定。在應用程序啓動時，會建立控制器的一個實例。在示例項目中，請查閱WebShoppingCart.mxml和MobileShoppingCart.mxml中的preinitalizeHandler。這是爲Shopping Cart應用程序的Web和移動版本建立控制器的地方。控制器建立presenter對象的實例並將它們存儲在模型中。此外，控制器還設置模型上的全部屬性。

控制器還監聽來自演示器的事件。例如，當演示器觸發一個事件來更改當前屏幕時，控制器會處理該事件。控制器而後就應該如何處理演示器的請求而指定邏輯決策。控制器能夠調用服務層或直接在演示器上設置屬性。

須要在多個演示器之間保持同步的屬性有時緩存在模型中，但在大多數狀況下，每一個演示器持有本身的狀態和屬性。如MVP所述，您徹底可讓模型來持有狀態並可以向演示器廣播狀態更改，但就個人經驗來說，這隻會增長複雜性，而沒有任何好處。

在少數狀況，我會發現控制器的行爲須要因項目目標不一樣而不一樣。在這些狀況下，我擴展控制器並改寫須要自定義實現的方法。這個擴展的控制器是我在對特定項目類型進行主要初始化期間實例化的類。

視圖

 

視圖代碼經常不會在不一樣類型項目之間共享。可是，Flex Mobile項目能夠包含特定於移動的UI，Flex項目包含非特定於移動的UI。這樣，用戶界面可針對運行應用程序的具體環境而調節。

爲您的應用程序須要支持的每種目標屏幕建立一個新FLex或ActionScript項目。相似的目標屏幕，好比移動電話和平板電腦，可能可以使用相同的項目，具體取決於您應用程序的須要，但Flex確實支持專門針對智能電話和平板電腦建立UI。

特定於視圖的UI代碼（MXML文件、CSS樣式表、圖像和字體等資產）應該在每一個項目中建立。儘管大部分視圖代碼都是專門針對項目的目標環境而建立的， 但全部核心應用程序代碼均可以共享。您在項目中建立的每一個新視圖將可以經過演示器與應用程序的剩餘部分通訊。由於視圖中沒有保存邏輯代碼，因此在項目之間 複製視圖中的代碼的須要極少。相反，您能夠綁定到演示器上的屬性，在演示器上調用方法來響應用戶手勢。

模型

 

模型用於存儲演示器的實例。演示器的實例同時從控制器和視圖引用。模型持有演示器的實例，因此控制器和視圖均可以訪問相同實例。

視圖毫不應該引用模型中的屬性。相反，視圖僅應瞭解此演示器（以及可能一個狀態枚舉或某種相似聲明）。直接從視圖引用模型對象會破壞封裝模式。簡單來說，視圖應該知道的惟一的契約就是演示器的契約。

若是您在使用Swiz等框架，您能夠將演示器注入到您的視圖中，而放棄在模型中持有它。Swiz框架會爲您建立和管理演示器的實例。

服務層

 

我強烈建議使用由一個接口定義的服務委託。這支持輕鬆切換到不一樣的服務實現，而不更改任何其餘應用程序代碼。若是您在應用程序開發的初始階段開發模擬或還未完成的服務，這種方法將特別有用。

在我使用的體系結構上下文中，控制器持有服務對象的實例。控制器在服務對象上進行調用並監聽響應。咱們使用AsyncToken做爲監聽結果的服務契約； 在這種狀況下很容易得到故障。在CRUDTablet.fxp中，若是您查看ExpenseItemsSQLLiteService.as，能夠看到此方 法容許咱們輕鬆切換到使用SQLLite存儲咱們的數據。

設計和實現您的應用程序UI

您能夠與設計者合做實現您應用程序的UI的觀感和交互模式，不管它針對的是Web、移動、平板仍是桌面。咱們的團隊與設計者合做設計了每一個視圖，尤爲是針 對移動和平板項目。咱們的設計者深刻考慮了用戶將如何與運行應用程序的移動或平板設備交互、各類不一樣設備的屏幕大小和每英寸密度，以及用戶在使用移動或平 板設備時熟悉的導航模式。有了全部這些信息，以及Flex提供的便利性，咱們可以完成既在視覺上富有吸引力，又易於經過Flex實現的設計。

與設計者合做

 

優秀的用戶體驗設計者和視覺設計者可將應用程序從「不錯」提高到「驚豔」。設計者和開發者之間的良好溝通須要在形式和功能上實現平衡，這可能帶來不只易於 使用，並且具備漂亮外觀和功能的應用程序！在個人經驗中，許多組織將用戶體驗設計與視覺設計混淆在一塊兒。在許多時候，用戶體驗設計者的角色被忽略了，這一 任務落在視覺設計者或開發者頭上。用戶體驗設計者將時間用於分析應該如何與應用程序交互，包括數據和應用程序狀態的顯示和導航。在個人經驗中，有專門的設 計者或負責用戶體驗的專家的項目會實現更優秀的軟件。

在咱們的項目中，Web項目都擁有由視覺設計者在Adobe Illustrator CS5或Adobe Fireworks CS5中建立的線框圖。線框圖而後轉換爲功能性的Flex代碼，這經過使用Flash Catalyst CS 5.5來完成，或者使用開發人員基於視覺設計者提供的線框圖爲Flex組件親自設計的Spark皮膚來完成。此外，Flash Builder Wireframe主題很是適合在早期階段草擬應用程序的簡單UI。要了解如何使用Flash Builder 4.5和Flash Catalyst CS 5.5來爲您的項目開發皮膚和資產的更多信息，請查閱Jacob Surber編寫的這篇文章。

皮膚

 

Flex 4引入的皮膚體系結構使建立自定義視圖變得很是簡單，不管它是用於移動仍是Web項目。要了解這個名爲Spark的新皮膚體系結構，請查閱這篇概述文章。

Flex 4.5 SDK在Spark基礎上構建了它的全部移動組件和功能。全部這些組件都針對在Flex SDK 4.5中使用進行了優化，包含特殊的移動皮膚。出於性能緣由，這些皮膚是在ActionScript中建立的。這些移動皮膚是輕量型的，但沒有公開與默認 Flex 4皮膚那麼多的樣式。對於大部分移動項目，咱們在ActionScript 3中建立了新屏幕，可是，咱們能夠在一些地方使用MXML皮膚。通常的經驗規則是，基於MXML的Flex Mobile項目皮膚很是不錯，尤爲是在不多使用時。可是若是您要考慮性能問題，切換到基於ActionScript的皮膚有望實現更高性能。由於平板設 備一般擁有更快的處理器，因此與電話應用程序相比，咱們能夠爲皮膚使用更多MXML。對於大部分Shopping Cart、Expense Tracker和Dashboard移動項目，當爲移動組件建立新皮膚時，咱們擴展了默認的移動ActionScript皮膚，而不是使用默認的MXML 皮膚。

一般，在皮膚文件中程序化地編寫繪圖代碼是將視覺設計轉換爲Flex的最佳方式。乍看起來這可能很單調，但儘管一段時間後，它將變成第二特性。這還意味着 您擁有高得多的性能！在大多數狀況下，在皮膚文件中手動繪製代碼會獲得比嵌入式資產漂亮得多的皮膚。即便您不但願使用純ActionScript來完成此 任務，也可使用FXG。通常而言，建議在Flex Mobile項目中使用FXG。請注意，Shopping Cart項目中的大部分皮膚都是使用FXG建立的。以這種方式建立的皮膚更小且更容易在整個應用程序生命週期內維護。

對於沒法經過FXG輕鬆地從新建立的做品，有必要使用外部資源。儘管Flex支持加載和嵌入許多類型的資產，但一些格式可能比其餘格式更適合。對於靜態矢 量資產，FXG是最佳的選擇。對於靜態位圖，JPG文件多是最小且最容易使用的圖形。在可能時，具備透明度的位圖應該從新建立爲矢量圖。這是一條不錯的 性能提高技巧。通常而言，鼓勵視覺設計者使用更少位圖是種不錯的作法。

爲Web和設備項目建立快速列表

數據感知的控件很重要，經常用在Flex項目中。在全部移動參考項目中。列表用於顯示數據，用戶與列表交互來深刻操做應用程序。相似地，Web項目使用列表和其餘相似列表的組件來向最終用戶顯示數據和上下文信息。

Spark List組件針對Flex 4.5 SDK中的移動用途進行了優化。此外，Flex 4.5 SDK中首次推出了一種Spark DataGrid。在兩種狀況下，都須要理解如何建立高性能的項目呈現器供組件用於顯示數據。項目呈現器經常是影響交互性及列表和基於列表的組件的平滑性 的主要罪魁禍首。此外，您可能但願避免向列表中添加DropShadow等濾鏡，由於整個列表在滾動時必須緩存爲位圖。如下各節將介紹建立高性能項目呈現 器供Spark Lists和Spark DataGrids使用的技巧。

在Web Shopping Cart應用程序中編寫快速的呈現器

 

項目迭代器是一個類，它定義來顯示綁定到基於列表的組件的數據。當滾動Spark列表時，項目呈現器會很是頻繁地從新繪製。這種從新繪製有時可能延緩您應用程序的速度。若是花時間編寫有效且智能的項目呈現器，將顯著改善您的移動或非移動應用程序中的列表的滾動體驗。

在Shopping Cart Web項目中，咱們使用多個自定義項目呈現器。看一下ShoppingCartWeb.fxp項目中的 ItemPreviewListRenderer.mxml。請注意，這個項目呈現器沒有無關的FXG的元素，它沒有過分使用數據綁定，並且它也沒有嵌套 太多容器或組。這些都是建立高性能項目呈現器的不錯技巧，不管用於移動仍是非移動列表。

Spark List組件默認將屬性useVirtualLayout設置爲true。這意味着項目呈現器將在將新數據項滾入視圖中時獲得重用。這在顯示和導航較長的數據列表時很是有用。

當建立或回收一個項目呈現器時，該數據屬性設置爲須要顯示的新項。爲了管理這一數據設置，您須要改寫數據屬性的setter。在ItemPreviewListRenderer.mxml中， 您將會注意到，該數據屬性其實是一個presenter對象的實例。當設置時，該數據屬性轉換爲一個ItemPresenter，而後設置爲 presenter類屬性。這個視覺組件進而綁定到演示器中的屬性，並在該演示器上執行方法調用。這是將演示器用於封裝邏輯的一個很是不錯的例子。

在Mobile Shopping Cart應用程序中編寫快速呈現器

 

當開發Shopping Cart移動項目時，咱們在優化每一個包含Spark List組件的視圖中使用的項目呈現器上投入了大量精力。不建議將默認Flex ItemRenderer類（您可能習慣於在Web和桌面Flex項目中使用它）用於Flex Mobile項目中。相反，引入了新的項目呈現器類，它們專門針對移動領域進行了優化。這包括LabelItemRenderer（一個用於顯示一行文本 的默認移動呈現器）和IconItemRenderer（一個用於顯示文本和圖像的默認移動呈現器）（參見圖2）。

LabelItemRenderer

圖2：一個使用新LabelItemRenderer類的簡單的Spark列表

您在爲用於Flex Mobile項目中的列表組件建立簡單的文本項呈現器時使用的基類是LabelItemRenderer。LableItemRenderer擴展了UIComponent並比ItemRenderer小得多，由於ItemRenderer擴展自Group，所以更加複雜。LabelItemRenderer是移動Flex項目中的列表組件的默認項目呈現器。它呈現單個文本元素，如上面的屏幕截圖所示。LabelItemRenderer繼承了在父List組件上設置的labelField屬性，在一個名爲標籤的文本元素中顯示文本。該標籤是StyleableTextField的一個實例。StyleableTextField擴展了TextField，從名稱能夠看出，它提供了一種應用CSS樣式來控制文本顯示的機制。儘管TLF文本很是適合在Web和桌面應用程序中使用，但TextField的執行性能在移動場景中好得多。TextField在移動應用程序中滾動包含大量文本的元素時特別有用。

選擇LabelItemRenderer可開箱即用的實現最快的滾動性能。當編寫您本身的項目呈現器時，能夠從LabelItemRenderer派生子類。通常而言，能夠複製在LabelItemRenderer中使用的實踐和原則（好比編程代碼），以處理度量和佈局以及對數據綁定的過量使用的敏感性。

IconItemRenderer

圖3：一個使用新IconItemRenderer類的簡單Spark列表

IconItemRenderer擴展自LabelItemRenderer。除了LabelItemRenderer提供的文本顯示，IconItemRenderer還提供了其餘顯示元素，好比：

• 標籤
• 消息
• 圖標
• 修飾符
• 圖標占位符

標籤元素與LabelItemRenderer中相同，顯示綁定到呈現器的文本。消息顯示元素是一個輔助（和可選的）文本顯示元素，也是StyleableTextField的一個實例。

圖標顯示元素是BitmapImage組件的一個實例。BitmapImage已在Flex 4.5 SDK中獲得了改進，具備更高的性能，由於它可緩存它所顯示的視覺資產。圖標元素是默認顯示在項目呈現器左側的圖像，如上圖所示（參見圖3）。

修飾符元素也是BitmapImage的一個實例。它經常設置爲V形圖標，默認顯示在呈現器的右側。建議將修飾符設置爲嵌入式圖像資產，以實現最高的性能。

圖標占位符也是BitmapImage的一個實例。它是在加載圖標圖像或丟失圖標圖像時顯示的圖像。像修飾符同樣，建議嵌入圖標占位符資產以實現最優性能。

當您須要爲移動列表自定義項目呈現器時，您有3個選項：擴展UIComponent、擴展LabelItemRender或擴展IconItemRenderer。在Shopping Cart移動項目中，請查閱com.adobe.mobileshoppingcart.view.renderer包中的ItemPreviewImageRenderer.as。這個項目呈現器擴展自IconItemRenderer，利用了所定義的現有的顯示元素。我僅設置了必要的屬性，具備平滑的滾動列表。

使用Spark DataGrid

在Expense Tracker Web項目中，咱們使用了Flex 4.5 SDK中新增的Spark DataGrid。Spark DataGrid相對於MX DataGrid擁有多項改進。它經過一個內容豐富的Spark皮膚協議全面支持視覺自定義。此外，Spark DataGrid還支持針對同時適合頁眉和項目的呈現器，全面支持高級的列功能，好比大小調整和排序，便可全面訪問又可編輯。您可查閱 CRUDWeb.fxp中的DataGridView.mxml，瞭解DataGrid的實際應用。

定義DataGrid的列

Spark DataGrid有一個類型爲IList的columns屬性。columns列表應該包含GridColumn對象。在Expense Tracker Web應用程序中，用戶可以經過一個設置控件打開和關閉列。

在上面說起的體系結構中，演示器持有視圖的全部狀態。在這種狀況下，演示器持有當前由用戶「打開」（可見）的列列表。由於GridColumn歸爲視圖對象類別，因此GridColumn不知足添加到共享的CRUDLib庫項目來與Expense Tracker移動項目共享的標準。

爲了解決此問題，我建立了一種新接口和模型對象：

IGridColumnModel和GridColumnModel。IGridColumnModel是一種僅包含數據的GridColumn視圖對象表示，主要的演示器類持有columnList ArrayCollection中的一組GridColumnModel對象。該視圖進而監聽對columnList ArrayCollection的更改，而後使用一個自定義工廠類來構建GridColumn視圖對象的實例。這個工廠類名爲GridColumnFactory，有一個名爲buildGridColumn()的靜態方法，該方法獲取一個IGridColumnModel對象並返回一個GridColumn。這容許全部視圖代碼保留在合適的項目中，狀態仍然保存在共享的演示器代碼中。

與其餘項目呈現器同樣，在建立DataGrid項目呈現器時應該考慮效率。如下是建立高性能DataGrid項目呈現器的一些技巧：

• 在GridColumn內構建任何格式化器對象，而不直接在項目呈現器中構建它。這將減小須要建立的格式化器對象的數量，此外，GridColumn擁有對應用格式化器的原生支持。藉助該支持，項目呈現器的標籤屬性將由GridColumn格式化。
• GridItemRenderers應該使用prepare()方法，而不設置數據來初始化呈現器和處理更新。
• 不要過分嵌套容器或向DataGrid的項目呈現器中添加沒必要要的顯示元素。精減保持針對任何項目呈現器的顯示列表是改善性能的關鍵。

在Web和移動項目中使用MX圖表

Flex Mobile項目須要Spark組件，不過有一個例外，那就是容許使用MX圖表組件，好比ColumnChart、BarChart、PieChart等。 當在Flash Builder 4.5中建立新Flex Mobile項目時，圖表組件已包含在項目的庫路徑中，因此這些組件可直接用於代碼提示和設計視圖中。Sales Dashboard Web和移動項目都使用了圖表組件來顯示財務信息。共享的數據層以及共享的UI圖表組件都包含在DashboardChartLib.fxpl中。這是在 Web和移動項目之間經過單一Flex Library項目共享UI代碼的示例。除了圖表組件，DashboardMobile.fxp和DashboardWeb.fxp包含全部特定於Web 或移動環境的UI代碼（好比特定於移動環境的項目呈現器）。

將SplitViewNavigator用於平板應用程序

平板應用程序的一種通用佈局模式是大綱/細節佈局。若是查看DashboardTablet.fxp項目，您將看到此佈局的實際應用。當應用程序處於橫向 模式時，左側有一列小視圖。單擊一個小視圖會在右側打開較大的細節視圖。當應用程序出於縱向模式時，左側列會消失，較大的細節視圖將填滿整個屏幕。較小的 大綱視圖的列如今可經過屏幕左上角的CalloutButton訪問。此佈局可輕鬆地實現爲SplitViewNavigator容器。

查看DashboardTablet.mxml，您將看到根mxml標記是一個Application標記，而不是在其餘平板項目中看到的 ViewNavigatorApplication標籤。這是由於沒有SplitViewNavigator應用程序類型。咱們仍然可以使用 ViewNavigatorApplication的元素，使用NavigatorContent容器來持有咱們的頂部導航元素。除了 NavigatorContent容器，您還將看到SplitViewNavigator容器。

在SplitViewNavigator的屬性內，咱們能夠指定縱向和橫向狀態下的佈局，以及咱們是否但願自動在縱向模式下自動隱藏第一個視圖導航程序。 這個SplitViewNavigator的內容是兩個ViewNavigators。一個用於大綱視圖，一個用於細節視圖。這些 ViewNavigator可能分配了第一個視圖，以及將視圖推送到其中或在其中彈出，就像傳統的移動應用程序同樣。您可在 DashboardTablet MXML文件頂部的goStateHandler中看到一個相關示例。

爲平板設備上的菜單使用CalloutButton

在CRUDMobile.fxp和DashboardMobile.fxp應用程序中，咱們建立了一個擴展 SkinnablePopUpContainer的自定義MultiSelectList組件，以建立一個模態的全屏菜單，以容許用戶選擇一個選項。儘管 此方法很是適合電話設備，但它不是很適合平板設備。使用平板設備，咱們擁有多得多的空間，因此一個具備少許選項的全屏模態列表不是理想的選擇。

爲了解決此問題，我在咱們的自定義MultiSelectComponent中使用了新的CalloutButton組件，可在 DashboardTablet.fxp和CRUDTablet.fxp中找到它們。儘管從名稱看來CalloutButton多是個控件，但它實際上是 容器。當按下按鈕時，您在CalloutButton的開始和結束標記之間添加的任何內容都會在一個Callout中顯示。