Consuming JSON using Data Centric Development (DCD) feature in Flash Builder 4

Updated for Flash Builder 4 Beta 2

Consuming a HTTP based service returning data in JSON format is very simple using Flash Builder 4. Flash Builder 4 understands JSON format and generates code to invoke the service and also create AS3 data types for the JSON response. To know how, continue reading this article.

In this sample we will create a Flex application which allows users to search using Yahoo search APIs.

Install Flash Builder 4

Download and install Flash Builder 4 from this URL http://labs.adobe.com/technologies/flashbuilder4/

Create a new Flex project

In this screen:

1. Set the project name to “HTTPJSONSample”
2. Set the Application type to “web (run in Adobe Flash Player)”
3. Set the Flex SDK to “Flex 3.4”
4. Click on finish to continue

Using DCD to consume data returned by the server

Data-Centric Development (DCD) is one of the advancements to the Flash Builder 4. Let’s see how DCD is making developers productive. We will use Flash Builder DCD to consume the data from the Java server.

Creating a service

1. Select the Data/Services window shown in the image above. If this is not visible, select it from Window -> Data/Services
2. Click on “Connect to Data/Service” in the Data/Services window
3. Window as shown in the image below will be launched

Selecting service type

Since we are using HTTP Service to communicate with the server, select HTTPService from the options and click on next button to continue.

Setting service properties

A service can have any number of operations. Each service will be a class and each operation of a service will be a function inside the class. Each operation has an URL associated with it, when the operation is invoked a HTTP request is sent to the corresponding URL. We will create a service which will communicate with Yahoo search APIs.

In this screen:

1. Set the operation name to “search”
2. Set the URL of the operation to http://search.yahooapis.com/WebSearchService/V1/webSearch?appid=YahooDemo&query=India&output=json
3. You can see the query string parameters in the URL are added to the “Parameters” section of the operation.
4. Set the Service name to YahooSearchService
5. Click on finish button to create the service

Service will be created and listed in the services explorer as shown in the image below.

Configuring return type

We will configure service to create an AS3 VO class based on the JSON data returned by the server. The VO class will be the return type for the operation. This will make coding easier, since it is easier to deal with strong typed objects.

Right click on the “searchWeb” operation in the services explorer and select “Configure return type” as shown in the image below.

A window as shown in the image below will be launched with options to configure the return type. You can chose an existing data type or let the Flash Builder generate VO classes based on the response from the server. Let’s leave it to the Flash Builder to generate required VO classes based on the server response as shown in the image below.

Click Next to continue.

Entering parameters required by the server

In this screen:

1. Select “Enter parameter values and call the operation”
2. Enter “YahooDemo” for parameter “appId”
3. Enter “India” for parameter “query”
4. Enter “json” for parameter “output”

Flash Builder also allows you to give sample response rather than sending a request to the server to get the data. This will be useful when the server side code is not ready but you want to continue creating the Flex application without waiting for the server. Since we have the server ready in our case, let’s send a request to the server and configure return type. Click on next to continue.

Flash Builder parses the JSON data returned by the server and displays the same as shown in the image below. In this step, you can choose to create a new data type or merge the properties to existing AS3 class.

You can see the response from the server in the window as shown in the image below.

Set the name of the new data type to “SearchResultSet” and click on finish to continue.

You can see the return type of the operation changed as shown in the image below. When we invoke the “search” operation, response will be object of the type “SearchResultSet” will be created based on the response from the server and returned.

Generating form or displaying service results

Flash Builder 4 can generate form based on the response from the server or for the arguments for an operation. Right click on the “search” operation and select “Generate form” as shown in the image below.

You will see a window launched as shown in the image below. Select the service to invoke and the form items to create.

In this screen:

1. Select “New service call”
2. Select “YahooSearchService”
3. Select “search” operation
4. We need form to take input parameters which the service is expecting, so select “Form for input parameters”
5. We will not generate form for return type, so deselect “For for return type”
6. Click on next to continue

You can select the fields for which the form items have to be generated. You will see a window as shown in the image below. Select the fields for which you want the UI controls to be generated and click on finish.

In this screen we are selecting only “query” because that’s the only input we want from the user. We will be hard coding values for other two parameters. Select only “query” and click on finish to continue.

Flash Builder will switch to the source view so that you can enter the parameters to the operation.

In this screen:

1. Change the arguments to the “search” function as shown in the image above
2. Set the first argument to “YahooDemo” which is the application id for Yahoo
3. Set the last argument to “json”, which is the response format

Displaying search result in DataGrid

Switch to design view as shown in the image below. You will see the user input forms generated in previous steps.

In this screen:

1. Set the application layout to vertical
2. Drag and drop a DataGrid from the components panel to the design view
3. Select the DataGrid
4. Set the width of the DataGrid to 100%

Right click on the DataGrid and select “Bind to Data” as shown in the image below.

A window as shown in the image below will be launched.

In this screen, select existing call result. This was the call we created for the input for created in previous steps. We are binding the result of the generated service to the DataGrid. Click ok to continue.

ResultSet was the return type for the “search” operation so the DataGrid is expecting SearchResultSet.ResultSet object from the service call. But the search results are available in the SearchResultSet.ResultSet.Result property as an array of Result objects. Image below shows the data types.

Lets modify DataGrid to show the title and URL of the Result objects.

In this screen:

1. Switch to source view
2. Change the dataProvider property of the DataGrid to “searchWebResult.lastResult.ResultSet.Result”
3. Copy the code below under <mx:columns> of the DataGrid

<mx:DataGridColumn headerText=”Title” dataField=”Title” />

<mx:DataGridColumn headerText=”Url” dataField=”Url”/>

Save and run the application. Application will be launched in the browser enter the string you want to search in the TextInput and click on “Search Web” button. You will see request will be sent and the response being displayed as shown in the image below.

More article on using Flash Builder 4 http://sujitreddyg.wordpress.com/flash-builder-4/

That’s it we created a Flex UI for a JSON response from the Yahoo search API using DCD features in Flash Builder. Flash Builder 4 rocks