Hi Everyone,

Looking back at the last 4-5 years I spent developing Flash widgets & applications (again, I do NOT participate in marketing efforts.. so no micro-sites or bogus games for me) I realize that one of the core abilities of a good Flash application developer is his ability to develop components from scratch. The better you get at this, the more valuable you become. At first you try to develop simple components: buttons, radio buttons, check boxes, thumbnail viewers; then move on to more difficult ones: accordeons, tooltips, tabbed panels, tree controls.

Imagine, whatever your client asks you, you say: "Yes I can do". This ability is very precious, it takes years of efforts to develop properly but once you have acquired it, there is no limit to what you can do. W/o this ability, you are limited to what you can integrate from libraries or packages. You can compare this to the difference between a composer and a DJ. The DJ can only mix tracks, but the composer can actually make up any music he wants!

Last summer I had a big challenge while working for Adobe: rebuild the DataGrid to enable it to show multiple levels of data, with animated filtering. It works, however is hasn't been integrated inside of the Verizon Wireless Media Store yet, maybe one day!

Since that challenge, my perspective changed; in fact the experience at Abode proved very instructive. I have to thank Paul, Josh, Dave, Tommy, and Bjorn for this.

In this article I will describe the foundation of most of the custom components I build, a simple class called BaseControl. The ideas behind this class come from a Tutorial I first read in 2004 from Joey Lott, which I implemented in AS2 and then migrated to AS3.

This class can be thought as a trimmed down version of UIComponent inside of the Flex Architecture because it doesn't carry the weight of styles, callLater (and since I don't really like flex, I cannot remember what else BaseControl lacks).

The class contains functions to streamline creation (1), help manage disposition (2), and help you track some mouse activity (3).

Ah, important note, I use Sprite as my base class. Why? We need a class that is derived from DisplayObjectContainer, and there is no need for a timeline, therefore Sprite is ideal.

1. Streamlining Creation

When creating a component, there are a few steps you will go through. First step is passing all the initializing parameters to the component. You need to do this before the creation process starts. These parameters can be varied, can go from styling, data source, dimensions, mode, state, etc... In Flex thanks to the use of "callLater" they can offer an empty constructor for the controls, and then you pass the parameters by setting attributes on the instantiated class. Once the current "thread" of execution is done, the control is initialized and created.

In this example, I will not use "callLater". You can refer to a post I did earlier on how to implement "callLater" inside of your classes if you wish to take another route.

In this example, we will pass all initalization parameters to the constructor of the component. This constructor needs to adapt to the subclasses, some parameters might be optional, therefore I find it easier for this function to "blindly" apply the params passed to it. Here is the code for the constructor:

In this function, I first go through all the properties of the object that was passed in the constructor, called initObj, and apply each of those properties to the component itself. Again, this is a blind process, to support all variations found in subclasses. Then the following sequence is called:

• init -- used to initialize the variables, such as arrays, state information, data sources and others non-visual properties of the component
• createChilds -- used to create all the visual elements contained inside of the component, such as background shape, canvas for drawing, buttons, etc... This function is often broken down in smaller bits.
• initEvents -- used to initialize the event listeners on the visual elements just created.
• arrange -- used to layout the visual elements contained in the component
• redraw -- used to draw the content of the component, when required. It does fill in the component with a transparent layer by default, officially occupying the space and enabling it to capture mouse events that happen over it.

A. init()

The init function, atleast its default behaviour makes sure the component isn't scaled (you never want to scale components themselves!), makes sure the width and height are positive, and disabled tab interaction.

Note that here we use _width instead of width because sometimes a component can occupy more width than it should (through masked content for example). Hence we want to change this behavior by overriding the width and height getters this way:

This way, you have control over the reported size of your component, no matter what flash actually thinks the dimensions should be. This is very handy.

As a continuation of this logic, I implement a function called setSize which lets me control the size of the control after it's instantiation; like so:

The function ensures that scaleX and scaleY are both set to 1. Again scaling is not a good practice on the component itself, you can scale some of it's children if needed, but NOT the component itself! Then the "new width" and "new height" are set, arrange() is called to lay out the children appropriately, followed by a call to redraw() to draw the content again, and finally an event is dispatched to inform anybody interested that the component has been resized.

B. createChilds()

In this case, since BaseControl really is an Abstract Class (I wish ActionScript would support them properly..), we are not creating any children. All was have is the function signature which will be overridden in subclasses.

C. initEvents()

Ah, here there is a bit of logic, used mainly to replace the good old "onReleaseOutside" which has disappeared from in AS3. What needs to be done is as follows:

• track when the component is added to stage
• when it is, add a MouseEvent.MOUSE_UP listener on the Stage
• track when the mouseButton goes down on the component itself
• if the mouseButton goes up on the stage (outside of the component) and had gone down on the component, this is the equivalent of onReleaseOutside

No matter where the mouse button goes up inside of Flash, the Stage will always dispatch it. This enables us to simulate the onReleaseOutside event..

First, we need a protected property on BaseControl, a flag

Next the implementation of initEvents() and all functions related to it..

That was quite a bit of code... I will explain it shortly! work calls....

Take care,

Martin

Filed under: actionscript, as3, as3 tutorials, flash, work, custom component, tutorial