< Previous | Next >

Lesson 2.3: Bind the detail fields to the table selection

In the previous exercise, you bound the employeesTable to the lightEmployeeRecordRows data object returned by the getLightEmployeeRecords() service in the Web service. Now you need to populate the details fields based on the employee that is selected in the table.

To get the extra details for each selected employee, another data object is used. The selectedEmployeeRecord data object that you will add is returned by the getFullEmployeeRecord() service. This service takes the ID of the selected employee in the table as a parameter, and it fetches additional details about the employee, including phone number and work location.

The JRowTableBinder that was used when you bound the table to the row data object simplifies this step. The JRowTableBinder exposes the selected element in the table as a separate data object that can be used as the parameter for the getFullEmployeeRecord(java.lang.Integer) method. You can then easily bind each of the text fields to its corresponding property in the selectedEmployeeRecord data object.

The Web service includes two services for getting all the details of each employee. The table lists all employees, and only a subset of data is displayed in the table. Then, when a single employee is selected, you can retrieve the rest of the employee information for that selected employee only. If the Web service sent all data for each employee when the table requested data, the Web traffic could be heavy and cause slower performance of the application.

For example, if the employee record included a photo or an attachment, you would not want to retrieve all photos when you are simply getting the full list of employees. So, the getLightEmployeeRecord service is used to populate the table, and the getFullEmployeeRecord gets the full record for the employee who is selected in the table.

Bind the Last name field

In this step you will bind the Last name field to the lastName property in the selectedEmployeeRecord data object:

  1. In the Java Beans view or the design view, select the JTextField for the last name (lastNameField). The design area shows a Bind tab on the text field.

    Bind tab on a text field

  2. Click the Bind tab to open the Field Data Bindings dialog box.
  3. Click New Data Source Data Object. Although the existing jRowTableBinder data object does return the correct last name, it does not include the full employee record. You need to create a new data object that represents the full employee record.
  4. In the Source type field, make sure that Web Service is selected, and for Data source make sure that webServiceDataSource is selected.
  5. In the Source service list, select getFullEmployeeRecord(java.lang.Integer). The New Data Source Data Object dialog box lists the services that return data objects that are compatible with a text field.
  6. In the Name field, enter selectedEmployeeRecord.
  7. In the Argument field, select jRowTableBinder, and in the Property field, select employeeID. The employee ID of the selected row is now set to be the argument for the getFullEmployeeRecord() service method.
    Note: The getFullEmployeeRecord(java.lang.Integer) requires an integer as an argument. You want to use the employee ID of the current selection in the employees table to retrieve a full record. When you bound the table, the visual editor automatically generated jRowTableBinder, which listens for the current selection on the employees table. For the integer parameter, you will use the employeeID of the selected row in jRowTableBinder.

    New Data Source Data Object dialog box

  8. Click OK.
  9. On the Field Data Bindings dialog box, make sure that selectedEmployeeRecord is selected in the Data objects list. Notice that there are more available properties for the selectedEmployeeRecord data object than for the jRowTableBinder data object.
  10. In the Data object properties list, select the lastName property.

    Field Data Bindings dialog box for lastNameField

  11. Click OK. The last name field in your application is now bound to the lastName property of the selectedEmployeeRecord data object, which is returned by getFullEmployeeRecord().

    A new data object named selectedEmployeeRecord is created and added to your application. A visual representation of the data object is added to the free-form area of the design view, as shown in the following image:

    selectedEmployeeRecord data object

    Now, when you select the lastName field on the design area, a line indicates that it is bound to the selectedEmployeeRecord. In the middle of the line the text binder icon represents the SwingTextComponentBinder that is used for this binding. If you select the line or the icon representing the binder on the design area, you can examine the binder's properties in the Properties view.

Bind the remaining details fields

To bind each of the remaining details fields for an employee, you follow a similar process as the last name field, but you do not need to add the data object. Because you already added the selectedEmployeeRecord data object, you can simply bind each field to its corresponding property in the selectedEmployeeRecord data object.

To bind the fields, complete the following steps for each of the fields in the Employee details section of the application:
  1. Select the field in the design view, and click the Bind tab.
  2. In the Field Data Bindings dialog box, select selectedEmployeeRecord from the Data objects list.
  3. In the Data object properties list, select the appropriate property for the field that you are binding. The following chart shows the property that each text field needs to be bound to:
    Field Property in selectedEmployeeRecord data object
    lastNameField lastName
    firstNameField firstName
    idField employeeID
    emailField email
    phoneField phoneNum
    officeField location.office
    buildingField location.building
    siteField location.site
  4. Click OK.

When you finish binding the text fields, the design area should look like the following image:

View of graphical canvas showing text fields bound

Make the employee ID field read-only

The employee ID field is disabled because the editable property on the field is set to false. However, the default behavior of the text field binder changes the enabled state on the field when the data object contains a value. You can turn off this binder behavior so that the field will remain in its initial read-only state.

To prevent the binder from automatically switching the editable property:
  1. Select the Employee ID field. A line displays on the design area with an icon Text binder icon representing the binder for the field.
  2. Click the binder Text binder icon icon for the Employee ID field.
  3. In the Properties view, change the autoEditable property to false. Press Enter.

Lesson checkpoint

Now, when you run the application and select an employee from the table, the details of that employee's record are displayed in the details fields.

< Previous | Next >