flex css( 轉)

flex css( 轉)

2011年05月23日

　　Dan Orlando, 軟體架構師, Vision Media Group

　　利用已經建構到 Adobe?? Flex 架構内的 CSS 的強大功能。本文提供了在 Flex 内開始使用 CSS 所需的資訊，也提供了在使用 Flex 設計和開發使用者界面時加速工作流的提示和技巧。

　　Flex 最為強大的特性之一是其包含的極大的設計靈活性。這些靈活性大部分可歸功于 Adobe 用 Flex 實作 CSS 。以我為例，我最近為一個新的 Adobe AIR 應用程式擔任進階 UI 設計員，在我向全球 160,000 個使用者正式釋出第一個公開釋出版的若幹天前，我收到了大量設計更改請求。雖然很多開發人員都會将這些最後一分鐘的請求看作是讓人頭痛的事，我卻能在不足 20 分鐘内完成這些更改并将其放入版本控制，而這完全得益于 Flex 和 CSS 的強大功能。

　　常用縮略語

　　UI ：使用者界面

　　W3C ：World Wide Web Consortium

　　我将 CSS 與 Flex 的使用看作是 UI 開發内的一種利用形式。通過我在 UI 開發中積累的經驗，我已經學會了為一些必然性做預期和準備。其中一個必然性是不管您在之前做了什麼樣的計劃，項目的設計與功能需求都會在整個開發周期内随時發生變化。這是基于團隊環境做大規模應用程式開發時的遊戲規則，要在遊戲中取勝，最好的方法就是預先判斷出所有玩家的動向，然後再提前相應做好自己的定位。學會了靈活使用這個開發技巧後，您就可以立于不敗之地，那時再去擊打一個移動目标就變得輕松多了。Flex 的性能，比如與 CSS 的內建，恰巧可以讓您這麼做，正是因為這一點，我才迷上了用 Flex 進行開發。

　　我的目标是在您讀完本文後，您也能夠通過 Flex 去充分利用 CSS 的強大功能，并能作為一名精通 Flex UI 的開發者戰無不勝。如果您已經是一個 Flex 愛好者，那麼我希望您能通過本文學會新的通過 Flex 使用 CSS 的技巧― 特别是對于企業級應用程式。

　　為何要使用 CSS ？

　　大多數面向對象的設計模式都将設計邏輯與行為功能分離開來。由于 Adobe ActionScript 是一種面向對象的語言，是以它也就自然而然地要遵守這些面向對象的程式設計（OOP ）約定。這麼做的好處包括靈活性、保持應用程式易于維護、代碼重用和更好的性能。

　　在 Web 設計界，CSS 是一種标準，用來封裝組成 Web 站點的代碼。考慮到 CSS 的功能和成熟性，很多有經驗的 Web 設計人員都力求用 CSS 實作 Web 站點的設計和布局屬性。其結果是可以獲得對站點觀感的更多的控制和更好的靈活性。CSS 在三、四年前就已經十分流行，那時候 Web 開發人員開始意識到如果 Web 站點的設計能夠獨立于該站點的行為功能，那麼站點的設計在不破壞或者不會對該站點的行為代碼産生負面影響的同時，可以很容易地被修改。這也推動了模闆的迅速發展、對相同代碼庫的皮膚設定以及重新進行皮膚設定。比如，我熱衷于為我的部落格網站使用 WordPress 。有成千上萬的人都在使用相同的開源代碼庫來支撐其部落格站點，而很多時候，您遇到的站點都是建構在 WordPress 之上的，而您卻往往察覺不到這一點，這完全得益于其通過使用 CSS 對代碼和設計進行的成功分離。

　　Flex 内的 CSS

　　首先，對于具有 Web 設計背景的人，最為重要的是要了解 Flex CSS 并不遵循與 W3C CSS 規定相同的約定。在 W3C CSS 版本 2.0 中被用來分離單詞的連字元（- ）并未用作 Flex 實作内的代碼約定的一部分。相反，CSS 的 Flex 實作使用了駝峰式大小寫。比如，W3C CSS2 規範内的 vertical-center 對等于 Flex CSS 内的 verticalCenter 。如果您已經在使用了駝峰式大小寫的程式設計語言内進行過程式設計，那麼，這非常容易習慣。好的消息是 CSS 2.0 規範内可用的大部分内容在 Flex CSS 實作内也可用。并且，CSS 的 Flex 實作是在 CSS 2.0 W3C 标準上的顯著擴充，提供了額外的、對 Flex 元件惟一的樣式屬性。

　　維護樣式：元件與樣式屬性

　　在開始建立 Flex CSS 樣式表之前，我建議您首先考慮您想要如何實作樣式。出于簡單性的考慮，我向您展示了四種聲明樣式的基本方法：

　　通過元件的類名

　　通過将元件的類名作為樣式名來設定元件的樣式： TitleWindow {

　　borderColor: #f7f7f7;

　　borderAlpha: 1;

　　borderThicknessLeft: 0;

　　borderThicknessTop: 0;

　　borderThicknessBottom: 0;

　　borderThicknessRight: 0;

　　cornerRadius: 0;

　　headerHeight: 0;

　　highlightAlphas: 1, 1;

　　headerColors: #f7f7f7, #f7f7f7;

　　footerColors: #f7f7f7, #f7f7f7;

　　backgroundColor: #f7f7f7;

　　dropShadowEnabled: true;

　　}

　　通過一個惟一的樣式名

　　通過使用一個惟一的樣式名來聲明樣式。請確定在名字之前使用一個句點并使用駝峰式大小寫約定： .altText

　　{

　　fontFamily: TVNordEFCEOP-RegularCon;

　　fontSize: 18;

　　color: #FFFFFF;

　　}

　　通過一個元件外加一個樣式名

　　當同一個元件需要有多種設計時（這對于具有多個視圖狀态的應用程式很常見），可以設定元件的樣式名。這種方法還確定了隻有特定的元件才可以配置設定到特定的樣式： Text.bigYellowText

　　{

　　color:#EFB526;

　　fontSize:36;

　　fontWeight:Bold;

　　}

　　通過全局選擇器

　　全局選擇器 是一種特殊的選擇器，它能夠影響包含屬性集的應用程式内的每一個元件。比如，我可以将包含有 cornerRadius 樣式屬性的所有顯示對象元件的 cornerRadius 樣式屬性設定為 4 ，如下所示： global

　　{

　　cornerRadius: 4;

　　}

　　樣式優先權

　　雖然全局選擇器基本上設定的是一個屬性的預設值，該值很容易被覆寫。比如，如果我在内聯（inline ）或在我的 CSS 檔案内将 Button 元件的 cornerRadius 屬性設定為 0 ，它将優于我已經指定的 4 這一全局預設設定；是以，所有我的 Button 元件都将包含一個值為 0 的 cornerRadius 屬性。而且，我将通過建立一個額外的樣式來覆寫 4 這一全局設定和 0 這一 Button 設定：

　　Button.altCornersButton

　　{

　　cornerRadius: 8;

　　}

　　在 Flex 内應用樣式

　　選擇用 Flex 實作 CSS 的方法必須基于環境和條件。在考慮設計實作的可用選項時，最好是從較高的層次審視應用程式。如下的這些方法是用 Flex 實作 CSS 時最為常用的。

　　設定一個執行個體（内聯）上的樣式

　　擴充了 Flex UIComponent 基類的 Flex 元件允許作為内聯屬性設定常見樣式― 換言之，即在 MXML 元件聲明标簽内（參見 清單 1 ）。一個顯示對象的布局屬性通常對該對象惟一，是以常常能夠看到某個元件被顯式地設定了如下這些屬性之一：x 、y 、height 、 width 、top 、right 、left 、bottom 、horizontalCenter 、 verticalCenter 、horizontalAlign 和 verticalAlign 。

　　清單 1. 用 MXML 作為某個元件執行個體的屬性設定樣式 清單 1 展示了設定樣式屬性的一個函數示例，這些屬性對 id 值為 volumeIcon 的 Button 元件的這個特定執行個體是惟一的。由于我知道它是惟一一個需要這些特定樣式值的按鈕，是以我已經顯式地設定了此特定按鈕的 cornerRadius 、alpha 和 verticalCenter 。

　　設定 MXML 元件标簽上的樣式屬性的一條經驗是，隻有在知道所設定的樣式值特定于該元件的情況下才以這種方式設定此屬性。比方說，您的應用程式要求一個容器能夠垂直堆疊顯示對象而不在其間留白隙。同時，您知道應用程式内的其他 VBox 容器則确實需要顯示對象之間有空隙。在這種情況下，您應該在 VBox 元件的該執行個體上顯式地設定 verticalGap 屬性，如 清單 2 所示。

　　清單 2. 在 VBox 容器元件的這個執行個體上 verticalGap 被顯式地設為 0

　　

　　(...)

　　

　　在 MXML 内嵌入 CSS

　　該方法所涉及到的是用 标簽将樣式或資源直接嵌入到一個 MXML 檔案内。出于實用的目的，現在需要在其中直接将樣式資訊嵌入到 MXML 檔案的執行個體很少。最重要的是要認識到如果應用程式包含很多被嵌入的 CSS ，那麼随着應用程式的增長，設計将越來越難以維護。認識到這一點，在使用這種方法時，要十分慎重，隻有在需要的時候才使用它。清單 3 提供了嵌入樣式聲明的一個例子，該聲明應該保留在一個外部 CSS 檔案内以便獲得更好的代碼可維護性。

　　清單 3. 将樣式直接嵌入到 MXML 應用程式檔案内

　　

　　

　　

　　.bGroup {

　　borderSides:"left,bottom,right";

　　borderStyle:"solid";

　　borderColor:#6d6f71;

　　borderLeftThickness:3;

　　borderRightThickness:3;

　　borderBottomThickness:1;

　　dividerColor:#6d6f71;

　　dividerThickness:3;

　　}

　　

　　

　　Flex AplicationControlBar 而為我的應用程式所建構的一個向下擴充（scaled-down ）的元件。在所提供的設計内，控制欄内的每個按鈕實際上都是一個簡單的文本單詞，看上去更像是一個連結，而非按鈕。此外，所有這些單詞連結之間都有一個小的 bullet 分隔符。由于我已經有了整個應用程式的設計，是以我知道這種 bullet 分隔符是應用程式主要制欄所特有的，在任何其他地方都不會出現。最為重要的是，由于 bullet 在同一個元件内出現若幹次，是以非常有必要将此圖像作為其自己的私有類嵌入到這個 MXML 檔案内，以便我能從放置在這些連結之間的每個圖像控件中綁定它。否則，結果很有可能是正在建立的同一個圖像卻具有多個執行個體，這是對系統資源的一種浪費。

　　清單 4. 直接嵌入一個圖像

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　 外部樣式表

　　一個 Flex 或 AIR 應用程式在其源代碼目錄的根部具有一個 MXML 檔案，應用程式可以基于 Application 類（Flex ）或 WindowedApplication 類（AIR ）。這個檔案就是預設的 MXML 應用程式檔案，開始于 或 。應用程式的樣式表源代碼應該立即出現在應用程式基類聲明之後（參見 清單 5 ）。

　　清單 5. 在除主應用程式 MXML 檔案之外的任何檔案内聲明樣式表都會導緻錯誤

　　

　　

　　

　　

　　開發情況下，其他開發人員也可以很容易找到樣式。此外，一種好的做法是很好地組織該檔案，因為随着應用程式的增長，CSS 檔案也必然會增長。

　　在建構您自己的主應用程式 CSS 檔案時，通常一種好的做法是首先放置那些預設的元件樣式聲明。比如，若想要所有的工具提示在應用程式中都具有同樣的外觀，就可以使用 ToolTip 作為樣式名并将其放置在檔案的開始。我趨向于将 tooltip 放置在應用程式的所有内容之前，以便讓我的應用程式盡量的保持使用者友好性。是以，tooltip 元件在應用程式内出現的次數比其他任何元件都要多。由于預設元件樣式對應用程式的整體觀感具有巨大的影響，是以您需要能夠快速和容易地通路到它們。這也是為什麼要将這些樣式放在首位的原因了。

　　請注意在大多數應用程式内，為每個元件建立一個預設樣式并不意味着就完事大吉了。 Button 元件就是這樣一個例子。同樣地，要讓 CSS 代碼保持整齊，可以考慮對元件樣式子集進行分組。比如，三個稱為 Button.musicPlayerPlay 、Button.pageDown 和 Button.backToMenu 的可選按鈕樣式将被一個挨一個地放置在樣式表内并被來自其他樣式組的注釋所分隔。

　　使用 getStyle() 和 setStyle()

　　擷取自 UIComponent 基類的所有元件繼承了兩種方法：getStyle() 和 setStyle() 。這兩種方法為開發人員帶來了難以置信的靈活性，對于通過程式設計實作皮膚處理來說尤其如此。雖然對此功能的用法介紹超出了本文的讨論範圍，但是我還是會介紹幾種不同的用法以展示此功能背後的威力。在 ActionScript 代碼内使用此功能時，對 getStyle 的每個調用都需要對 setStyle 的調用，反之亦然。

　　清單 6 顯示了當視窗進入最小化狀态時如何使用這兩種方法來對這些工作列按鈕進行皮膚處理。

　　清單 6. 當視窗最小化時，對工作列按鈕進行皮膚處理

　　private function toMinimized():void {

　　TaskBarManager.addToTaskBar(this);

　　pushStateProperties(stateMin, x, y, 200, titleBar.height, NaN, NaN);

　　minimizeButton.setStyle("upSkin", getStyle("restoreButtonUpSkin"));

　　minimizeButton.setStyle("disabledSkin", getStyle("restoreButtonDisabledSkin"));

　　minimizeButton.setStyle("downSkin", getStyle("restoreButtonDownSkin"));

　　minimizeButton.setStyle("OverSkin", getStyle("restoreButtonOverSkin"));

　　maximizeButton.setStyle("upSkin", getStyle("maximizeButtonUpSkin"));

　　maximizeButton.setStyle("disabledSkin",

　　getStyle("maximizeButtonDisabledSkin"));

　　maximizeButton.setStyle("downSkin", getStyle("maximizeButtonDownSkin"));

　　maximizeButton.setStyle("OverSkin", getStyle("maximizeButtonOverSkin"));

　　dispatchEvent(new Event("minimize"));

　　}

　　清單 6 内的 toMinimized 方法取自一個擴充了 Flex Panel 類的定制元件。這個元件給出了應用程式内新視窗的外觀，使用者可以最小化該新視窗以便隻顯示标題欄（以防使用者通路其中的内容）。有關它的最酷的一點是當視窗處于最小化狀态時，這個 Minimize 按鈕會被 getStyle 和 setStyle 方法動态地重新進行皮膚處理，這兩種方法将此按鈕轉變為 Restore 按鈕并為 maximize 按鈕的皮膚設定新的狀态。通常，我通過建立一種切換開關來重用某個類的相同執行個體，這節省了系統資源。

　　使用如下文法，通過 MXML 可以友善地使用 setStyle 方法：

　　

　　當 setStyle 通過 MXML 被調用時，它會自動進行 getStyle 調用，是以您無需獲得該樣式的目前屬性來重置它。正如您在 清單 7 中所見，當應用程式狀态改變時，我設定了一個新的背景圖像，這種方法對使用狀态設計模式的應用程式尤其好用。

　　清單 7. 在 MXML 内調用 setStyle

　　

　　

　　

　　

　　

　　

　　 (…) 運作時 CSS

　　Flex Version 3 内一個有趣的特性是您能像編譯一個 SWF 檔案一樣編譯一個 CSS 檔案，并在運作時加載它。使用這個特性，您就能夠讓使用者基于其各自的喜好更改應用程式的觀感。您可能已經看到過這類功能在社群媒體網站内被使用過，其中 JavaScript 代碼被用來在使用者選擇一個新的設計 view.Compile 樣式表時切換 CSS 檔案，以便在運作時加載。

　　毫不奇怪，在 Flex 内實作此任務十分容易。隻需建立一個新的 CSS 檔案，将 CSS 樣式選擇器放入其内，并儲存此檔案。然後，在 Flex 導航面闆（Flex Development 模式内的左上方的面闆）内，右鍵單擊剛剛建立的這個 CSS 檔案，然後單擊 Compile CSS to SWF 。

　　StyleManager 類

　　在建立并編譯完想要在應用程式内使用以便分離 SWF 檔案所需的所有樣式表之後，可以使用 Flex StyleManager 類來輕松切換樣式表，如 清單 8 所示。

　　清單 8. 使用 StyleManager 類在運作時加載預編譯的樣式表

　　private function loadFirstStyleSheet():void {

　　StyleManager.loadStyleDeclarations("CSS1.swf");

　　}

　　private function loadSecondStyleSheet():void {

　　StyleManager.loadStyleDeclarations("CSS2.swf");

　　}

　　計算成本

　　在運作時加載預先編譯的樣式表時，需要考慮的很重要一點是由此給使用者系統帶來的負荷。使用這個設計實作方法時，應該非常謹慎和小心，過多的使用這個方法會因為缺少可用系統資源而快速降低應用程式的性能。

　　主題和皮膚處理

　　我最欣賞 Adobe 的一點就是它緻力于縮小其所提供的用來簡化及加快設計開發工作流程的各種工具間的差距。實際上，在設計 Flex UI 時，我喜歡的部分就是可以在 Adobe 應用程式 Flex 、Illustrator?? 、Flash?? 、Photoshop?? 及 Fireworks?? 間自由出入― 完全取決于我想要實作什麼。如果這一點做得好，一個“ 普通設計人員” 很快就能變身“ 權威設計人員” 。Adobe Developer Connection 有很多關于這t 個題目的優秀文章（參見參考資料）。

　　結束語

　　本文向您展示了用 Flex 應用程式實作 CSS 的一些方法和技巧。不過，我并未論及内置到 Flex 和 AIR 的設計能力― 特别是關于建立和實作皮膚，這其中會大量涉及到 CSS 的使用。此外，盡管本文已給了您一個很好的開始，但我仍然強烈建議您在開發定制元件時要繼續研究 Flex 和 CSS 的使用。這也就是說，當您完成了關于 Flex 與 CSS 的研究時且自己感覺對這個主題有了透徹的了解時，我建議您不妨嘗試擴充 UIComponent 類并由此開發一個定制元件，讓它成為可伸縮和可定制的，以便其他人也可以使用您的元件

　　本文來自CSDN部落格，轉載請标明出處：http://blog.csdn.net/zeming_gu/archive/2011/01/11/ 6129607.aspx