How to use the new CSS syntax in Flex 4

文章目錄

• My application
• Namespace declaration
• Global selection
• Selection my ID
• Descendant selection
• States selection
• Conclusion

[轉] http://cookbooks.adobe.com/post_How_to_use_the_new_CSS_syntax_in_Flex_4-15726.htmlHow to use the new CSS syntax in Flex 4Problem

CSS now provides a lot of features such as advanced selection or namespaces. Let's see how to use it.

Solution

We'll show a few ways to select and apply styles to a component: global selection by namespace, selection by ID, Descendant selection and States selection.

Detailed explanationMy application

For this example, I'll use two Buttons (one from Halo, one from spark) and a progressBar contained in a VGroup container:

<?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 funkybutton !" id="sparkButton" />        <s:VGroup id="myBox">                <mx:ProgressBar />        </s:VGroup></s:Application>

Namespace declaration

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

This way, if I want to apply some styles to a component, I'll have to specify the namespace before my selector (for example, s|Button { styles... }). If you're sure your project will mostly use Spark components, you can set the Spark namespace as default:

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

Then, with the previous example, you won't need to specify the "s|" anymore.

Global selection

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

Of course, it's still possible to use the class selection by setting a stylename attribute to a component, then use the following syntax:

.myStyleClass    {   color:#ff0000;   }

Selection my ID

I want only specifics components to be base-colored, so I'll use the selection by id syntax:

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

Descendant selection

I want the text of my progressbar contained in my VGroup to be colored in red:

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

States selection

I want my spark Buttons' label to be colored in green when the user clicks on it (which means when my button's current state is "down"):

s|Button:down   {   color:#33CC33;   }

Conclusion

The previous CSS functionalities were such jokes and really frustrating if, before using Flex, you were developing HTML/CSS websites. With this new syntax, it'll be much easier to skin components.