Creating a custom RectBorder implementation

The RectBorder class is used as a border skin in most ActionScript 2.0 components. The default implementations in both the Halo and Sample themes use ActionScript to draw the border. A custom implementation must use ActionScript to register itself as the RectBorder implementation and provide sizing functionality, but can use either ActionScript or graphic elements to represent the visuals.

RectBorder global registration

All components look to a central location for a reference to the RectBorder class in use for the document, _global.styles.rectBorderClass. You cannot specify that an individual component should use a different RectBorder implementation. To customize RectBorder for a component, you must rely on the borderStyle style property.

Custom RectBorder example

The RectBorder implementations provided by the Halo theme and the Sample theme use the ActionScript drawing API to draw the borders for different styles. The following example demonstrates how to create a custom RectBorder implementation that uses graphic symbols for its display.

To create a custom RectBorder implementation:

Create a new folder in the Classes/mx/skins folder corresponding to the custom package name that you will use for the custom border.
For this example, use myTheme.
Select File > New and choose ActionScript File.
Save the file in the new folder as RectBorder.as.

Copy the following ActionScript code to the new file:

import mx.core.ext.UIObjectExtensions;

class mx.skins.myTheme.RectBorder extends mx.skins.RectBorder
{
    static var symbolName:String = "RectBorder";
    static var symbolOwner:Object = RectBorder;
    var className:String = "RectBorder";

#include "../../core/ComponentVersion.as"

   // All of these borders have the same size edges, 1 pixel.
    var offset:Number = 4;
    
    function init(Void):Void
    {
        super.init();
    }

    function drawBorder(Void):Void
    {
       // The graphics are on the symbol's timeline,
       // so all you need to do here is size the border.
       _width = __width;
       _height = __height;
    }

    // Register the class as the RectBorder for all components to use.
    static function classConstruct():Boolean
    {
        UIObjectExtensions.Extensions();
        _global.styles.rectBorderClass = RectBorder;
        _global.skinRegistry["RectBorder"] = true;
        return true;
    }
    static var classConstructed:Boolean = classConstruct();
    static var UIObjectExtensionsDependency = UIObjectExtensions;
}

If you're not using the myTheme package, change the class declaration as needed.

Save the file.
Select File > New and choose Flash File (ActionScript 2.0).
Use Insert > New Symbol to create a new movie clip symbol.
Set the name to RectBorder.
If the advanced fields are not displayed, click Advanced.
Select Export for ActionScript
The identifier is automatically filled in as RectBorder.
Set the Class to the full class name of the custom border implementation.
This example uses mx.skins.myTheme.RectBorder.
Make sure that Export in First Frame is selected and then click OK.
Open the RectBorder symbol for editing.
Draw the graphics for the symbol.
For example, draw a hairline square with no fill. To make the custom border easy to see, set the line color to bright red.
Make sure that the graphics are flush against the upper-left corner with the x and y coordinates set to (0,0).
Your custom drawBorder implementation sets the width and height according to the component requirements.
Click Back to return to the main timeline.
Drag several components that use RectBorder to the Stage.
For example, drag a List, TextArea, and TextInput component to the Stage.
Select Control > Test Movie.

This example creates a very simple border implementation with static color and graphics. It doesn't respond to different borderStyle settings; it always uses the same graphics regardless of borderStyle. For examples of more complete border implementations, review the examples provided for the Halo and Sample themes.