Extending Flex’s CSS w/Custom Data Types
Extending Flex’s CSS w/Custom Data Types, Posted in Actionscript 3, May 18th, 2009

Comptibility: 3.0+

You can extend CSS’s basic functionality with Custom Data Types by adding your own code to line: 7808 ( function getStyle(styleProp:String)* ) of mx.core.UIComponent. I recommend doing this by copying paste the original UIComponent class, from your destination version of the Flex framework, into your project under the same package name. This will allow your version to override the compiled library version.

I’ve extended CSS with a custom protocol for a library engine I’ve dubbed ‘Fuze’ for the moment. The implementation of the protocol in the CSS file looks like this:

?View Code CSS
1

upSkin					: "Fuze(splashelements>ButtonSi)";

The reason why implementing the override on the UIComponent class is to interject some business logic to your protocol. In my example, the FuzeService takes the protocol and returns the proper library item.

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

public function getStyle(styleProp:String):*
{
    var ret:* = StyleManager.inheritingStyles[styleProp] ?
                            _inheritingStyles[styleProp] :
                            _nonInheritingStyles[styleProp];
 
    if ( ret is String && (ret as String).substr(0,5 ).toLowerCase() == "fuze(" )
    {
        if (FuzeService.hasLoaded( ret ))
        {
            // Cache it here.
            var clz:Class = FuzeService.getDefinitionByURI( ret );
 
            if ( StyleManager.inheritingStyles[styleProp] )
                _inheritingStyles[styleProp] = clz;
            else
                _nonInheritingStyles[styleProp] = clz
 
            return clz;
        }
        else
        {
            throw new IllegalArgumentException("The Requested Fuze Dynamic Skin Library Has Not Yet Loaded, Please check your code to make sure the library has loaded before you initialize any mx.* components using the CSS Fuze extension ");
        }
    }
 
    return ret;
}