Hello World for a Flex Starter

Here is a Flex Tutorial I’m writing for a couple of my friends. While the Videos on ‘Learn Flex in a week’ and “Test drive Flex in 1 hour” serve as good tutorials, here is an application I have attempted to build, which serves as an example for a developer trying out flex for the first time.

Get yourself a Flash Builder to start off. A 60-day trial is available here

The application demonstrates essential implementations like connecting to a WebService, SQLite Database and UI practices, a developer needs to be aware of prior to building a Flex application. This is brought about with 4 components, demonstrating the implementations below,

1) Displaying Hello World.
2) Displaying Hello World with a better UI (PopUp) from a XML file.
3) Displaying Hello World from a Webservice (REST).
4) Displaying Hello World from a Webservice that pushes data into a SQLite Database.

Install Application (AIR)
| to get a hang of what the application does. AIR Runtime required

Download Source (FXP)
| to try out the application

View Source
| to glance through the code. After installing, right-click on the application, to ‘View Source’

Assuming you have the Flash Builder installed, and the Source (FXP) downloaded, lets start off.

Import the downloaded FXP flex application into Flash Builder 4
1) Launch Flash Builder
2) Select File > Import Flex Project (FXP)
3) Select ‘File’, and ‘Browse’ to the FXP file downloaded. Click ‘Open’.
4) Click Finish.

‘Run’ the application
Click the ‘Run’ icon (Fourth from the left, on the top), and the application should popup.
In case you face the error, ‘Descriptor version does not match runtime version’, follow the instructions to install the AIR SDK here.

There you go. That is all that is required to run a Flex application.

A Flex application is comprised of MXML and ActionScript code, but not necessarily both. MXML is an XML Markup language used to build fast, good looking user interfaces, while ActionScipt is a Adobe developed scripting language, used for building the business logic part of flex. MXML files are represented by the extension ‘.mxml’ while ActionScript files are represented by ‘.as’. Actionscript can also be embedded into an MXML file by means of a ‘script’ tag.

If you bother to have a look into the source at this point, you may find the application is made up of 4 components, each with the same functionality, popping up “Hello World”, but with each ‘Component’ exposing different capabilities of Flex.

Lets jump into the Main.mxml file present under the Hello World > src > (default package) directory.

The root tag of an MXML file can be seen to be something like this,

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
title="Flex for a Starter - On AIR with Flex" showStatusBar="false"
backgroundColor="#A01203" backgroundAlpha="1" xmlns:local="*"
xmlns:ns="Example1_Files.*" xmlns:ns1="Example2_Files.*"
xmlns:ns2="Example3_Files.*" xmlns:ns3="Example4_Files.*"
width="512" height="341" viewSourceURL="srcview/index.html">


A huge line to start off with? Its pretty simple. The ‘Tag’ is just filled with a handful of ‘xmlns’ attributes. The XMLNS attributes are meant to declare namespaces. The first 3 namespaces, fx, s and mx, need to be included in any flex application built on the Flex 4 SDK, and makes use of Spark and MX Components.

A word on Spark and Halo (or MX) Components
Spark Components are native to the Flex 4 SDK, while MX Components were packaged for the Flex 3 SDK. While Spark components are to be preferred, the number of components available under Halo is greater than on Spark. We may have to use both in conjunction, hence the inclusion of both namespaces.
More here.

In this case, in addition to the default namespaces, we also have custom namespaces ns, ns1, ns2 and ns3, that point to each of the 4 components we are making use of in this application. Apart from this, the other attributes are used to specify the application look-and-feel.

Further down, you will come across a piece of code that goes like this,
<s:Button id="btnDisplay" label = "Say Hello !">

In the above code, s:Button – Includes an instance of the ‘Button’ class available under the Spark (s) namespace. It also includes 2 attributes, ‘id’ and ‘label’.

Looking into the code at the 45th line, we see namespace ‘ns’ being used. We also see the commented code in the next 3 lines. This is done to show the functionality of each of the components, one at a time. For subsequent runs, you can comment the 1st line, and uncomment the 2nd line to pop-up the 2nd example, and so on.

The source code contains appropriate description where necessary.

P.S., This Blog post goes about a rather crude way by providing the source, and then helping you explore it. This post is aimed at a developer with considerable knowledge on XML, Scripting, Object Oriented Programming. Therefore, if you are new to programming, it will be appropriate to start off with Object Oriented programming concepts and ‘‘Flex in a week’ Videos‘.

Do post in your comments !