custom flex component, visual controls in design view

Question

Do you know how if you drag an <mx:Label> or <s:Label> component into your Flex project, when you go to design mode you get this panel on the right to set its properties like text etc.

I have a custom component that I can call with actionscript, or with mxml like this:

<comps:TheComp field1="OK" field2="Yes" />

The component takes this input and uses it for its internal operation

private var field1:String;
private var field2:String;

private function initializeit()
{
   // component takes the input and lays it out as needed
}

When I go to design mode, I can see the component under custom components, I can drag it to the stage and see it, but can't set its values field1 and field visually on the right like a normal <s:Label> or <mx:Label> would have.

Any idea how I can add that? Do I need to make it inherit something or anything else

Answer 1

Try using the [Inspectable] metatag in your code

[Inspectable]
private var field1:String;

[Inspectable]
private var field2:String;

Not sure if inspectable members can be private. If [Inspectable] alone doesn't do it, try making the vars public or protected.