RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Fresh AIR for RIAs : Page 4

Take a look at Adobe's AIR, and see how this cross-platform, run-time engine can help you apply your skills to create and distribute Internet-enabled desktop applications.

Build a Simple Application
The traditional Hello World computer-programming exercise, or something similar, is usually a good place to start when learning a new language or environment. It's simple enough that you can concentrate on a specific topic without a lot of tangential code getting in the way. In this case, however, although that simplicity would certainly show how easy it is to make an AIR application, even with a custom window shape, it wouldn't demonstrate any of the AIR-specific APIs. Therefore, a few simple tasks will be added to the application that will demonstrate the new Flash CS3 workflow.

Figure 1. Hello World: You'll build this sample application with a few twists to get a feel for the AIR-specific APIs.

The very first thing you need to do is create an AIR-compatible Flash file. If you have your Welcome screen enabled, you should see the option available (see Figure 1). (If you're sure you installed the required update and this option doesn't show up on the Welcome screen, see the Flash CS3 Update document in the related resources. It will describe a way to delete a system folder to force a rebuild of the dialog.)

Author's Note: The AIR option doesn't show up in the New dialog from the File menu. If you're not using the Welcome screen, you can choose the AIR 1.0 option from the Publish Settings on the File menu. With this option selected, each time you test your movie, it will open in the AIR preview player, ADL.

The first functional departure from the traditional Hello World application is that the text is a visual, in the form of a word balloon. It is initially hidden, as seen in line two of the script, and shown when you click on the baby. For simplicity, the word balloon remains visible after it's displayed.

Clicking and dragging on the translucent maroon bar at the bottom of the image allows you to drag the application around your screen. Just for fun, when you click and "pick up" the application, a drop shadow will appear. When you let go of the mouse and "put down" the application, the shadow disappears.

Creating the shadow occurs in lines 3–8, using standard ActionScript:

Author's Note: If you're not used to AS3, percentage ranges such as the one for the alpha property are between 0 and 1, not 0 and 100.
1  import flash.filesystem.*;

2  wordBalloon.visible = false;

3  var ds:DropShadowFilter = new DropShadowFilter();
4  ds.color = 0x000000; 
5  ds.alpha = 0.5; 
6  ds.blurX = 10; 
7  ds.blurY = 10; 
8  ds.distance = 10; 
The next five lines create the event listeners needed to trap the events that control the application (all with weak references for safer memory management). For example, a click event on the baby (instance name sally) calls the onShowMsg() function. Note that the drag bar (drag_btn) uses MOUSE_DOWN and MOUSE_UP, rather than CLICK for its events.
 9  sally.addEventListener(MouseEvent.CLICK, onShowMsg,false,0, true);
10  drag_btn.addEventListener(MouseEvent.MOUSE_DOWN,onDragWindow,false,0,true);
11  drag_btn.addEventListener(MouseEvent.MOUSE_UP,onDropWindow,false,0,true);
12  close_btn.addEventListener(MouseEvent.CLICK,onCloseWindow,false,0,true);
13  min_btn.addEventListener(MouseEvent.CLICK,onMinimizeWindow,false,0,true);
The onShowMsg() function is the nitty gritty of this application. First, it sets the visible setting of the word balloon to true. Note another AS3 migration issue: no built-in properties start with an underscore. Next it populates a variable with a text string to write to the text file. The last block is writing the text file. Line 17 resolves a local path, relative to the location of the application, to the desktop and creates a file called hello_world_as.txt. Line 18 checks to see if the file doesn't exist. If it doesn't, line 19 creates a FileStream—a class instance that will handle the opening, writing, and closing of the file. Line 20 opens the file created earlier, in write mode. Finally, line 21 writes the string using UTF encoding, and line 22 closes the file.
14  function onShowMsg(evt:MouseEvent):void {
15    wordBalloon.visible = true;

16    var stringToWrite:String = "Sally says, 'Hello World!'";

17    var f:File = File.desktopDirectory.resolve("hello_world_as.txt");
18    if (!f.exists) {
19      var fs:FileStream = new FileStream();
20      fs.open(f, FileMode.WRITE);
21      fs.writeUTFBytes(stringToWrite);
22      fs.close();
23    }
24  }
The last four functions handle the utility tasks. The onDragWindow() function assigns the DropShadow filter to the baby and drag bar and starts a system move to drag the application around the screen. The onDropWindow() function empties the filters from the baby and drag bar, and the last two functions minimize and close the window, respectively.
25  function onDragWindow(evt:MouseEvent):void {
26    sally.filters = [ds];
27    drag_btn.filters = [ds];
28    stage.window.startMove();
29  }

30  function onDropWindow(evt:MouseEvent):void {
31    sally.filters = [];
32    drag_btn.filters = [];
33  }

34  function onMinimizeWindow(evt:MouseEvent):void {
35    stage.window.minimize();
36  }

37  function onCloseWindow(evt:MouseEvent):void {
38    stage.window.close();
39  }

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date