Adding Event and Initialization Code

Note: NetBeans IDE 6.1 features on-demand binding. Where components require Java coding, you must now manually add the binding attribute to components in a Visual Web JSF application. To do so, right-click each component and choose Add Binding Attribute. For more information, see the On-demand Binding Attribute Wiki.

You now associate the personDD Drop Down List with the Table component to enable the following behavior: When the user selects a person from the list, that person's trips will appear in the table.

1. Double-click the personDD Drop Down List to create a value change event method and to open the Java Editor on that method.

2. In personDD_processValueChange method, add the bold text in Code Sample 1, and then press Alt-Shift-F to reformat your code.

   Code Sample 1: Drop Down List Event Handler

   public void personDD_processValueChange(ValueChangeEvent event) { Object selectedPersonId = personDD.getSelected(); try { personDataProvider.setCursorRow( personDataProvider.findFirst("PERSON.PERSONID", selectedPersonId)); getSessionBean1().getTripRowSet().setObject(1, selectedPersonId); tripDataProvider.refresh(); form1.discardSubmittedValues("save"); } catch (Exception e) { error("Cannot switch to person " + selectedPersonId); log("Cannot switch to person " + selectedPersonId, e); } }

   
   

   At the end of the try clause, the statement form1.discardSubmittedValues("save") ensures that whenever the user selects a new person from the drop-down list, current trip information shown in the table will be replaced by new information related to the chosen person. Recall that all user interface elements in the table that display the trip information participate in the virtual form named save.

   Note also that the event handler does not throw exceptions. Instead, it logs them in the server.log file. The event handler also calls an error method that, in the event of an error, displays a message in the Message Group component.

3. Scroll in the Java source to the prerender method, or, if you prefer, type Ctrl-F and search for prerender. Add the following code in bold to the method.

   Code Sample 2: Prerender Method

   public void prerender() { if ( personDD.getSelected() == null ) { Object firstPersonId = null; try { personDataProvider.cursorFirst(); firstPersonId = personDataProvider.getValue("PERSON.PERSONID"); personDD.setSelected(firstPersonId); getSessionBean1().getTripRowSet().setObject( 1, firstPersonId); tripDataProvider.refresh(); } catch (Exception e) { error("Cannot switch to person " + firstPersonId); log("Cannot switch to person " + firstPersonId, e); } } }

4. Right-click in the Java Editor and choose Format to make the code align correctly.

Testing Your Application – Part 1

Build, deploy, and run the project by clicking the Run Main Project button  on the main toolbar. When the page loads into your web browser, the drop-down list is populated with names, and the table is filled with data. When you select a different name from the list, the trips associated with that name appear in the table.

Adding an Insert Feature

In this section, you add a feature that makes it possible to add a trip to the table by inserting a rowset into the database. First, you provide Message components for the Table's Text Fields. These components ensure that the user sees errors when entering incorrect information. Then you add a Button to the page that enables users to add new rows to the data buffer.

Note: NetBeans IDE 6.1 features on-demand binding. Where components require Java coding, you must now manually add the binding attribute to components in a Visual Web JSF application. To do so, right-click each component and choose Add Binding Attribute. For more information, see the On-demand Binding Attribute Wiki.

1. Click the Design button to view Page1 in the Visual Designer.
2. From the Woodstock Basic section of the Palette, drag a Message component onto the topmost Text Field in each of the first three columns of the Table.
3. Select the first Message component. In the Properties window, scroll to the for property and choose textField1 from the drop down list. When the Message is correctly associated with the Text Field, the Message text changes to show the association, as shown in the figure below.
4. Set the for property of the second Message component to textField2.

5. Set the for property of the third Message component to textField3.

   Make sure that your application looks like the figure below.

   
6. From the Woodstock Basic section of the Palette, drag a Button component onto Page1 and place it above the Table component near the top of the second column, as shown in the figure above.

   Note: There is a known issue that affects the width of the JSF 1.2 Button component in IE7. The workaround is to place the Button component in a layout component (Grid Panel, Group Panel, or Layout Panel). Resizing the layout component automatically resizes the Button component.

7. Change the text from Button to Add Trip.
8. In the Properties window, change the button's id property to add.
9. In the Visual Designer, double-click the button to open the Java Editor with the insertion point in the add_action event handler method for the button.

10. Add the following code shown in bold to the button's event handler method:

    Code Sample 3: Add Trip Action Code

    public String add_action() { try { RowKey rk = tripDataProvider.appendRow(); tripDataProvider.setCursorRow(rk); tripDataProvider.setValue("TRIP.TRIPID", new Integer(0)); tripDataProvider.setValue("TRIP.PERSONID", personDD.getSelected()); tripDataProvider.setValue("TRIP.TRIPTYPEID", new Integer(1)); } catch (Exception ex) { log("Error Description", ex); error(ex.getMessage()); } return null; }

11. Right-click in the Java Editor and choose Fix Imports to resolve the RowKey not found error.

    The IDE adds the following package to the Page1.java block of import statements:

    import com.sun.data.provider.RowKey;

Testing Your Application – Part 2

Build, deploy, and run the project by clicking the Run Main Project button . The page loads into your web browser, and the Add Trip button appears, as shown in the following figure. Each time you click the button, a new empty row is appended to the bottom of the table. You are able to edit the information in the row, but because you have not yet provided a mechanism for saving the rowset, your changes will be lost when you choose a different name from the drop-down list.

Modifying the Page to Save Rowsets

In this section, you add a second rowset to the project. The rowset is used to calculate the maximum trip ID that has been used.

1. Click Design in the editor window to return to Page1 in the Visual Designer.

2. Open the Services window, select the Databases > Travel > Tables > TRIP table, and drag it onto the SessionBean1 node in the Navigator window.

   
   This action creates two new subnodes of SessionBean1: tripDataProvider and tripRowSet1.

3. In the Add New Data Provider dialog, select the Create SessionBean1/tripRowSet1 radio button, change the data provider name to maxTripRowSet, and click OK.

   Note: In NetBeans 6.0, rowsets may appear twice in the dialog box. This is a known issue and should be ignored. It does not affect the application in this tutorial.

   
   This action creates maxTripDataProvider and maxTripRowSet in SessionBean1.
4. In the Navigator window, double-click SessionBean1 > maxTripRowSet to open the Query Editor. Click in the Source Code pane (third from the top). Delete the existing SQL query you find there and enter the following query:

    SELECT MAX(TRAVEL.TRIP.TRIPID)+1 AS MAXTRIPID FROM TRAVEL.TRIP

   You will use the MAXTRIPID value in the action handler for the Save button, which you will add next.

5. Close the Query Editor.

   Note: This query is not supported by the Query Editor's graphical editor. If you see an alert dialog box complaining of a lexical error, you can safely dismiss it by clicking Continue.

Saving User Changes Into the Database

Note: NetBeans IDE 6.1 features on-demand binding. Where components require Java coding, you must now manually add the binding attribute to components in a Visual Web JSF application. To do so, right-click each component and choose Add Binding Attribute. For more information, see the On-demand Binding Attribute Wiki.

1. Drop a Button component above the Table component near the top of the first column.
2. Change the Button text from Button to Save Changes.
3. In the Properties window, change the id property to save.
4. Right-click the Save Changes Button and choose Configure Virtual Forms from the pop-up menu.
5. In the Configure Virtual Forms dialog box, make sure save is shown in the list in the upper left corner so that your changes in this window apply to the Save Changes Button. Then, select the save virtual form, change the Submit value to Yes, and click OK.
6. In the Visual Designer, double-click the Save Changes Button to open the Java Editor. In the Java Editor, the insertion point is located in the save_action event handler method for the button.

7. Add the following code shown in bold to the button's event handler method:

   Code Sample 4: Save Action Code

   public String save_action() { try { // Get the next key, using result of query on MaxTrip data provider CachedRowSetDataProvider maxTrip = getSessionBean1().getMaxTripDataProvider(); maxTrip.refresh(); maxTrip.cursorFirst(); int newTripId = ((Integer) maxTrip.getValue("MAXTRIPID")); // Navigate through rows with data provider if (tripDataProvider.getRowCount() > 0) { tripDataProvider.cursorFirst(); do { if (tripDataProvider.getValue("TRIP.TRIPID").equals (new Integer(0))) { tripDataProvider.setValue("TRIP.TRIPID", new Integer(newTripId)); newTripId++; } } while (tripDataProvider.cursorNext()); } tripDataProvider.commitChanges(); } catch (Exception ex) { log("Error Description", ex); error("Error :"+ex.getMessage()); } return null; }

Testing Your Application – Part 3

Build, deploy, and run the project by clicking the Run Main Project button. The application should work as follows:

• You can add a trip and save it. The trip then appears in the table and persists. If you choose a different person and then return to this person, you see the trip you added.
• You can edit existing trip information and save your changes.
• If you enter something other than a date in the Date field, the application provides an error message.
• You can click Add Trip more than once before saving, as an easy way to add multiple rows at once. Any rows that are still empty when you save your changes are saved as empty rows.
• If you switch to a different person before clicking Save Changes, all your updates are lost.
• If you modify some values and then click one of the column headers to sort by that column, the Table component remembers the pending changes, which can then be saved.

Adding a Delete Feature

In this section, you add a delete feature to the table. Using this feature, users will be able to delete a trip by removing a row from the database. As implemented in this tutorial, the action of the Delete button is immediate and does not require the Save Changes button to delete the row from the database. In fact, because the Delete button event handler uses the commitChanges method, it also saves all pending changes just as the Save Changes button does.

Adding a Delete Button to Each Row

Note: NetBeans IDE 6.1 features on-demand binding. Where components require Java coding, you must now manually add the binding attribute to components in a Visual Web JSF application. To do so, right-click each component and choose Add Binding Attribute. For more information, see the On-demand Binding Attribute Wiki.

1. Click Design in the editor window to return to Page1 in the Visual Designer, and then right-click the Trips Summary table and choose Table Layout from the pop-up menu.

   The Table Layout dialog box opens.
2. If necessary, click the Columns tab, then click New to add a new column to the table.

3. With the new column name selected in the Selected list, make the following changes in the Column Details area:

   1. Header and Footer Text: Delete any default text from the Header and Footer text fields and leave them blank.
   2. Component type: Button
   3. Value Expression: Delete
   4. Width: Delete any default value and leave blank.
   5. Horizontal Align: Center
   6. Vertical Align: Middle
   7. Click OK.
4. Select the topmost Delete button in the table, and in the Properties window, set the id property to delete.

Adding Event Code

Note: NetBeans IDE 6.1 features on-demand binding. Where components require Java coding, you must now manually add the binding attribute to components in a Visual Web JSF application. To do so, right-click each component and choose Add Binding Attribute. For more information, see the On-demand Binding Attribute Wiki.

1. Double-click the first button in the Delete column to open the Java Editor in the delete_action event handler method.

2. Add the following code shown in bold to the button's event handler method:

   Code Sample 5: Delete Action Code

   public String delete_action() { form1.discardSubmittedValues("save"); try { RowKey rk = tableRowGroup1.getRowKey(); if (rk != null) { tripDataProvider.removeRow(rk); tripDataProvider.commitChanges(); tripDataProvider.refresh();} } catch (Exception ex) { log("ErrorDescription", ex); error(ex.getMessage()); } return null; }

Testing Your Application – Part 4

Build, deploy, and run the project by clicking the Run Main Project button. The following figure shows the running application.

When deployed, you should be able to delete a row from the table to remove it from the database. The delete action will also commit all pending changes to the database.

Adding a Revert Feature

Now, add a revert feature to the page. Using this feature, users will be able to abandon their edits and revert to the previously saved data. Note that the revert feature will not bring back saved or deleted rows; both the Save Changes and Delete buttons commit changes to the database.

Adding a Revert Changes Button

Note: NetBeans IDE 6.1 features on-demand binding. Where components require Java coding, you must now manually add the binding attribute to components in a Visual Web JSF application. To do so, right-click each component and choose Add Binding Attribute. For more information, see the On-demand Binding Attribute Wiki.

1. Click Design in the editor window to return to Page1 in the Visual Designer, and then drag a Button component from the Palette onto Page1. Place the new Button to the right of the Add Trip Button.
2. Change the button text to Revert Changes.
3. In the Properties window, change the Button component's id property to revert.
4. Double-click the Revert Changes Button to open the Java Editor in the revert_action method.

5. Add the code in bold in the following code sample to the revert_action method.

   Code Sample 6: Revert Action Code

   public String revert_action() { form1.discardSubmittedValues("save"); try { tripDataProvider.refresh(); } catch (Exception ex) { log("Error Description", ex); error(ex.getMessage()); } return null; }

Configuring the Virtual Form

The application as presently configured exhibits some undesirable behavior. For example, if the user enters an invalid date in the first column of an existing row and then clicks the Add button, the operation fails because a conversion error on the date rejects the form submission. The desired behavior when the user clicks the Add button is to forego processing the input fields in the table so that a new row can be added regardless of pending edits to existing rows.

Similarly, when the user clicks the Revert button, the intention is to abandon all edits, so edits should also be ignored in that case. However, when the user clicks the Delete button, you still want validation to happen because this button not only deletes a row, it also submits any pending changes, requiring that input fields be processed first.

To ensure that the input fields on the page forego processing (including validation checks) when the user clicks the Add or Revert button, you will make these buttons submit a virtual form. In this case, you can make both buttons submit the same virtual form because they need to submit a virtual form that has no participants.

1. In the Visual Designer, Ctrl-Click to select the Add, Revert, and Delete buttons, and then right-click and choose Configure Virtual Forms from the pop-up menu.

   In the Configure Virtual Forms window, add, revert, and delete should appear in the upper left corner to show that those buttons have been selected.

2. In the Configure Virtual Forms window, click New, name the new virtual form add/revert/delete, and set Submit to Yes. Click OK.

   

Testing Your Application—Part 5

Build, deploy, and run the project by clicking the Run Main Project button . The figure below shows the running application.

When deployed, you should be able to perform the following functions:

• Choose a name from the drop-down list and display that person's trip summary.
• Edit existing trip information and save your changes to the database.
• Edit existing trip information with an incorrect date format, and click Add Trip to add a new row, or click Revert Changes to abandon edits.
• Add a row to the table, fill out the fields for the trip, and save your changes to the database.
• Delete a row from the table (and from the database).

• Abandon your edits and revert to the most recently saved data from the database.

Summary

In this tutorial, you associated a Table component, Text Field components, and Drop Down List components with information in a database. You set properties on components and added prerender and event code to insert, update, and delete data from the database and revert changes entered on the form. You used virtual forms, which allowed your application to use just a single page and allowed submitted data to bypass validation checks when adding a row or reverting changes.

See Also

• Getting Started With NetBeans Visual Web JSF Applications
• Using Databound Components to Access a Database
• Building a Tree from Database Data
• Web Applications Learning Trail

---

This page was last modified: April 21, 2008

Send Us Your Feedback

Bookmark this page