By now you've probably heard about Flex, Macromedia's most recent offering in their line of server-side products. What is Flex? How does it work? Is Flex a replacement for Flash or ColdFusion? Is it something you should be evaluating as a solution? What do you need to begin development with Flex?

In this article I'll introduce you to Flex and answer these and other questions that ColdFusion developers might have about Macromedia Flex. I'll start at the beginning - what is Flex, anyway?

Flex is a J2EE application, just as ColdFusion is a J2EE application. Like ColdFusion, Flex can be installed as a stand-alone application (which installs an underlying JRun J2EE application server) or it can be deployed for use on an existing J2EE application server. Flex is not a replacement for ColdFusion nor is it a replacement for Flash. Flex is a J2EE application that reads in XML files and translates them into Flash. MXML is the XML flavor created by Macromedia for use by Flex. Let's look at what Flex can do and then revisit where it sits in relation to ColdFusion and Flash.

Flex is a presentation-layer server. That is, Flex is responsible for generating a user interface for Web applications. While this is true, Flex also allows developers to develop object-oriented applications - I'll discuss how shortly. In order to understand what Flex does, you must have a little bit of knowledge about its markup language, MXML.

MXML has far too many tags to be discussed in this article, but the majority of these tags can be categorized as being responsible for either a user interface element (such as a text input or dropdown list), a user interface layout element (such as a panel, an accordion pane, or a section of a page), or defining data (such as format and value validators, Web service feed(s), or external objects such as Flash classes or CSS files).

Obviously, if MXML contains tags that connect with Web services and other external data feeds and business logic, then it must be capable of doing more than just generating user interfaces. This is quite an understatement; you can build entire applications in Flex using nothing but MXML. The truth is, though, these applications typically won't do much without either connecting with code written in another programming language that is exposed as a Web service or calling on functionality written in ActionScript. Let's revisit the topic of where Flex sits in relation to ColdFusion and Flash.

Do We Still Need Flash and ColdFusion?
If Flex generates Flash, do I need Flash anymore? Well, yes and no. If you need to take advantage of the robust timeline features in Flash, Flex is not the solution for you. In fact, if you need to do anything other than generate business-application front ends in Flash, then there's a good chance that Flex is not suited to your needs. That's not to say that you couldn't make it do what you want, but the Flex server isn't designed for that and it'd probably be overkill (and an over-expenditure) to use Flex in such scenarios. In addition to the features already mentioned, Flex does have some limited graphical/animation ability in the form of some simple effects, such as fade, movement, and zoom.

If you plan on using Flex rather than Flash to build complex business applications, Flash knowledge is still an essential skill. The reason for this is that Flex natively supports ActionScript, the programming language used in Flash. It can import ActionScript classes and/or components, expose its components and data to these same entities, and even has an MXML tag that allows you to write inline ActionScript within MXML files. Pretty much every MXML tag generates an (ActionScript) object that is accessible from within ActionScript classes and/or components. So what about ColdFusion?

Obviously, Flex is not a replacement for ColdFusion. It does not have the same robust server-side programming capabilities that CFML has. The two products do complement each other very well, though. ColdFusion is ideally suited to writing all of the complex business logic and database/file system integration in an application. It also has the ability to easily expose its functionality as a SOAP Web service.

Flex is ideally suited to creating front-end interfaces, but it also has the ability to consume Web services. Because Flex files are written in XML, ColdFusion developers do not have to learn all of the nuances of Flash and the Flash authoring environment. In fact, with a little XML knowledge and ColdFusion on the back end, developers can accomplish quite a lot. A SOAP Web service is not the only way that ColdFusion and Flex can be used together to build rich Internet applications (RIAs); you can also mix MXML and CFML in the same file (read on)!

Integrating Flex with ColdFusion
ColdFusion MX is a J2EE application. There is no rule that says ColdFusion has to be the only J2EE application running on a J2EE server instance - and there is no reason why other applications cannot be deployed as part of the ColdFusion EAR. In fact, it'd be very prohibitive if this were the case. Flex is also a J2EE application and with a little bit of tweaking, can be deployed as part of the ColdFusion EAR. At the time of this writing, the steps required to integrate Flex with ColdFusion aren't trivial, but the process isn't really all that difficult, especially if you are familiar with the basics of J2EE application architecture (but don't worry if you're not).

In order to integrate the two, choose the J2EE installation option when installing Flex. This will put all of the Flex files in their own folder (off of the "Program Files/Macromedia/Flex" directory structure). In this directory structure is a .war file that you unzip to a temporary directory. After modifying an XML file to disable Flex logging, copy the flex directory from Flex's web-inf directory structure to ColdFusion's web-inf directory structure. Also copy the flex-bootstrap.jar file from Flex's lib directory to ColdFusion's lib directory. The last thing you need to do is a series of copy-and-paste jobs in order to modify the doctype declaration (to support servlet filters) and copy all of the servlet, filter, and tag library mapping and setting information from the Flex web.xml file into the appropriate places in ColdFusion's web.xml file. Easy, right?

These are very general instructions and I don't recommend trying to merge Flex with ColdFusion based on what I've just outlined - use the Macromedia Tech Note found at www.macromedia.com/support/documentation/en/flex/1/flexforcf.html.

Once Flex and ColdFusion have been integrated and you've cycled the server, you can embed MXML within your CFM pages, along with any CFML - and the MXML will be processed and rendered the same way it would in an MXML page.

How Flex Works
Getting back to our original set of questions, how does Flex work? When a request for an MXML file is made (or an MXML block is encountered in a file being processed by a J2EE application configured to process MXML, such as a Flex/ColdFusion integration) the MXML is handed to the Flex application for processing. Flex converts all of the MXML tags into their ActionScript equivalents, imports a shared library, and then compiles it all into a SWF (Flash File Format). The SWF is returned to the client for viewing. There is a Flex XML configuration file node that can be modified to tell Flex to save the ActionScript it creates before compilation; otherwise the ".as" files are never saved.

Speaking of saving files, Flex performs this compilation process only the first time an MXML file is requested; after that the compiled SWF is returned without any compilation overhead. Similar to the way ColdFusion compiles its CFM files, if you modify the code in an MXML file, Flex will recompile it on the first subsequent request. Speaking of modifying XML files, it's worth noting that after installing Flex there are a few XML "whitelist" entries that must be modified if you plan to interact with any remote Java objects, Web services, or HTTP sites from Flex. See the Macromedia TechNote at www.macromedia.com/support/flex/ts/documents/whitelist.htm for more information on using the Flex whitelist(s).

So far I have focused on reviewing Flex as a possible solution and discussed the various ways in which Flex can be installed and/or configured. By now I'm sure you're wondering how easy Flex is to use (and whether or not I'm going to show any code)?

Once you get started, Flex is extremely easy to use. I'm not going to show very much MXML code in this article simply because there isn't enough space for me to do the language any justice. I will show you a few variations of "Hello World," and you can rest assured that in the very near future ColdFusion Developer's Journal will be running articles that go into MXML syntax in more depth. I should also mention that Macromedia has a new class - "Fast Track to Macromedia Flex," which I highly recommend for any developers interested in learning everything they need to know to get started building RIAs with Flex. I will be reviewing that course curriculum in next month's issue of CFDJ. Now, on with some (albeit simple) code.

Taking Flex for a Spin
The first code sample I want to show is a simple "Hello World" application. I'll create a file named "hello.mxml", which contains the code in the following snippet, the results of which are shown in Figure 1. Note that I added a "backgroundColor" attribute to the "mx:Application" tag to make it clearer for print. The default background is a "halo" dark gray.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"
backgroundColor="#FFFFFF">
    <mx:Label text="Hello World"/>
</mx:Application>

One more simple example: I'll create a "hello.cfm" file that says hello and shows the current date using ColdFusion and MXML - and I'll add a little style to the MXML output to make it a little bit prettier, using the Flex support for CSS. (It also supports ActionScript style properties.) Note the use of <CFIMPORT> to import the Flex tag library and the use of an external stylesheet. The code is shown in Listings 1 and 2, and the output is shown in Figure 2.

Conclusion
As you can see, Flex is relatively simple to use for creating Flash front ends. Though we didn't have an opportunity to look into using MXML to do anything too complex in this article, I hope you now have a good understanding of how Flex works and where it sits in the Macromedia suite of products - and that you are confident that MXML offers developers a way to generate good-looking, robust RIA interfaces to back-end business logic.

Flex is ideal for use as a UI platform in the enterprise and offers the benefits of runtime compilation of XML and a consistent (halo) look and feel that aren't easily achieved using the "traditional" Flash authoring environment. If you have these requirements, I strongly recommend evaluating Flex by attending the Fast Track to Macromedia Flex class (read next month's issue for more on that) and/or visiting Macromedia's Web site. It is worth mentioning that at the time of this writing Macromedia has recently released a Flex Updater. You can read more about the Updater and download the code at www.macromedia.com/support/flex/downloads_updaters.html. The Flex white paper found at www.macromedia.com/software/flex/whitepapers/pdf/flex_tech_wp.pdf is a good continuation of the topics in this article.

Supported Application Servers

• Figure 1
• Figure 2
• Source Code