Generating forms in Flash Builder 4

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.

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).

3. Locate the Data/Services view in Flash Builder. If the view is not open, select Window > Data/Services (see Figure 2).

4. Click Connect To Service.
5. In the Select Service Type dialog box, select Web Service (see Figure 3) and click Next.

6. For the WSDL URI, type http://www.abundanttech.com/WebServices/Population/population.asmx?WSDL.
7. For the Service Name, type Population (see Figure 4).
8. Click Next.

9. After Flash Builder introspects the service, select PopulationWSSoap as the port (see Figure 5).
10. Click Finish

The service is now visible in the Data/Services view (see Figure 6).

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.

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).

2. In the Generate Form dialog box, leave the default settings (see Figure 8) and click Finish.

3. Switch to Design view to see the generated form (see Figure 9).
4. Change the form label from _Date to Date so that it doesn't look odd.

5. Choose Run > Run PopulationApp to run the application. You will see the editable form with each property of the data type (see Figure 10).

You can then edit the click handler of the Submit button to give the form a specific function.

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).

2. In the Generate Form dialog box, ensure that New Service Call is selected for the getWorldPopulation() operation of PopulationService (see Figure 12).
3. 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.

4. Select Auto-detect The Return Type From Sample Data and click Next (see Figure 13).

5. Select Use An Existing Data Type and then select Population_type (see Figure 14).
6. Click Finish.

7. Click Finish again in the Generate Form dialog box (see Figure 15).

8. 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.
9. Run the application to see how the generated form displays the returned values from the getWorldPopulation() operation (see Figure 16).

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.

2. Right-click the ComboBox and select Bind To Data (see Figure 17).

3. 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).
4. Click OK.

You have successfully bound the master control to its data.

5. Run the application and click the ComboBox control; you should see a list of countries (see Figure 19).

6. To generate the details form, right-click the ComboBox in Design view and select Generate Details Form (see Figure 20).

7. 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.

8. So, select Call A Service To Get The Detail Data When The Master Selection Changes.
9. Make sure the service and the getPopulation() operation are selected (see Figure 21).
10. Click Finish.

Flash Builder will switch to Source view and highlight the change handler for the ComboBox. You'll see the following code:

11. Change the parameter to the getPopulation(String) operation to comboBox.selectedItem.toString().

The code should look like this:

12. Back in Design view, you can modify your details form by changing the labels and adjusting its position.
13. Run the application (see Figure 22).

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.

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.