如何在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

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"
;

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

Java代码


@namespace

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

之后，在前边的例子里，你就不需要再附加上's|'了。

全局选择

Mxml代码


mx|Button

{

color:#ffffff;

}

s|Button

{

color:#000000
;

}

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

Mxml代码


.myStyleClass {

color:#ff0000;

}

选择我的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|button:down

{

color:#ff0000;

}

总结

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

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