Flex Examples

In my previous post, “Introducing the StyleManager.selectors property in Flex 3“, we looked at the new StyleManager class’s static selectors property introduced in Flex 3.

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.