Creating widgets fast and easily

Difficulty: Easy
Creating widgets fast and easily

The process to create impressive widgets with Flex and to integrate them into Flash is too complicated. For these reasons, one of the aims of SPAS 3.0 is to really simplify the coding process, without restricting creativity.

In this tutorial we will learn how to make a simple Celsius to Fahrenheit degree converter with less than 30 lines of code. Then, we'll see how to integrate it into a Flash application directly from the Flash CS3 main timeline.

We assume that you are familiar with external files programming and that you already have downloaded SPAS 3.0.
You can download SPAS 3.0 alpha release on Download section of this site.

The CelsiusConverter class template

First, let's create the class template. Open your favorite class editor and create a new ActionScript file called CelsiusConverter.as.

The best way to create autonomous widgets with SPAS 3.0 is to extend the Popup class (org.flashapi.swing.Popup). Thus, the widget will be independent of the environment in which you will place it (principle of weak coupling).
So, open the "CelsiusConverter.as" file and create a class called CelsiusConverter that extends the Popup class, as shown below:

package {
	import org.flashapi.swing.*;
	public class CelsiusConverter extends Popup {
		public function CelsiusConverter() {
			super();
		}
	}
}

The constructor function

The super statement calls the Popup constructor which has 3 parameters: title, width and height. The title specifies the text displayed on the face of the popup's title bar. We set its value to "Convert Celsius to Fahrenheit", and we set the width to 250 pixels. (It is enough to display the widget's content).

public function CelsiusConverter():void {
	super("Convert Celsius to Fahrenheit", 250);
	initialize();
}

Moreover, in OOP we often prefer to initialize objects into an initializing method instead of the constructor method itself.

The initialization function

Once the constructor function is defined, we can concentrate on the initialize() method to create the widget.

The default layout for SPAS 3.0 containers is an horizontal flow layout. If you combine the default layout with the autoHeight property set to true, the UIContainer object automatically adapts its height if there is not enough width to display the next object in the display list. By the way, we set the padding, horizontalGap and verticalGap properties to 10 pixels.

private function initialize():void {
	autoHeight = true;
	padding = horizontalGap = verticalGap = 10;
}

Adding controls

The first control we need is the text input where the user can type the temperature to convert. We declare this object as a private variable to allow it access into the scope of the CelsiusConverter object. Then we create a new instance of the TextInput class with 0 (zero) as default parameter:

private var _input:TextInput;
private function initialize():void {
	autoHeight = true;
	padding = horizontalGap = verticalGap = 10;
	_input = new TextInput("0");
}

The user mustn't type characters other than numeric values, and the number's size cannot exceed 5 characters. So we use the maxChars and restrict properties of the TextInput class to do that:

_input.maxChars = 5;
_input.restrict = "0-9";

The next control is a simple label object where the result of the conversion will be displayed. This control must be accessible from the internal scope, like the preceding one. Once we have declared the private variable for this control, we create the corresponding Label instance as detailed below.

private var _result:Label;
private function initialize():void {
	//...
	_result = new Label("fahrenheit");
}

We don't need anymore to create controls which are internally accessible. We will just create a Button control to convert the temperature, and the label which indicates that the temperature unit of the input field is celsius.

private var _result:Label;
private function initialize():void {
	//...
	var _btn = new Button("Convert", _input.width);
	var celsiusLabel:Label = new Label("celsius");
}

All controls are built now. To add them at one time into the Popup container we use the addGraphicElements() method. The following line of code illustrates this process:

addGraphicElements(_input, celsiusLabel, _btn, _result);

Adding interactivity

Now, we must implement a function, called convertTemp, to convert the temperature. The algorithm of this function is quite simple. When the user clicks the "convert" button, the program reads the input field value as a Number, and writes the converted value into the result label field.

To add mouse interactivity, we use the UIMouseEvent class:

import org.flashapi.swing.event.UIMouseEvent;

The event model of SPAS 3.0 is exactly the same as the AS3 event model. But it is better to use the SPAS 3.0 integrated tools to manipulate events, than to do it by an other way. SPAS 3.0 has its own event sub-system to prevent leak of memory due to event management. That's why we use the Popup class eventCollector property to register the button event:

eventCollector.addEvent(_btn, UIMouseEvent.CLICK, convertTemp);

When the user clicks the button, it will call the convertTemp() function which is based on the algorithm described above:

private function convertTemp(event:UIMouseEvent):void {
	var temp:Number = Number(_input.text);
	_result.text = String(temp * 1.8 + 32) + " fahrenheit";
}

CelsiusConverter class full code

Well now, we should have a 28 lines of code class. If not, here is the complete CelsiusConverter class:

package {
 
	import org.flashapi.swing.UIMouseEvent;
	import org.flashapi.swing.event.*;
 
	public class CelsiusConverter extends Popup {
 
	public function CelsiusConverter():void {
		super("Convert Celsius to Fahrenheit", 250);
		initialize();
	}
 
	private var _result:Label;
	private var _input:TextInput;
 
	private function initialize():void {
		autoHeight = true;
		padding = horizontalGap = verticalGap = 10;
		_input = new TextInput("0");
		_input.maxChars = 5;
		_input.restrict = "0-9";
		_result = new Label("fahrenheit");
		var _btn = new Button("Convert", _input.width);
		var celsiusLabel:Label = new Label("celsius");
		addGraphicElements(_input, celsiusLabel, _btn, _result);
		eventCollector.addEvent(_btn, UIMouseEvent.CLICK, convertTemp);
	}
	private function convertTemp(event:UIMouseEvent):void {
		var temp:Number = Number(_input.text);
		_result.text = String(temp * 1.8 + 32) + " fahrenheit";
	}
	}
}

How to use this widget

Let's see how to use our widget directly from the Flash main timeline. When you use SPAS 3.0 from Flash IDE instead of the Application class (org.flashapi.swing.Application) you must declare the Stage instance. (This is a consequence of the impossibility to access a global reference of the Stage instance in Actionscript 3.0.) Said like that, this could seem complex. But it's not! Indeed, you just have to put the following lines on the first frame of the main timeline:

import org.flashapi.swing.*;
UIManager.initialize(this);

Then, you can easily create and display the CelsiusConverter object, and even use SPAS 3.0 built-in effects such as shadow or reflection:

import org.flashapi.swing.*;
UIManager.initialize(this);
 
var cc:CelsiusConverter = new CelsiusConverter();
cc.shadow = cc.reflection = true;
cc.display();

Result

Ok! It's finished. You just have to compile the FLA to see the result!

Get Adobe Flash player

I hope you've enjoyed this tutorial. You can find more resources and tutorials on the SPAS 3.0 Web site at: http://www.flashapi.org/

Share this article:

Comments:

By Al Mathews2011-04-17 13:54:52
Thanks for this informative piece. I found that on lines 29 and 30 the reference to .label property had to be set to .text to make it compile. Can you please explain why?Thanks
By Pascal2011-04-17 14:26:09
UR welcome,The label property has been replaced by the text property in newer versions of SPAS.Thanks for the comment.

Leave a reply

Your email is required but will not be displayed.

To prevent abusive emails, please enter the numbers you see in the image below:

Security code