MAX 2007 - Flex to AIR

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

What we will cover

How?

How do you

convert a
Flex
application
to an AIR
application?

3

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

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
to AIR?

5

What we will cover

How? Why? What?

How do you Why should What are the
  
to an AIR Flex
What

bene ts are
to AIR?
there that
you can’t get
with a web
based Flex
application?

6

What we will cover

How? Why? What? Examples

We will take a
How do you Why should What are the 
  
look at some
sample
applications
using these
to an AIR Flex
What

APIs.
bene ts are
to AIR?
there that
you can’t get
with a web
based Flex
application?

7

What we will cover

How? Why? What? Examples

We will take a
How do you Why should What are the 
  
look at some
sample
applications
using these
to an AIR Flex
What

APIs.
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

How?

9

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

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

Results

That’s It
We will come
back to this
application
shortly

12

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

Why?

14

Why use AIR, what APIs are AIR speci c?

File Access API


15


File Access API

Data API


16


File Access API

Data API

Windowing API


17


File Access API

Data API

Windowing API

Transparency and Custom Chrome


18


File Access API

Data API

Windowing API


The HTML Control


19


File Access API

Data API

Windowing API


The HTML Control

Interaction with the Operating System


20

What?

What are these features that are only available within

AIR applications?

Lets examine each.


21

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

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

File API Examples

Mii Editor

24

Mii Editor (Trevor McCauley)

The Mii editor allows for

export of .jpg and .xml
les by writing them to
the le system.

DEMO


25

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

SQLite Examples

ScripKeepR SQLite Admin Employee Directory

27

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

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

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

Windowing Examples

FotoBooth

31

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




Provides the ability to create truly unique looking

applications that can take on any alpha channel or shape.

33

Transparency and Custom Chrome Examples

Screen Play Google Analytics

34

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
conﬁgure your own drawing
tools to highlight speciﬁc
items currently on the
desktop.

DEMO


35

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

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

HTMLControl Examples

DryerFox

38

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




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

Interaction with the O.S. Examples

Salsa

41

Salsa (Adobe)

 Online storage has never
been so easy. Not only
can you drag and drop
ﬁles between Amazon
Simple Storage Service
(S3) storage services and
your local system, you can
also copy and paste from
the clipboard.
 DEMO

42

Weather AIR

Back where we
started
Let’s add some
features!

43

Weather AIR

Check for
Connection

44

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

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

Weather AIR

Utilize the
HTML Control
and
Windowing API

47

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


This step will also utilize the Window component to

easily create a new application window that is
independent from the root application window.

49


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

Weather AIR

Integrate
SQLite

51

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

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

Weather AIR

Logging with
the File API

54

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

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

Weather AIR

DockIcon and
SystemTray

57

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


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


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

Weather AIR

Add a Native
Menu

61

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

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

Weather AIR

Make it Self
Updating

64

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


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


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

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

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

Thank You

Questions ?

My Contact Info
rich@everythingflex.com or rtretola@gmail.com
http://blog.everythingflex.com

70

MAX 2007 - Flex to AIR

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie MAX 2007 - Flex to AIR

Ähnlich wie MAX 2007 - Flex to AIR (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

MAX 2007 - Flex to AIR