<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 buttonStep-by-step on Java web application development: insert, update and delete data on Derby database sceenshots on the main toolbar. If the following window displayed just click OK.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

If you cannot see the virtual form, click the Show Virtual Form button as shown below.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

4.     Set the for property of the second Message component to textField2.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

5.     Set the for property of the third Message component to textField3. Make sure that your application looks like the figure below.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

7.     Change the text from Button to Add Trip.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

8.     In the Properties window, change the button's id property to add.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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;

    }

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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;

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

Testing Your Application – Part 2

 

Build, deploy, and run the project by clicking the Run Main Project button,Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots. 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.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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.

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

 

 

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

5.     Click in the Source Code pane (third from the top).

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

3.     In the Properties window, change the id property to save.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

4.     Right-click the Save Changes Button and choose Configure Virtual Forms from the pop-up menu.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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;

    }

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

7.     Click the Add Trip and add a record.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

8.     Click the Save Changes button. The trip then appears in the table and persists.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

4.     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.

5.     Click OK.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

6.     Select the topmost Delete button in the table, and in the Properties window, set the id property to delete.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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;

    }

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

2.     Try deleting the previously added record.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

3.     In the Properties window, change the Button component's id property to revert.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

4.     Double-click the Revert Changes Button to open the Java Editor in the revert_action method.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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;

    }

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

Testing Your Application - Part 5

 

Build, deploy, and run the project by clicking the Run Main Project button, (Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots ). The following Figure shows the running application. When deployed, you should be able to perform the following functions:

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

1.     Choose a name from the drop-down list and display that person's trip summary.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

2.     Edit existing trip information and save your changes to the database.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

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.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

4.     Add a row to the table, fill out the fields for the trip, and save your changes to the database.

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

5.     Delete a row from the table (and from the database).

 

Step-by-step on Java web application development: insert, update and delete data on Derby database sceenshots

 

 

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.

 

 

 

 

 

 

Java Web: Insert, Update and Delete on Derby:Part 1 |Part 2


<Java Web App: Insert, Delete Update - Derby 1 |Java & Friends |Visual Web JSF: Upload Files >