Building an Adobe Air application with Flex
Dec 9th, 2008 in Other by Cesare Rocchi In a previous tutorial we introduced the Adobe Air framework that illustrated how to create a simple application. Remember that Adobe Air is a framework that enables web developers, usually involved in html/js/flash programming, to build desktop applications. In this tutorial we will illustrate how to build an Adobe Air application with Flex, an open source set of technologies for the development of rich internet applications.
Cesare Rocchi is a UI researcher, currently pursuing his PhD in Human Computer Interaction. He began working in Flash, on applications for mobile devices. His focus has recently been revolving around the user experience of rich internet applications, particularly on tabletop devices, with extensive direction towards user centered design. Most recently, Cesare started his own burgeoning company, consulting on user experience and social media design and development, Studio Magnolia.
Step 1 -Quick Introduction to Flex
Flex is a framework which allows generating SWF files. You might ask: what
is the difference with respect to Flash? Apart from differences behind the scenes the main difference withrespect to Flash is the presence of a markup language called MXML.The figure below illustrates theprocess of generating a SWF file.
Mxml is anxml-based language, which looks more friendly to designers than Actionscript, and it is similar in concept to HTML (with tagsand properties).
At compilation time the Mxml is transcoded into Actionscript, which is then included in thefinal SWF file.
In this perspective you can consider Mxml as an abstraction of Actionscript, much more simplerto deal with.
Flex SDK is born as a development toolkit to generate swf files (the same files generated withFlash). After some modification from Adobe
Flex can now generate also Adobe Air applications.
Step 2 - Installation and Configuration of Flex SDK
The Flex SDK is open source and can bedownloaded from here.
It is iscontained in a zip file that, when expanded, looks like this.
The mostimportant files, which we will use in this tutorial are located in the bin/ directory.
Morespecifically we will use:
AMXMLC (the compiler)ADL (the debugger/launcher)ADT (the developertool)
The SDK has to be configured to be run form every folder of your computer. Theconfiguration is very similar to the one
of the Adobe Air framework, explained in the previous tutorial.
I will report ithere for convenience.
On MacOSX follow this script.
Open the Terminal(/Applications/Utilities/Terminal)Type cd to be sure you are in your home folderlook for a file named .profile or .bash_profile. If it does not exist create it.Look for a line similar to this: export PATH=$PATH:/usr/binadd another line likethis: export PATH=$PATH:/flexsdk/binif the path to the flex SDK contains whitespaces wrap it with a double quote (e.g. "/my pathtosdk/air")in my file, for example, I have the followingline: /Applications/flex_sdk_3/binClose and reopen the terminal. Or type source.profile
On Windows this is the procedure to configure the SDK.
Right clickon My Computer, choose PropertiesSelect the Advanced Tab and then click the EnvironmentVariables buttonSelect PATH from the bottom list and add the path to the sdk folder atthe end, as in figure.
To test theconfiguration let's open the shell and try to type the following command:
amxmlc
If the result is like the following the SDK is correctly installed.
Step 3 - Creation of the Description file
Let's create a folder whichwill contain of the files of our project.
As explained in the previous tutorial, an Adobe Air application has toinclude a description file, which describes the features
of the application. Let's create a file namedMyApplication-descr.xml with the following content.
Thefirst line is just the declaration of the file format; the real specification starts from line 2 till the end of the file.
The id embeds the identifier of the application. I'll include my website domain to ensure it isunique.
The version tag indicates the number of the release. Remember to change itaccordingly as you release new versions
of your application.
The tag filename, whose namecan be misleading, contains the name of the application, which will appear
in the main window of theapplication, in the menus, etc. Content specifies the first file to be loaded by the Airapplication at startup. This file is commonly
referred to as root file or entry point. We set thevisible property to true, in order to visualize
the application as it is loaded.
ThesystemChrome indicates the look and feel of the window hosting your application. If you set it tostandard the application
will have a window identical to the ones of the operative system you are using. If youset it to none Flex
will use its own chrome that, on MacOsX, appears like the following.
On Windows (XP/Vista) it is very similar. The main difference is the position of the
resize/close buttons.
In thistutorial we will build an application with a standard chrome. The transparent property indicateswhether
the main window of the application is transparent, whereas lines 11 and 12 specify the initial widthand height of the window
when displayed on the desktop.
Step 4 - Writing the actualcode
Now we will start building the code of the application, which will be compiled in the SWF file.
TheWindowedApplication tag contains all your application, similarly to the<html> tag for web pages.
The property title defines the string that willappear at the top of the application.
Flex contains a huge list of graphical components. The complete list ofcomponents is available here.
Let's now put abutton in our window.
As you can see, ina way pretty similar to html, you open a tag (Button) and specify the features
of the componentvia attributes. In this case we define the text to be displayed on the button via the label
property (line 3).Now we will attach some action to the button.
As you can see we can embed actionscript code, which resembles javascript, that allows
definingwhat is commonly called the "logic" of our program (lines 3-11).
At line 5 we import the Alertcomponent, which is a sort of popup window.
We then define a function (line 7). The action associated is toshow an Alert window containing
the message "Hello" (line 8). To attach the code at the click of the button wesimply fill
the click attribute of the button with the name of the function (line 12).
Step 5- Compile and Test
To compile the application we have to move to project folder and then run thefollowing command:
amxmlc MyApplication.mxml
The shell shouldreturn a message like this.
The messagecontains a warning that, unlike an error, does not require a fix.
The compiler is simply suggesting to check outthe code and "improve" it.
To correctly run the application, and the for the scope of this tutorial, there is noneed to fix it.
Now we are ready to test our application. From the same directory we type the followingcommand:
adl MyApplication-descr.xml
(Notice that we pass thedescriptor xml file and not the mxml with the actual code).
We should see the following windowappearing.
If we click the buttonthe alert is visualized correctly.
Step 6 -Styling the application
It is likely that you are not happy with the default color/layout of Flex SDK.
Youcan style your Air application via CSS, as you do with your html pages.
Of course the are differences withrespect to standard W3C CSS, but the idea
and the syntax is almost the same. Let's for example change towhite the label of all
the buttons in our application. We insert a snippet of CSS in our mxml file as in the figurebelow (lines 3-7).
To have an idea ofthe styling capabilities of Flex look at this link.
Step 7 - Create the distributable file
The last step to create our first application is to package adistributable file,
to be installed on other machines. First we need a certificate. For more
details about theneed of a certificate please consult the previous tutorial (step 7).
Wewill report here just the command to create a self-signed certificate needed to build
the distributablepackage.
adt -certificate -cn SelfSigned 1024-RSA mycertificate.p12
mypassword
The final application will be distributed as a .air file which can be built using the
following command.
adt -package -storetype pkcs12 -keystore mycertificate.p12
MyApplication.air MyApplication-descr.xml
MyApplication.swf
The keystore parameter indicates the file containing thecertificate generated above.
After that we need to specify the name of the .air file we want to generate, thedescription of the
application (contained in MyApplication-descr.xml) and the root file generated previously(MyApplication.swf).
This command will ask you for the password you specified during the creation of thecertificate.
You can now redistribute the resulting MyApplication.air file to your users. Remind them they need
to install the Air Installer.
User Comments
( ADD YOURS )Bomboy December 9th
Thanks for this!!!
( )AFenics December 9th
Great tutorial. Thank for post
( )Daniel December 9th
Great overview…
( )xQlusive December 9th
Very usefull tutorial, thanx
( )Jarod Luebbert December 9th
Great post! Adobe Air is something I really want to learn more about, looks very cool.
( )Josh December 9th
Same, adobe air is something i want to learn. looks good
( )John December 9th
@Jarod – don’t confuse AIR with Flex. You can probably already make an AIR App and don’t even know it. You can create AIR Apps from Flash, Dreamweaver or Flex.
( )Start Your Own Website December 9th
This technology appears to be taking off quite fast, perhaps I should get started now! Thanks for the tut
( )pixelsoul December 9th
Awsome, so funny that last night while I was on here was thinking “We need some Flex tuts on this site”.
I have procrastinated a lot on getting into Flex but I am feeling more and more need to stop everything I am doing and jump in head first.
( )imko December 9th
Ohh cooool Adobe jux rockxxxxxxxxxxxx n this tut is really useful for begginers like me
( )Zach Dunn December 9th
Glad to see some Flex tutorials finally. I found it interesting that you used the SDK. Flex Builder 3, while paid, makes development significantly easier. (The design view is a godsend for state views)
For anyone who is interested in reading a little more on Flex or seeing the Flex Builder 3 IDE, I wrote a tutorial last week on Data Binding with MXML:
Flex 3 Basics – Introduction to Data Binding
Haven’t worked much with AIR yet though. This was a great introduction.
( )Lamin December 9th
Yeaye more Flex please.
( )M.A.Yoosuf December 10th
yups, can u do more on flex and Action script stuff
( )Elpatator December 10th
Give us some Air, some Flex, and a twinkle of love !!!!
( )Joao Clerigo December 10th
Great! Can you make the source files available?
( )Chris Gunther December 10th
Nice introductory tutorial. I have never worked with AIR, although its on my list of things to experiment with. I’m familiar with Flex, I’m actually doing a project with it right now, so I would assume AIR is quite similar.
( )Mike Rice December 10th
I’ve always wanted to get more into the world if Air and Flex. I’m hoping to soon, it seems like something that could be somewhat interesting.
( )insic December 10th
glad to see FLEX tutorial here.
( )Concerned Citizen December 11th
I wouldn’t call the result of this tutorial an “application”. In addition, this tutorial is no different than the tutorials that Adobe already has on their Air website.
I was hoping for a demonstration of Air’s unique user interface and database capabilities.
( )Zach Dunn December 11th
@Concerned Citizen
To be fair Flex projects are known as “MXML Applications” from within the Flex environment. It does not necessarily describe the end result, but is a naming convention.
Also, Adobe’s site has these most comprehensive tutorial coverage mainly because they themselves invented the technology. Every Flex and ActionScript tutorial is in some way derived from something that exists already there, whether intentional or not.
The author has written something with a personal touch rather than a line by line code analysis as found on Adobe’s site.
I’m sure we’ll see those type of demonstrations someday down the line, in the meantime this was a great introduction!
( )Andy January 2nd
I would also highly recommend using flex builder rather than the SDK, development time is a lot less! If your in higher education(Uni or college) you can get a free student license from adobe for flex builder
I myself have been developing applications in both Air and Flex at work for more than 5 months and I have got pretty versed with it. I have to say Flex and Air are great to work with and adobe have done a great job. I was also surprised at how flawlessy Air apps work on linux.
( )Vaibhav Kotalwar February 9th
Great ! Now,I can also devlop application using flex.
( )Willie February 9th
Cool tutorial for first steps with flex. helped me a lot. thx
To make it run I had to fix MyApplication-descr.xml
1.5 according the version I found in the SDK templates. otherwise I always got “error while loading initial content” when running
adl MyApplication-descr.xml
( )Adobe AIR Applications March 21st
maybe someday i will develop some application,. thanks for this tutorial!!
( )CgBaran Tuts May 6th
Thanks for this great tutorial
( )Jan Alvin August 2nd
Question: Can I use FlexSDK with Aptana??
( )chary1112004 September 21st
Thanks so much!
– chary –
( )Joe October 11th
Im considering getting flex now!
( )Loser October 31st
Great tutorial! Glad you didn’t use flex builder. Of course dev time is faster with Builder! the beauty here (w/o Builder) is that you can dev for free.
go back to adobe.com and preach the wonders of builder there. obviously we’ve been there and are here looking for other options.
( )