• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
MAX 2007 - Flex to AIR
 

MAX 2007 - Flex to AIR

on

  • 916 views

This is my MAX 2007 presentation titled Taking a Flex Application from the web to the Desktop with Adobe Integrated Runtime (AIR)

This is my MAX 2007 presentation titled Taking a Flex Application from the web to the Desktop with Adobe Integrated Runtime (AIR)

Statistics

Views

Total Views
916
Views on SlideShare
916
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    MAX 2007 - Flex to AIR MAX 2007 - Flex to AIR Presentation Transcript

    • MAX 2007 CONNECT. DISCOVER. INSPIRE. Rich Tretola Taking a Flex Application from the Web to the Desktop with Adobe Integrated Runtime (AIR) 1 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Who is Rich Tretola? Rich Applications Technical Lead at Her Jones Corp  Flex Developer for 4 + years  Lead author of Professional Flex 2 from Wrox/Wiley (May 2007)  Author of Beginning AIR from Wrox/Wiley (Jan 2008)  Adobe Community Expert (Flex)  Owner and author of EverythingFlex.com  2 2007 Adobe Systems Incorporated. All Rights Reserved.
    • What we will cover How? How do you  convert a Flex application to an AIR application? 3 2007 Adobe Systems Incorporated. All Rights Reserved.
    • What we will cover How? Why? How do you Why should   convert a you care Flex about application converting a to an AIR Flex application? application to AIR? 4 2007 Adobe Systems Incorporated. All Rights Reserved.
    • What we will cover How? Why? What? How do you Why should What are the    convert a you care API’s that are Flex about unique to application converting a AIR? to an AIR Flex application? application to AIR? 5 2007 Adobe Systems Incorporated. All Rights Reserved.
    • What we will cover How? Why? What? How do you Why should What are the    convert a you care API’s that are Flex about unique to application converting a AIR? to an AIR Flex What  application? application bene ts are to AIR? there that you can’t get with a web based Flex application? 6 2007 Adobe Systems Incorporated. All Rights Reserved.
    • What we will cover How? Why? What? Examples We will take a How do you Why should What are the     look at some convert a you care API’s that are sample Flex about unique to applications application converting a AIR? using these to an AIR Flex What  APIs. application? application bene ts are to AIR? there that you can’t get with a web based Flex application? 7 2007 Adobe Systems Incorporated. All Rights Reserved.
    • What we will cover How? Why? What? Examples We will take a How do you Why should What are the     look at some convert a you care API’s that are sample Flex about unique to applications application converting a AIR? using these to an AIR Flex What  APIs. application? application bene ts are to AIR? Part 2 of this there that  presentation, you can’t get we will add with a web features to based Flex an application? application. 8 2007 Adobe Systems Incorporated. All Rights Reserved.
    • How? 9 2007 Adobe Systems Incorporated. All Rights Reserved.
    • How? Moving a Flex application from the web to the desktop is actually a  very simple process. In fact the only change is to update the root MXML tag from  <mx:Application> to <mx:WindowedApplication> The following example will take a simple Yahoo Weather mash-up Flex  application and convert it to an AIR desktop application. 10 2007 Adobe Systems Incorporated. All Rights Reserved.
    • The Original Flex Application Lets rst take a look at  the original application. Then let’s open Flex  Builder and convert it to an AIR desktop application 11 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Results That’s It We will come back to this application shortly 12 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Now What? We have now successfully moved our Flex application to the  desktop But, how does this help us?  What can we do with AIR that we could not do with our  standard Flex application? 13 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Why? 14 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Why use AIR, what APIs are AIR speci c? File Access API  15 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Why use AIR, what APIs are AIR speci c? File Access API  Data API  16 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Why use AIR, what APIs are AIR speci c? File Access API  Data API  Windowing API  17 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Why use AIR, what APIs are AIR speci c? File Access API  Data API  Windowing API  Transparency and Custom Chrome  18 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Why use AIR, what APIs are AIR speci c? File Access API  Data API  Windowing API  Transparency and Custom Chrome  The HTML Control  19 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Why use AIR, what APIs are AIR speci c? File Access API  Data API  Windowing API  Transparency and Custom Chrome  The HTML Control  Interaction with the Operating System  20 2007 Adobe Systems Incorporated. All Rights Reserved.
    • What? What are these features that are only available within  AIR applications? Lets examine each.  21 2007 Adobe Systems Incorporated. All Rights Reserved.
    • File Access API File Access API  The File Access API allows for interaction between the AIR  application and the users le system. Native File Browse gives the user the tools to select les  from their le system. 22 2007 Adobe Systems Incorporated. All Rights Reserved.
    • File API Examples To demonstrate this Iets take a look at this simple video player.  It allows the user to browse the le system and ONLY select . v  les. Demo FlvPlayer  23 2007 Adobe Systems Incorporated. All Rights Reserved.
    • File API Examples Mii Editor 24 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Mii Editor (Trevor McCauley) The Mii editor allows for  export of .jpg and .xml les by writing them to the le system. DEMO  25 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Data API This was the #1 request of myself as well as many other AIR developers  and thankfully it has been included in the 1.0 release of AIR. The Data API uses an embedded SQLite database and allows for local  data storage using standard SQL statements via the AIR Data API. Previously the only local data storage would be via Shared Objects.  Not only is SQL more familiar to developers, but the database created can be accessed by other tools. 26 2007 Adobe Systems Incorporated. All Rights Reserved.
    • SQLite Examples ScripKeepR SQLite Admin Employee Directory 27 2007 Adobe Systems Incorporated. All Rights Reserved.
    • ScripKeepR (Chris Seahorn) The ScripKeepR  application lets you store scripts and other text based les in a local SQLite database so that you can retrieve them whenever you wish. 28 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Employee Directory (Rich Tretola) The EmployeeDirectory  application is an AIR application with a SQLite backend for local data storage and uses a RemoteObject connection to a public ColdFusion server for the backup and restore functionality. DEMO  29 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Windowing API Traditional desktop applications have always had the ability to  spawn multiple windows. The Windowing API of AIR has given us this ability as well. Previously, you would need to use a TitleWindow to do a popup.  This has some obvious limitations. Here is an example of one issue. DEMO  30 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Windowing Examples FotoBooth 31 2007 Adobe Systems Incorporated. All Rights Reserved.
    • FotoBooth (Rich Tretola) FotoBooth uses the  Window component to launch Images as well as the help window. This is important as with the help window open in a self contained window, it can be read while still using the application. DEMO  32 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Transparency and Custom Chrome Transparency and Custom Chrome  Provides the ability to create truly unique looking  applications that can take on any alpha channel or shape. 33 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Transparency and Custom Chrome Examples Screen Play Google Analytics 34 2007 Adobe Systems Incorporated. All Rights Reserved.
    • ScreenPlay (Adobe)  ScreenPlay allows you to draw directly on your desktop using multiple transparent windows and a variety of preset tools. If you want to be really creative, it lets you configure your own drawing tools to highlight specific items currently on the desktop. DEMO  35 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Google Analytics Widget (Nicolas Lierman) The Google Analytics widget  created by Nicolas Lierman of aboutnico.be is a desktop application that o ers a quick view into the stats collected by your Google Analytics account. It o ers a very nice interface which is highlighted by the use of custom chrome and transparency. DEMO  36 2007 Adobe Systems Incorporated. All Rights Reserved.
    • The HTML Control The HTML Control  The HTML Control allows for true HTML rendering within an MXML control by  utilizing the Safari Webkit engine that is embedded within the runtime. We all wish that this could be part of the Flash Player browser plugin. Since there  is a large amount of overhead with this feature which would bloat the size of the Flash Player download, it is unlikely that this will be the case anytime soon. However, we can use this component within our AIR desktop applications.  37 2007 Adobe Systems Incorporated. All Rights Reserved.
    • HTMLControl Examples DryerFox 38 2007 Adobe Systems Incorporated. All Rights Reserved.
    • DryerFox (Doug Schmidt) DryerFox is a silly  application that shows the power of having a Flex HTMLControl. Since it is a Flex control, you have all of the same functionality of any Flex control. Which means that you can change things like rotation, and alpha. DEMO  39 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Interaction with the Operating System Interaction with the Operating System  Drag and Drop gives us the ability to drag les from the le system into an AIR  application and also allows les from the AIR application to drag to the le system Noti cation Alerts o er a way to alert the user of a change in the status of the  application with either a system tray bubble or dock icon bounce on a Mac Copy and Paste give the ability to read and write to the clipboard  40 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Interaction with the O.S. Examples Salsa 41 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Salsa (Adobe)  Online storage has never been so easy. Not only can you drag and drop files between Amazon Simple Storage Service (S3) storage services and your local system, you can also copy and paste from the clipboard.  DEMO 42 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Weather AIR Back where we started Let’s add some features! 43 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Weather AIR Check for Connection 44 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Check for Connection When this was a Flex web based application, there  was never a concern about whether or not there was an internet connection as the time the application was loaded. As an AIR application, we can not be assured that an  internet connection exists. So, it is up to us to put the code in place to check for  an internet connection and alert the user of potential problems. 45 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Check for Connection To accomplish this, I am going to utilize a  ConnectionManager class which will test for an Internet connection and then either alert the user of a problem or go and get the weather. Demo WeatherAIR_1  46 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Weather AIR Utilize the HTML Control and Windowing API 47 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Utilize the HTML Control and Windowing API When this was a Flex web based application, the  only option available to show Yahoo’s Full Forecast for the selected city was to use the URLRequest class to navigate to a new web page. As an AIR application, we can utilize the HTML  control to load the same URL into our Application rather than relying on a web browser. 48 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Utilize the HTML Control and Windowing API This step will also utilize the Window component to  easily create a new application window that is independent from the root application window. 49 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Utilize the HTML Control and Windowing API This step will also utilize the Window component to  easily create a new application window that is independent from the root application window. This is important as since it is an independent  window, it can be any size we want. Demo WeatherAIR_2  50 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Weather AIR Integrate SQLite 51 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Integrate SQLite Since AIR has the ability to easily integrate with  SQLite, we can utilize a database to store some of the data that is retrieved from the weather service. This data will be utilized in a later portion of this  presentation. 52 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Integrate SQLite To add this functionality, I will create an instance of  a DataManager class that I wrote to handle all of the interaction with the SQLite database. This class will either create a database on rst run of  the application or open the existing database. On each response from the weather service, the  insertRecord() is called and the results are stored in the database. Demo WeatherAIR_3  53 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Weather AIR Logging with the File API 54 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Logging with the File API Logging errors is something that is common to  desktop applications and can be very helpful when o ering support for your applications. Since the File and FileStream classes give us the  ability to write to the local le system, we can utilize these classes to log any application errors. 55 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Logging with the File API To add logging of the SQL errors, I will simply add  this functionality right into the DataManager class. Using the File API, I will create or open an existing  log le. Within the DataManager’s errorHandler() method I  will append the error to the log le. Demo WeatherAIR_4  56 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Weather AIR DockIcon and SystemTray 57 2007 Adobe Systems Incorporated. All Rights Reserved.
    • DockIcon and SystemTray AIR allows us to customize the dock icon on Mac  and the system tray icon on Windows at runtime. This means that even when our application is not in  focus, we still have the ability to alert users of important information about our application. We also have the ability to make the dock icon  bounce to get the users attention and force them to move focus to our application. 58 2007 Adobe Systems Incorporated. All Rights Reserved.
    • DockIcon and SystemTray I am going to use the image and temperature that is  returned from the weather service as the icon for the application. To do this, I will create a BitmapData object and call  the draw() method passing in the MXML components that hold the image and temperature data. Next, I will set the BitmapData object into the  bitmaps property of the Shell’s icon. Demo WeatherAIR_5  59 2007 Adobe Systems Incorporated. All Rights Reserved.
    • DockIcon and SystemTray To make the icon bounce (when the application is  not in focus), I will cast the Shell’s icon as a DockIcon and then call the bounce() method. By passing a Noti cationType of CRITICAL into the  bounce() method, I will force the user to interact with the application in order to stop the bouncing. Demo WeatherAIR_5 (minimize and wait)  60 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Weather AIR Add a Native Menu 61 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Add a Native Menu The NativeMenu class gives us the ability to  integrate to the menu system that is native to the operating system. This creates an interface that is more in line with  what the user expects from a desktop application running in their computers environment. We also have the ability to add keyboard shortcuts  to access these menu items. 62 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Add a Native Menu To add a NativeMenu, I will build up the menu and  add it when the application initializes. In this case, I will add it to the Shell however, you may also add NativeMenus to NativeWindows. Each NativeMenuItem is assigned an event listener  for the SELECT event, in this case the listener is the same method and the selected menu item is parsed within the method. Demo WeatherAIR_6  63 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Weather AIR Make it Self Updating 64 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Make it Self Updating Another issue that was a non issue when this was a  Flex web based application was version control. If we wanted to push out a new version, we would  simply upload the changes to the server and on the next visit the user would get the new version. 65 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Make it Self Updating With an AIR application, our users are not visiting  our server on each run of the application, so we could easily lose control over our application. The solution to this is to program a self updating  scheme. It is very important that you implement this on the  rst version you release or you will wind up with applications that are orphans with no chance of being updated without the user actively requesting the update. 66 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Make it Self Updating The solution I have utilized is to rst read in the  appplication.xml le which is stored in the app- resource directory. Next I read in a remote version.xml le stored on my  server using an HTTPService object to load the le. Finally, after parsing both the application.xml and  the data from the remote version.xml le, I either alert the user of the update (show update message) or force the update (if forceUpdate is true). Demo WeatherAIR Installed Version  67 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Credits Mii Editor by Trevor McCauley   http://www.miieditor.com ScripKeepR by Chris Seahorn  http://www. ex-fanatic.com  SQLite Admin by Christophe Coenraets   http://www.coenraets.org DryerFox by Doug Schmidt  http://olddougnewtricks.blogspot.com  Salsa, ScreenPlay by Adobe   http://labs.adobe.com 68 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Tutorial WeatherFlex to WeatherAIR is available as a full length tutorial within the Adobe AIR Developer Center ConnectionManager and UpdateManager available at EverythingFlex.com 69 2007 Adobe Systems Incorporated. All Rights Reserved.
    • Thank You Questions ? My Contact Info rich@everythingflex.com or rtretola@gmail.com http://blog.everythingflex.com 70 2007 Adobe Systems Incorporated. All Rights Reserved.