Lesson 1.5: Program the Submit button

When your input form is submitted, the page will automatically add the new record to the database. In this lesson, you will program the Post New Listing submit button to return to the all_records.jsp page so that you can immediately view the new record in the database.

To program the submit button:

In the new_record.jsp file, right-click the Post New Listing button you created in the form on the Web page and select Properties.
Click Add Rule. The Add Navigation Rule window opens.
From the Page drop down, select all_records.jsp then click OK.
Save the page. If you want to try adding a record to the database to verify that you will return to the all_records.jsp page, run new_record.jsp on your test server.

Prevent duplicate keys

Important:

Since the ID column is a primary key in the ADS table, you cannot add records with an ID value that already exists in the table. In Module 2, you will see how to use automatic key generation to automatically create a new unused key for each new record.

Until then, you must enter an unused ID number in this page to add a new record. The records that come with the database use ID numbers from 1 to 24, so you can enter any number above 24 as a primary key. Be sure not to duplicate keys if you enter more than one record.

Bind input to the relational record (optional)

The input form on the page is a set of JavaServer Faces input fields which have been bound to the relational record that you created. Recall that you created the relational record to represent a new record in the ADS table of your database. Binding is a method by which you can link a JavaServer Faces input component to a column in the relational record.

When you created the relational record, the wizard automatically bound all of its columns to the input fields on the page. If you want to make changes manually, you can bind other columns to other input fields. In order to bind a column from your relational record to the input field, drag the column from the Page Data view onto the field. You can experiment with this process by deleting and recreating the Description input field on your form.

Learn more about the Page Data view

The Page Data view is usually found at the bottom left corner of the workbench. If you can't find it, go to the menu bar and click Window > Show View > Page Data. Generally, the Page Data view is only used when you are creating dynamic Web pages.

The Page Data view stores connections to data sources like databases in the form of data objects such as relational records or relational record lists. These data objects do not represent the data source itself or any component on the page. Instead, these data objects represent a connection between the project and a data source. Once this connection is created, you can drag a data object from the Page Data view onto a Web page to complete the connection and display information from the data source on the Web page. For example, here is a picture of the Page Data view showing a relational record list created during this tutorial:

In this picture, you can see the all_recordlist (ADS) relational record list, followed by all of the columns in this relational record list. Once this data object is defined and in the Page Data view, you can drag these columns onto input components on a Web page as many times as you want without reconnecting to the database.

For example, if you wanted to show the value of the DESCRIPTION column on a web page, you would first drag a text output field onto the page and then drag the DESCRIPTION column from the Page Data view onto that text output field. This is called binding a column to an output field.

Alternately, if you wanted to let the user type in a new value for the DESCRIPTION column in the database, you could drag a text input field onto the page. Then, drag the DESCRIPTION column onto that text input field.

The following steps are provided to illustrate the concept of the input field and the process of binding; however, walking through these steps is optional in this tutorial. If you don't want to do this, move on to the next lesson.

In the new_record.jsp file, click the Description input field. Press the Delete key.
In the Palette view, click on the Enhanced Faces Components drawer to expand it.
Drag an Input component from the Palette onto the cell that contained the Description input field you just deleted. There is now an input field in this cell, but there is no text such as {ID} or {TITLE} inside it because this input field is not bound to any column.
In the Page Data view, click to expand Relational Records > create_record (Service Data Object) > create_record (ADS) and drag the DESCRIPTION column onto the Input component you just created. The text inside the Input component changes to indicate that it is now bound to the DESCRIPTION column, as in this picture:
Save the file and then run the page on the test server if you would like to.

Lesson checkpoint

You have completed Lesson 1.5. In this lesson you learned to program a command button and to bind data to an input field by dragging and dropping a JSF widget from the palette onto a Web page.

< Previous | Next >