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.

4 thoughts on “Displaying all the properties of a component instance in Flex

  1. hi !

    thank you for this help ! i have a wish tu upgrade the example :

    firstly, is it possible to have a different font size (so different height) in each cell by row ?

    then, secondly, can we put some line return in the cell ?

    This 2 features are possible in GTK with Pango, so i try to find out how to do the same in Flex3…maybe it is not possible to have some carriage return and different height by rows …..

    any help ?

    1. Yeah, it’s probably possible if you create an item renderer that displays HTML text instead of plain text (so set the htmlText property instead of the text property). Try checking Alex Harui’s excellent blog at http://blogs.adobe.com/aharui/, I believe he has a couple examples of using HTML in an item renderer.

      Peter

Comments are closed.