An Absolute Beginner’s Tutorial On Flex 3 Article

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".

The XHTML 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>
Go to page: 1 | 2 | 3

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments

Comments on this post are closed.