This example shows how you can make a simple app which lets you loop over styles currently registered with the StyleManager and display their current style names and values.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/12/building-a-simple-style-browser-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init()">

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

            private function init():void {
                arr = StyleManager.selectors;
                arr.sort(Array.CASEINSENSITIVE);
            }

            private function list_change(evt:Event):void {
                var styleName:String = String(ComboBox(evt.currentTarget).selectedItem);
                var cssStyle:CSSStyleDeclaration = StyleManager.getStyleDeclaration(styleName);
                var obj:Object = new cssStyle.defaultFactory();
                var styles:Array = [];
                var key:String;

                for (key in obj) {
                    styles.push({key:key, value:obj[key]});
                }

                styles.sortOn("key", Array.CASEINSENSITIVE);
                dataGrid.dataProvider = styles;
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr" />

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="selectors:" />
        <mx:ComboBox id="comboBox"
                prompt="Please select a style..."
                dataProvider="{arr}"
                width="250"
                change="list_change(event)" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            rowHeight="22"
            width="300"
            verticalScrollPolicy="on">
        <mx:columns>
            <mx:DataGridColumn dataField="key"
                    headerText="Style:"
                    itemRenderer="mx.controls.Label" />
            <mx:DataGridColumn dataField="value"
                    headerText="Value:"
                    itemRenderer="mx.controls.Label" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

 

…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“.