This is my MAX 2008 presentation titled " Introduction To Adobe Air Building Your First Application"

1. ®

2. Rich Tretola
•I have been using Flex since the “Royale” beta in 2002
•I have been using Adobe AIR since the “Apollo” alpha (2006)
•I have written books on Adobe Flex and Adobe AIR
•I have been blogging at EverythingFlex.com since 2005
•I have been the community manager at InsideRIA since 2007
®

3. •Brief introduction to Adobe AIR
•Introduce Flex Builder 3
•Application demonstration
•Application requirements
•Development iterations
•Discussion on each iteration and the technology behind it
•Packaging and Deployment
®

4. The Adobe® AIR™ runtime lets
developers use proven web
technologies to build rich Internet
applications that deploy to the
desktop and run across operating
systems.
®

5. Adobe Flex has enabled developers to create Rich Internet
Applications for over 5 years and in 2008, the language was
extended to the desktop via Adobe AIR.
By providing a familiar development tool and language AIR
development via MXML and ActionScript 3 provides new
deployment possibilities for existing Flex developers.
®

6. Although in the past, I have been critical of
Flex Builder in the past.
Especially Flex Builder 1 
Flex Builder 3 is now my clear choice for
development of Flex & AIR applications and
the tool we will use during this presentation.
It is also important to point out that everything
we are about to do with Flex Builder can be
done for free by using the free SDK to compile
your application.
®

7. What will we be building today?
Run demo of final version
®

8. Key Requirements for URLTestr
•Monitor URL’s for uptime
•Administer URLs being monitored (crud)
•Log results of URL’s up/down time
•Export log data to csv file
•Run application on user login
•Run application from SystemTray or Dock
•Notify user of problem domains
®

9. Iteration 1
Key feature: simple example monitoring URL
To accomplish the monitoring of URLs we will a new AIR
class named URLMonitor, which is located in the air.net
package.
®

10. Iteration 1
To accomplish the monitoring of URLs we will a new AIR
class named
URLMonitor from the air.net package. This class monitors
availablity of an HTTP- or HTTPS-based service.
To use URLMonitor you simply need to create an
instance, passing in a flash.net.URLRequest to the
constructor and add an event listener to listen for a change
in status.
®

11. Code Snippet: URLMonitor
varurl:String= http://www.google.com;
varurlRequest:URLRequest = new URLRequest(url)
urlRequest.method = quot;HEAD”;
urlMonitor = new URLMonitor(urlRequest);
urlMonitor.pollInterval = 10000;
urlMonitor.addEventListener(StatusEvent.STATUS,
statusChanged);
urlMonitor.start();
®

12. Demo 1
On to the code and demonstration of Iteration 1
®

13. Iteration 2
Key features: Add a solution to store URL info
Create UI to show current status of URLs
Create UI to edit URL information
®

14. Iteration 2
Key features: Add a solution to store URL info
Create UI to show current status of URLs
Create UI to edit URL information
•To store the URL information, we will utilize the embedded SQLIte
database engine that is embedded into the AIR runtime.
•To show the current status of the URLs being monitored, we will use a
DataGrid.
•To add or edit URLs, we will launch a new application Window.
®

15. Code Snippet: SQLConnection
private varconn:SQLConnection = new SQLConnection();
private function openDatabase():void{
conn.addEventListener(SQLErrorEvent.ERROR, errorHandler);
conn.addEventListener(SQLEvent.OPEN, openHandler);
vardbFile:File = File.applicationStorageDirectory.resolvePath(quot;mydb.dbquot;);
conn.openAsync(dbFile,SQLMode.CREATE);
}
}
®

16. Code Snippet: SQLStatement
private varselectAllSQL:SQLStatement;
public function selectAll():void{
varsqlText:String = quot;SELECT * FROM myTablequot;;
selectAllSQL = new SQLStatement();
selectAllSQL.sqlConnection = conn;
selectAllSQL.addEventListener(SQLEvent.RESULT,
selectAllURLsResult);
selectAllSQL.addEventListener(SQLErrorEvent.ERROR,
errorHandler);
selectAllSQL.text = sqlText;
selectAllSQL.execute();
}
®

17. Code Snippet: Window
varwindow:Window=new Window();
window.open();
®

18. Demo 2
On to the code and demonstration of Iteration 2
®

19. Iteration 3
Key feature: HTML control for URL preview
®

20. Iteration 3
Key feature: HTML control for URL preview
To allow for a preview of the URL being monitored, we can
utilize the new AIR HTML control.
This control is located within the mx.controls package and
uses a built in WebKit engine for its HTML rendering.
®

21. Code Snippet: HTML
<mx:HTML location=quot;http://blog.everythingflex.comquot;/>
or
varhtml:HTML = new HTML();
html.location = quot;http://blog.everythingflex.comquot;;
this.addChild(html);
®

22. Demo 3
On to the code and demonstration of Iteration 3
®

23. Iteration 4
Key feature: Logging of Status Changes
Export log to CSV
®

24. Iteration 4
Key feature: Logging of Status Changes
Export log to CSV
Logging of the changes in status of the monitored URLs
will be done within the SQLite database.
We will update the DataManager class to include the
additional methods to create, add, and delete logging
information.
®

25. Iteration 4
Key feature: Logging of Status Changes
Export log to CSV
To export to CSV, we will use the File class to save the file
and the FileStream class to write the contents of this file.
Both of these classes are located within the flash.filesystem
package.
®

26. Code Snippet: File
privatevarfile:File = new File();
privatefunction selectFile():void{
file.browseForSave(quot;Save File Asquot;);
file.addEventListener(Event.SELECT,selectHandler);
}
privatefunction selectHandler(event:Event):void{
trace(event.target.nativePath);
}
®

27. Code Snippet: FileStream
varfile:File = File.desktopDirectory.resolvePath(quot;test.txtquot;);
varfileStream:FileStream = new FileStream();
fileStream.open(file,FileMode.WRITE);
fileStream.writeUTFBytes(quot;file contentsquot;);
fileStream.close();
®

28. Demo 4
On to the code and demonstration of Iteration 4
®

29. Iteration 5
Key features: Start application on login
Icon notification & menus
Quit or Minimize to SystemTray or Dock
®

30. Iteration 5
Key features: Start application on login
Icon notification & menus
Quit or Minimize to SystemTray or Dock
To start an application on login, you will simply need to set the
startAtLogin property within the NativeApplication.nativeApplication to
true.
To create an icon notification, we will use a timer to cycle between 2
different application icons. Application icons are customized by setting
the bitmaps property on the NativeApplication.nativeApplication.icon.
®

31. Iteration 5
To add an icon menu, we will utilize the NativeMenu and
NativeMenuItem classes both part of the flash.display package
To give the user the choice to quit or minimize to the SystemTray
or Dock, we will add an event listener to intercept the application
closing event and offer the user a choice to really close the
application or simply minimize it and run it in the background.
®

32. Code Snippet: startAtLogin
NativeApplication.nativeApplication.startAtLogin=true;
®

33. Code Snippet: setting application icon
[Embed(source=quot;icons/AIRApp_16.pngquot;)]
private varAIRApp_16:Class;
private varAIRApp16BM:Bitmap = new AIRApp_16();
****** 32, 48, and 128, hidden for brevity ******
private function setAppIcon():void{
NativeApplication.nativeApplication.icon.bitmaps =
[AIRApp16BM.bitmapData,
AIRApp32BM.bitmapData,
AIRApp48BM.bitmapData,
AIRApp128BM.bitmapData];
}
®

34. Code Snippet: Icon Menu
varmainMenu:NativeMenu = new NativeMenu();
varmyMenu:NativeMenuItem = new NativeMenuItem(quot;Menu Itemquot;);
myMenu.addEventListener(Event.SELECT, handleMenuClick);
mainMenu.addItem(myMenu);
if(NativeApplication.supportsSystemTrayIcon){
systemTrayIcon = NativeApplication.nativeApplication.iconas SystemTrayIcon;
systemTrayIcon.menu = mainMenu;
}
private function handleMenuClick(e:Event):void{
varmenuItem:NativeMenuItem = e.targetas NativeMenuItem;
trace(menuItem.label);
}
®

35. Demo 5
On to the code and demonstration of Iteration 5
®

36. Iteration 6
Key features: style the application
Button icons
DataGriditemRenderer and labelFunctions
®

37. Iteration 6
Key features: style the application
Button icons
DataGriditemRenderer and labelFunctions
We will use CSS to style the application and add some button icons to
improve the usability of the application.
Next, we will add some itemRenderers to make it easier to see URL
status and labelFunction to format some of the data.
®

38. Demo 6
On to the code and demonstration of Iteration 6
®

39. Export Configuration
We will set a few configuration properties for the
AIR Release Build.
The properties we wish to set will control where the
application is installed, information about the
application, and the application icons.
Let’s take a look at the Configuration File
®

40. Bonus Iteration
Key features: SQLite Database Encryption
self updating
®

41. Bonus Iteration
Key features: SQLite Database Encryption
self updating
Adobe AIR 1.5 added the ability to encrypt a SQLite database. To accomplish
this you will simply need to pass in an additional argument when opening the
SQLConnection.
conn.openAsync(dbFile,SQLMode.CREATE,null,false,1024,encryptKey);
®

42. Bonus Iteration
The Adode AIR Update Framework makes it very simple to include self
updating functionality within your application.
The Framework requires two XML configuration files.
The first is a configuration file that will ship with the application. This file defines
which application windows will be displayed to the user during the upgrade.
The second XML file is a remote file that stores information on the most current
version, release notes, and the path to the newest application download file.
®

43. Bonus Iteration
Key features: self updating
Lets take a look at the application and do a quick walkthrough of how I used
the Adobe Update Framework and the files and classes required.
®

44. Questions
Contact Info
General: rich@everythingflex.com
InsideRIA: rtretola@oreilly.com
®