Understanding Flex in the client/server model

In this article, you will learn about the Adobe Flash Platform, Adobe Flex and how Flex fits into the world of an Adobe ColdFusion developer. This is a high level discussion that will explain what Flex is and two ways that it is commonly used with ColdFusion.

Understanding the Adobe Flash Platform

The Adobe Flash Platform is an integrated set of technologies for creating rich, compelling applications, content and video. As an experienced web developer, you have probably heard of Adobe Flash and visited sites created with Adobe Flash Professional. However, this tool is only one technology in the platform (see Figure 1).

You can use any of the professional tools to create rich media, content and applications that are played back in the Flash Player or AIR runtimes. You can also add enterprise-level functionality with the server products, but this is outside the scope of the article.

Let me focus for a minute on the professional tools and web development:

• Flash Builder has helpful designer-developer workflow tools, but is largely geared towards developer productivity for Flex application development.
• Flash Catalyst is a new interaction design tool for creating interfaces and content without writing code.
• Flash Professional is an authoring environment to create content, animation, applications, and more using visual tools, a timeline or programming.

What they all have in common is that they can compile SWF application files (among other file types), which can then be wrapped in HTML and displayed in a browser that has Flash Player installed (see Figure 2).

Understanding the Flex framework and Flash Builder

Flash Catalyst and Flash Builder are based on the Flex 4 framework, which is a free, open source library of classes and UI components that can greatly improve your ability to create applications that deploy consistently on all major browsers, desktops and operating systems (see Figure 3). Note that the framework provides two programming languages, MXML and ActionScript, which you can learn about in the related article Introducing the MXML and ActionScript Languages.

You can also create Flex applications using the free Flex SDK, which packages the Flex framework, along with a compiler and a debugger, in a free software development kit (see Figure 4).

If you use the Flex SDK, you would write your MXML and ActionScript code in any code or text editor and then use the command-line compiler to compile the application.

Flash Builder 4, formerly known as Flex Builder, is the Adobe commercial product geared towards developers building applications using the Flex framework. This tool includes everything in the Flex SDK plus many features to improve your productivity (see Figure 5).

Note: I mentioned earlier that Flash Catalyst is also based on the Flex framework; however, this article focuses on Flash Builder and ColdFusion development.

Flash Builder is based on the non-profit, open-source Eclipse development platform and application framework for building software. For developers who are already working with Eclipse, you can use the plug-in installer for Flash Builder. Developers who have never used Eclipse can use the standalone installer which is a customized package of Eclipse that includes the Flash Builder plug-in.

The new ColdFusion Builder tool is also based on the Eclipse software environment, which means that you can do both your Flex and ColdFusion development within the same Eclipse-based environment.

Understanding how Flex applications work with ColdFusion

In this last section, I will discuss two ways that Flex applications are often used with ColdFusion:

• Application or widget embedded in a CFML page
• Application or widget directly accessing CFCs to retrieve data or use other ColdFusion services

But first, let's quickly review how a typical CFML template is processed and displayed to an end user in a browser.

Reviewing CFML template processing

Figure 6 illustrates what happens when a CFML template is processed by the ColdFusion server.

1. When the user requests the CFM page, the web server locates the file and passes it to the ColdFusion server for processing.
2. The CFM page can be built procedurally with all of the code inline or it can be built to request functions from a CFC. The business logic in the code can access system resources like the database, mail server and file system.

   Note: You can read more about creating CFCs and using them with Flex applications in the article Understanding the role of CFCs in Flex application development.

3. The CFM page uses the requested data and services to generate the HTML dynamic display and return it to the browser for rendering.

Next, let's take a look at how adding a compiled SWF file enhances this ColdFusion workflow.

Embedding Flex applications in CFML

Figure 7 illustrates how a compiled SWF file is embedded in the HTML code and referenced from the browser.

Steps 1-3 are exactly the same without a SWF file as with one. You can think of a SWF file as an asset like an image. The file is referenced from the HTML code, which prompts the browser to request it from the server. SWF files are rendered in the browser by the Flash Player.

The JavaScript code for embedding the SWF file in Figure 7 is an example from an HTML file that was automatically generated by Flash Builder when the application was compiled.

Requesting ColdFusion server data from Flex applications

The previous section showed you the implications of having a SWF file referenced from your ColdFusion template. What if you want the Flex application to actually retrieve new data and update its UI appropriately? You can do this by directly accessing CFCs from the SWF file as shown in Figure 8.

The ability for a Flex application to directly access data from the server is extremely powerful because it allows for dynamic content to update the Flex application user interface without refreshing the HTML page. It is also a great advantage to you because it decreases the number of requests to the server and the amount of content that is transferred over the network.

Where to go from here

Adobe Flex and Adobe ColdFusion are complementary technologies that can greatly enhance the usability and functionality of your applications. You can implement full-scale Flex applications with ColdFusion services for data or you can implement smaller widgets which live inline with your other HTML and JavaScript content.

• To learn how to create CFCs for use with Flex, refer to the article Understanding the role of CFCs in Flex application development.
• To learn more about the MXML and ActionScript programming languages, refer to the article Introducing the MXML and ActionScript Languages.
• To get started building your first Flex application with Flash Builder and ColdFusion Builder, follow the steps outlined in the 3-part tutorial Set up and build your first Flex and ColdFusion application.