1. 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.
2. 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.
3. What we will cover
How?
How do you
convert a
Flex
application
to an AIR
application?
3
2007 Adobe Systems Incorporated. All Rights Reserved.
4. 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.
5. 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.
6. 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.
7. 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.
8. 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.
9. How?
9
2007 Adobe Systems Incorporated. All Rights Reserved.
10. 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.
11. 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.
12. Results
That’s It
We will come
back to this
application
shortly
12
2007 Adobe Systems Incorporated. All Rights Reserved.
13. 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.
14. Why?
14
2007 Adobe Systems Incorporated. All Rights Reserved.
15. Why use AIR, what APIs are AIR speci c?
File Access API
15
2007 Adobe Systems Incorporated. All Rights Reserved.
16. Why use AIR, what APIs are AIR speci c?
File Access API
Data API
16
2007 Adobe Systems Incorporated. All Rights Reserved.
17. Why use AIR, what APIs are AIR speci c?
File Access API
Data API
Windowing API
17
2007 Adobe Systems Incorporated. All Rights Reserved.
18. 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.
19. 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.
20. 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.
21. What?
What are these features that are only available within
AIR applications?
Lets examine each.
21
2007 Adobe Systems Incorporated. All Rights Reserved.
22. 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.
23. 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.
24. File API Examples
Mii Editor
24
2007 Adobe Systems Incorporated. All Rights Reserved.
25. 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.
26. 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.
27. SQLite Examples
ScripKeepR SQLite Admin Employee Directory
27
2007 Adobe Systems Incorporated. All Rights Reserved.
28. 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.
29. 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.
30. 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.
31. Windowing Examples
FotoBooth
31
2007 Adobe Systems Incorporated. All Rights Reserved.
32. 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.
33. 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.
34. Transparency and Custom Chrome Examples
Screen Play Google Analytics
34
2007 Adobe Systems Incorporated. All Rights Reserved.
35. 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.
36. 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.
37. 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.
38. HTMLControl Examples
DryerFox
38
2007 Adobe Systems Incorporated. All Rights Reserved.
39. 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.
40. 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.
41. Interaction with the O.S. Examples
Salsa
41
2007 Adobe Systems Incorporated. All Rights Reserved.
42. 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.
43. Weather AIR
Back where we
started
Let’s add some
features!
43
2007 Adobe Systems Incorporated. All Rights Reserved.
44. Weather AIR
Check for
Connection
44
2007 Adobe Systems Incorporated. All Rights Reserved.
45. 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.
46. 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.
47. Weather AIR
Utilize the
HTML Control
and
Windowing API
47
2007 Adobe Systems Incorporated. All Rights Reserved.
48. 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.
49. 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.
50. 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.
51. Weather AIR
Integrate
SQLite
51
2007 Adobe Systems Incorporated. All Rights Reserved.
52. 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.
53. 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.
54. Weather AIR
Logging with
the File API
54
2007 Adobe Systems Incorporated. All Rights Reserved.
55. 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.
56. 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.
57. Weather AIR
DockIcon and
SystemTray
57
2007 Adobe Systems Incorporated. All Rights Reserved.
58. 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.
59. 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.
60. 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.
61. Weather AIR
Add a Native
Menu
61
2007 Adobe Systems Incorporated. All Rights Reserved.
62. 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.
63. 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.
64. Weather AIR
Make it Self
Updating
64
2007 Adobe Systems Incorporated. All Rights Reserved.
65. 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.
66. 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.
67. 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.
68. 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.
69. 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.
70. 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.