Using [Inspectable] to build object inspector IN flex

Question

I'm building a little tool that lets user to place some geometric figures on screen and then move them around and change their properties. I'm quite new to as3/flex.

Figures are represented as objects in as3. So we've got Circle, Triangle, Rectangle classes with different properties.

What I like to do is to display some kind of "object inspector" when user selects a figure. This inspector window would resemble similar thing found in many IDEs.

Now the question is: Is it possible to take advantage from as3 [Inspectable] tag to obtain list of properties and enable changing them at runtime?

If it's not possible then how would you approach this problem without writing type specific code to edit each object?

Edit:

Just to clarify. Consider this example:

public class Shape { /* ... */ }

public class Triangle extends Shape { 
  public var a:Number;
  public var h:Number;
  //...
}

public class Circle extends Shape {
  public var r:Number;
  public var name:String;
  //...
}

I want to give the user an ability to edit a, h from Triangle and r, name from Circle.

From what I imagine now, I could follow two paths:

Make Triangle and Circle implement IMyInspectable and write custom getProperties():Dictionary, getProperty(name:String):Object and setProperty(name:String, value:Object):void methods for each type. This would involve utterly unelegant switch-spaghetti.
I forgot when I was typing the solution number one. :(

I've discovered this: negush.net/blog/listing-the-properties-of-an-object The problem is that it's not working for me :[ — nooga
Runtime of my app of course. "then at least select a different tag" what tag? :) My main problem is that I don't know how to implement something like that, not to mention making tags for it. — nooga

JeffryHouser JeffryHouser · Accepted Answer · 2012-02-07T18:36:10

I think you can use describeType to introspect objects. I would probably take a very different approach, though.

Create an interface, something like IObjectIWantToCreatePropertyWindowFor and have your relevant shape objects implement this. The interface could somehow define the list of properties you want edtiable on the object. I might even make this an array of Value Objects that contain the property name, a display name, and the type of editor it should have. Each object can hard code this list of properties in it.

The property window could be written to redraw itself based on the interface values. Most likely I'd do that using a List class with an itemRendererfunction somehow.

What you want to do doesn't sound hard, but it's not trivial either.

Nooga asked a more detailed explanation. This is all psuedo code, but:

1) Create an interface:

package com.propertyInspector
{

    public interface IPropertyInspectable
    {

        function get inspectableProperties(  ):array;
    }
}

2) Create a class that implements IPropertyInspectable

package com.propertyInspector
{

    public class myClass implements IPropertyInspectable
    {

        public var property1 :String
        public var property2 : Int

        public function get inspectableProperties():Array{
          return [{name:'property1',type:'String'},{name:'property2',type:'String'}, ]
        }
    }
}

3) Create your property inspector.

<s:List dataProvider="{someSelectedObjectThatImplementsIPropertyInspectable.inspectableProperties}">
 <s:itemRenderer>
   <s:Label text="data.name"/><s:TextInput />
 </s:itemRenderer>
</s:List>

You'll have to figure out how to pass the objects into the property inspector. And the property objects in inspectableProperties will probably need a reference to the actual object they refer to so that the List can display default values.

And you can use an itemRenderer function to display different editable approaches based on the type. a TextInput for Strings, a NumericStepper for numbers, and so on.

Using [Inspectable] to build object inspector IN flex

1 Answers