Component Class – Part Four

In the previous article in this series you saw how the Arrow part of the CycleSelectButton was created. In this article we’ll write the CycleSelectButton from scratch by extending UIComponent. Watch how similar this component’s construction is to the V2 and Arrows components.

Start by creating a new ActionScript class and call it
CycleSelectButtonV3 . Have it extend
UIComponent :

public class CycleSelectButtonV3 extends UIComponent
{
/**
* constructor function
*
* This is a good place to set inital styles
*/
public function CycleSelectButtonV3()
{
super();
}

To make this simple for you – and to drive home the point of how similar things are – copy the following items from the V2 component into this V3 component:

  • The
    [Event] metadata;
  • the linkButton and arrows variable definitions (be sure to copy the import statements, too);
  • the
    createChildren() function;
  • The
    dataProvider property set and get functions;
  • The
    selectedIndex property set and get functions;
  • The
    commitProperties() function;
  • The
    handleClick() event handler function.

So what’s left? I’m not sure all of that will compile, but give it a try and if it does, put it into a Flex application and test it out. Not quite right, huh?

Download file

This zip file contains the source for this component and a sample application.

The V2 version of this component extends HBox which does a couple of things for you: it handles the placement or layout of the component. By using HBox you don’t have to worry about how big things are and where they go. HBox always measures each child and sticks one after the other.

Since this V3 component extends UIComponent you don’t have any of that help. You have to implement a couple of the Flex framework functions to make the component behave correctly.

measure()

Look back at the Arrows component and you’ll see two things that are missing from this V3 component: the
measure() and
updateDisplayList() functions. Measure() is important because the Flex framework needs to know how big the component is in order to position it within a container. The updateDisplayList() function is important to position the arrows and linkButton – something HBox did for you.

		override protected function measure() : void
{
super.measure();

measuredWidth = arrows.getExplicitOrMeasuredWidth() + linkButton.getExplicitOrMeasuredWidth();
measuredHeight= Math.max( arrows.getExplicitOrMeasuredHeight(), linkButton.getExplicitOrMeasuredHeight() );
}

The measure() function must set the
measuredWidth and
measuredHeight properties. Since the component’s design is to be horizontal with the arrows followed by the linkButton, the width is then the sum of each child’s width. The height is the largest of the two.

If your component is also given an explicit width and height, then this measure() method will not be called.

Noticed the call to
getExplicitOrMeasuredWidth (and
getExplicitOrMeasuredHeight ). Since the arrows child has been given a size of 20×20, these functions return the explicit size of 20. The linkButton however, was not given a size, so it has to be measured.

updateDisplayList()

Once the child components have been measured and an overall size for the component has been determined, the Flex framework calls the updateDisplayList() function.

Just as with the Arrows component, updateDisplayList’s purpose is to position and size the child components to make this component look the way it is supposed to look.

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

arrows.move(0,0);
linkButton.move(arrows.width,0);
linkButton.setActualSize(unscaledWidth-arrows.width,unscaledHeight);
}

The arrows are moved to the (0,0) position. Then the linkButton is positioned immediately after it. The linkButton is also given a size. Here, unscaledWidth and unscaledHeight will be whatever measure() determined or they will be the explicit sizes given to your component.

And that’s all there is. The download source file has it all put together for you along with a sample test program. But take a look at the V2 and V3 components; compare them with the Arrows component. In all cases the Flex framework operates consistently. Because V2 was based on HBox, the measure and updateDisplayList functions were not necessary. When writing a component from scratch you have to do these things yourself.

Now you can write components from scratch – either based on existing components or from scratch. The next article in this series looks at skinning and styling components.