Now we need to define our custom control. It is composed of a simple label object, that displays the edited text, and a text input area to edit it. These two controls must be  displayed alternatively.

SPAS 3.0 Label objects constructor accept two parameters: label and width. The first one is used to declare the default text displayed by the Label, and the second one specifies its width.

So we will implement the same functionalities to our custom control. To do that, we just rewrite the EditableLabel's constructor as shown below:

public function EditableLabel(text:String = "Click to edit label.", width:Number = 150)  {

Then, we import the Label and TextImput classes, and declare the two following private instances:

private var _labelCtrl:Label;
private var _input:TextInput;

The first internal action of the program will be to create both, _label and _input, controls:

private function createControls(text:String, width:Number):void {
 _labelCtrl = new Label(text, width);
 _input = new TextInput(); = = this.container;

The parameters of the createControls() method are the same as the constuctor function. Once the controls are created, we give them the same target parameter. It represents the display object where a control will be displayed. In this case, controls are displayed into the main UIObject container which can be accessed by the UIObject container property. At the end of the function, the _label control is displayed.

To ensure the call to this method, we place it into the constructor function:

public function EditableLabel(text:String = "Click to edit label.", width:Number = 150)  {
 createControls(text, width);

To test the code, just write the following lines of code on the Flash IDE main timeline:

import org.flashapi.swing.*;</p>
<p>var el:EditableLabel = new EditableLabel();

At this step, the label should be displayed. But to add interactivity, (like swapping from the  label to the input control), we have to add internal event. This will be discussed in the next part.