Article
About the Author
Josh Tynjala
Josh rides the cutting edge of Flash technologies. Whether writing about Flash, Flex, or straight web design, he shares his discoveries and insights on his blog, Zeus Labs. He believes that any development challenge can be overcome with a keyboard, a mouse, and his iPod.
Flex 2: Rich Internet Applications in a Flash!
You may have heard some buzz recently about Adobe's release of Flex 2. Flex is a collection of technologies that combine to give developers a strong framework for building Rich Internet Applications. You may already be familiar with one of those technologies: Flash.
RIAs are lightweight online programs that provide users with a more dynamic and interactive experience than they might find in a normal web page. Like web applications built with AJAX, Flex applications feel much more responsive, because a new web page doesn't need to be loaded every time the user takes action. However, unlike working with AJAX, Flex developers don't need to worry about dealing with differing browser implementations of JavaScript or CSS -- you can focus all of your time on the application's development, because the framework runs on Adobe's cross-platform Flash Player.
Flex hit the ground running with the release of Flash Player 9 in June of this year. Thanks to a new internal architecture, Flash Player 9 runs up to ten times faster than previous releases. ActionScript, Flash's programming language, also received an extensive update that will help developers migrating from other languages feel more at home. New features include strong typing, regular expressions, and native support for XML thanks to ECMAScript for XML (E4X). Flash 9 runs on Windows and Mac OS X, and a Linux player is currently in development.
At its core, the Flex Framework comes with dozens of components, from basic lists and data grids to charts, layout systems, and media players.
Additionally, Flex Data Services (FDS) allows your Flex application to interact with Java libraries on a server. It also provides facilities for data synchronization, messaging, and collaboration. And, unlike previous releases of Flex that required the developers to have the full version of Flex Data Services and cost thousands of dollars, the Flex 2 framework, compiler, and a command-line debugger can all be downloaded for free. Yes, you heard that right: the basic developer tools can be downloaded at no cost! It's even possible to access a limited version of Flex Data Services for free.
For serious Flex development, you'll probably want to use Flex Builder. This powerful development environment includes a drag-and-drop visual editor, enhanced debugging capabilities, and a full-featured code editor. It leverages the open source Eclipse IDE, which should be very familiar to Java developers. A healthy community has grown around Eclipse, resulting in the development of many cool plug-ins, including some that allow integration with version control systems like CVS or SourceSafe and others that provide support for many other programming languages. Despite being based on an open source tool, Flex Builder is not free, nor is it cheap (US $499, or US $749 if you include data visualization components). However, you can download a 30-day free trial version (or the Flex Builder plug-in, if you already have Eclipse installed), or use your own IDE instead.
Before we start building our own application in this environment, let's step back and take a look at what's involved.
How Flex Development Works
Flex provides developers with more than one way to build an application or component. Our first foray into Flex will introduce MXML, a special markup language that was designed with application layout in mind. Creating an instance of a component in your application couldn't get any easier than declaring it in MXML:
<mx:Button id="myButton" label="Press Me!"/>
As you can see, the Button's properties are set right inside the tag. We've named this instance "myButton" and given it a label that says, "Press Me!" Setting the id allows us to reference this Button elsewhere in our code. Styles, such as colors or skins, and event handlers can be set in a similar way. For example, if you wanted to listen for a button click, you could call functions and run snippets of ActionScript code right inside the click property of the Button. We'll see an example of this later, when we create our first Flex application.
Thanks to the inherent hierarchy of XML, we can place components inside one another. Let's put our Button inside a layout container -- in this case, a Panel.
<mx:Panel>
<mx:Button id="myButton" label="Press Me!"/>
</mx:Panel>
We've declared the Panel component with two tags this time. Containers in MXML work in the same way as they function in XHTML, where an element such as a paragraph includes an opening tag and a closing tag. Other components that appear inside these two tags will become children of the container.
As you become more experienced with Flex, you'll want to get down and dirty with pure ActionScript 3. Flex's core components are written in this language, and the Flex documentation includes all sorts of information to help you write solid code that uses the same architecture. You'll even discover that the source code for the core components comes with the Flex 2 compiler. What better place could there be to look for best practices in component development than within the very components provided by Adobe?
Interestingly enough, the Flex 2 compiler actually converts MXML into ActionScript 3 as it compiles your applications. It handles all the special application bootstrapping code behind the scenes to make developers' lives easier. Our partial MXML example from above can therefore easily be translated to ActionScript:
var myPanel:Panel = new Panel();
addChild(myPanel);
var myButton:Button = new Button();
myButton.label = "Press Me!";
myPanel.addChild(myButton);
While our MXML example appears on three lines, the ActionScript equivalent takes five lines. It would grow much larger if we wanted to set more than a couple of additional properties on the components. As you build more complex applications, you'll experience the beauty of using MXML for layout and initialization. Not only will you find it easier to visualize the hierarchy of components, you'll actually fit more information into fewer lines of code.
Get your Feet Wet
Let's get things started and put together a simple application that shows off some of Flex's cool features. To play along at home, you might like to download the free 30-day trial version of Flex Builder from Adobe, which includes the Flex 2 SDK (Flex Builder is currently only available for Windows, but a Mac version is due out at the end of the year). If you're feeling especially adventurous (or you're on a Mac and can't wait until then), you could of course use your own text editor (the SDK is available as a separate, free download from the same page, complete with command-line compiler). I'll assume that you're using Flex Builder for this tutorial.
I'd also recommend that you download the source code and other files I've provided for this tutorial. I'll explain many of the main sections and concepts that we'll meet along the way, but I won't be covering every single line of code, so you'll need the source code download in order to follow along.
Launch Flex Builder and select File > New > Flex Project. The new project wizard starts by asking how we intend to access data in our application. Choose Basic, since we won't be using Flex Data Services or ColdFusion, then click the Next button. The Basic option is appropriate in cases where you don't need data connectivity, or you plan to access data through custom sources written in server-side languages such as PHP or ASP.NET.
Next, we need to enter the name of our application. We're going to build a small page that lets us view and edit the biographies of some managers at a growing software company. This page might be a single module of a larger content management system (CMS) that the company uses. Let's call our project "Company Leaders". You don't need to change the default location -- these files will be saved in a special Flex Builder 2 folder inside your user directory (that's My Documents on Windows).
Click Finish to exit. If you were to continue with the wizard by clicking the Next button, you could enter more advanced options such as additional source code and library paths (Flex libraries allow developers to include custom components that they may have purchased or downloaded). We don't need any of these options for this project, so we'll skip them.
A new project is created in Flex Builder
Flex should have created a blank application, and you should see the Source view with a couple of lines of MXML code. Click on the Design button above the source code view -- we'll start by trying out the design editor.
Like Dreamweaver or other WYSIWYG editors, Flex's Design View lets us drag and drop components into our application and manipulate them visually. We can also set properties of the components without needing to edit any code.
The UI components available in the Design View
In the bottom-left corner of Flex Builder, you should see a Components pane -- click on it if it isn't selected. Inside, you should see several different categories, including Custom, Controls, Layout, and Navigators. A Charts category might be in there, too -- the Flex Builder trial version also comes with a trial application that contains some robust charting components. Expand the Layout category and drag a Panel component into the design view of your application.
Changing the properties of a component with the Properties pane
Now, on the right side of Flex Builder, you should see the Flex Properties pane. We'll use this to edit the Panel component we just dragged into the design view. Click on the Panel component -- the Properties pane will show a series of items that you can edit, such as the Panel's id, title, alignment options, styles, position, and dimensions. Type "Company Leaders" in the Title field. You should see it appear on the title bar of your Panel.
The panel for our first Flex application
The design view is a great way to get a simple application layout started. Click on the Source button above the design view, and we'll jump right into editing a little MXML. In the source view, you'll see some markup for our main application and the Panel component that it contains:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel x="140" y="100" width="250" height="200" layout="absolute" title="Company Leaders">
</mx:Panel>
</mx:Application>
As you can see, the Application acts as a container just like the Panel component. A few extra properties have been added for us already. The Panel is positioned at the point to which you dragged it into the design view, and it has default dimensions of 250 pixels by 200 pixels. Both the Panel and the Application use "absolute" layout. We'll learn a bit more about other layout modes in a moment.
From here, we could add components to the main application, or we could work with components inside our Panel. Let's add a List of our leader's names and a Form that allows us to edit their information inside the Panel tags.
<mx:List id="names"/>
<mx:Form id="details">
<mx:FormItem label="Name:">
<mx:TextInput id="nameInput"/>
</mx:FormItem>
<mx:FormItem label="Title:">
<mx:TextInput id="titleInput"/>
</mx:FormItem>
<mx:FormItem label="Description">
<mx:TextArea id="descInput"/>
</mx:FormItem>
<mx:Button label="Save Changes"/>
</mx:Form>
If you take a look at the design view, you'll discover a bit of a mess. The Form looks alright, but our List is hidden behind it. We can use Flex's layout system to correct this problem. Let's alter the layout property of our Panel:
<mx:Panel layout="horizontal" title="Company Leaders">
Now the Form appears to the right of our List, and the elements no longer overlap. You'll notice that I removed the position and sizing parameters. The Panel should be able to determine a good size for itself automatically, on the basis of its content. However, the Panel now appears in the upper left-hand corner of the application. Let's change the layout parameters of the application to position the Panel in a better place:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle">
That looks better, doesn't it? We've removed the absolute layout, and the application will position the Panel right in the middle of the screen. Even better, Flex will always keep the Panel centered -- even when the application changes size.