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.

6 Responses to Component Class – Part Four

  1. Vasile Rotaru says:

    Thanks for the series. I’ve enjoyed and I hope I understand now better how measure and updateDisplayList works together.

    A suggestion. You may enliven a bit the Arrows if you make the color of arrays depend of the rotation angle.

    I’ve done it, and it looks good on a light background
    —————–
    Peter: There are so many, many ways you can with this. You can even draw the arrows in Flash CS3 and have them do all kinds of animations.

  2. fred says:

    thanks for the great articles ..

    One thing I’m confused about is where would I do
    animation ? Lets say I wanted the arrows to
    rotate by themselves ? how would I go about doing that ..
    ————————-
    Peter: I think the easiest way to do this is with Flash CS3. You can write either a Flex component or just a simple animation SWF. If you go the SWF route you just embed it using an Image tag. If you go the component route you’d have more control. For example, you can invoke a method on the Flash-made component to tell it to spin a few times – it is up to your imagination.

    Or you can do this in Flex/ActionScript and use the Rotate effect.

  3. levan says:

    yet another very nice article, I am your fan, thanks for taking time and giving such nice tutorials hopefully this will continue 🙂

  4. Vince says:

    Peter,

    Excellent training. You’re still providing insightful and informative help just like you did at the University Computing Center. Hope all is well…

  5. I just wanted to thank you for this series. Breaking everything down as easy as you always seem to do was instrumental in helping me create my first useful custom Flex component.

    I’d love to get your feedback on what you think and any pointers you might have to improve things.

    I’ve been battling with creating a custom scrollable accordion style menu for a few weeks now and I finally got v1 up and running. Source code is enabled if you want to check it out.

    Here’s the link to the working example:

    Scrollable Accordion Menu – Example
    http://www.useflashmore.com/flex-as3-scrollable-accordion-menu/scrollable-accordion-menu-custom-component/main.html

    I apologize for the super long url.

    Doug Mccune’s work on the scrollable canvas was hugely helpful too.

    To check out the coolness, click on the “photo participants” button after the menu opens. The other cool feature is the cascading tweens if you click on another menu item after one menu is open.

    I have plans to make this recursive for more than just one level deep, but I’m stoked with my first implementation.

    Best regards & thanks,
    Justin Winter

  6. I found that in the final code segment (the implementation of updateDisplayList for the V3 component) that arrows.width was 0. I had to use arrows.getExplicitOrMeasuredWidth() to make the component work correctly. Are there any general rules about the contexts in which you can refer to a child’s explicit width and height properties and in which you have to use getExplicitOrMeasuredWidth()?