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

CSS现在提供了许多诸如高级选择或是命名空间的特性，让我们来看看如何使用。我们会展示一些方法来选择和应用一些样式到部件上:使用namespace的全局选择，使用ID的选择，继承和状态的选择。

 

代码

 

在这个例子里，我会用到两个Button(一个属于Halo 一个来自Spark)和一个包含在VGroup里的progressBar

Mxml代码
 

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

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

 <wbr> </wbr>

 像这样，如果我想应用某些style到一个部件上，我还要必须在我的选择符前边确定命名空间(就象这样 ,s|Button { styles... })。如果你能保证你的项目大部分都会使用Spark组件，你也可以将Spark命名空间设为默认。
 

Java代码
 

@namespace "library://ns.adobe.com/flex/spark";  
 之后，在前边的例子里，你就不需要再附加上's|'了。

 全局选择

Mxml代码
 

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

 <wbr> </wbr>

 当然，你依然可以以设置组件的stylename属性的方式来使用类选择符，就像这样

Mxml代码


 




.myStyleClass {   
  
color:#ff0000;   
}  

 <wbr> </wbr>

 选择我的ID
若我只是想设置某些组件的base-color，我会用到ID选择符

Mxml代码
 


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

继承选择

我想要包含在VGroup里的progressbar字体设置为红色

Java代码


 




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

状态选择

我想我的spark按钮的标签在被用户按下的时候(button的state为'down')字体变为绿色

Mxml代码


 




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

总结

以前的CSS功能实现有许多不合理的地方，而且如果你在使用Flex之前开发过HTML/CSS会让你相当沮丧。

现在有了新的语法，定制组件将变得容易许多。

 

最后来个实例：

<?xml version="1.0" encoding="utf-8"?>
<s:Application

xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/f
4000
lex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx">

<fx:Style>

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

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

s|Button {

color: #0000FF;

}

mx|Button {

color: #FF0000;

}

.myStyle{

font-style: italic;

}

#myId{

font-size: 18;

}

</fx:Style>

<s:Panel title="JuLabs.me Flex4 CSS Demo" styleName="myStyle" width="100%" height="100%">

<s:layout>

<s:VerticalLayout />

</s:layout>

<s:Button label="蓝色 spark 18号" id="myId" />

<mx:Button label="红色 halo 斜体" styleName="myStyle" />

</s:Panel>

</s:Application>