22 March 2010
Note: This article was written using Flex 4 and/or Flash Builder 4, however, the information described here is still valid for Flex 4.5 SDK and/or Flash Builder 4.5 though some minor changes might be necessary.
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:
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:
Follow these steps to install the Apptacular ColdFusion Builder extension:
Next, you’ll need to set up a new ColdFusion Builder project:
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.
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:
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.
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:
After Flash Builder 4 introspects the service, it will display a list of the methods in the service:
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.
Now you need to tell Flex to populate the data grid with data from the back-end service.
listmethod from the Data/Services view onto the DataGrid control in Design view.
0for both values). Setting
0will remove any limit on records. This can be verified by looking at the code for the
listfunction in artistsService.cfc.
You should see that the data grid has columns for all of the fields in your database.
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).
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
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.