< Previous | Next >

Lesson 7: Add elements to JavaServerPages (JSP) pages

Add input fields, push buttons, and output fields to JSP pages to create dynamic user interfaces for input and output.
In the input fields, the user of the resulting application will type the day, month, and year of interest. The input page includes Submit and Refresh buttons. In the output field, the corresponding day of the week will be displayed. To create these pages:
  1. Add elements to the input JSP page.
  2. Add elements to the output JSP page.

Input page

To add fields and push buttons to the input JSP page:
  1. In your Web diagram, double-click the input.jsp page to open the page in the editor.
  2. In the editor, click the Design tab.
  3. In the main menu bar, select Window > Show View > Other.
  4. In the window, select Web > Page Data and click OK to open the Page Data view.
  5. In the Page Data view, expand the Struts Form Beans folder. Find the dateData form bean and the fields that you defined.
    The Page Data view shows the dataData form bean with its day, dayOfWeek, month, and year fields.
  6. Drag the day, month, and year fields from the Page Data view to the input JSP page in the editor. The Insert Data Object dialog opens.
    The Insert Data Object window shows the /computeDay action and the day, month, and year fields.
  7. Select Updating an existing record.
  8. Click Options, and ensure that the Submit button and Delete button check boxes are selected. Then click OK.
  9. Click Finish to create the fields and buttons in the form.
    The Design page of the editor shows the input JSP page with three fields and two buttons.
  10. Save and close the input JSP file.

Output page

To add fields to the output JSP page:
  1. In your Web diagram, double-click the output.jsp page to open the page in the editor.
  2. In the editor, click the Design tab.
  3. In the Page Data view, expand the Struts Form Beans folder. Find the dateData form bean and the fields that you defined.
  4. Drag the dayOfWeek field from the Page Data view to the output JSP page in the editor. The Insert Data Object dialog opens.
  5. Select Displaying an existing record and click Finish to create the fields in the page.
  6. Save and close the output JSP file.

Lesson checkpoint

In this lesson, you added input fields and push buttons to the input JSP page. You also added output fields to the output JSP page.
You learned to do these tasks:
  • Open and modify a JSP page.
  • Add input fields, output fields, and buttons to a JSP page.
< Previous | Next >
Feedback