By: Rhys Tague

April 23rd, 2008

Reader Rating: 8.5

With Web users expecting richer and more complex interfaces, Rich Internet Applications (RIAs) are seeing a huge increase in popularity. Adobe Flex is the tool of choice for many web developers when it comes to building RIAs.

Flex used to be one of those technologies that was only used by large corporate organisations -- the first release of Flex was priced at around US$15,000 per CPU (a tad expensive for most developers) Since then, Flex has been released as open source software. Talk about a complete turnaround!

Flex is now in version 3.0, and runs on the Adobe Flash Player 9 runtime. Flex 3.0 has been such a success that Flex 4.0 has been announced for release in 2009. As a developer, getting in early and learning all you can now is a good idea -- standing out in the Flex community will soon become extremely difficult.

Developers are picking up Flex with great speed. One of the reasons for this is that Flex programming is relatively easy to learn if you're already familiar with XHTML. Of course, there's always a transition period when you're getting used to a new environment, but learning Flex won't take long!

Another drawcard is that Flex applications can be developed to run on a user's desktop thanks to the wonders of the Adobe AIR (Adobe Integrated Runtime) platform. Now you can develop and launch an RIA that runs in a web browser and as a desktop application. Deploying an application to a user's desktop with Adobe AIR is easy -- all that users need to do is click a link in the web browser to install the AIR runtime and your RIA on their machine. Now that's quick deployment!

That's enough rambling; let's learn the basics of what Flex is all about.

Why Use Flex?

If you're considering building a RIA, you have a few choices of technology, including Flex, Ajax, and Microsoft Silverlight. If you look at these options objectively, the development effort required for each (and the resulting user experience) is roughly the same. One of the benefits of Flex is its reach -- the Adobe Flash Player, upon which Flex applications run, is already installed on about a billion computers wordwide!

Of course, Ajax also uses technologies that are installed on almost every computer in the world -- JavaScript, XHTML, and CSS. One of the downfalls of Ajax, however, is that cross-browser compatibility can be difficult to achieve. What might work in one browser (for example, Firefox) might not work in another (such as Internet Explorer), so the debugging process has the potential to become difficult and long-winded.

Microsoft Silverlight, on the other hand, is similar to Flex in that it runs on a browser plugin. Silverlight, however, has yet to reach the installed userbase of the Flash player.

If you're just starting out with building RIAs, you should definitely try all of them to see which one you like best and find easiest to work with -- each of Flex, Silverlight and Ajax has its advantages and disadvantages. In my opinion, though, Flex is definitely the best RIA development technology available. Additionally, if you're a fan of the Adobe Creative Suite, it's good to know that many of these tools (Flash, Photoshop, Illustrator, Fireworks and so on) have Flex component integration built into them, which is a bonus no matter how you look at it.

Overview of the Flex Framework

A lot of people steer clear of the Flex framework because they think it's complicated. But generally speaking, a framework is just a set of reusable classes that can work together to provide a base for an application.

Take a house as an analogy: every house on the planet has a framework. Each house has a foundation and walls, and those walls can't stand without the foundation. Once the foundation has been laid and the walls are up, a roof can be applied and the interior designed and implemented, while work continues on the initial foundation.

If we apply this analogy to the Flex framework, we have a stack of logic -- the controller logic -- that has been made available for communicating with a database, handling security, writing to the file system, and so on. There are also the user interface elements -- buttons, canvases, dropdown lists, and so on. All of these also form the foundation of your Flex application -- the concrete slab, the timber beams and the bricks with which to build your house.

Flex is easy for web developers to learn because, at its core, it has a lot in common with (X)HTML, CSS, and JavaScript. Suppose you wanted to create a simple web page with a form button. In XHTML you'd type the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Button Example</title>
 </head>

 <body>
   <form method="post" id="example" action="http://www.example.com/">
     <input type="button" name="newButton" id="newButton" value="This is a button" onclick="checkForm()" />
   </form>
 </body>
</html>

When you view this markup in a web browser, you'll see a button displayed with the label "This is a button".

To display something similar in Flex we use a form of markup called MXML. Here's the MXML markup for our previous example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   layout="absolute">
 <mx:Button x="10" y="10" label="This is a button"
id="newButton"
     click="checkForm()"/>

</mx:Application>

To run this simple page as a Flex application, we need to compile our MXML code using the Flex SDK. The result is shown below:

The first thing you'll notice is that MXML is an XML format. To indicate to the Flex compiler that we're defining an application, we use the <mx:Application/> element, in the same way we use the <html></html> tags to define a web page. We can then add other elements within the <mx:Application/> tag. In the above example, we've added a <mx:Button/> tag to create a button, just as we'd use an <input type="button" /> tag in a web page form.

As you can see, this is all very similar to constructing a traditional web page, and the framework provides you with everything you might use in XHTML (buttons, lists, etc.) and more. All you have to learn is the properties, methods and the names of the components in the framework, all of which are available from the Adobe Flex 3 [1] language reference.

Of course, the Flex framework doesn't just consist of user interface components; it also contains actions that your application can utilise. For instance, there's a component called HTTPRequest, which your application can use to send and receive data from a server-side service (PHP, ASP.NET, etc.). When you run your application, you don't actually see the HTTPRequest, as it works in the background.

All these components have been bundled together by Adobe to form the Flex framework, so you don't have to create them from scratch.

Eventually, as you become more experienced with Flex, you'll want to create your own components that you'll use over and over. After a while, you'll have created a little library of your own that extends the Flex core framework to meet your individual needs.

What Do I Need to Get Started?

With the open sourcing of Flex 3, it's never been easier to begin building RIAs. To get started, you can use one of two options:

• The tool of choice for most serious Flex developers is Adobe Flex Builder 3 [2], the official Flex IDE from Adobe. Flex Builder is also available as a professional version, which includes a Flex charting component. Flex Builder 3 retails for around US$376.00, and the professional version sells for around US$900.00.
• You'll also need your own programming editor, combined with the Flex 3 SDK [3], which is free. Yes: free as in beer.

Installing Flex Builder 3 is quite straightforward, as it comes with a user-friendly installer.

The Flex SDK, on the other hand, is a little trickier. To install the Flex SDK, download the zip file and extract it to a folder of your choice. The trick is that that folder should be in your path (meaning you should be able to execute files in that folder from the command prompt, regardless of your current location).

If you're planning on taking your Flex development seriously, I recommend you go ahead and purchase the Flex Builder 3 IDE. Flex Builder is based on the open-source Eclipse editor, which alone is an extremely powerful IDE. If you want to try before you buy, Flex Builder 3 is available for a 30-day trial. While it's great that the Flex 3 SDK is free, the benefits that Flex Builder 3 provides for Flex development over a standard text editor are many.

MXML is Easy!

Unlike other markup language acronyms, MXML doesn't actually stand for anything specific. (Although some people, and I'm one of them, like to think that it should stand for Magic eXtensible Markup Language.)

Macromedia created MXML in March 2004 before the organization was acquired by Adobe. MXML is primarily used to lay out a Flex application. Being a dialect of XML, standard validity rules apply: tags must be closed, and all the other XML rules apply.

Every component in MXML follows the same pattern:

1. You declare a namespace that tells Flex where to find a particular component.


2. You declare the component class you wish to use (e.g. Button) from that namespace.


3. You modify the available properties and methods using attributes, as illustrated below.

Because they're defined in the class structure of the component, the properties and methods that can be used from within each component vary.

You style the visual components of your application with Flex Cascading Style Sheets. These styles can be added in the same location as the properties and methods of a component, but discussing Flex Cascading Style Sheets is beyond the scope of this article.

MXML components can have child elements (just like XML). For instance, a container element such as Canvas can have child elements like a Button or a Label. The code below demonstrates this point:

 <mx:Canvas x="53" y="64" width="192" height="94"  
     cornerRadius="20" borderStyle="solid"  
     backgroundColor="#A9A9A9" id="mainCanvas">  
   
   <mx:Button x="10" y="10" id="newButton"  
       label="This is a button"/>  
         
   <mx:Label x="10" y="57" id="newLabel"  
       text="This is a label"/>  
 </mx:Canvas>

If you compile and run this code, you'd see this web page:

By combining layout containers, such as Canvas, with other components, such as buttons and lists, it's possible to create great application designs in no time at all.

Taking Things Further: ActionScript 3.0

While MXML defines the structure of your Flex application, ActionScript 3.0 defines your application's behaviour.

Now, you may be thinking, "Hang on. If I can do so much with MXML, why do I need ActionScript 3.0?" Well here's the confusing part; MXML is actually a pretty form of ActionScript 3.0. In fact, MXML is converted to ActionScript 3.0 when you compile it. Let's look at an example that shows how similar MXML and ActionScript 3.0 are. The following code creates the same component (a Button), first in MXML, and then in ActionScript 3.0:

<?xml version="1.0" encoding="utf-8"?>  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"    
   layout="absolute" creationComplete="init()">  
 <mx:Button label="This one is done by MXML" x="10" y="10" />  <mx:Script>  
   <![CDATA[  
   import mx.controls.Button;  
   //Init Function is executed when the application boots  
   private function init():void {  
     //Create a new button  
     var newButton:Button = new Button();  
     //Modify Properties  
     newButton.label = "This one is done by ActionScript";  
     newButton.x = 10;  
     newButton.y = 40;  
     //Add the new button to the stage (Screen)  
     this.addChild(newButton);  
   }  
   ]]>  
 </mx:Script>        
</mx:Application>

The application that results when you compile this file will look like this:

As you can see, both approaches for creating a button produce the same result -- but there's far less typing involved with MXML than with ActionScript 3.0. Designing an application with ActionScript 3.0 would be a nightmare. MXML was created to simplify the work for you.

You still need to use ActionScript in your application, however; you'll need to define what happens when that button is clicked, for example. Look at it in this way: you design your application with MXML, and you make it work with ActionScript 3.0. By using MXML and ActionScript, you're separating the structural code from the programming logic. This is an important philosophy to remember when building Flex applications -- especially when you're building complex components down the track.

ActionScript 3.0 is an ECMAScript-based scripting language, which means that it adopts the ECMA scripting language standards. ActionScript 3.0 is a giant leap forward from is predecessor, ActionScript 2.0. The reason for this is that ActionScript 3.0 is now a truly object oriented programming (OOP) language. In fact, the entire framework of Flex is made up of object classes that have been written by Adobe.

If you want to develop complex RIAs, I'd recommend that you invest some time in understanding OOP. Most of the programming done in Flex is event-driven, which means that functions are run when a component triggers an event (for example, when a mouse clicks a button on the page). The Adobe Livedocs [4] site has some great examples of object-oriented ActionScript.

The full details of ActionScript 3.0 syntax and OOP are beyond the scope of this article, but if you've done any JavaScript programming before, you are certainly well on your way.

Resources

Flex 3.0 is rapidly gaining steam; as a result there are some fantastic resources out there for anyone who wants to get started in building RIAs with Flex. Here's a sample:

• Flex Livedocs [5]
• Flex.org [6]
• FlexCoders [7]
• Open Source Flex [8]
• The Flex CookBook [9]
• Flex 3 Getting Started [10]

Summary

This article barely skimmed the surface of the Flex framework, although we did cover the basics of what the framework provides, and how MXML and ActionScript 3.0 work together. While this was a very gentle introduction to the concepts behind Flex, it should give you enough grounding in the concepts to go forth and experiment on your own.

Now that you've taken your first step in Flex development, the next step is to actually understand the components, play around with them to build your first application, and apply some ActionScript to really give it some life.

[1] http://livedocs.adobe.com/flex/3/html/index.html
[2] http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3email
[3] http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3email
[4] http://livedocs.adobe.com/flex/
[5] http://livedocs.adobe.com/flex/
[6] http://flex.org/
[7] http://tech.groups.yahoo.com/group/flexcoders/
[8] http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK
[9] http://www.adobe.com/cfusion/communityengine/index.cfm?event=homepage&productId=2
[10] http://learn.adobe.com/wiki/display/Flex/Getting+Started