< Previous | Next >

Lesson 2.2: Bind the employees table to the Web service data source

The My Company Directory application displays a list of all current employee records in the directory. The records are displayed in a JTable (employeesTable) with sortable columns, including last name, first name, email, and employee ID. In order to get the records for the table, you need to bind the employeesTable to a data object that is returned by the sample Web service data source.

Overview of data objects, data sources, and binders

In order to get a local data object for the employeesTable to work with, you will use the visual editor to add a data source to your application. The data source connects to the sample Web service proxy and discovers the service methods available to your application. You will then choose the getLightEmployeeRecord service method that is made available from the data source. Finally, you will bind the employeesTable in your application to the fields that are returned in the row data object (lightEmployeeRecordRows).

You can create all of these data sources and data objects quickly and easily by using the Java visual editor's built-in binder classes. The visual editor provides a set of generic interfaces and classes that are generated into your project as you bind visual components to data factories. The binder classes are generated by default into a package named jve.generated. The visual editor provides the binder classes as a generic implementation that you can further customize and enhance to meet your application's needs. This tutorial demonstrates the power and flexibility of even a basic and simple use of the default binder classes.

Important: Before you begin this exercise, it is highly recommended that you read the following help topics. These topics can help you learn more about the functionality and logic behind the data objects, data sources, and binders provided by the Java visual editor:
  • Data binders overview
  • Binder API reference

For this tutorial, you will use a Web service data source, several types of data objects, and several types of binders in your application. When you add instances of these objects to your application, the visual editor adds the necessary classes into the jve.generated package in your project, where you could extend, replace, or rewrite the data binding logic. The Java visual editor provides visual support for the binding objects by showing on the free-form area of the design view the data objects, data sources, and binders that your application is using. The visual editor draws lines between visual components and the data objects and data sources to show the current bindings for any selected object.

The following diagram is a simple overview of how visual components, binders, data objects, and data sources interact. The application that you build in this tutorial illustrates a slightly more complex and creative use of the binders. This diagram does not represent exactly the binders, data objects, and data sources in the sample application that you are building.

Figure 1. This diagram illustrates a sample relationship between visual components, binders, data objects, and data sourcesThis diagram illustrates the relationship between visual components, binders, data objects, and data sources

In Figure 1, each visual component has its own binder that associates it with a data object or, in the case of the button, a data source. The binders for the text fields bind the field to a particular property of the data object. Both the row data object and the data object in this diagram get their data from direct calls to a service on the data source. The data object for the text fields uses a key value from the selected row in the table as its argument for calling Service2, which returns a full record that presumably includes more information about the selected row in the table. This full record, in turn, is used as the argument for the button's action binder when it calls Service3, which could be a method that updates the values entered in the fields. For more detailed explanations of the data objects, data binders, and data sources, follow the links provided earlier.

Generate a Web service Java proxy in your project using the provided WSDL file

In order to work with the Web service running on a server, your Java application requires a Java proxy, or client, to interact with it. Using a WSDL file, you can generate a Java proxy into your Java project using the Web Service Client wizard. Your MyDirectory project includes the EmployeeDirectory.wsdl file that you will use to generate this proxy. After you generate the Java proxy, you can create a data source that represents the Web service and begin binding visual components.

Important: The WSDL file that is used in this exercise assumes that you deployed the Web service on a local installation of WebSphere Application Server and used the default port for localhost (http://localhost:9080). If you deployed the EAR file differently, you must edit the WSDL file accordingly before you proceed.

To generate the Web service Java proxy in your project:

  1. On the main menu, click File > New > Other and select the Web Services > Web Service Client wizard. If the Web Services category is not showing, select Show all wizards.
  2. Use the wizard to define the Web service client:
    1. For the Service definition, enter the WSDL file that is provided in your MyDirectory project: /MyDirectory/EmployeeDirectory.wsdl
    2. In the Client type field, select Java proxy.
    3. Set the slider bar to Deploy client.
    4. Make sure the server is and Web service runtime are set properly for the server you are running. This tutorial has been tested against WebSphere v6.0 and WebSphere v6.1 with the IBM WebSphere JAX-RPC runtime.
    5. Make sure the Java proxy client is output to the MyDirectory project.

    Web Service Client wizard

  3. Click Finish. The Web Service Client wizard generates the Java proxy in a new package (directory.service) in your project.

Bind the employeesTable to a row data object returned by the Web service

Because the employeesTable is the first visual component that you are binding in this application, you need to create a data source that points to the sample Web service proxy that you just added to your project. When you bind other visual components in later exercises, you will reuse this data source. In this step, you add the Web service data source and the lightEmployeeRecordRows data object.

To bind the employees table:
  1. In the Java Beans view or design view, select the employeesTable. (Make sure that you do not select its JScrollPane parent.) A small tab labeled Bind shows on the top of the employeesTable in the design area.

    Bind tab on JTable on graphical canvas

  2. Click the Bind tab on the employeesTable. Alternatively, you can right-click the employeesTable and select Binding Properties.
  3. Because there are no data objects in your application, you need to add a new one. Click New Data Source Data Object.
  4. In the Source type field, select Web service.
  5. Because you have not yet added the Web service data source to your application, you need to add it now. Next to the Data source field, click the ... button to open the Add Web Service Data Source dialog box, which looks for available Web service clients, or proxies, in your project.
  6. Select the EmployeeDirectory Web service and click Finish. A new data source is added to the DirectoryApp.java file.

    Add Web Service Data Source dialog box

  7. On the New Data Source Data Object dialog box, select getLightEmployeeRecords() in the Source service field, and accept the default name for the new data object: lightEmployeeRecordRows. No parameters are needed for this service method. Click OK. The new data object is created and displayed on the free-form area of the design view.

    New Data Source Data Object dialog box

    Tip: Because you are binding a table, the New Data Source Data Object dialog box only displays services that return row data objects. In this case, the getLightEmployeeRecords() method is the only service available that returns an array of objects.
  8. On the Table Data Bindings dialog box, select the lightEmployeeRecordRows data object.
  9. Now, you need to select the properties of the lightEmployeeRecordRows data object that you want to display on employeesTable:

    Table Data Bindings dialog box

    1. Click the double arrow Double arrow button button to add all of the object properties to the Table columns list.
    2. Use the up and down arrows to arrange the columns in the following order, top to bottom: lastName, firstName, email, employeeID
    3. Rename the column titles: Last name, First name, Email, Employee ID
      Tip: After you finish binding the table, you can always go back to the binding properties and rename and reorder the columns at any time.
    4. Click OK.
The employeesTable is now bound to the lightEmployeeRecordRows data object using a JRowTableBinder. If you click the lightEmployeeRecordRows data object on the free-form area, the visual editor draws a line from the data object to the table. On the line, the JRowTableBinder is represented by the table binder Table binder icon icon. Another line indicates that the data object uses the webServiceDataSource as its data source.

View of binder lines for JTable

Lesson checkpoint

Notice the changes to your project and application. During this lesson you added the Web service data source, a row data object, and a binder that binds the employeesTable to the row data object.

Examine the new package (jve.generated) that was created in your project to hold all of the binder classes generated by the Java visual editor. Also notice the new package (directory.service) that holds the Java proxy for the Web service.Describe or summarize what was learned in this lesson.

Packages in the MyDirectory project

Now, when you run the My Company Directory application, the employees table is populated by the Web service with the existing employee records.

< Previous | Next >