<Java Web App: Insert, Delete Update - Derby 1 |Java & Friends |Visual Web JSF: Upload Files >
Java Web Application:
Performing Inserts, Updates, and Deletes (Derby database) Part 2
Testing Your Application – Part 1
Build, deploy, and run the project by clicking the Run Main Project button
on the main toolbar. If the following window displayed just click OK.
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.
1. Click the Design button to view Page1 in the Visual Designer.
2. From the Basic section of the Palette, drag a Message component onto the topmost Text Field in each of the first three columns of the Table.
If you cannot see the virtual form, click the Show Virtual Form button as shown below.
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 following Figure.
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 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 following Figure.
Important 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: Rowsets appear twice in the dialog box. This is a known issue and should be ignored. It does not affect the application in this tutorial. Also note: If your Navigator window is empty, then you need to close your project, NetBeans and re-open your NetBeans. We are not sure whether this is a known issue or not.
This action creates maxTripDataProvider and maxTripRowSet in SessionBean1.
4. In the Navigator window, double-click SessionBean1 > maxTripRowSet to open the Query Editor or right-click and select Edit SQL Statement.
5. Click in the Source Code pane (third from the top).
6. 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 MAXTRIPIDvalue in the action handler for the Save button, which you will add next.
7. 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
1. Drop a Button component above the Table component near the top of the first column as shown below.
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:
1. 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.
2. You can edit existing trip information and save your changes.
3. If you enter something other than a date in the Date field, the application provides an error message.
4. 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.
5. If you switch to a different person before clicking Save Changes, all your updates are lost.
6. 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.
7. Click the Add Trip and add a record.
8. Click the Save Changes button. The trip then appears in the table and persists.
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
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.
2. The Table Layout dialog box opens.
3. If necessary, click the Columns tab, then click New to add a new column to the table.
4. With the new column name selected in the Selected list, make the following changes in the Column Details area:
-
Header and Footer Text: Delete any default text from the Header and Footer text fields and leave them blank..
-
Component type: Button.
-
Value Expression: Delete.
-
Width: Delete any default value and leave blank.
-
Horizontal Align: Center.
-
Vertical Align: Middle.
5. Click OK.
6. Select the topmost Delete button in the table, and in the Properties window, set the id property to delete.
Adding Event Code
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
1. 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.
2. Try deleting the previously added record.
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
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 following Figure shows the running application. When deployed, you should be able to perform the following functions:
1. Choose a name from the drop-down list and display that person's trip summary.
2. Edit existing trip information and save your changes to the database.
3. 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. The following Figures show the incorrect date and then we revert the changes by clicking the Revert Changes button.
4. Add a row to the table, fill out the fields for the trip, and save your changes to the database.
5. Delete a row from the table (and from the database).
6. Abandon your edits and revert to the most recently saved data from the database by clicking the Revert Changes.
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.