(April 15, 2005) - In the beginning of the World Wide Web there was HTML, and it was good. HTML provided an easy, structured way to present data and images, and hyperlinks gave users access to other pages with the simple click of a mouse.

As time went on, however, users demanded more and more from HTML, which led to the rise of Web applications. At first the users were pleased with the ability to shop and do their banking online, but they soon became frustrated. "These Web applications don't behave like my desktop applications!" they cried. "I'm sick of waiting for page reloads every time I click on something. I want a better experience!"

Web developers have done their best to meet these increasing demands through a rather clumsy mix of HTML and other technologies such as JavaScript, DHTML, and Flash. They have met with varying degrees of success. Because of the nature of these technologies and their inherent limitations, developers are still prevented from providing desktop-like application functionality and rich user experiences within the Web browser. The time has come for a completely new Web application paradigm; one that combines the power of the Internet with the user experience of a desktop application.

Let There Be Flex
Flex is the newest addition to Macromedia's line of server products, and it's an example of a relatively new type of server software known as a "presentation server." The sole job of a presentation server is to provide a framework on which Web applications with rich user interfaces can be built. These applications are typically referred to as Rich Internet Applications (RIAs).

Macromedia's RIA initiative began with the evolution of the Flash IDE into a stronger application development tool. Flex is another step forward for RIAs and offers many development advantages over the Flash IDE. Using Flex, developers who may be uncomfortable with the Flash IDE can quickly build RIAs in their favorite code editor. Because of the code-centric nature of Flex applications, there's no need to sacrifice enterprise application development methodologies and architectures. Best of all, Flex applications run in the extremely ubiquitous Flash player so we can be certain our Flex applications will run practically anywhere.

As if this weren't compelling enough, Macromedia recently announced Flex 1.5. This adds exciting new features to the already-rich Flex toolset such as vastly improved charting and graphing capabilities, more advanced UI components, and simpler application skinning. The performance has also been greatly improved, and with Flex 1.5, developers can also integrate their Flex applications with Macromedia Central. If you haven't already checked out Flex, now is a great time to do so. For more information on the new features of Flex 1.5, visit www.macromedia.com/software/flex/.

In this article I'll briefly address RIAs and discuss the types of applications for which they are especially well-suited, introduce you to Flex, and discuss how Flex and ColdFusion can be used in conjunction with one another. I'll also explain how Flex can be used to put a completely new face on an existing ColdFusion application.

Improving the User Experience
The overriding goal of RIAs is to give users a richer, more interactive, and more immediate experience when using Web applications. One of the chief complaints users have about Web applications is the page-based model. Every time something is clicked or new data is needed, the user has to wait for a page refresh. Even if the page loads relatively quickly, it's still a less-than-optimal experience for the user. Particularly in the case of a multistep process such as making an online purchase, the continual reloading of pages tends to make users uneasy, and as a result, many users actually abandon the process because the experience is so poor.

Flex solves this problem by allowing developers to create a complete Web application in a single-screen model. Flex applications are able to refresh discrete portions of the screen or change from one view to another without having to load a new page in the browser. Flex also offers more advanced UI components when compared with HTML, allowing for vastly improved functionality that would be difficult or impossible to achieve with HTML. Also, because Flex applications run in the Flash player, the headaches of browser inconsistencies with DHTML are completely avoided. The end result is a far richer, more interactive experience for your users. For additional information on RIAs, visit the RIA section of Macromedia's Web site at www.macromedia.com/resources/business/rich_internet_apps/.

Obtaining Flex
You can get your hands on Flex and Flex Builder (Macromedia's Flex IDE) by downloading a trial version from www.macromedia.com/software/flex/trial. Or if you're a DevNet subscriber, you may download Flex and Flex Builder from your DevNet subscription page.

Macromedia also recently announced that a noncommercial, noninstitutional Flex license will soon be made available at no cost. This means you will be able to use Flex as a learning tool or for building personal applications and make these applications accessible to others. This is fantastic news, and I encourage you all to take advantage of this. Read Macromedia's FAQ for more information (www.macromedia.com/software/flex/productinfo/faq/#ancni). You may apply for a noncommercial, noninstitutional Flex license at www.macromedia.com/go/flexlicense.

Because there are several excellent resources covering the installation and configuration of Flex, I will not be addressing these issues. If you need assistance installing Flex, visit the Flex section of Macromedia DevNet at www.macromedia.com/devnet/flex. Or you can go to the Flex Documentation page at www.macromedia.com/support/documentation/en/flex/.

Flex Basics
At a high level, a typical Flex application consists of MXML and ActionScript code (more on this next). This code is compiled into a Flash movie (SWF) by the Flex server at runtime. Flex applications are launched in a Web browser using a URL just as with traditional Web pages. When the MXML file is requested, the Flex server either compiles the code if necessary or serves up a precompiled SWF to the user.

Concerning the languages used to write Flex applications, in similar fashion to ColdFusion, Flex applications are created by using a rich set of extremely powerful tags. These tags are written in a flavor of XML called MXML, and this serves as the base language for the creation of Flex UIs. To unleash the true power of Flex, however, ActionScript 2.0 is also used. Think of MXML as the tags used to build the basic structure of a Flex UI and ActionScript as the language that brings the UI to life (although there's a lot you can achieve with MXML alone).

If you have experience with scripting in Flash, you will already be familiar with ActionScript. If not, ActionScript is an ECMAScript-compliant language, so the Java or JavaScript skills possessed by many Web developers will dramatically ease the learning curve. Macromedia's LiveDocs for Flex is at http://livedocs.macromedia.com/flex/15/flex_docs_en/index.html. This is an extremely handy reference as you build Flex applications.

Where Does ColdFusion Fit In?
One frequent point of confusion surrounding Flex is that many ColdFusion developers see Flex as a replacement for ColdFusion. Nothing could be further from the truth. As mentioned previously, Flex is a presentation server. Thus, on its own Flex cannot do many of the things we ColdFusion developers do every day, such as retrieve data from a database. Database connectivity simply doesn't exist in Flex because this isn't Flex's job. Flex can, however, easily communicate with any number of back-end technologies such as simple HTTP services, Web services, and remote Java or Flash objects.

ColdFusion, on the other hand, excels at providing powerful back-end functionality, but the presentation layer is not addressed directly by ColdFusion. This is precisely where ColdFusion fits into the Flex equation. Through the use of CFML pages and ColdFusion Components (CFCs) exposed as Web services, we can use our existing ColdFusion skills to create back-end components and easily leverage these components with Flex. Because Flex functionality can be exposed as a Java tag library, you can also combine Flex and JSP or CFML code within a single page, but this is beyond the scope of this article. You can read more about this on Christopher Coenraets's blog: www.markme.com/cc/archives/004021.cfm. As you'll soon see, using Flex with ColdFusion is an extremely powerful combination of technologies that allows us to build compelling RIA experiences with a minimal amount of code.

Case Study: A Forum Facelift with Flex
Volume 8 of Macromedia's DevNet Resource Kit (DRK) includes an excellent ColdFusion forum application by Ray Camden called Galleon. Because this is an existing application that's available to DevNet subscribers (hopefully that includes you!), Galleon provides a nice code base on which we can build a new Flex user interface. In addition, because of the numerous screens involved with an HTML-based forum application, it's particularly well-suited to illustrate the dramatic difference between an HTML UI and an RIA built in Flex.

Galleon comes complete with user-management features and an administration module. However, in the interest of focusing on Flex basics, these portions of Galleon have been omitted from the Flex application. Session management and some of the finer points of Flex development will be left for a future article. But armed with the knowledge you'll gain from this article, you can complete the Flex UI for Galleon on your own! (Consider that a homework assignment.)

The ColdFusion Code
The existing Galleon code provides an excellent head-start in creating a Flex UI because Galleon already leverages CFCs quite heavily. This makes exposing the CFC methods to Flex as simple as setting the access attribute of the methods to "remote," which instantly creates a Web service that can be called from our Flex application. Although the original Galleon application includes several CFCs, for simplification purposes I have extracted the relevant functions and put them all in a single CFC called FlexForums.cfc (see Listing 1).

We will also be using a simple CFML page in the Flex application to illustrate how Flex can leverage CFML pages as HTTP services. There is also a "gotcha" in Flex when XML is retrieved via a Web service call. To make a long, hair-tearing story short, if you're using ColdFusion to generate XML and you want to use this XML in your Flex application, you must use a CFML page as opposed to a CFC function that returns XML. (This is a known issue that should be fixed in future versions of Flex.) We'll use an HTTP service call to a CFML page to populate the forum navigation tree in our Flex application (see Listing 2).

The Flex Code
In addition to our CFC and CFML page, building our entire Flex UI takes only a little over 200 lines of MXML and ActionScript code. That's not a typo. The power of Flex allows developers to be extremely productive and build impressive applications with impressively little code.

Our Flex application is broken down into four files. FlexForums.mxml (see Listing 3) is the main application file, and this is what's called in the Web browser to launch the application.

FlexForums_script.as (see Listing 4) is an ActionScript file that contains all the functions that are used in the application. This could have been included in a script block within FlexForums.mxml. However, separating the ActionScript code from the MXML file makes for cleaner code organization. Two additional MXML files, ThreadForm.mxml and MessageForm.mxml (see Listings 5 and 6), contain the forms used for adding new threads and posting messages to the forums.

Setting Sail on the Galleon RIA
To see the HTML version of Galleon, visit Ray Camden's Web site at www.camdenfamily.com/morpheus/forums/. We're going to use this exact same back-end code to drive our new Flex UI. Due to the current licensing restrictions with Flex, unfortunately I can't point you to an online version of the Flex application, but you can see a screenshot in Figure 1.

The new Flex face we've put on Galleon is the familiar interface of many desktop newsreader programs. The default "Halo" style of Flex creates an attractive, clean UI with no graphic design work whatsoever. All the Flex components as well as the application itself are quite easily skinnable using standard CSS syntax. Thus, you're by no means stuck using this look for all your applications.

Apart from the rich interface itself, the most compelling aspect of the Flex application is its behavior. When the user clicks on a specific forum, for example, the messages are retrieved from the database and the data grid is updated without requiring a refresh of the entire screen. When new threads or messages are posted by the user, the data grids automatically refresh immediately and display the latest data. Navigating between forums, threads, and messages is all immediate and again requires no reloading. Even retrieving specific messages is a simple, quick call to the server that updates one portion of the Flex display without having to refresh the entire page. This creates a far more cohesive, seamless experience for the user.

Retrieving Data From ColdFusion
As mentioned previously, Flex can retrieve data from ColdFusion in two ways: CFML pages can be called as an HTTPService, or CFCs can be exposed as Web services. (A third method is to call a CFC as a RemoteObject, but for this article we'll focus on HTTP services and Web services.) For security reasons, access to remote services from Flex is controlled via a white list. This is simply a section of Flex's XML configuration file that dictates what remote services may be called and how they may be called. Services can either be unnamed (called via a URL directly) or named (called via an alias), and we'll see an example of each. Flex configuration is beyond the scope of this article, so for more information about configuring the white list see www.macromedia.com/support/flex/ts/documents/whitelist.htm.

Calling a CFML Page as an HTTPService
The navigation tree in the left panel of the Flex UI provides easy access to each of the conferences and forums. The data in the tree comes courtesy of an HTTPService call from Flex to the getConferences.cfm page (see Listing 2). The HTTPService is defined in Flex as follows:

<mx:HTTPService id="conferenceFeed"
 url="http://192.168.1.105:8103/cfusion/forums/getConferences.cfm" showBusyCursor="true" />

The ID attribute simply gives the service a handle that can be used within Flex, the URL is the location of the CFML page, and the showBusyCursor attribute tells Flex to change the cursor into an hourglass while the service is being called to give visual feedback to the user. The XML returned from the CFML page is then set as the data provider for the navigation tree and Flex handles the rest.

<mx:Tree id="forumTree" height="100%" width="20%" showDataTips="true" dataTipField="description"
 change="handleTreeChange(event);" dataProvider="{conferenceFeed.result.node}" />

The other item of interest is the change attribute, which tells Flex to call a function when a change is made to the tree. When the user clicks on a forum in the tree, this change triggers the handleTreeChange function, and this function subsequently calls the method that loads the thread data. The details of this operation can be seen in the handleTreeChange function in the FlexForums_script.as file (see Listing 4).

Calling a CFC Method as a Web Service
The second way to get data from ColdFusion into Flex is to invoke methods in a CFC that have been exposed as a Web service. This is the method most frequently used in our sample application. By using CFCs, we create better code encapsulation in our ColdFusion application while simultaneously making it easier to access this functionality from outside sources such as Flex.

As an example of this, let's take a brief look at how we use a call to a CFC to populate a Flex DataGrid (see Figure 2). The DataGrid is an extremely rich component with a large amount of out-of-the box functionality such as sortable and resizable columns, so it provides a very powerful way to present data.

To fill the DataGrid with data, we simply set the result of the call to the Web service (which returns a ColdFusion query object) as the data provider for the DataGrid. Flex dutifully displays the data retrieved from ColdFusion. In our main MXML file we must first define our Web service, which in this case is a service that has been named "FlexForums" in the Flex configuration file as opposed to being called by a URL:

<mx:WebService id="forumWS" serviceName="FlexForums" showBusyCursor="true" />

Once the Web service is defined, in our ActionScript code we simply call the Web service method that returns the thread data:

forumWS.getThreads(forumId);

One item to note is that because ColdFusion is case insensitive, it returns the column names of the ColdFusion query to Flex in caps, so we must use all capital letters to refer to the column names in our DataGrid columns (see Listing 7).

Again, because we have set the dataProvider of the DataGrid to be the result of the getThreads call, the DataGrid is automatically updated with new data upon completion of the Web service call. Simple yet extremely powerful!

Next Steps
Using a relatively small amount of code, we've created a very compelling, interactive Flex interface for an existing ColdFusion application. Unfortunately, there are some configuration issues and code details that I didn't have space to discuss here, so for a more detailed analysis of the code please visit my blog at www.mattwoodward.com/blog. I'll try to have something posted by the time this article is published.

Conclusion
I obviously couldn't possibly cover everything you need to know about Flex in this brief article, but I hope this sample application has shown you how Flex can be used to build highly interactive RIAs extremely quickly and easily. Using your existing ColdFusion skills in combination with Flex, you can put a new face on your existing ColdFusion applications, or build completely new experiences for your users with this powerful combination of technologies. Now get started on that homework assignment!