如何在Flex 4 中使用新的CSS文法

CSS現在提供了許多諸如進階選擇或是命名空間的特性，讓我們來看看如何使用。我們會展示一些方法來選擇和應用一些樣式到組件上:使用namespace的全域選擇，使用ID的選擇，繼承和狀態的選擇。

 

代碼

 

在這個例子裡，我會用到兩個Button(一個屬於Halo 一個來自Spark)和一個包含在VGroup裡的progressBar

Mxml代碼

1. <?xml version="1.0" encoding="utf-8"?>   
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">   
3.   <fx:Style source="global.css" />   
4.      
5.   <s:layout>   
6.     <s:VerticalLayout />   
7.   </s:layout>   
8.      
9.       <mx:Button label="Click me, I'm a Halo button !" id="haloButton" />   
10.       <s:Button label="Click me, I'm a spark cool and funky button !" id="sparkButton" />   
11.   <s:VGroup id="myBox">   
12.     <mx:ProgressBar />   
13.   </s:VGroup>   
14. </s:Application>  

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">  <fx:Style source="global.css" />    <s:layout>    <s:VerticalLayout />  </s:layout>        <mx:Button label="Click me, I'm a Halo button !" id="haloButton" />      <s:Button label="Click me, I'm a spark cool and funky button !" id="sparkButton" />  <s:VGroup id="myBox">    <mx:ProgressBar />  </s:VGroup></s:Application>

 

申明命名空間

 

 

Mxml代碼

1. @namespace s "library://ns.adobe.com/flex/spark";   
2. @namespace mx "library://ns.adobe.com/flex/halo";  

@namespace s "library://ns.adobe.com/flex/spark";@namespace mx "library://ns.adobe.com/flex/halo";

 像這樣，如果我想應用某些style到一個組件上，我還要必須在我的選擇符前邊確定命名空間(就象這樣 ,s|Button { styles... })。如果你能保證你的項目大部分都會使用Spark組件，你也可以將Spark命名空間設為預設。

 

Java代碼

1. @namespace "library://ns.adobe.com/flex/spark";  

@namespace "library://ns.adobe.com/flex/spark";

 之後，在前邊的例子裡，你就不需要再附加上's|'了。

 

 全域選擇

Mxml代碼

1. mx|Button   
2. {   
3.   color:#ffffff;   
4. }   
5.   
6. s|Button    
7. {   
8.   color:#000000;   
9. }  

mx|Button{  color:#ffffff;}s|Button {  color:#000000;}

 當然，你依然可以以設定組件的stylename屬性的方式來使用類選擇符，就像這樣

Mxml代碼

1. .myStyleClass {   
2.   
3. color:#ff0000;   
4.   
5. }  

.myStyleClass {color:#ff0000;}

 

 

選擇我的ID

 

若我只是想設定某些組件的base-color，我會用到ID選擇符

Mxml代碼

1. #haloButton    
2. {   
3.   base-color:#0000ff;   
4. }   
5.   
6. #sparkButton   
7. {   
8.   base-color:#ffffff;   
9. }  

#haloButton {  base-color:#0000ff;}#sparkButton{  base-color:#ffffff;}

 

 

 

 

繼承選擇

我想要包含在VGroup裡的progressbar字型設定為紅色

Java代碼

1. s|VGroup#myBox mx|ProgressBar   
2. {   
3.   color:#ff0000;   
4. }  

s|VGroup#myBox mx|ProgressBar{  color:#ff0000;}

 

 

狀態選擇

我想我的spark按鈕的標籤在被使用者按下的時候(button的state為'down')字型變為綠色

Mxml代碼

1. s|VGroup#myBox mx|ProgressBar   
2. {   
3.   color:#ff0000;   
4. }  

s|VGroup#myBox mx|ProgressBar{  color:#ff0000;}

 

 

 

總結

以前的CSS功能實現有許多不合理的地方，而且如果你在使用Flex之前開發過HTML/CSS會讓你相當沮喪。

現在有了新的文法，定製組件將變得容易許多。