There's been a lot of talk in the ColdFusion community lately about the newly released Flex 2. If you're new to Flex or haven't tried it yet, this article provides an introduction, from a ColdFusion developer's perspective, to what Flex is and is not.

I'll also put Flex in the perspective of what you already know as a ColdFusion developer, so that your introduction to this exciting and powerful technology will have a familiar context.

Like many of you, I've been using ColdFusion for several years, keeping up with the latest bells and whistles as they were introduced: the Java platform, CFCs, reporting, Flash forms. As an Adobe Certified ColdFusion Instructor, I made sure I kept up with these new features, even if I didn't use them day-to-day, simply because I knew I'd get questions about them.

One thing has always remained constant though. I wrote code that would be interpreted by the ColdFusion Application Server and returned to the user's browser as HTML. Over the years, I learned how to combine technologies like JavaScript and CSS with my ColdFusion code to create robust, intuitive applications for my clients. I started separating a lot of the application logic into CFCs so that my code was reusable. I even started learning some basic Java so that I'd be better able to take advantage of ColdFusion's underpinnings.

Little did I know that arming myself with these snippets of knowledge and best practices would help ease my introduction to Flex enormously.

What Is the ColdFusion-Flex Relationship?
As Table 1 illustrates, Flex-created Flash takes the place of standard HTML output. The rest of your application architecture remains unchanged.

What Exactly Is Flex?
To understand what Flex is, you must first understand what a Flash movie is. A Flash movie, at its most simple, is a file with an SWF extension (the pros refer to them as "swiffs") that contains compiled code that renders an interface and occasionally make calls to back-end systems. The SWF is read by the Flash player, which most people (an estimated 97% of Web users) have installed as a browser plug-in, and rendered on-screen within the confines of the Flash movie. The Flash movie shows up on screen via some HTML tags that define its dimensions and other attributes.

To create a Flash movie, developers traditionally use Adobe's Flash IDE, a timeline-based application that is exceptionally well suited to creating animations. If you've never seen the Flash IDE, it's worth taking the time to download the free trial. The Flash IDE, however, was not originally intended to be a tool for application developers like us. While some incredible applications have been created using the Flash IDE, developers who come from a coding background have had a hard time getting comfortable building applications this way. I certainly did.

The Flex team was well aware of this and, to their credit, recognized that if Flash was going to play a significant role in the next generation of Web applications, especially at the enterprise level, they would need to entice coders to get in the game. Wouldn't it be great, they thought, to be able to create Rich Internet Applications (RIAs) using only code?

And so, Flex was born.

Flex allows you, the developer, to create Flash applications using code. The good news is that the code is very similar to the HTML and CFML you already know.

Here is a simple example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
      <mx:Label text="Hello World!" fontSize="22" color="#ffff00"/>
</mx:Application>

Notice that Flex uses opening and closing tags, just like HTML and ColdFusion. In this case, the markup language is called MXML. Also, the first line tells you that MXML documents are standards-compliant XML files.

What Is ActionScript?
Good news about the tags. It gets better. You would be unlikely to create a complex HTML-based application these days without using JavaScript and CSS for things like form validation and DHTML effects. Well, Flex also has a scripting language, analogous to JavaScript, called ActionScript. If you know JavaScript, ActionScript will look fairly familiar. If you know Java, ActionScript will look very familiar.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
   <mx:Script>
     <![CDATA[
       import mx.controls.Alert;
       public function doAlert():void {
         Alert.show('Hello Actionscript!');
       }
     ]]>
   </mx:Script>
   <mx:Button id="myBtn" label="Click me!" click="doAlert();"/>
</mx:Application>

You can probably guess that this snippet of code displays a button on screen that, when clicked, calls the doAlert function. Inside the function is a call to Flex's Alert class, which generates alert boxes, just like in JavaScript.

ActionScript is where the real work of your Flex application occurs. It can be used to manipulate the application's visual elements as well as gather, send, and retrieve data from remote sources such as Web services, Java objects, and even ColdFusion Components (CFCs).

Flex also uses Cascading Style Sheets syntax to style the visual elements of your application, so those CSS skills will come in handy with Flex as well.

What About ColdFusion?

Is ColdFusion no longer needed? Are your hard-earned skills going to be abandoned now that Flex has arrived?

Absolutely not.

Flex represents what's known as the presentation layer of an application; the view part of that model-view-controller stuff that's all the rage these days (see Table 1 above). That is, its primary concern is to render the interface for the user and provide an environment that is comfortable and intuitive. For example, we're all used to dragging and dropping things within our desktop environments, so Flex has this functionality built in - and it's easy to implement.

What Flex does not do is all the back-end transactional things that an applications needs. It cannot directly send a query to a database. It cannot POP an e-mail account. It cannot manipulate files on the server. Is this a drawback to using Flex? No. In fact, it's its greatest strength. Flex leaves the choice of back-end technology up to the developer or organization. This means that the initial investments made to create such systems can be repurposed with a rich front end.

Flex contains several built-in functions that can talk to various back-end technologies, including native connections to ColdFusion CFCs and Java objects, XML files, as well as Web services. That last one is important; Flex can talk to any Web service, regardless of the technology used to create it. This means that an organization that has invested heavily in their technology of choice, say .NET, can retain that code base, while adding a sophisticated presentation layer that is difficult or impossible to achieve with a straight HTML interface.

Where Do I Start?
Download Flex Builder 2 from www.adobe.com/products/flex/ and start playing. Once you've installed the product, start in Design View. This is the simplest way to learn MXML; simply drag the prebuilt components (lower left) to where you want them, then study the code that Flex Builder generates for you (see Figure 1). After a while, you'll likely just go straight to the Source View.

I would also suggest an official Adobe Flex training course. There are three Flex courses currently available, with more to follow. Visit the link in my bio for more information.

What Other New Things Will I Learn?
In addition to quickly creating a decent-looking interface, you will find that, as you get deeper into the RIA world, there are some concepts that may be new to you:

• For example, you may, though it certainly is not required, use object-oriented frameworks. The most popular one for Flex is called Cairngorm (www.macromedia.com/devnet/flex/articles/cairngorm_pt1.html).
• You will quickly learn about the ubiquitous Event object that permeates and gives life to Flex applications.
• You will start to abandon the restrictions of the traditional page request/response nature of the Web that we have tolerated for far too long.
• And much more.

• Getting Started with Adobe Flex 2