Step 2: Submitting Data

In this step you will set up the basic page flow application, create the JSP page on which users will enters their name, and create the form bean to hold the user input. The tasks in this step are:


Create a Page Flow

  1. On the Application tab, right-click GettingStarted_WebAppWeb folder and select New-->Page Flow.

  2. In the Page Flow Wizard-Page Flow Name dialog, in the Page Flow Name field, enter hello. Click Next.

  3. On the Page Flow Wizard-Select Page Flow Type dialog, click Create.

 

The new page flow that is created resides in a folder named hello and consists of a JSP file named index.jsp and a Controller file named HelloController.jpf. The JSP page is the default home page of the Page Flow. The Controller file contains Java methods for processing data and for forwarding users to different JSP pages.

This controller file is opened in the main area in Flow View as is shown below. The Flow View is a pictorial view of the Controller file, which shows the relationships between the JSP pages and the methods of the page flow.

In this case, the Flow View depicts:

Make a Submission Page, a Form Bean, and a Method

In this step you will create a JSP page where users can submit data. You will also create a form bean and a method to handle the submission. The submission process has two steps: (1) the submitted data is loaded into matching fields in a form bean and (2) the form bean is passed to a method for processing.



  1. In Flow View, right-click the icon index.jsp and select Rename.

  2. In the field provided, enter submit and press the Enter key.
  3. Double-click the icon submit.jsp to open this page in the main area.

  4. Right-click the text New Web Application Page and select Cut.

  5. From the Palette tab, drag and drop the Form icon into Design View. The Form Wizard - Choose Action dialog appears.



    Note. If the Palette tab is not shown, go to the View menu and select Windows-->Palette.

  6. In the Form Wizard - Choose Action dialog, in the Action Name field, enter hello.

  7. Click New... to bring up the New Form Bean dialog.
  8. In the New Form Bean dialog, in the Property Name field, enter name. You have now defined a name property in the form bean of type String.

  9. Click Ok to return to the Form Wizard - Choose Action dialog.
  10. In the Form Wizard - Choose Action dialog, click Create.

  11. Press Ctrl+S to save your work.        

As this point you have added three new elements to the Page Flow:

These three elements work together to submit data in the following way: (1) the submitted name field is bound to the name field in the HelloForm Form Bean and (2) the Form Bean is passed to the method hello for processing.

You can deduce this submission process from the Design View of submit.jsp and the Flow View of HelloController.jpf. The next two sections explain how to read these views.

Reading the Design View of submit.jsp

After completing the Form Wizard, the Design View of submit.jsp should look like the image to the right. Design View depicts the added JSP tags as three gray icons labeled Form, TextBox, and Button:

 

Reading the Flow View of HelloController.jpf

The same submission process can be deduced from the Flow View of the Controller file. Notice the following graphical elements in Flow View:

 

Test the Web Application

Let's now test the page flow to make sure you have correctly executed the above steps.

  1. Make sure that the HelloController.jpf file is displayed in the main area.
  2. Click the Start button, shown below:

  3. When the Workshop Test Browser launches, in the Name field, enter [your_name] and click hello.



    The following error is displayed in the Workshop Test Browser.



    The reason an error is displayed is because the hello method does not contain instructions on the next JSP page that needs to be called. You will correct this situation in the next step.

Click one of the following arrows to navigate through the tutorial: