Using web services with Data Centric Development in Flash Builder 4 beta

Data-centric development is an exciting new Rapid Application Development (RAD) feature in Flash Builder 4, which helps traditional web and novice Flex developers to quickly build rich data-centric Flex applications that fetch data from various back-ends including ColdFusion, PHP, BlazeDS, LiveCycle Data Services ES, web services, and HTTP services.

Because web services are such a popular mechanism for exchanging data between different applications and platforms on the Internet, Flash Builder 4 provides easy and efficient ways to import, explore, and use web services. Through its unified workflow wizards, Flash Builder 4 helps developers quickly build Rich Internet Applications that leverage existing corporate or public service infrastructures, including web services.

In this article, I will demonstrate these capabilities by showing you how to build an application (see Figure 1) that uses Zenfolio's web service to display photos.

Importing the web service

Note: The sample file ZenfolioProject.zip contains the complete source code for the project. Following the steps in this tutorial will result in a complete application, but you can download the sample file as a reference.

Follow these steps to create a new Flex project and import the Zenfolio web service.

1. Choose File > New > Flex Project
2. Type a name for the project, for example ZenfolioApp.
3. For the Application Type select Web, and for the Application Server Type select None/Other.
4. Click Finish.
5. Choose Data > Connect To Web Service.
6. In the dialog box that appears, type http://www.zenfolio.com/api/1.0/zfapi.asmx?WSDL as the WSDL URI. This is the URI of the WSDL file for Zenfolio's web service.
7. For the Service Name, type ZenfolioService. This is the name that you can use to refer to this service within the current project.
8. For the Service Package, type services.zenfolioservice. This is the name of the package (folder) in which Flash Builder will generate the required ActionScript classes.
9. For the Data Type Package, type valueObjects. This is the name of the package in which Flash Builder will generate the required ActionScript files for the custom data types used by this service.
10. Click Next.

    Flash Builder will introspect the WSDL file and present a list of services, ports, and operations supported by the service.

    Note: A single WSDL file can contain multiple ports for different endpoints exposed over different protocols. The web service wizard in Flash Builder 4 supports the SOAP 1.1 protocol. For this particular WSDL file, the selected port will be ZfApiHttpGet, and as a result you'll see the following notification in the dialog box, “Selected WSDL port is not compliant with SOAP 1.1 protocol. Operations and Entities cannot be read from this port. Please select a different port.”

11. Select ZfApiSoap as the Port.

    You are presented with a list of web service operations that you can use in this service.

12. Click Select All for now, and then click Finish.

That's all there is to it. You have just finished importing the Zenfolio web service into your Flex project.

Exploring the web service

Follow these steps to explore the web service you just imported.

1. Choose Window > Data/Services to display the Data/Services view.
2. In the Data/Services panel, expand the ZenfolioService service to see the Data Types node and a list of operations. The operations are listed with input argument names, argument types, and return types. You can also expand Data Types to see the custom data types used by the service and the corresponding data structure.
3. Locate GetPopularPhotos(), the method you will use in this tutorial (see Figure 2).

The GetPopularPhotos() method takes two int parameters, offset and limit, and returns an array of Photo objects.

The Photo custom data type is defined inside the service, and you can see its data structure under the Data Types node of ZenfolioService or by expanding any operation that returns a Photo type.

Connecting components to data

Now that you've seen the operations provided by the web service, you can create a simple UI that will use those operations.

The UI should include the following components:

• A List to display the list of popular photos with ID lstPhotos
• An Image to display the high resolution version of the selected image with ID imgPhoto
• A NumericStepper to enable the user to set the number of photos to display per page
• A Header and appropriate background color (for example #787878) to make the application attractive

You can create the UI shown in Figure 3 by copying the following code into ZenfolioApp.mxml:

•  Switch to Design view.
• To display the Photo array returned by GetPopularPhotos() in the List component, drag-and-drop the GetPopularPhotos() operation from the Data/Services panel to the List component.

  Note: You can use several alternative approaches for this step. You can right-click the List component and select Bind To Data from the context menu. Or, you can select the List component and then click the Bind To Data icon next to the Data Provider in the Properties panel or click the Bind To Data icon in the Data/Services panel.

• In the Bind To Data dialog box that appears, select GetPopularPhotos as the Operation and select Title as the Bind To Field setting.
• Click OK.
• After Flash Builder 4 generates the required code and switches to Source view, type 1,nsResults.value as the parameters to the GetPopularPhotos() call as shown below:

The generated code in ZenfolioApp.mxml calls the web service operation on the creationComplete event of the List component.

The GetPopularPhotos() operation expects two arguments, and you can pass static values or bind them to other UI components. In this case, you are passing 1 as the offset and nsResults.value (the value set in the NumericStepper control) as the limit.

Defining interactions

If you run the project (choose Run > Run ZenfolioApp), you'll see that the photo titles are displayed in the List control, but no photos are displayed even if you select them.

Note: Calls to the web service may take several seconds to complete; some patience is required.

Follow these steps to add a change event handler on the List control that will display the image whenever the user selects an item.

1. In Design view, right-click the List component and select Generate Change Handler from the context menu.
2. Edit the lstPhotos_changeHandler() method that was generated as shown below to get the URL of the selected image and assign it to imgPhoto.source:

•  Choose Run > Run ZenfolioApp, and you will see the high-resolution image displayed when you select an item from the list.
• To display a thumbnail along with the title of the photo as shown in Figure 1, add an itemRenderer for the List control. In Source view, replace the code for the existing List control with the following MXML code:

Where to go from here

Data-centric development in Flash Builder 4 helps developers quickly build Rich Internet Applications through unified workflows across various back-end technologies. It enables novice developers to get started quickly, and helps experienced developers be more productive. Data-centric development also makes advanced development methods like client side data management, paging, form generation, and chart generation easier for all Flex developers.

For more information on DCD see my introductory blog post on the topic and Tim Buntel's article Data-centric development with Flash Builder 4 beta. Sujit Reddy G also covers DCD in Flash Builder 4 on his blog.

As next steps for the sample application, you may want to add an event handler to the NumericStepper control to implement the results per page feature, or add Next and Previous buttons to navigate to all the photos from Zenfolio.