本文和大家重點(diǎn)討論一下在Flex內(nèi)應(yīng)用CSS樣式，選擇用Flex實(shí)現(xiàn)CSS的方法必須基于環(huán)境和條件。如下的這些方法是用Flex實(shí)現(xiàn)CSS樣式時(shí)最為常用的。

在Flex內(nèi)應(yīng)用CSS樣式

選擇用Flex實(shí)現(xiàn)CSS的方法必須基于環(huán)境和條件。在考慮設(shè)計(jì)實(shí)現(xiàn)的可用選項(xiàng)時(shí)，最好是從較高的層次審視應(yīng)用程序。如下的這些方法是用Flex實(shí)現(xiàn)CSS時(shí)最為常用的。

設(shè)置一個(gè)實(shí)例（內(nèi)聯(lián)）上的樣式

擴(kuò)展了FlexUIComponent基類(lèi)的Flex組件允許作為內(nèi)聯(lián)屬性設(shè)置常見(jiàn)樣式—換言之，即在MXML組件聲明標(biāo)簽內(nèi)（參見(jiàn)清單1）。一個(gè)顯示對(duì)象的布局屬性通常對(duì)該對(duì)象惟一，所以常常能夠看到某個(gè)組件被顯式地設(shè)置了如下這些屬性之一：x、y、height、width、top、right、left、bottom、horizontalCenter、verticalCenter、horizontalAlign和verticalAlign。

清單1.用MXML作為某個(gè)組件實(shí)例的屬性設(shè)置樣式    
 

<mx:Buttonidmx:Buttonid="volumeIcon"cornerRadius="0"alpha="0.9" 
 verticalCenter="0"enabled="true"toolTip="VolumeControl" 
 click="toggleVolumeControl();"/> 

清單1展示了設(shè)置樣式屬性的一個(gè)函數(shù)示例，這些屬性對(duì)id值為volumeIcon的Button組件的這個(gè)特定實(shí)例是惟一的。由于我知道它是惟一一個(gè)需要這些特定樣式值的按鈕，因此我已經(jīng)顯式地設(shè)置了此特定按鈕的cornerRadius、alpha和verticalCenter。

設(shè)置MXML組件標(biāo)簽上的樣式屬性的一條經(jīng)驗(yàn)是，只有在知道所設(shè)置的樣式值特定于該組件的情況下才以這種方式設(shè)置此屬性。比方說(shuō)，您的應(yīng)用程序要求一個(gè)容器能夠垂直堆疊顯示對(duì)象而不在其間留空隙。同時(shí)，您知道應(yīng)用程序內(nèi)的其他VBox容器則確實(shí)需要顯示對(duì)象之間有空隙。在這種情況下，您應(yīng)該在VBox組件的該實(shí)例上顯式地設(shè)置verticalGap屬性，如清單2所示。

清單2.在VBox容器組件的這個(gè)實(shí)例上verticalGap被顯式地設(shè)為0    
 

<mx:VBoxidmx:VBoxid="myVBox"verticalGap="0"  
 x="15"y="15"width="100%"height="100%"> 
    
(...)  
    
</mx:VBox> 

 在MXML內(nèi)嵌入CSS樣式

該方法所涉及到的是用<mx:Style/>標(biāo)簽將樣式或資源直接嵌入到一個(gè)MXML文件內(nèi)。出于實(shí)用的目的，現(xiàn)在需要在其中直接將樣式信息嵌入到MXML文件的實(shí)例很少。最重要的是要認(rèn)識(shí)到如果應(yīng)用程序包含很多被嵌入的CSS，那么隨著應(yīng)用程序的增長(zhǎng)，設(shè)計(jì)將越來(lái)越難以維護(hù)。認(rèn)識(shí)到這一點(diǎn)，在使用這種方法時(shí)，要十分慎重，只有在需要的時(shí)候才使用它。清單3提供了嵌入樣式聲明的一個(gè)例子，該聲明應(yīng)該保留在一個(gè)外部CSS文件內(nèi)以便獲得更好的代碼可維護(hù)性。

清單3.將樣式直接嵌入到MXML應(yīng)用程序文件內(nèi)    
 

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:WindowedApplication 
 xmlns:mx="http://www.adobe.com/2006/mxml" 
 layout="absolute" 
 showFlexChrome="false" 
 borderStyle="none" 
 keyUp="{this.onKeyStrokeEvent(event);}"> 
   
   
 <mx:Style> 
  .bGroup{  
   borderSides:"left,bottom,right";  
   borderStyle:"solid";  
   borderColor:#6d6f71;  
   borderLeftThickness:3;  
   borderRightThickness:3;  
   borderBottomThickness:1;  
   dividerColor:#6d6f71;  
   dividerThickness:3;  
  }  
 </mx:Style> 
   
 <mx:Script> 
  <![CDATA[  
     
   (...)  

 不過(guò)，這并不是說(shuō)它將永遠(yuǎn)不會(huì)發(fā)生。清單4就是我基于FlexAplicationControlBar而為我的應(yīng)用程序所構(gòu)建的一個(gè)向下擴(kuò)展（scaled-down）的組件。在所提供的設(shè)計(jì)內(nèi)，控制欄內(nèi)的每個(gè)按鈕實(shí)際上都是一個(gè)簡(jiǎn)單的文本單詞，看上去更像是一個(gè)鏈接，而非按鈕。此外，所有這些單詞鏈接之間都有一個(gè)小的bullet分隔符。由于我已經(jīng)有了整個(gè)應(yīng)用程序的設(shè)計(jì)，因此我知道這種bullet分隔符是應(yīng)用程序主控制欄所特有的，在任何其他地方都不會(huì)出現(xiàn)。最為重要的是，由于bullet在同一個(gè)組件內(nèi)出現(xiàn)若干次，因此非常有必要將此圖像作為其自己的私有類(lèi)嵌入到這個(gè)MXML文件內(nèi)，以便我能從放置在這些鏈接之間的每個(gè)圖像控件中綁定它。否則，結(jié)果很有可能是正在創(chuàng)建的同一個(gè)圖像卻具有多個(gè)實(shí)例，這是對(duì)系統(tǒng)資源的一種浪費(fèi)。

清單4.直接嵌入一個(gè)圖像    
 

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:ApplicationControlBarxmlns:mxmx:ApplicationControlBarxmlns:mx="http://www.adobe.com/  
2006/mxml"> 
 
<mx:Script> 
<![CDATA[  
   
[Embed(source="assets/bullet_black.png")]  
[Bindable]  
privatevarbullet:Class;  
 
]]> 
</mx:Script> 
 
 <mx:HBoxxmx:HBoxx="10"y="10"id="hbox"horizontalGap="10"  
width="350"> 
  <mx:LinkButtonlabelmx:LinkButtonlabel="Help"styleName="appBarButton"/> 
  <mx:Imagesourcemx:Imagesource="{bullet}"/> 
  <mx:LinkButtonlabelmx:LinkButtonlabel="About"styleName="appBarButton"/> 
  <mx:Imagesourcemx:Imagesource="{bullet}"/> 
  <mx:LinkButtonlabelmx:LinkButtonlabel="Minimize"styleName="appBarButton"/> 
  <mx:Imagesourcemx:Imagesource="{bullet}"/> 
  <mx:LinkButtonlabelmx:LinkButtonlabel="Quit"styleName="appBarButton"/> 
 </mx:HBox> 
</mx:ApplicationControlBar> 
 

 外部CSS樣式表

一個(gè)Flex或AIR應(yīng)用程序在其源代碼目錄的根部具有一個(gè)MXML文件，應(yīng)用程序可以基于Application類(lèi)（Flex）或WindowedApplication類(lèi)（AIR）。這個(gè)文件就是默認(rèn)的MXML應(yīng)用程序文件，開(kāi)始于<mx:Application/>或<mx:WindowedApplication/>。應(yīng)用程序的樣式表源代碼應(yīng)該立即出現(xiàn)在應(yīng)用程序基類(lèi)聲明之后（參見(jiàn)清單5）。

清單5.在除主應(yīng)用程序MXML文件之外的任何文件內(nèi)聲明樣式表都會(huì)導(dǎo)致錯(cuò)誤    
 

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:WindowedApplication 
 xmlns:mx="http://www.adobe.com/2006/mxml" 
 layout="absolute" 
 showFlexChrome="false" 
 dropShadowEnabled="false" 
 borderStyle="none" 
 applicationComplete="{this.appInit(event);}" 
 > 
   
 <mx:Stylesourcemx:Stylesource="com/passalong/assets/RED_SKIN_MAIN.css"/> 
   
 <mx:Script> 
  <![CDATA[  
   ...  

 ◆保持應(yīng)用程序樣式設(shè)置的最簡(jiǎn)便也是最安全的方法是使用外部樣式表。實(shí)際上，從一個(gè)CSS文件就能合理保存一個(gè)大型應(yīng)用程序的所有樣式。我選擇只使用一個(gè)CSS文件，出于兩個(gè)原因：第一個(gè)原因是我將始終知道到哪里可以找到我的樣式設(shè)置；第二個(gè)原因是在團(tuán)隊(duì)開(kāi)發(fā)情況下，其他開(kāi)發(fā)人員也可以很容易找到樣式。此外，一種好的做法是很好地組織該文件，因?yàn)殡S著應(yīng)用程序的增長(zhǎng)，CSS文件也必然會(huì)增長(zhǎng)。

在構(gòu)建您自己的主應(yīng)用程序CSS文件時(shí)，通常一種好的做法是首先放置那些默認(rèn)的組件樣式聲明。比如，若想要所有的工具提示在應(yīng)用程序中都具有同樣的外觀，就可以使用ToolTip作為樣式名并將其放置在文件的開(kāi)始。我趨向于將tooltip放置在應(yīng)用程序的所有內(nèi)容之前，以便讓我的應(yīng)用程序盡量的保持用戶(hù)友好性。因此，tooltip組件在應(yīng)用程序內(nèi)出現(xiàn)的次數(shù)比其他任何組件都要多。由于默認(rèn)組件樣式對(duì)應(yīng)用程序的整體觀感具有巨大的影響，所以您需要能夠快速和容易地訪問(wèn)到它們。這也是為什么要將這些樣式放在首位的原因了。

請(qǐng)注意在大多數(shù)應(yīng)用程序內(nèi)，為每個(gè)組件創(chuàng)建一個(gè)默認(rèn)樣式并不意味著就完事大吉了。Button組件就是這樣一個(gè)例子。同樣地，要讓CSS代碼保持整齊，可以考慮對(duì)組件樣式子集進(jìn)行分組。比如，三個(gè)稱(chēng)為Button.musicPlayerPlay、Button.pageDown和Button.backToMenu的可選按鈕樣式將被一個(gè)挨一個(gè)地放置在樣式表內(nèi)并被來(lái)自其他樣式組的注釋所分隔。

 【編輯推薦】

1. 四種聲明Flex CSS樣式的基本方法
2. FlexBuilder4十大新特性閃亮登場(chǎng)
3. 探索Flex和CSS的強(qiáng)大功能
4. FlexBuilder3.0與Eclipse3.4的完美結(jié)合
5. 解析Flex應(yīng)用開(kāi)發(fā)步驟 新特性和技術(shù)框架