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

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

文章分類:Flash編程

by Romain Pouclet on August 31, 2009
Edited by: Ed Sullivan on September 9, 2009

 

 

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

 

代碼

 

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

 

<?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>

 

申明命名空間

 

 

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

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

 

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

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

 

 全局選擇

mx|Button
{
  color:#ffffff;
}

s|Button
{
  color:#000000
;
}

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

.myStyleClass {

color:#ff0000;

}

 

 

選擇我的ID

 

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

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

#sparkButton
{
  base-color:#ffffff;
}

 

 

 

繼承選擇

我想要包含在VGroup裏的progressbar字體設置爲紅色

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

 

 

狀態選擇

我想我的spark按鈕的標籤在被用戶按下的時候(button的state爲'down')字體變爲綠色

s|button:down
{
  color:#ff0000;
}

 

 

總結

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

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