Now we have indications on the actions we will use to create a custom control, what about creating one? I propose you to make a simple label control, that becomes editable when the user clicks on it. Let's call it... well, what about... EditableLabel!

Our first task will consist in writing the skeleton of the class, including the API that we discussed above:

package {
 import org.flashapi.swing.core.IUIObject;
 import org.flashapi.swing.core.UIObject;
 
 public class EditableLabel extends UIObject implements IUIObject {
  
  public function EditableLabel() { super(); }
  
  public function display(x:Number = undefined, y:Number = undefined):void {}
  
  public function remove():void {}
  
  override protected function createUIObject(x:Number = undefined, y:Number = undefined):void {}
  
  override protected function refresh():void {}
 }
}

So, once we have a base file to work, we can take a look at the SPAS 3.0 control API in more details.

The display() method is called when the user wants to add the UIObject to the SPAS 3.0 display list. (This method is automatically called by SPAS 3.0 when using the UIContainer addElement() method.) It accepts 2 parameters which correspond to the [x, y] coordinates where the UIObject will be displayed. If these parameters are omitted, the UIObject will be displayed at the left-hand top corner of the UIObject's parent container.

To let SPAS 3.0 deal with the complex internal displaying mechanism, we only must use the display method to call the createUIObject() function when the UIObject is not displayed yet:

public function display(x:Number = undefined, y:Number = undefined):void {
 if(!displayed) createUIObject(x, y);
}

By this way, we ensure that the UIObject is created only when it is not currently displayed.

The aim of the createUIObject() method is to built the control, and to call the built-in displaying effect.

Most of the time, this method looks like shown below:

override protected function createUIObject(x:Number = undefined, y:Number = undefined):void {
 move(x, y);
 refresh();
 doStartEffect();
}

It calls the UIObject move() method to move the object to the specified position within its parent, the object, the refresh() method to paint the control and the doStartEffect() method to launch the built-in displaying effect mechanism.

Now, let's see the remove action. It removes the object from the SPAS 3.0 display list. It usually calls the unload method to launch the built-in removing effect mechanism. So, it ever should look like that:

public function remove():void { if(displayed) unload(); }

As we mentioned earlier, the refresh() method repaints the UIObject. If you want to use the SPAS 3.0 built-in effect API (such as applying shadow or glow effect) you have to call the setEffects() method at the end of the refresh action:

override protected function refresh():void { setEffects(); }

We have covered the base API for creating controls with SPAS 3.0. It could be useful to keep a copy of this architecture. The following code represents the complete base API to create custon controls with SPAS 3.0:
 

package {
 
 import org.flashapi.swing.core.IUIObject;
 import org.flashapi.swing.core.UIObject;
 
 public class MyControl extends UIObject implements IUIObject {
  
  public function MyControl() { super(); }
  
  public function display(x:Number = undefined, y:Number = undefined):void {
   if(!displayed) createUIObject(x, y);
  }
  
  public function remove():void { if(displayed) unload(); }
  
  override protected function createUIObject(x:Number = undefined, y:Number = undefined):void {
   move(x, y);
   refresh();
   doStartEffect();
  }
  
  override protected function refresh():void { setEffects(); }
 }
}