Flex: How to create an entirely new component?

Question

I'd like to develop a network graph application for Flex - imagine placing nodes on a Canvas and connecting them with links. The nodes should have editable text and other UI components.

I'm trying to find examples of creating an entirely new UI component from scratch, but all I've been able to find are trivial examples that extend existing components: a RedButton that extends Button, for example, or a ComboBox that has states to choose from.

My main question is, what ActionScript method defines the drawing of a component? What is the ActionScript equivalent of Java's paint() method?

Answer 1

You want to create a component that overrides the updateDisplayList method, and do your drawing in there:

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
  super.updateDisplayList( unscaledWidth, unscaledHeight );

  // The drawing API is found on the components "graphics" property
  graphics.clear();
  graphics.lineTo( 0, unscaledWidth );
  // etc
}

More information can be found here: http://livedocs.adobe.com/flex/3/html/help.html?content=ascomponents_advanced_3.html

Answer 2

I would suggest looking at the flexlib project if you need examples of custom components.

There's good general info in the livedocs here

Although you can create custom components in MXML and in ActionScript, I would recommend implementing them in ActionScript.

In short this is what you need to do:

When you create a custom component in ActionScript, you have to override the methods of the UIComponent class. You implement the basic component structure, the constructor, and the createChildren(), commitProperties(), measure(), layoutChrome(), and updateDisplayList() methods.