Displaying all the properties of a component instance in Flex

The following example shows you how you can display all the getters/setters and their current values for a Flex TextArea control by using the describeType() method, some E4X filtering, and an XMLListCollection.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/05/displaying-all-the-properties-of-a-component-instance-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        private var xmlDebug:XML;

        private function init():void {
            xmlDebug = describeType(targetObj);
            xmlListColl.source = xmlDebug.accessor.(@declaredBy == xmlDebug.@name);
        }

        private function labelFunc(item:Object, col:DataGridColumn):String {
            var value:Object = targetObj[item.@name];
            if (value == null) {
                return "(null)";
            }
            return value.toString();
        }
    </mx:Script>

    <mx:XMLListCollection id="xmlListColl">
        <mx:sort>
            <mx:Sort>
                <mx:fields>
                    <mx:SortField name="@name" />
                </mx:fields>
            </mx:Sort>
        </mx:sort>
    </mx:XMLListCollection>

    <mx:VDividedBox width="100%" height="100%">
        <mx:TextArea id="targetObj"
                resize="init();" />

        <mx:DataGrid id="dataGrid"
                dataProvider="{xmlListColl}"
                color="black"
                width="100%"
                height="100%">
            <mx:columns>
                <mx:DataGridColumn dataField="@access"
                        itemRenderer="RedLabel" />
                <mx:DataGridColumn dataField="@name" />
                <mx:DataGridColumn labelFunction="labelFunc"
                        headerText="value" />
            </mx:columns>
        </mx:DataGrid>
    </mx:VDividedBox>

</mx:Application>

RedLabel.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/05/displaying-all-the-properties-of-a-component-instance-in-flex/ -->
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml" color="{(data.@access == 'readonly') ? 0xFF0000 : 0x000000}" />

View source is enabled in the following example.