Andy Hulstkamp

about creating online experiences

29. September 2010

Custom Component using Flex SpriteVisualElement

In Flex 4 the standard way to create a custom control is to extend from SkinnableComponent, then implement the handling and management of events and states there and use a separate skin class for the visual representation of the component.

A class that gets less attention, but might be useful in a couple of scenarios to create a control alternatively, is the SpriteVisualElement class.

This example shows an implementation of a simple ruler by extending the SpriteVisualElement.

Flex Ruler Components

The SpriteVisualElement

The SpriteVisualElement is a display object that can be used inside spark containers.

It inherits from Sprite and implements the IVisualElement interface and can therefore take part in the spark layout process. This means, properties like height, width, top, right, bottom, left etc. can be used to lay out a SpriteVisualElement like an UIComponent.

As it inherits from Sprite you’ll get a reference to the Graphics object to draw onto and all the common events of a flash interactive object (mouse, gestures, focus etc.) - in other words, a flash sprite that can be used within the spark architecture.

The SpriteVisualElement is light-weight and might be the better choice to implement some interactive object if you can live without all the bells and whistles of the UIComponent. Less features, less overhead. Use inside the Flex layout pass

Implementing the ruler is like coding a sprite in Flash but there’s a little additional work required to hook it up with the Spark layout pass.

During the layout pass Flex calls

  • setLayoutBoundsSize(width:Number, height:Number, postLayoutTransform:Boolean=true)

We can override this function to call our drawing function.

override public function setLayoutBoundsSize(width:Number, height:Number, postLayoutTransform:Boolean=true):void 
{
    super.setLayoutBoundsSize(width, height, postLayoutTransform);

    //call our drawing function
    draw(width, height);
}

The ruler has properties for the number of divisions and subdivisions. Both require an update to the graphics so we need to tell Flex about this. We can achieve this by calling

  • invalidateParentSizeAndDisplayList()

This will mark the parent component as invalid and will finally trigger a call to setLayoutBoundsSize on our object where we can redraw the graphics based on the updated values of the properties.

public function set divisions(value:int):void
{
    _divisions = Math.max(1, value);
    invalidateParentSizeAndDisplayList();
}

Conclusion

Depending on the requirements, you might want to - and usually do - use the full stack (SkinnableComponent/SparkSkin with nested components and FXG). Still, under some circumstances and regarding resources and performance, implementing a simple component as a SpriteVisualElement may be an option to be considered. Also note, a SpriteVisualElement can live within a spark container, thus you can add it to any skin and mix it up with FXG elements or Spark components.

Click here for the demo. View source is enabled.

further reading

Flex Football Formation component

Purging my Flex Folder. Prototype of an app to create football formations. Uses a couple of custom components.

Generating Sounds. Waveforms, Timbre Loundness and Pitch.

Introduction to generating sounds covering samplerates, waveform, timbres and pitch. In Flash but should be applicable to any technology.