SmartLogic Solutions Blog

This post was written by Greg Jastrab. Read other posts by Greg Jastrab.

A few days ago one of the commit messages in the Gumbo trunk mentioned some work for advanced CSS was beginning. I tried to create an example of using a descendant selector as well as an ID selector, but neither worked.

Tonight, another commit message said that this was now in place by default (I guess it would have worked earlier, but I needed to be specify a compiler argument). But now, after rebuilding the latest checkout of Gumbo you should now be able to compile the following example to see the advanced CSS selectors working. Below is the SWF (you’ll need Flash Player 10 to view it) and the code follows:

CSSExample.mxml

<?xml version="1.0" encoding="utf-8"?>
<FxApplication xmlns="http://ns.adobe.com/mxml/2009">
 
    <layout><VerticalLayout /></layout>
 
    <Style source="descendants.css" />
 
    <VGroup>
        <TextView>Text in a VGroup</TextView>
    </VGroup>
 
    <HGroup>
        <TextView id="red">Text in an HGroup</TextView>
    </HGroup>
 
</FxApplication>

Standard so far, now let’s see the CSS with the advanced selectors:

descendants.css

VGroup TextView {
    font-size: 24pt;
}
 
HGroup TextView {
    text-decoration: underline;
}
 
#red {  
    color: #ff0000;
}

Flex 4 is now fully demonstrating the Cascading part of CSS. (You may need to review CSS selectors syntax.) NOTE: I don’t know how much of the CSS spec is going to be supported in Flex 4, and am not suggesting that everyone of the selectors at the CSS selectors page will be available in Flex 4.

The VGroup TextView selector targets any TextView instances which are a child of a VGroup. #red selector targets instances with an ID of “red”.

As usual, here is the bundled source and SWF.

I hope everyone’s enjoying their Gumbo!

About the author: Greg Jastrab joined SmartLogic Solutions in June 2006 and leads all Flash/Flex/AIR development. Follow @gjastrab on twitter

Tags: CSS, Flex 4, Gumbo

This entry was posted on Tuesday, October 21st, 2008 at 7:39 pm and is filed under Flex 4, Greg Jastrab, Gumbo, Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.