22 March 2010
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.
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:
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).
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.
In this last section, I will discuss two ways that Flex applications are often used with ColdFusion:
But first, let's quickly review how a typical CFML template is processed and displayed to an end user in a browser.
Figure 6 illustrates what happens when a CFML template is processed by the ColdFusion server.
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.
Next, let's take a look at how adding a compiled SWF file enhances this ColdFusion workflow.
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 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.