Flash 8 Documentation

Components Language Reference > RectBorder class > Creating a custom RectBorder implementation

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.

Each RectBorder implementation must comply with 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.

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:

1. 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.

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"
   
      // 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.

4. Save the AS file.
5. Create a new FLA file.
6. Use Insert > New Symbol to create a new movie clip symbol.
7. Set the name to RectBorder.
8. If the advanced fields are not displayed, click Advanced.
9. Select Export for ActionScript

   The identifier is automatically filled in as RectBorder.

10. Set the AS 2.0 class to the full class name of the custom border implementation.

    This example uses mx.skins.myTheme.RectBorder.

11. Make sure that Export in First Frame is selected and then click OK.
12. Open the RectBorder symbol for editing.
13. 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.

14. 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.

15. Click Back to return to the main timeline.
16. Drag several components that use RectBorder to the Stage.

    For example, drag a List, TextArea, and TextInput component to the Stage.

17. 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.

Version 8

Comments

Add Comment

electricspace said on Mar 22, 2006 at 6:08 AM :

the example doesn't work. this error was already detected in the mx 2004 livedoc, but isn't corrected in the newer live docs!

read the comments on the mx 2004-page to get the example running!

http://livedocs.macromedia.com/flash/mx2004/main_7_2/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Flash_MX_2004&file=00002742.html

extdw_doc said on Mar 22, 2006 at 3:04 PM :

Sorry for the oversight. I'm also including the corrections from the mx2004 doc here. We'll correct
this documentation in next release of the docs. Really. Here are the corrections (thanks to mmtechwriter):

Contrary to what the procedure says, please don't use the mx namespace, that is reserved for Macromedia classes.

You must put the FLA and AS file in your own local folder so everything is in the class path. Also, change the names of the classes accordingly.
So for some project file (MyProject.FLA), save RectBorder.as into the same folder as MyProject.FLA and just name the class RectBorder instead of mx.skins.myTheme.RectBorder.

Also, use the following code for the class file:
(the path to ComponentVersion.as has been removed)

import mx.core.ext.UIObjectExtensions;
class RectBorder extends mx.skins.RectBorder{
static var symbolName:String = "RectBorder";
static var symbolOwner:Object = RectBorder;
var className:String = "RectBorder";
// all of these borders have the same size edges, one pixel
var offset:Number = 1;
function init(Void):Void{
super.init();
}
function drawBorder(Void):Void{
// the graphics are on the symbols Timeline,
// so all you need to do here is size the border
_width = __width;
_height = __height;
}
// register ourselves 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;
}

------------------------
On a related topic, regarding the custom drawBorder -- that is the one given in this example
that just stretches the graphics. The default one that installs with Flash has a bunch of AcionScript
code that does the drawing.

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flash/8/main/00003950.html

Add Comment