Exercise 1.4: Creating new records

Before you begin, complete Exercise 1.3: Testing the Web site.

In this exercise, you will create a page that allows users to create new classified ads and post them to the database. First you will create a relational record to represent a new record in the database, and then you will create a visualization of the record on your page as a set of input fields.

 

 

Create the relational record

  1. Double-click the new_record.jsp file in the Project Explorer view to open it.
  2. Delete the default text Place content here.
  3. In the Palette view, click the Data drawer to expand it.
  4. Drag the Relational Record component from the Palette onto the blank content area. The Add Relational Record window opens.

    If a warning message appears and says that a connection to your database could not be established, then you left the server running after testing the Web site. If this happens, click Cancel in each dialog and stop the server as explained in Stopping the server in Exercise 1.3: Testing the Web site.

  5. In the Name field, type create_record.
  6. Under Create controls for, click Creating a new record.
  7. Make sure Add input/output controls to display the record on the web page is selected.

    The Add Relational Record window should look like this:

    Add Relational Record window

  8. Click Next.
  9. In the Table box, click the W5SAMPLE.ADS table.
  10. Click Next.
  11. Click Next again. The Configure Data Controls page opens.

 

 

Customizing the relational record visualization

The Configure Data Controls page helps you customize the visualization of your relational record. For example, you can change the columns, field labels, and submit button on your input form. After you finish these steps, a fully functional input form will be on the page.

  1. In the Fields to display section, clear the check box next to every field name except for the ones you want in your input form:

    • ID
    • TITLE
    • DESCRIPTION
    • MAINCATEGORY
    • PRICE
    • PHONE.

  2. Rearrange the fields into the following order from top to bottom:

    1. ID
    2. TITLE
    3. DESCRIPTION
    4. MAINCATEGORY
    5. PRICE
    6. PHONE
    To change the order of the fields, click a field name and then click the Up or Down arrows.
  3. Rename the labels as you like. For example, shorten the "Maincategory:" label to just "Category:".

    To rename the labels generated for the input fields, click on a label from the Label column. The mouse icon turns into a cursor so you can type new text.

  4. Click Options. The Options window opens.
  5. Make sure the Submit button option is selected.
  6. Type Post New Listing in the Label field.
  7. Click OK.

    The Add Relational Record window should now look like this:

    Add Relational Record List window

  8. Click Finish to generate the input form. It should look like this:

    Current Page Appearance

    The form has an Error Messages field. This does not mean that your project has errors; this field marks the place where errors will be displayed if there are any when the user submits the form.

 

 

Programming the Submit button

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

  1. In the new_record.jsp file, click the Post New Listing button you created in the form on the Web page.
  2. Open the Quick Edit view.

    The Quick Edit view is typically at the bottom center of the workbench, in the tabs next to the Properties view. If you can't find the Quick Edit view, go to the menu bar and click Window > Show View > Quick Edit.

    The Quick Edit view is a context-sensitive Java editor that can help you code events for your Faces components. The Quick Edit view now contains the generated code that handles creating a new record in the database, as shown below:

    Code Example

  3. In the Quick Edit view, click to place the cursor directly before the code return "";
  4. Press Enter. A new line appears before return "";
  5. Right-click on the new blank line, and then choose Insert Snippet > Go To Page from the context menu. The Edit GotoPage Action window opens.
  6. From the drop-down list, select all_records.jsp as the target page.
  7. Click OK.
  8. The event code for your button should look like this:

    Code Example

  9. Save the file and then run the page on your test server if you'd like. While running the page on the test server, you can add new records and return to the all_records.jsp page to view them.

 

 

Preventing duplicate keys

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, 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 22, so you can enter any number above 22 as a primary key. Be sure not to duplicate keys if you enter more than one record.

 

 

Binding 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 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 Exercise 1.5: Creating an update page.

  1. In the new_record.jsp file, click the Description input field.
  2. Press the Delete key.
  3. In the Palette view, click on the Faces Components drawer to expand it.
  4. 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.

  5. In the Page Data view, 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:

    Binding a Column to the Input Field

  6. Save the file and then run the page on the test server if you would like to.

Now you can create and modify your own JavaServer Faces input forms. You are ready to begin Exercise 1.5: Creating an update page.