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

2016-08-20 11:06:43来源:http://2771253.blog.51cto.com/2761253/522844作者:RIA700人点击


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


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



代码



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





Mxml代码


<?xmlversion="1.0"encoding="utf-8"?>
<s:Applicationxmlns: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:Stylesource="global.css"/>

<s:layout>
<s:VerticalLayout/>
</s:layout>

<mx:Buttonlabel="Clickme,I'maHalobutton!"id="haloButton"/>
<s:Buttonlabel="Clickme,I'masparkcoolandfunkybutton!"id="sparkButton"/>
<s:VGroupid="myBox">
<mx:ProgressBar/>
</s:VGroup>
</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代码


@namespaces"library://ns.adobe.com/flex/spark";
@namespacemx"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代码


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



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

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



全局选择





Mxml代码


mx|Button
{
color:#ffffff;
}

s|Button
{
color:#000000;
}



mx|Button
{
color:#ffffff;
}

s|Button
{
color:#000000;
}

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




Mxml代码


.myStyleClass{

color:#ff0000;

}



.myStyleClass {

color:#ff0000;

}



选择我的ID



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




继承选择



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




Java代码


s|VGroup#myBoxmx|ProgressBar
{
color:#ff0000;
}



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


状态选择



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



总结



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


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





Mxml代码


s|VGroup#myBoxmx|ProgressBar
{
color:#ff0000;
}



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







Mxml代码


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

#sparkButton
{
base-color:#ffffff;
}



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

#sparkButton
{
base-color:#ffffff;
}







最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台