Building the client application

Use the MXML editor to create a user interface. You can use the editor either in Design mode or Source mode.

After laying out the components for the application, bind data returned from the service to user interface components. Generate event handlers as needed for user interaction with the application.

You can also generate a Form from service operations that are available in the Data/Services view.

    Using Design mode to build an application

    Flex provides a rich set of containers and controls that you use to build a user-interface. A container provides a hierarchical structure for organizing and laying out your user interface. Within a container you arrange other containers, navigators, controls, and other components.

    Basic controls are user interface items such as Button, TextArea, and CheckBox. Data-driven controls, such as DataGrid and List components, are ideal for displaying data retrieved from a service. Navigators are containers that control user movement through child containers, such as a tab set.

    In Design mode of the MXML editor drag-and-drop containers and controls from the Components view into the Design Area. Arrange the components and configure their properties. After designing the application layout, bind data returned from the data service to the components.

    Binding service operations to controls

    There are several ways to bind service operations to a user interface component. You can drag service operation from the Data/Service view onto a component in the Design Area. You can also open the Bind to Data dialog to select an operation to bind to a component.

    The Bind to Data dialog is available from the toolbar in the Data/Services view. It is also available in Design mode of the MXML editor when you select a component that accepts data, such as a DataGrid. With the component selected, open the Bind to Data dialog from the context menu for the component. The Bind to Data dialog is also available from the Data Provider field in the Properties view.

    When you bind a service operation to a component, Flash Builder generates MXML and ActionScript code to access the service operation from the client application.

    Return types for service operations

    When binding a service operation to a control, Flash Builder uses the data type of the data returned by the operation. Often, you configure the return type for a service operation before binding it to a component.

    If the return type for a service operation has not been configured, the Bind to Data dialog prompts you to complete this step.

    See Configuring data types for data service operations.

    Bind a service operation to a DataGrid control (drag-and-drop)

    This procedure assumes that you have connected to a data service.

    1. In Design mode of the MXML editor, drag a DataGrid component from Components view to the editing area.

    2. Drag an operation from the Data/Services view onto the DataGrid component.

      If the return type for the operation has been previously configured, Flash Builder binds the operation to the DataGrid component. The DataGrid component changes to show the fields retrieved from the database.

      If the return type for the operation has not been configured, Flash Builder opens the Bind to Data dialog. See Bind a DataGrid control to a service operation (Bind to Data dialog).

    3. Customize the display of the DataGrid.

      See Configure DataGrid and AdvancedDataGrid components.

    4. Save and run the application.

    Bind a DataGrid control to a service operation (Bind to Data dialog)

    This procedure assumes that you have connected to a data service.

    1. In Design mode of the MXML editor, drag a DataGrid component from Component view to the editing area.

    2. With the DataGrid selected, open the Bind to Data dialog using one of the following methods:

      • Select Bind to Data from the Flash Builder Data menu, the DataGrid context menu, or the Data/Services view toolbar.

      • In Properties view, select the Bind to Data button (available near the Data Provider field).

    3. Select New Service Call, then select a Service and Operation.

      If you previously bound a service operation to a component, you can use those results. In this case, specify Existing Call Result and select the operation to use.

    4. (Optional) Select Change Return Type:

      Select Change Return Type if you want to reconfigure the return type for the service operation.

      If the return type for the operation has not been previously configured, select Configure Return Type.

      See Configuring data types for data service operations.

    5. Click OK.

      The DataGrid component changes to show the fields retrieved from the database.

      See Configure DataGrid and AdvancedDataGrid components.

    6. Save and run the application.

    Generating a service call to an operation

    Flash Builder can generate an ActionScript method that calls an operation of a service. The method is not bound to a user interface component, but is available to use in your application code.

    In addition to generating the ActionScript method, Flash Builder creates a CallResponder that provides access to the data returned from the service call. See Call Responder.

    Generate a service call to an operation

    This procedure assumes that you have connected to a data service.

    1. In Data/Services view, select an operation.

    2. From the context menu for the operation, select Generate Service Call.

      Flash Builder generates a method for calling the operation and displays the generated method in Source mode of the MXML editor. Flash Builder creates a CallResponder to hold the results of the service call.

      This option is also available from the Data/Services toolbar.

    Generating a Form for an application

    Forms are one of the most common methods that web applications use to collect information from users. Flash Builder can generate forms for data retrieved from service calls or for custom data types used to access remote data.

    When generating a form, Flash Builder creates a Form layout container and adds components to display or edit the specific data retrieved from the service.

    Flash Builder generates the following types of forms.

    Form

    Description

    Data type

    Contains components representing the fields of a data type.

    Master-detail Form

    The “master” component is typically a data control listing data retrieved from a service.

    The “detail” form represents individual items selected in the master component.

    Service call

    Create two forms. One form specifies the inputs to an operation. The other form displays the returned data.

    When generating a form, specify which fields to include, the type of user interface control to represent each field, and whether to make the form editable.

    Generating a form

    This procedure shows how to generate a form for a service call. The procedures for generating other types of forms are similar. This procedure assumes that you are in Design mode of the MXML editor.

    1. There are several ways to run the Generate Form wizard. From the Data/Services view, select an operation:

      • From the context menu for the operation, select Generate Form.

      • From the Flash Builder Data menu, select Generate Form.

      • Drag the operation from Data/Services view on to a Form Component in the design area.

    2. In the Generate Form wizard, select Generate Form for Service Call.

    3. Select New Service Call or Existing Call Result.

      Specify Existing Call Result to use the code previously generated for a service call.

      Otherwise, specify New Service Call and select a Service and Operation for the Form.

    4. (Optional) Depending on the operation, you have several options on the Form that is generated.

      If the Operation accepts parameters, then you can choose to include a form for the parameters.

      If the Operation returns a value, then you can choose to include a form for the return value.

      You can choose whether to make the form editable or read-only.

    5. (Optional) Configure the Input Types or Return Types.

      If the operation you select has input parameters or returns a value, you can configure the input type or return types.

      Configure the input types and return type for the operation before you can generate the form. If you previously configured these types, you have the option to configure them again.

      See Configuring data types for data service operations.

    6. Click Next. In the Property Control Mapping dialog, select which fields to include in the form and the type of control to represent the data.

    7. Click Finish.

    8. In the design area, rearrange the generated Forms.

      When Flash Builder generates Forms, one Form can be placed on top of another Form. Select and drag one of the Forms to a convenient location.

      Use Source mode to make sure that you select and move a Form, and not a component of the Form. When Flash Builder places one Form on top of another, it can be confusing on how to select the Form. In Source mode, select the tag for one of the Forms. In Design mode, that Form is selected.

    Generating a master-detail form

    To create a master-detail form, first add a data control component to the application and bind the results of an operation to the control.

    For example, add a DataGrid component and bind the results of an operation such as getItems_paged() to the DataGrid.

    1. In Design mode, select a data control, such as a DataGrid.

    2. From the Data menu, select Generate Details Form.

    3. Continue generating the Form, as described in Generating a Form.

    Generating a form for a data type

    To generate a form with components representing the fields of a custom data type, first configure the data type. See Configuring data types for data service operations.

    1. In the Data/Services view, select a custom data type.

    2. From the context menu, select Generate Form.

    3. Make sure that Generate Form for Data Type is selected.and choose a Data Type.

    4. (Optional) You can choose whether to make the form editable.

    5. Click Finish.

    Generating event handlers to retrieve remote data

    When you bind a data service operation to a component, Flash Builder generates an event handler that retrieves data from the service to populate the component.

    For example, if you bind an operation such as getAllItems() to a DataGrid, Flash Builder generates a creationComplete event handler. The DataGrid references the generated event handler. The results of the call become the data provider for the DataGrid.

    . . . 
protected function dataGrid_creationCompleteHandler(event:FlexEvent):void 
{ 
    getAllItemsResult.token = productService.getAllItems(); 
} 
. . . 
<mx:DataGrid creationComplete="dataGrid_creationCompleteHandler(event)" dataProvider="{getAllItemsResult.lastResult}"> 
. . . 
</mx:DataGrid> 
. . .

    When you run the application, after the DataGrid has been created the event handler populates the DataGrid with data retrieved from the service.

    When generating event handlers, you can accept the generated handlers or replace them with others according to your needs. For example, you can replace the creationComplete event handler on the DataGrid with a creationComplete handler on the Application.

    You can also generate or create event handlers for controls that accept user input, such as Buttons or Text.

    Generate an event handler for a user interface component

    1. Create an application that contains a user interface component, such as a DataGrid or a Button.

    2. Switch to Design mode of the MXML editor.

      Do either of the following:

      • From the Data/Services view, drag an operation onto a user interface component.

      • Select the user interface component and then in Properties view, click the generate event icon. Select Generate Event Handler.

        Flash Builder generates an event handler for the default event for the component. For example, for a Button, the event handler would be the Click event.

        Flash Builder opens the Source View of the editor and highlights the generated stub for the event handler.

        Fill in the remaining code for the event handler. Flash Builder provides Content Assist to help you code the event handler.