custom flex component, visual controls in design view

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 t开发者_JS百科o 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

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.

You need to put any custom components you want to view this way into a library project and make a swc out of it, then use the swc instead of just the source code http://blog.another-d-mention.ro/programming/create-professional-flex-components/ .

HTH;

Amy

Those variables must be public. Variables are accessible from properties panel after setting them public.

public var field1:String;
public var field2:String;