How to use the new CSS syntax in flex 4

Source: Internet
Author: User
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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.