User Guide

648 Chapter 6: Components Dictionary
Creating a custom RectBorder implementation
The RectBorder class is used as a border skin in most version 2 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.
Each RectBorder implementation must adhere to the following requirements:
• It must extend mx.skins.RectBorder or one of its subclasses.
• It must provide an offset property value or implement the getBorderMetrics method to
return sizing information.
• It must implement the drawBorder() method to draw or size the border.
• It must support all four standard styles, as well as the four special styles.
The implementation can reuse standard borders for special borders, as the Sample theme does.
• It must register itself as the RectBorder implementation.
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.
A custom RectBorder example
Both 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 utilizes graphic symbols
for its display.
To create a custom RectBorder implementation:
1. Create a new folder in the Classes/mx/skins folder corresponding to the custom package name
you’ll use for the custom border.
For this example, use myTheme.
2. Create a new AS file in the new folder, and save it as RectBorder.as.
3. Copy the following ActionScript code to the new AS 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"