Understanding the BackgroundFX

The BackgroundFX control enables the developer a way to control the background of any Container/Control using the component’s borderSkin style.

The main benefit of this control is it embeds itself into the borderSkin of the component and allows for a border, background and watermark icon in the host component without changing how the host component’s borders work.

The screen shot shows a mx.containers.VBox using the component as it’s borderSkin style value. The image uses the backgroundIcon style to embed the top left icon and the backgroundSkin to assign the GradientBorder class to the VBox’s actual borderSkin style.

From there, the VBox is styled using the available styles of the GradientBorder class. The VBox also is using padding top and left to offset the TabNavigator from the backgroundIcon.

Introduction

The BackgroundFX component pushes the limits of the Flash Player’s drawing API and allows you to create watermarked components with ease.

The package also comes with the GradientBorder which allows you to have virtually all control over your borders, fills and highlights.

BackgroundFX Styles

BackgroundFX {
    /*
     * The class reference that will be used when creating the backgroundIcon instance.
     */ 
    /*backgroundIcon:undefined;*/
    /*
     * The alpha value of the backgroundIcon instance.
     */
    backgroundIconAlpha:1;
    /*
     * A space deliminated list of padding values for the backgroundIcon instance.
     */
    backgroundIconPadding:'0 0 0 0';
    /*
     * A string indicating the layout placement of the backgroundIcon.
     */
    backgroundIconPosition:'topLeft';
    /*
     * The border class that will be used for the background instance.
     */
    backgroundSkin:ClassReference("mx.skins.halo.HaloBorder");
    /*
     * The class reference that will be used when creating the watermarkIcon instance.
     */
    /*watermarkIcon:undefined;*/
    /*
     * The alpha value of the watermarkIcon instance.
     */
    watermarkIconAlpha:1;
    /*
     * A space deliminated list of padding values for the watermarkIcon instance.
     */
    watermarkIconPadding:'0 0 0 0';
    /*
     * A string indicating the layout placement of the watermarkIcon.
     */
    watermarkIconPosition:'topLeft';
}

Background/Border Styles

The single style that applies to the border is the backgroundSkin. This style is analogous to the borderSkin style of the host component. We are just swapping names so that the host can set it’s borderSkin to the BackgroundFX component and the BackgroundFX component picks up the backgroundSkin style and uses AS the borderSkin for the host component.

The default backgroundSkin value is the mx.skins.halo.HaloBorder class.

Icon Styles

There are 2 icons that can be used with the component and that the component will position. Each of the icons use the exact same alpha, skin and positioning styles except with different names.

The 2 icon styles are backgroundIcon and watermarkIcon.

The alpha styles are number values from 0 to 1.

The padding style has an important order that needs to be specified in the string quotes.

BackgroundFX {
    // top left bottom right
    backgroundIconPadding:'0 0 0 0';
}

The position of the icon is a possible 9 values as listed below.

• topLeft
• top
• topRight
• left
• center
• right
• bottomLeft
• bottom
• bottomRight

Each icon can have it’s own position or share the same position.