Data-centric development with Flash Builder 4

Adobe Flash Builder 4 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, 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 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 a 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.

Step 1: Create a service

Since applications running in Adobe Flash Player cannot interact directly with a 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 has built-in support for services created with ColdFusion, PHP, and Java and an extensible framework for supporting other technologies. Other kinds of services can be used as SOAP web services or HTTP services or XML files.

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. In addition, 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. The component can also be generated using ColdFusion Builder or by using the generate sample option available in Flash Builder 4 (see Figure 1). 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, the new Data/Services panel is the central location for managing and interacting with all of the servers and services used in your application. The panel displays 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 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. 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 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’s operations are weakly typed, though, one more step is required. A weakly typed operation returns data, but not information about what that data represents.

For example, if your CFC function returns a ColdFusion query object, Flash Builder 4 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 lets you manually configure the type of data that the operation returns. Of course, if you use strong typing on the server side or have used the generate sample option in Flash Builder 4, this step is not required.

To set a return type for a weakly typed service operation, 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 2).

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, you can choose the data provider (see Figure 3), having done that, 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 and if you want to modify the columns displayed you can do it using the configure columns option. 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, generate code to just invoke a service operation without binding it to a component and so on.

If you are modifying your server side code often and want to just test your operations, the Test Operation option will be handy, and if you modify or add operations to your service file, Flash Builder 4 automatically refreshes your service to reflect the changes and merge any modifications to your data types that has taken place.

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 you can even customize the generated code for invoking service operations and the behavior of the value objects by extending the generated classes.

Advanced data features

The capabilities exposed through new data-centric features of Flash Builder 4 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 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 allows you to easily create rich application experiences that take full advantage of your existing server-side data and service logic. Download the software and start giving your users a new view on data today.