How to use the new CSS syntax in flex 4

ArticleDirectory

• My application
• Namespace Declaration
• Global Selection
• Selection my ID
• Descendant Selection
• States Selection
• Conclusion

[Transfer] http://cookbooks.adobe.com/post_How_to_use_the_new_CSS_syntax_in_Flex_4-15726.html How to use the new CSS syntax in flex 4 Problem

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.