Note: This article was created based on Flash Builder 4 beta 1. Minor changes in the description and code may be necessary before it can be applied to beta 2.

Adobe Flash Builder 4 beta opens new opportunities for Flex developers—including newcomers and seasoned pros—to build data-centric rich Internet applications. The combination of professional tools, an open source framework, and ubiquitous clients that make up the Flash platform allows you to deliver amazing expressive content and applications.

Most applications, however, also rely on services that reside outside of the platform. Perhaps your application provides reporting and data visualization for information stored in a corporate database. Or perhaps your rich e-commerce application needs to integrate with your existing order management system or a third party payment service. Application functionality enabling everything as simple as sending e-mail and querying databases through integration with cloud hosted services and third party APIs require you to connect to servers or services.

With past releases, developers had to learn various techniques for hand-coding server and service connectivity. Connecting to a SOAP web service, for example, used different MXML tags than connecting to a ColdFusion component or PHP class. In addition, you typically needed to code event listeners and fault handlers; concepts that were uncommon and confusing to developers from the traditional web development world.

With Flash Builder 4 beta, Adobe has changed all of that with a brand new approach to building data-centric applications. New Flex developers will be able to quickly connect to data and services and bind the data to rich UI components, and experienced developers will benefit from powerful new ways to build advanced data-oriented applications.

Data-centric development with Flash Builder 4 beta comprises three main stages:

• defining a data/service model
• binding service operations to Flex components
• implementing advanced data features such as paging and data management

In this article you'll walk through the main steps of building a simple data management application. In this scenario, you have a table in an Oracle database and you want to create a Flex application that will allow users to view the data as well as add, update, and delete records.

Requirements

In order to make the most of this article, you need the following software and files:

Flash Builder 4 beta

• Download
• Learn more

Prerequisite knowledge

Previous experience with Flex Builder is helpful but not necessary. Familiarity with a server side technology such as ColdFusion, Java, or PHP is needed.

Step 1: Create a service

Since applications running in Adobe Flash Player cannot interact directly with an Oracle database, you need a service that can receive requests from Flex and pass them on to the database; the service will also need to send data from the database back to Flex in a format that it can understand. This remote service can be implemented with any number of technologies, and Flash Builder 4 beta has built-in support for services created with ColdFusion, PHP, and Java. Other kinds of services can be used as SOAP web services or HTTP services.

ColdFusion is an ideal choice because it can talk to any back-end database and its easy syntax allows you to create a data access service using just a handful of tags. Plus ColdFusion already knows how to exchange data with a Flex application using a high performance protocol called AMF. There is AMF support for PHP and Java, too, so feel free to use the server technology with which you're most comfortable and productive.

With ColdFusion, you create a ColdFusion component (CFC) with a function for each data operation that the Flex application will need to perform: get all records from the table, add a new record to the table, delete a record, and so forth. The functions in the CFC can return either weakly or strongly typed data (for example, the getAllRecords function could return a ColdFusion query object or an array of objects if you are developing with a more object-oriented approach); Flex can handle either. Be sure that the access property of the cffunction tags is set to remote and test the component. Now you're ready to set up the Flex application to use the service.

Step 2: Build the model in Flash Builder

In Flash Builder 4 beta, the new Data/Services panel is the central location for managing and interacting with all of the servers and services used in your application. Is uses a tree view to represent all of the types of data and operations available in all of the services. The data and services displayed can come from different sources. For example, one can be a ColdFusion component or PHP class and another can be a third-party RESTful service hosted in the cloud. You, however, don't need to worry about how they're each implemented on the server side. There's now a common way to bind their results to UI components and to write code to invoke operations.

To set up the service for use, Flash Builder 4 beta will introspect the service and create the tree view automatically. Choose Data > Connect to ColdFusion (or the technology that you used for your service) in Flash Builder 4 beta. For ColdFusion, you simply provide a name that you'd like to use for the service (for example, EmployeeSvc) and point to the CFC on the file system. This step will vary slightly depending on the technology used for the service (you might specify a WSDL for a web service, for example) but the result is always the same: Flash Builder 4 beta introspects the service to discover what operations and data types it returns, and then builds the tree view of the service in the Data/Services panel.

You can continue to build up the services tree view by adding other services if necessary, or you can begin using that service in the application right away. If the service is weakly typed, though, one more step is required. A weakly typed service returns data, but not information about what that data represents.

For example, if your CFC function returns a ColdFusion query object, Flash Builder 4 beta sees a set of records, but it doesn't know if those records represent a collection of products or employees or sales orders; it's just a collection of data. In order to refer to the results of that operation as a data type, Flash Builder 4 beta lets you manually configure the type of data that the operation returns. Of course, if you use strong typing on the server side, this step is not required.

To set a return type for a weakly typed service, right-click the operation in the Data/Services panel (for example, the getAllItems operation) and select Configure Return Type. This launches a wizard which will help you map the weakly typed data from the server to a strong type in the Flex application. It takes a sample of the operation's actual data and lets you indicate how it should be typed. You specify a name for the custom data type that the operation returns—for example, each record returned could be called an Employee or SalesOrder—and you specify the fields in the data type as well as their format—for example, a string for the first name and a number for the employee id (see Figure 1).

Figure 1. Configure operation return type

Step 3: Connect services to UI controls

Now that you've defined all of the operations that your service contains and defined the type of data that they return, you need to show the results of those operations in the application somewhere. The Flex framework contains a number of components that can be bound to data, including data grids, list boxes, form fields, and so on. These components can display data and allow users to interact with your services.

An easy way to get started laying out the UI and binding the components to operations is in Design View. Switch the editor from Source View to Design View. Design View allows you to drag and drop components from the Components panel onto the application's canvas and position them precisely.

Select a DataGrid (grouped under Data Controls in the Components panel) and drag it out onto the page. You'll notice that the grid isn't bound to any data; if you run the application now it will just be an empty grid with three columns. To have the grid display data that comes back from one of your service operations, simply drag the operation from the Data/Services panel and drop it on the grid. When you do, the grid will change to display the columns returned by the operation. At this point, you can save the project and run it. You will have a working application with a DataGrid populated by your ColdFusion service. There was no code to write, no event listeners to implement, and no need to know if the service was ColdFusion or Java or SOAP.

There are many other ways that you can use the data types and services to quickly build your application UI. You can generate forms from a data type and create master-detail forms, you can drag and drop a service operation onto a button component to automatically have that operation invoked when the user clicks the button (to invoke a save operation, for example), you can drag and drop operations onto chart components, and so on.

The data and services features are not only useful for getting started in design view. By using the service model, you can get code hinting on all of the operations and data types and even customize the behavior of the value objects with the generated subclasses.

Advanced data features

The capabilities exposed through new data-centric features of Flash Builder 4 beta can significantly increase your productivity when creating applications that use data. While it was possible to create the same applications in Flex Builder 3, it required more effort. The new advanced data features, though, go beyond productivity; they enable you to implement functionality that would have been extremely difficult or impossible to do previously.

Client-side data management, for example, is a feature that allows you to map the common data service operations (selecting, creating, updating, and deleting records) on the client to the corresponding data operations on your server. This enables you to perform a number of operations in a batch, enables undo functionality to let your users revert changes, and more.

Another great feature is automatic paging support. If you have a large number of records to display, performance can be a problem if the application needs to fetch and load them all at once. Paging automates the process of fetching a small group of records at a time as needed; all you need is a service that can take arguments specifying a starting row and number of records to fetch in each batch and Flash Builder 4 beta takes care of implementing all of the client-side logic.

Watch for future articles that will go into these and other data features in more detail.

Where to go from here

Whether you're an experienced Flex developer or you're new to the technology, Flash Builder 4 beta allows you to easily create rich application experiences that take full advantage of your existing server-side data and service logic. Visit Adobe Labs to download the software and start giving your users a new view on data today. Meanwhile, don't forget to check out the videos and tutorials on Adobe Labs.

This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License.

About the author