back

Data-centric development in
Adobe Flash Builder 4

by Brian Rinaldi

Like many ColdFusion, PHP, and Java developers, I struggled when I first learned the Adobe Flex framework. I had to learn ActionScript 3 and MXML, and become familiar with event-driven architectures, asynchronous event processing, and data binding. Needless to say, the learning curve was steep. While I persevered, many developers may shy away from learning Flex.

Now that has changed. With the public beta release of Adobe Flash Builder 4 (formerly Adobe Flex Builder), Flex is now much easier to learn. In fact, Flash Builder includes several new features that resolve the very issues that often trip up ColdFusion, PHP, and Java developers who are getting started with Flex. In this article, I examine how to add services within Flash Builder and utilize them within a project to quickly add data-driven behavior to Flex applications without writing code. I also look at how to use the recently released ColdFusion 9 and the second beta of ColdFusion Builder to rapidly develop a back-end service using Hibernate ORM.

Note: If you haven't already, I encourage you to download the Flash Builder and ColdFusion Builder betas from Adobe Labs, and also download a trial version of ColdFusion 9 to follow along.

It's important to note that while this article focuses on services integration with ColdFusion, new services integration in Flash Builder works with PHP and Java as well as web and HTTP services.

Creating the ColdFusion back end using ColdFusion Builder

When Adobe set out to create a new ColdFusion IDE, the development team added some great features that build on the new enhancements in ColdFusion 9. For example, ColdFusion 9 introduces ORM support via Hibernate. This means that you can save objects (known as CFC instances) to the database without writing any SQL code, which makes the process of building and persisting complex object models in a relational database relatively painless. In simpler terms, I can save and retrieve my data without writing the repetitive Create/Read/Update/Delete (CRUD) code that was typically required.

ColdFusion Builder further simplifies this process by adding extensions that can create new custom features for any aspect of the IDE. One of the included extensions actually generates your ORM object CFCs based on the database schema via the RDS DataView. The ColdFusion ORM has a lot of power (and can get complex where it needs to), but this feature enables developers to hit the ground running without needing to learn the ins and outs of Hibernate integration. The first step, of course, is to install ColdFusion Builder. Be sure that you add a server for your localhost. On my version, a localhost was created by default.

Note: ColdFusion Builder lets you manage many server processes directly from the IDE.

Defining a server enables you to see the RDS FileView and RDS DataView panels as well as any data sources you have defined in the RDS DataView. You can expand each data source to see the tables it contains and further expand each table to see the columns within. Choose Preferences > ColdFusion > Extensions and click Install. In your Eclipse or ColdFusion Builder install folder, there should be a Samples folder that contains a file called Adobe CFC Generator.zip. Select this file and walk through the installation steps. This will add the option to generate ORM CFCs to your RDS DataView (see Figure 1).

Installing the Generate ORM CFC extension for ColdFusion Builder.

Figure 1. Installing the Generate ORM CFC extension for ColdFusion Builder.

Now in the RDS DataView tab on the right, expand your localhost server. If you installed the sample applications with your ColdFusion install (which is the default), you should have a cfartgallery data source. Expand that, right-click the APP.ARTISTS table, and then choose ORM Code Generator > Generate ORM CFC. Choose the application root for your ColdFusion code, leave all the properties selected, and click the Generate Code link.

Let's take a closer look at the generated service component that will become the back-end API for Flex to call so we can see how the ColdFusion ORM implementation works. For this tutorial, you will only use two methods within the service. The first method uses the new entityLoad() function for loading data via Hibernate in ColdFusion 9:

<cffunction name="getAllItem" returntype="ARTISTS[]" access="remote">
   <cfreturn entityload("ARTISTS") />
</cffunction>

A sum total of three lines of code that you didn't even have to write yourself enable you to get an array of Artists objects from the database and pass them to Flex via Flash Remoting (that is, AMF).

In addition, the five simple lines of code below enable you to save any changes to an Artists object back to your database:

<cffunction name="updateItem" returntype="ARTISTS" access="remote">
   <cfargument name="item" type="ARTISTS" required="true" />
   <cfset entitysave(item) />
   <cfreturn item/>
</cffunction>

As you can see, ORM functionality in ColdFusion can save you plenty of boring and repetitive database query coding — and with the provided ORM code generator, you didn't even need to write a single line yourself.

Transitioning the workflow to Flash Builder

Adobe has added a whole array of features for working with server-side data and services built in ColdFusion, PHP, Java, HTTP services, and web services. We focus on just a few of these here, including auto-generating ActionScript service classes and value objects, automatically generating forms, and easily binding events to service calls. Each of these features should help you get started building Flex applications, even if you have minimal experience with either MXML or ActionScript, and none of these features requires that you learn things like event handlers and fault handlers. Flash Builder takes care of the hard stuff for you.

Start by creating a new Flex project in Flash Builder and name it ArtistManager. In the dialog box that opens automatically, select ColdFusion And ColdFusion Flash Remoting as the application server type. Then proceed with the rest of the wizard. Once you are finished with the new project wizard, open the Data/Services tab at the bottom of the Eclipse window and click Connect To Data/Service. When the New Flex Service dialog box appears, select the ColdFusion option. Once you select your service using the file chooser, you can leave the default options for Service Name, Service Package, and Data Type Package (see Figure 2). Click Next and enter your RDS username and password to finish.

Setting up a new Flex service.

Figure 2. Setting up a new Flex service.

Flash Builder creates five files: two that represent the Artists value object (a super object that you do not modify and an Artists.as that you can edit), two similar classes for the service, and a metadata class you don't need to worry about. Open your main MXML file (which, if you used the default, is called ArtistManager.mxml) and choose Design view. Under the Components tab on the lower left, find a data grid and drag it onto the layout. In the Data/Services tab, click the getAllItem() method and drag it onto the DataGrid. When you drop the method onto the DataGrid, you will notice the columns become the properties of the Artists object. We'll leave all the columns there for now, but you can modify which columns are included. Click Run in the main Flash Builder toolbar and then select Web Application as the run type. When your application opens in the browser, it should populate with a list of artists in the DataGrid. Yet you wrote a subtotal of five lines of ColdFusion code and no MXML or ActionScript at all.

The DataGrid populated with a list of artists.

Figure 3. The DataGrid populated with a list of artists.

If this simple DataGrid example doesn't impress you, then perhaps we should make this example a little more complex by adding a detail form that will save edits. To do that, all you need to do is edit one line of ActionScript code.

In Design view, right-click the DataGrid and select Generate Details Form. Leave the default settings selected on the first screen, and on the second screen, disable the ArtistID data element.

Note: Due to a bug in the beta, you may see the options here listed with only a Text Control option; if so, go back to step 1 of the wizard and deselect and then reselect the Make Form Editable option before continuing.

Click Finish. The form generated by Flash Builder may be created over the top of your DataGrid; if so, simply select the form and its elements and drag them below the DataGrid.

If you run the application at this point, you will notice that as you select a DataGrid row, it automatically populates the form with the selected item's data. However, if you modify this data, it will not persist your changes in the database. (You may notice them in the DataGrid, but if you refresh the application window, they'll be lost.) Let's address that shortcoming.

In Design view, drag a button from the Components tab to the stage and change the label to "Save Artist" by simply double-clicking the button element. Next, right-click this button and choose Generate Service Call, which brings up a dialog box showing the available services and their respective methods. Choose the ARTISTSService service and the updateItem() method.

Note: The updateItem() and addItem() generated methods in our service are effectively the same when using ColdFusion ORM.

Clicking OK will take you to the generated event handler within Code view. The text you need to change should already be highlighted. (It reads /*Enter value(s) for */ item.) Change this to dataGrid.selectedItem as ARTISTS, which will pass the item you are currently editing along with your changes to your service. The line within the method should now read:

updateItemResult.token = aRTISTSService.updateItem(dataGrid.selectedItem as ARTISTS);

Run the application again, and you should now be able to edit items and save your edits by clicking the button (see Figure 4).

Editing entries in the application's database.

Figure 4. Editing entries in the application's database.

Summing it all up

At this point, you have a fully functional Flex application to manage artist records in the database—and, if my math is correct, you wrote a sum total of zero lines of ColdFusion code and edited one line of ActionScript. While this may not be the most incredible application you've ever seen, you have to admit that on a scale of functionality vs. lines of code written, it's pretty impressive. You now have a sortable grid of data that can be edited and saved without any page refreshes. Obviously you can, and should, expand on these features in any real-world application, but hopefully, now that you know more about these new features in Flash Builder 4, Flex will seem much more accessible.

‹ Back


Brian Rinaldi is as a Content and Community Manager for the Adobe Developer Center team, where he helps drive content strategy for HTML5 and JavaScript developer content. Brian blogs regularly at http://remotesynthesis.com and is a unreformed twitter addict @remotesynth.