Example of Flex 2 Coldfusion Connectivity

Many months ago I wrote this sample application to explore the new connectivity package for Flex 2 and Coldfusion 7.0.2. It was a lot of fun and a great learning experience. I’ve taken this long to post it because there isn’t any way to run it from here since it requires Coldfusion and a database. This blog doesn’t have access to that and my personal ISP does not have Coldfusion.

So I’ve decided to just put up some pictures, explain the application, and let you download it and run it for yourselves.

What You’ll Need

  • Flex 2 (Flex Builder 2 is needed to get the full flavor of the Connectivity package)
  • Coldfusion MX 7.0.2 (the 7.0.2 is critical)
  • MySQL (or some database that works with CF)

In addition to the source and assets, the download contains a readme.txt, instructions.rtf, and in the sql directory, the schema for creating the database.

Download Mystic Support

Mystic Support

Back when the CF Connectivity package was in development it was code-named Mystic and I’ve called my program Mystic Support. Since I’m a technical support engineer, I decided to put together my vision of what a support engineer needs to open new cases (tickets) and track their progress. We use a similar tool internally, but it isn’t written in Flex :-(

The application is pretty simple and assumes that every support engineer is assigned one or more customers that they work closely with (modeled on Adobe’s Gold and Platinum support plans). A customer can have zero or more tickets open at any given time. A ticket has some details (which product, version, description, etc.) and zero or more notes that track the progress of the case from start to finish.

At any given time the support engineer can see what tickets they have open and can easily open a new ticket for any of their customers.

The program also assumes that some administrator has populated the database with engineers and customers and made the relationship between them (assigning customers to engineers). This might be something you can do as an exercise.

When the program first starts you’ll see the inital screen to let you log in. There’s no security here – you just pick your name from the list. Should this be the first time the program is used, there may be a wait as Coldfusion and the database spin up.

Figure 1: Initializing
Figure 2: Select an Engineer

Once an engineer is selected, their customers and tickets are fetched and displayed in the panels on the left.

Figure 3: Open tickets and customers

To work on an open ticket, the engineer selects it from the list. This causes the ticket’s details to be fetched and a ticket form slides out (I used a Move effect).

Figure 4: Editing a ticket

Coldfusion Connectivity

The list of engineers that is presented is read from the database. Rather than covering all the details of the application in this blog entry, I’ll focus on this one detail, but it should give you an idea of how everything works.

I started with the database table, engineers. The table is pretty simple. Here is what it looks like using the RDS Viewer in Flex Builder 2.

Figure 5: The Flex Builder 2 RDS viewer

To make the application work I needed CFCs and ActionScript classes. Not being a wiz at CF (which proves anyone can use this stuff), I right-clicked the table in the RDS Viewer and selected the CF wizard.

Figure 6: The Coldfusion CFC Wizard

The wizard constructed the CFC for me. Notice that it actually created 2 CFCs: one represents an "engineer" as an "object". The other CFC provides an interface (gateway) with functions to get all of the engineers, get a specific engineer, update an engineer, or delete an engineer. How cool is that?

Once I had the CFC created I wanted a corresponding ActionScript object. So I right-clicked the CFC and picked the CF wizard that generates an ActionScript object. Here is the class it created:

Figure 7: The generated CFCs and ActionScript class

The engineers_gateway.cfc The engineers.cfc
The Engineers.as ActionScript class  
 

Notice the [RemoteClass] metadata – it names the CFC. This is key to the whole thing. When the program makes a RemoteObject call to the CFC (see figure 8), the CFC is set to return an Array of engineering CFC structures. The new 7.0.2 AMF gateway in Coldfusion will package them up into a binary format with clues as to what they are.

Figure 9: The Flex RemoteObject

When the data is received by the Flash Player, the clue for the CFC structure is matched with the RemoteClass metadata and rather than plain Objects, com.adobe.actors.Engineer objects are created with their properties populated from the data.

Figure 9: Flex Builder 2 debugging showing the contents of the returned result

Figure 9 shows what this looks like in the Flex Builder 2 debugger perspective. The program has a break-point in the result handler of the RemoteObject. You can see that when the event.result is expanded, it is in fact, an Array of Engineers.

Summary

You can whip up a Flex application fairly quickly using the Coldfusion Connectivity add-in for Flex Builder 2. Once you have your database tables in place, the CF wizards can create your CFCs and ActionScript classes.

In the code for Mystic Support you’ll see that I have condensed the ‘gateway’ CFCs (there would be one for each of the structure CFCs) into a single file. That’s another option you have: the ability to edit the files and use them as you please. After I worked with the code enough, I tossed out all of the functions I wasn’t going to use and repacked them into a more efficient bundle.

If you have Coldfusion and want to give your applications some FLEXappeal, give the Coldfusion Connectivity package a try.