Requirements      
Prerequisite knowledge Required products
  User level
Some experience with developing Flex applications will be helpful for this tutorial.
Flash Builder 4 (Download trial)
 
Beginning
       

 

One of the new data-centric development features in Flash Builder 4 is form generation, and it's going to make life easier for Flex developers. Now, you can automatically generate form code for data types or service calls and bind the controls to the properties of the required data type—all with just a few clicks of your mouse.
 
In this tutorial I will show three different ways in which you can generate a form using a sample service.

 
Getting started

In Flash Builder, you can generate forms for the following:
 
  • A data type. You can automatically generate controls that are bound to each property of a data type.
  • A service call. You can generate a form either for the input parameters or for the return type of a service call.
  • A master detail view. When there is a control (for example a List or ComboBox) that displays the instances of a data type, you can generate a form that displays the details of the selected item in the control.
The examples in this tutorial use a service called Population, which is available here.
 
Follow these steps to connect to the web service in Flash Builder 4:
 
  1. Choose File > New > Flex Project
  2. Type PopulationApp for the Project Name, select None/Other for the Application Server Type, and click Finish (see Figure 1).
Creating a new project
Figure 1. Creating a new project
  1. Locate the Data/Services view in Flash Builder. If the view is not open, select Window > Data/Services (see Figure 2).
The Data/Services view
Figure 2. The Data/Services view
  1. Click Connect To Service.
  2. In the Select Service Type dialog box, select Web Service (see Figure 3) and click Next.
Selecting Web Service as the service type
Figure 3. Selecting Web Service as the service type
  1. For the WSDL URI, type http://www.abundanttech.com/WebServices/Population/population.asmx?WSDL.
  2. For the Service Name, type Population (see Figure 4).
  3. Click Next.
Connecting to a web service
Figure 4. Connecting to a web service
  1. After Flash Builder introspects the service, select PopulationWSSoap as the port (see Figure 5).
  2. Click Finish
Configuring the code generation
Figure 5. Configuring the code generation
The service is now visible in the Data/Services view (see Figure 6).
 
The Population service in the Data/Services view
Figure 6. The Population service in the Data/Services view
For a more detailed explanation of the setup steps, see my blog post on Connecting to WebServices using the Data Centric Development (DCD) feature in Flash Builder 4.
 

 
Generating a form for a data type

As a first example, you can generate a form to enter the details of an object of type Population_type. Follow these steps:
 
  1. In the Data/Services view, right-click Population_type, and select Generate Form (see Figure 7).
Selecting Generate Form from the context menu
Figure 7. Selecting Generate Form from the context menu
  1. In the Generate Form dialog box, leave the default settings (see Figure 8) and click Finish.
Specifying the form generation details in the Generate Form dialog box
Figure 8. Specifying the form generation details in the Generate Form dialog box
  1. Switch to Design view to see the generated form (see Figure 9).
  2. Change the form label from _Date to Date so that it doesn't look odd.
The generated form in Design view
Figure 9. The generated form in Design view
  1. Choose Run > Run PopulationApp to run the application. You will see the editable form with each property of the data type (see Figure 10).
The editable form
Figure 10. The editable form
You can then edit the click handler of the Submit button to give the form a specific function.
 

 
Generating a form for a service call

Next, you'll see how to generate a form to display the returned data from the service call getWorldPopulation() .
 
  1. In the Data/Services view, right-click the getWorldPopulation() service call and select Generate Form (see Figure 11).
Selecting Generate Form from the context menu
Figure 11. Selecting Generate Form from the context menu
  1. In the Generate Form dialog box, ensure that New Service Call is selected for the getWorldPopulation() operation of PopulationService (see Figure 12).
  2. Since the form displays the returned object from the getWorldPopulation() operation, select Form For Return Type, deselect Make Result Form Editable, and then click Configure Return Type.
The Generate Form dialog box
Figure 12. The Generate Form dialog box
  1. Select Auto-detect The Return Type From Sample Data and click Next (see Figure 13).
The Configure Return Type dialog box
Figure 13. The Configure Return Type dialog box
  1. Select Use An Existing Data Type and then select Population_type (see Figure 14).
  2. Click Finish.
Selecting the return type detected
Figure 14. Selecting the return type detected
  1. Click Finish again in the Generate Form dialog box (see Figure 15).
The Generate Form dialog box after the return type has been configured
Figure 15. The Generate Form dialog box after the return type has been configured
  1. After Flash Builder generates the form, you can drag it to a new location in Design View and change the form labels as you did with the previous example.
  2. Run the application to see how the generated form displays the returned values from the getWorldPopulation() operation (see Figure 16).
The generated form displaying the world population returned by the service call
Figure 16. The generated form displaying the world population returned by the service call

 
Generating a master detail view

Next, you'll see how to create a master detail view. In this example a ComboBox service as the master control and displays instances of the data type. The form shows the details of the selected item in the master control.
 
Follow these steps to see how it works:
 
  1. In Design view, drag a ComboBox onto your application.
This ComboBox is your master control, which will display a list of countries.
 
  1. Right-click the ComboBox and select Bind To Data (see Figure 17).
Selecting Bind To Data from the context menu
Figure 17. Selecting Bind To Data from the context menu
  1. In the Bind To Data dialog box, you choose the service and operation that you want to bind the ComboBox to. In this case, select New Service Call and then select the getCountries() operation (see Figure 18).
  2. Click OK.
Binding the ComboBox to the data
Figure 18. Binding the ComboBox to the data
You have successfully bound the master control to its data.
 
  1. Run the application and click the ComboBox control; you should see a list of countries (see Figure 19).
The ComboBox displaying a list of all the countries
Figure 19. The ComboBox displaying a list of all the countries
  1. To generate the details form, right-click the ComboBox in Design view and select Generate Details Form (see Figure 20).
Selecting Generate Details Form from the context menu
Figure 20. Selecting Generate Details Form from the context menu
  1. In the Generate Form dialog box, leave Master-Detail selected as the form to generate and ensure Make Form Editable is deselected since you don't need an editable one in this case.
In this example, the Population service has an operation named getPopulation(String), which takes the name of the country as an argument, and returns the details of that country.
 
  1. So, select Call A Service To Get The Detail Data When The Master Selection Changes.
  2. Make sure the service and the getPopulation() operation are selected (see Figure 21).
  3. Click Finish.
Generating a master detail form
Figure 21. Generating a master detail form
Flash Builder will switch to Source view and highlight the change handler for the ComboBox. You'll see the following code:
 
protected function comboBox_changeHandler(event:IndexChangeEvent):void { getPopulationResult.token = population.getPopulation(/*Enter value(s) for */ strCountry); }
  1. Change the parameter to the getPopulation(String) operation to comboBox.selectedItem.toString().
The code should look like this:
 
protected function comboBox_changeHandler(event:IndexChangeEvent):void { getPopulationResult.token = population.getPopulation(comboBox.selectedItem.toString()); }
  1. Back in Design view, you can modify your details form by changing the labels and adjusting its position.
  2. Run the application (see Figure 22).
The generated master detail view
Figure 22. The generated master detail view
When you change the selected country in the ComboBox, a service call is made and the population details of that particular country are fetched and displayed.
 

 
Where to go from here

You have just seen how easy it is to create a form for a data type, for a service call, and for a master detail view using the data-centric development features in Flash Builder. To learn more about Flash Builder 4 and data-centric development, see Data-centric development with Flash Builder 4.