Getting Started with Coldfusion MX and Flash Remoting

One of the cool new features of Macromedia ColdFusion MX is Macromedia Flash Remoting. Macromedia Flash Remoting allows you to use ColdFusion MX functionality in your Macromedia Flash movies easily using familiar Macromedia Flash syntax and objects.

Today, we’ll walk through a simple Macromedia Flash Remoting example. The SWF will use Macromedia Flash Remoting to call a ColdFusion MX component (also known as a CFC) on the server. The ColdFusion component will return a string, which will be loaded into Macromedia Flash and displayed.

Getting Started

1. Download the tutorial files.

All the files you’ll need can be downloaded here (35 KB).

Create a folder at cf_webroot\com\macromedia\test. Unpack the ZIP file into the test folder. Note that throughout the tutorial, we’ll refer to cf_webroot Your cf_webroot varies based on your installation location.

2. Install the required software

The software we’ll use through the tutorial includes:

• Macromedia Flash MX
• Macromedia ColdFusion MX
• Flash Remoting Components for Macromedia Flash MX

Creating the Server-side Code

The server-side code is a simple ColdFusion component. It’s included in the file HelloWorld.cfc in the com/macromedia/test folder, and note that the file name HelloWorld.cfc also determines the service name for the component. So in this case, the service name is HelloWorld. If you open HelloWorld.cfc in a text editor, you’ll see this:

<cfcomponent name="HelloWorld">

 <cffunction name="sayHello" access="remote">
   <cfreturn "Hello World">
 </cffunction>

</cfcomponent>

As you can see, it’s pretty simple to create a basic component – we simply use the cfcomponent tag. Although the component represents a Macromedia Flash Remoting service, it does nothing by itself.

In order to make the component function, we add the cffunction tag -- which is a method -- to it. Thus, the component now contains a cffunction tag named "sayHello," in which the cfreturn tag is nested. And when you call this component, it returns a "HelloWorld" string to whichever URL or service etc. called the method. You can have as many functions as you’d like inside a component, but for this example, we’ll include just the one.

Notice also that the access attribute value is "remote" within the cffunction tag. This attribute is required if you want Flash movies (or other remote services) to access the component methods.

And that’s it! We’ve successfully created a component. Note that the corresponding file is located here
coldfusionmx_webroot\com\macromedia\test\HelloWorld.cfc

Why did I instruct you to place the files in that folder? Well, components aren’t referred to just by name – they’re also referred to by location (in this case, coldfusionmx_webroot\com\macromedia\test\). So by placing your component in the com\macromedia\test folder, you:

1. Ensure that another developer on your team doesn't overwrite your “HelloWorld" component with a "HelloWorld" component of his or her own.
   
2. adopt best practice organization of your components.

So, what’s next? At this point you could start building Macromedia Flash code to access your component, but first, let’s make a simple ColdFusion page to ensure that the component actually works. If we test it now, it’ll be easier to debug any problems that may arise than it would be to debug once we’d started working with Macromedia Flash MX.

In the cfusionmx_webroot/com/macromedia/test/ directory, there is a file named test.cfm which contains the following code:

<cfoutput>
 <cfinvoke  
         component="com.macromedia.test.HelloWorld"  
         method="sayHello"  
     returnVariable="message"  
         />
     #message#
</cfoutput>
The file test.cfm uses the cfinvoke tag to call the component and then print the component's output with the cfoutput tag. Let’s now take a quick look at the cfinvoke tag's attributes to understand what's going on.

The code which reads:

component="com.macromedia.test.HelloWorld"

specifies which component will be called. The path, com.macromedia.test.HelloWorld points to the com\macromedia\test\HelloWorld file relative to cf_webroot folder.

The following code:

method="sayHello"

specifies the function or method that is to be executed within the component.

The next section:

returnVariable="message"

specifies the variable name we’ll use to store any data returned from the component. We’ll use this variable to return the string from the component method, and the cfoutput tag to display the variable in the Web browser.

Save the ColdFusion page, test.cfm, and view it in a Web browser, at http://localhost/com/macromedia/test/test.cfm (change the domain name, or add a port number as necessary for your particular set up). The message "Hello World" should display. If it doesn't, or you receive an error, check your component code, the CFML test page, and the URL for typos.

You've just experienced the power of components! They allow you to create modular code that can be used in many ways, and even by multiple programs (in this case, ColdFusion MX and Macromedia Flash MX). Now you're ready to connect to your component with Macromedia Flash MX!