Question

I am interested in a PropertyGrid Editor for Flex. Basically, it would be something like this: http://www.cnblogs.com/janyou/archive/2009/07/28/1532919.html but that I can get the source of!

If no component like that exists, I’d need assistance on creating one.

Basically what I need is:

• Grabbing a list of properties from a specified object (which can be changed in runtime) – but just the properties I mark
• This list of properties would be shown in a List or a DataGrid control in Flex
• You can edit those properties with the correspondant control (textinput for string, numericstepper for Number, checkbox for boolean, colorchoose for color [specified which ones are color], etc.)

Thanks!

Answer 1

The easiest way to go about this would be to use a for..in loop and loop through all of the properties of an object. Then use ObjectUtil.hasMetadata() on each property and loop through all possible metadata tags to organize them into predetermined categories.

eg.

var gridData:ArrayCollection=new ArrayCollection();
for(var prop:String in obj)
{
    var gridItem:Object = new Object();
    gridItem.property = prop;
    gridItem.value = obj[prop];
    for each(var tag:String in metaDataTags)
    {
        if(ObjectUtil.hasMetadata(obj,prop,tag)
        {
            gridItem.category = tag;
            break;
        }
    }
    gridData.addItem(gridItem);
}

If you need to get fancy with all the enums and custom categories like the example in your question, you will have to use flash.utils.describeType. This function returns an XML with all property and metadata information. Just parse this XML and you will be good to go.