Using Flash Builder and ColdFusion Builder in an integrated workflow

Flash Builder 4 and ColdFusion Builder were designed to work together to turbo charge your RIA building efforts. Each complements the other. This article is an introduction to using these two products together.

Flash Builder 4 is the newest version of the Adobe IDE for Flex; in previous releases it was known as Flex Builder. In addition to being updated to handle version 4 of the Flex framework, Flash Builder 4 has powerful data integration features that make wiring back-end code to front-end interfaces as easy as dragging and dropping.

ColdFusion Builder is the long awaited IDE for ColdFusion. This is the first IDE for ColdFusion since ColdFusion Studio last shipped with ColdFusion 5 in June of 2001. It is a completely new IDE and doesn’t inherit anything from ColdFusion Studio. Based on Eclipse, it can work seamlessly with other Eclipse plug-ins and IDEs including Flash Builder 4.

In this article you’ll learn how to use Flash Builder 4 to build a simple front end that accesses the cfartgallery data source on a ColdFusion server via a back end that you’ll wire up using a ColdFusion Builder extension. Here’s the best part: You are going to write almost no code.

Flash Builder 4 and ColdFusion Builder are both IDEs based on the Eclipse platform. This means that they can be installed as plug-ins into an existing Eclipse environment. Additionally, both can be installed as a standalone IDE, which will gloss over some Eclipse features. As a result, you have four options to choose from when setting up ColdFusion Builder and Flash Builder 4 together:

• Install both as standalone IDEs
• Install ColdFusion Builder as standalone; install Flash Builder 4 as a plug-in
• Install Flash Builder 4 as standalone; install ColdFusion Builder as a plug-in
• Install both as plug-ins to your existing Eclipse setup

Any of the above will work. For best results they should be installed together so that you don’t have to run two copies of Eclipse—so stay away from installing them both as standalone IDEs unless you have to.

The first step is to create a service in ColdFusion that can be consumed in Flash Builder 4. You could hand write all of this code, but one of the great features of ColdFusion Builder is the ability to extend it with ColdFusion code, package those extensions, and share them. In this tutorial, you’ll use an extension called Apptacular that handles code generation.

Apptacular is a ColdFusion Builder Extension that handles scaffolding of applications from existing databases. The idea behind it is that you point it at a database and it will generate all the code you might need for an administrative application. It creates the following for you:

• CFCs that work with ORM for every table in your database with a primary key
• Custom tags to use with editing, reading, and listing the records in your database
• A ColdFusion page per table that presents the edit, read, and list views
• A remote service per table that allows the application to work with Flex easily
• This tutorial makes use of the remote services. Additionally, Apptacular can wire up things like authentication, unit tests, custom user interfaces, and extra data. Those features lie outside the scope of this tutorial.

Install Apptacular

Follow these steps to install the Apptacular ColdFusion Builder extension:

1. Download Apptacular.zip, the sample file for this tutorial.
2. Locate the ColdFusion Builder Extensions view. If it is not open, choose Window > Show View > Other. Then, in the Show View dialog box, select ColdFusion > Extensions view and click OK.
3. Click the plus (+) button to install a new extension.
4. Locate and select Apptacular.zip; click Open.
5. On the first screen of the Extension Installation Wizard, click Next.
6. Choose a server to use with Apptacular. If you haven’t defined any servers yet, you’ll need to add one first.
7. Accept the default options for Install Details (see Figure 1).
8. Click Finish.

Create a new project in ColdFusion Builder

Next, you’ll need to set up a new ColdFusion Builder project:

1. Choose File > New > ColdFusion Project
2. For the Name, type ADCDemo
3. Deselect Use Default Location.
4. Browse to your ColdFusion webroot and create a new folder named adcdemo; select that folder and click Next.
5. Choose a server to use with this project.
6. Click Finish.

Use Apptacular to generate an application

Writing a ColdFusion back end to provide services for Flex is pretty easy, but it can involve too much repetitious typing. Instead of doing all that typing, you’re going to use ColdFusion Builder to generate the application back end for you.

Note: You’ll need Remote Development Service (RDS) enabled in order to complete the following steps. For more information, see Disabling/enabling ColdFusion RDS. For security reasons, you do not want RDS enabled in a production environment.

1. In ColdFusion Builder click the RDS Dataview tab. You can choose Window > Show View > RDS Dataview if it is not open.
2. Expand your ColdFusion server.
3. Expand the cfartgallery data source.
4. Expand the tables folder.
5. Right-click the APP.ART table, and select Apptacular > Generate Application (see Figure 2).

6. In the Apptacular Generate Application dialog box, click Browse.
7. Select ADCDemo and click OK.
8. Verify that the Destination has been filled in with the ADCDemo folder and click OK again.
9. It can take a while for Apptacular to generate the application, but after a few moments you’ll see a notice that says “52 Files Generated in xxx seconds”.
10. Click Close.

The ADCDemo project should now contain files and folders.

Take a moment to look through the code that Apptacular created. The code you’ll be most interested in is in the services folder. Open the artistsService.cfc file and look at the methods defined within it. You’ll see that the methods used to access the Artists table in this CFC are defined as remote and can therefore be called from Flex.

You’re now ready to use your newly created ColdFusion services in Flex.

Follow these steps to create a new Flex project:

1. Switch to Flash Builder 4. If you’re using a combined Eclipse installation, choose Window > Perspective > Flash.
2. Choose File > New > Flex Project to create a new project.
3. For the Project Name, type ADCFlex.
4. For the Application Server Type select ColdFusion.
5. Select ColdFusion Flash Remoting.
6. Click Next.
7. Verify your ColdFusion server configuration and click Validate Configuration.
8. When the validation is successful, click Finish.

You could have created the Flex front end in the same folder as your ColdFusion code, but I prefer not to combine them so I used separate folders. This is my preference mostly because of the differences between Flex and ColdFusion. In ColdFusion, the source files sit on a web server and are called directly; in Flex source files are compiled and the resulting SWF is moved to the web server. Keeping the two types of projects separate just makes more sense for me.

Import the service using the Data/Services view

Before you write any Flex code, you need to wire up the service CFC you just created in ColdFusion Builder. Using the new Data/Services feature in Flash Builder 4, you can access a variety of services in Flex, including not only ColdFusion CFCs, but also SOAP and REST web services.

Follow these steps to set up the service in your Flash Builder 4 project:

1. In Flash Builder 4 open the Data/Services view (choose Window > Data/Services if it is not already open).
2. Click Connect to Data/Service.
3. Select ColdFusion and click Next.
4. Locate and select the artistsService.cfc file in the services folder of your ADCDemo ColdFusion Project.
5. Click Next.
6. You will be prompted for your ColdFusion server’s RDS username and password. Type your username (if required) and password, and click OK.

   After Flash Builder 4 introspects the service, it will display a list of the methods in the service:

   • get
   • destroy
   • list
   • search
   • count
   • update
7. Click Finish.

   You can now see the methods of the CFC listed in the Data/Services view.

   Now that you have pulled in the artistsService CFC from ColdFusion, you’re ready to display the data.

8. In Flash Builder 4, switch to Design view.
9. Drag a DataGrid control from Components panel onto the main design window.

   Now you need to tell Flex to populate the data grid with data from the back-end service.

10. Drag the list method from the Data/Services view onto the DataGrid control in Design view.
11. When Flash Builder 4 switches to Code view, you’ll see a comment prompting you to enter a value for offset and maxresults.
12. Type 0,0 (that is, 0 for both values). Setting maxresults to 0 will remove any limit on records. This can be verified by looking at the code for the list function in artistsService.cfc.
13. Switch back to Design view.

    You should see that the data grid has columns for all of the fields in your database.

14. Save your work and choose Run > Run ADCFlex to compile and run your application.

When the application launches in your browser you’ll see all of the records in the Artists table in the data grid. You just wired up a database to a Flex 4 application without writing a single line of code (unless you count the zeros you had to type in Code view).

Where to go from here

Of course, you can do much more in this application. The Data/Services feature pulled in all of the standard CRUD (Create, Read, Update, Delete) methods into your Flex application. So you can, for example, drag and drop the destroy or update methods onto Flex buttons to flesh out your simple application.

Some people may be uncomfortable with their tools doing so much of the work for them. As developers we want to have control over our code. In both Flex and ColdFusion, you have full access to the code that is generated to make this happen. If you don’t like any of it, you can alter it. Even better, the ColdFusion extension is written in ColdFusion and accessible to you. If you don’t like the custom code, don’t just change the code, change the generator.

At some point all of us have to knuckle down and get some code flowing. With Flash Builder 4 and ColdFusion Builder, you still do that, it’s just that all of the rote work is done for you. You still bring your talent to code, but you can focus on the great work not grunt work.