®
Rich Tretola

•I have been using Flex since the “Royale” beta in 2002
•I have been using Adobe AIR since the “Apollo” alph...
•Brief introduction to Adobe AIR

•Introduce Flex Builder 3

•Application demonstration

•Application requirements

•Devel...
The Adobe® AIR™ runtime lets
developers use proven web
technologies to build rich Internet
applications that deploy to the...
Adobe Flex has enabled developers to create Rich Internet
Applications for over 5 years and in 2008, the language was
    ...
Although in the past, I have been critical of
Flex Builder in the past.

Especially Flex Builder 1 

Flex Builder 3 is no...
What will we be building today?




         Run demo of final version
                                     ®
Key Requirements for URLTestr
  •Monitor URL’s for uptime
  •Administer URLs being monitored (crud)
  •Log results of URL’...
Iteration 1
     Key feature: simple example monitoring URL


To accomplish the monitoring of URLs we will a new AIR
class...
Iteration 1

To accomplish the monitoring of URLs we will a new AIR
class named
URLMonitor from the air.net package. This ...
Code Snippet: URLMonitor

varurl:String= http://www.google.com;
varurlRequest:URLRequest = new URLRequest(url)
urlRequest....
Demo 1




On to the code and demonstration of Iteration 1




                                                  ®
Iteration 2
Key features: Add a solution to store URL info
              Create UI to show current status of URLs
        ...
Iteration 2
  Key features: Add a solution to store URL info
                Create UI to show current status of URLs
    ...
Code Snippet: SQLConnection

private varconn:SQLConnection = new SQLConnection();

private function openDatabase():void{
c...
Code Snippet: SQLStatement

private varselectAllSQL:SQLStatement;

public function selectAll():void{
varsqlText:String = q...
Code Snippet: Window



varwindow:Window=new Window();
window.open();




                                 ®
Demo 2




On to the code and demonstration of Iteration 2




                                                  ®
Iteration 3
Key feature: HTML control for URL preview




                                            ®
Iteration 3
       Key feature: HTML control for URL preview


To allow for a preview of the URL being monitored, we can
u...
Code Snippet: HTML


<mx:HTML location=quot;http://blog.everythingflex.comquot;/>


                         or


varhtml:...
Demo 3




On to the code and demonstration of Iteration 3




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




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

Logging of the changes in ...
Iteration 4
       Key feature: Logging of Status Changes
                   Export log to CSV



To export to CSV, we wil...
Code Snippet: File


privatevarfile:File = new File();

privatefunction selectFile():void{
file.browseForSave(quot;Save Fi...
Code Snippet: FileStream


varfile:File = File.desktopDirectory.resolvePath(quot;test.txtquot;);
varfileStream:FileStream ...
Demo 4




On to the code and demonstration of Iteration 4




                                                  ®
Iteration 5
Key features: Start application on login
              Icon notification & menus
              Quit or Minimiz...
Iteration 5
  Key features: Start application on login
                Icon notification & menus
                Quit or M...
Iteration 5


To add an icon menu, we will utilize the NativeMenu and
NativeMenuItem classes both part of the flash.displa...
Code Snippet: startAtLogin




NativeApplication.nativeApplication.startAtLogin=true;




                                ...
Code Snippet: setting application icon


[Embed(source=quot;icons/AIRApp_16.pngquot;)]
private varAIRApp_16:Class;
private...
Code Snippet: Icon Menu

varmainMenu:NativeMenu = new NativeMenu();
varmyMenu:NativeMenuItem = new NativeMenuItem(quot;Men...
Demo 5




On to the code and demonstration of Iteration 5




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




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


We wi...
Demo 6




On to the code and demonstration of Iteration 6




                                                  ®
Export Configuration




We will set a few configuration properties for the
AIR Release Build.


The properties we wish to...
Bonus Iteration
Key features: SQLite Database Encryption
              self updating




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

Adobe AIR 1.5 adde...
Bonus Iteration

The Adode AIR Update Framework makes it very simple to include self
updating functionality within your ap...
Bonus Iteration
         Key features: self updating


Lets take a look at the application and do a quick walkthrough of h...
Questions




         Contact Info


General: rich@everythingflex.com

InsideRIA: rtretola@oreilly.com



               ...
Upcoming SlideShare
Loading in...5
×

MAX 2008 - Building your 1st AIR application

636

Published on

This is my MAX 2008 presentation titled &quot; Introduction To Adobe Air Building Your First Application&quot;

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
636
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

MAX 2008 - Building your 1st AIR application

  1. 1. ®
  2. 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. 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. 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. 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. 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. 7. What will we be building today? Run demo of final version ®
  8. 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. 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. 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. 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. 12. Demo 1 On to the code and demonstration of Iteration 1 ®
  13. 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. 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. 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. 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. 17. Code Snippet: Window varwindow:Window=new Window(); window.open(); ®
  18. 18. Demo 2 On to the code and demonstration of Iteration 2 ®
  19. 19. Iteration 3 Key feature: HTML control for URL preview ®
  20. 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. 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. 22. Demo 3 On to the code and demonstration of Iteration 3 ®
  23. 23. Iteration 4 Key feature: Logging of Status Changes Export log to CSV ®
  24. 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. 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. 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. 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. 28. Demo 4 On to the code and demonstration of Iteration 4 ®
  29. 29. Iteration 5 Key features: Start application on login Icon notification & menus Quit or Minimize to SystemTray or Dock ®
  30. 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. 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. 32. Code Snippet: startAtLogin NativeApplication.nativeApplication.startAtLogin=true; ®
  33. 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. 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. 35. Demo 5 On to the code and demonstration of Iteration 5 ®
  36. 36. Iteration 6 Key features: style the application Button icons DataGriditemRenderer and labelFunctions ®
  37. 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. 38. Demo 6 On to the code and demonstration of Iteration 6 ®
  39. 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. 40. Bonus Iteration Key features: SQLite Database Encryption self updating ®
  41. 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. 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. 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. 44. Questions Contact Info General: rich@everythingflex.com InsideRIA: rtretola@oreilly.com ®

×