Creating AIR widgets using SPAS 3.0 and Flash

Difficulty: Medium
Creating AIR widgets using SPAS 3.0 and Flash

In this tutorial we will see how it is easy to create desktop widgets using SPAS 3.0, AIR and the Flash IDE. If you have never used the Flash IDE to make AIR applications, you can see the video tutorial by Lee Brimelow called "Developing AIR in Flash".

The code in this tutorial is based on SPAS 3.0 alpha 5.0 nb1 release.
We assume that you are familiar with external files programming and that you already have downloaded the SPAS 3.0 API.

Creating the analog clock widget

First, let's create a Flash AIR application called "clock" and set the class path to your SPAS 3.0 folder. Open the "Action" panel to start coding the clock widget.

The base procedure to work with SPAS 3.0 from the Flash main timeline is always the same. You should be familiar with the lines of code below if you have already read the tutorial "Creating widgets fast and easily with SPAS 3.0":

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

The initialize() method of the UIManager class is used by SPAS 3.0 to access the root document class and get a reference of the Stage object. Now we have initialized the application, we can create all SPAS 3.0 "uiobjects" exactly as we do inside an org.flashapi.swing.Application class instance.

To display current OS time on the desktop, we can use the AnalogClock class, that creates a visual analog clock object. But instead of simply put it on the desktop, we can add it into a ReactivePanel instance. ReactivePanels can automatically interact with mouse actions to create nice mouse effects. This class had specially been developed to wrap AIR widgets and to apply them a Vista-widget-like appearance.

So, here is the tiny code that we have to write to display the clock object:

// Creates an AnalogClock instance
var clock:AnalogClock = new AnalogClock();
// Creates a ReactivePanel instance
var panel:ReactivePanel = new ReactivePanel();
// Adds the clock to the  panel's display list
panel.addElement(clock);
// Displays the panel on the top of the stage
panel.display();

Visually improving the widget

If you compile now the project, you will see that the reactive panel do not displays the entire clock. To fix that, we have to set the panel autoSize property to true. When set to true, this property resizes the uicontainer to fit its content.

// Creates an AnalogClock instance
var clock:AnalogClock = new AnalogClock();
// Sets the clock's margin to 4px
clock.margin = 4;
// Adds a shadox effect to the clock
clock.shadow = true;

// Creates a ReactivePanel instance
var panel:ReactivePanel = new ReactivePanel();
// Adds the clock to the  panel's display list
panel.addElement(clock);
// Sets the panel's padding to 0px
panel.padding = 0;
// Resizes the panel to fit its content
panel.autoSize = true;
// Displays the panel on the top of the stage
panel.display();

The preceding lines of code show that you can use all the properties from the UIObject class with both AnalogClock and ReactivePanel classes.

Displaying time with the widget

Displaying the OS time is quite easy with the AnalogClock class. We only have to use two methods: start() and setCurrentLocalTime().

// Starts the clock
clock.start();
// Sets the clock's time by using the OS current time
clock.setCurrentLocalTime();

Unfortunately, the displayed time can be distorted due to the fact that Flash objects use the resources of the unit process. To prevent that problem, we can synchronize the clock widget with the OS time. The following process calls the onSynchronize() method each 5 minutes (5 ' is equal to 300''), and uses the setCurrentLocalTime() method to synchronize the clock:

// Calls the  onSynchronize method each 300 seconds
clock.autoSynchronization = 300;
// Uses the  setCurrentLocalTime method to synchronize the clock
clock.onSynchronize = clock.setCurrentLocalTime;

Moving the widget

With the AIR API, it is really easy to move an application window; we just have to use the NativeWindow class startMove() method in combination with the UIMouseEvent "press" event. This event is fired by the ReactivePanel instance when you press the mouse left button over it. The startMove() method is used to begin a system-controlled move of the window. As we said before, we can start dragging the window when the mouse left button is pressed over the panel by adding on it a simple mouse event listener:

// Adds the mouse press and move event
panel.addEventListener(UIMouseEvent.PRESS, doDrag);
function doDrag(e:UIMouseEvent):void {
	stage.nativeWindow.startMove ();
}

For more information about the methods and properties of the AIR windowing API, such like closing and resizing methods, see the ActionScript 3.0 Language Reference.

The full code

The clock widget is finished now. Your final code should look like the following one:

import org.flashapi.swing.*;
import org.flashapi.swing.event.*;

UIManager.initialize(this);

var clock:AnalogClock = new AnalogClock();
clock.margin = 4;
clock.shadow = true;
clock.start();
clock.setCurrentLocalTime();
clock.autoSynchronization = 300;
clock.onSynchronize = clock.setCurrentLocalTime;

var panel:ReactivePanel = new ReactivePanel();
panel.addElement(clock);
panel.padding = 0;
panel.autoSize = true;

panel.addEventListener(UIMouseEvent.PRESS, doDrag);
function doDrag(e:UIMouseEvent):void {
	stage.nativeWindow.startMove ();
}

panel.display();

As you see, the SPAS 3.0 API needs very tiny code to create AIR applications. Of course, this is a basic sample, and you can add as many functionalities as you want to extend the clock capabilities. For example, the commented source file provided with this tutorial uses a CloseButton instance to remove the AIR native window from the runtime application.

Sample source code

Download the source code for this tutorial (Zip file, 1Ko)

Share this article:

Comments:

There are no comments yet for this article.

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