Introducing the StyleManager.selectors property in Flex 3

I was testing this today, and thought some people might find it useful. In more recent builds of the Flex 3 SDK, the StyleManager now includes a new static, read-only property, selectors. To quote the bug notes:

…This property returns an array of strings representing all of the selectors registered with the StyleManager.

For more information check out the bug at “[SDK-11706] Expose All Existing Styles via StyleManager”, and download a recent nightly build of the Flex 3 SDK at “Adobe Labs – Flex 3 Software Developement Kit”.

And as always, you can read the source code for the StyleManager class by extracting the SDK ZIP file and going to: “[flex_sdk_3.zip]\frameworks\projects\framework\src\mx\styles\StyleManager.as”.

The following example shows how you can use the new static selectors property in the Flex 3 StyleManager class to display a list of selectors currently registered with the style manager.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/12/introducing-the-stylemanagerselectors-property-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.styles.StyleManager;

            private function init():void {
                arr = StyleManager.selectors;
                arr.sort(Array.CASEINSENSITIVE);
                list.dataProvider = arr;
            }
        ]]>
    </mx:Script>

    <mx:Style>
        TitleWindow {
            backgroundAlpha: 0.4;
            backgroundColor: haloSilver;
            borderAlpha: 0.4;
            borderColor: haloSilver;
            cornerRadius: 12;
        }
    </mx:Style>

    <mx:Array id="arr" />

    <mx:TitleWindow title="StyleManager.selectors:"
            status="({arr.length} items)"
            dropShadowEnabled="false"
            roundedBottomCorners="true">
        <mx:List id="list" width="300" />
    </mx:TitleWindow>

</mx:Application>

View source is enabled in the following example.

For more information, and a more advanced example, check out “Building a simple style browser in Flex 3“.