# 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
- Make a Submission Page, a Form Bean, and a Method
- Test the Web Application

##
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:

- A method, named begin
- An arrow, indicating that the begin method forwards users to the index.jsp page
- A JSP page named index.jsp

## 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:

- a set of JSP tags has been added to the JSP page submit.jsp
- an action method hello has been added to the Controller file HelloController.jpf. You can verify this by opening this file in Flow View. (To view the Controller file in Flow View, double-click HelloController.jpf and click the Flow View tab.)
- a form bean HelloForm has been added to the Controller file HelloController.jpf. This form bean is associated with the hello method. You can verify this by opening this file in Flow View and selecting this action method. The form bean is displayed in the Form Bean tab. (If this tab is not shown, go to the View menu and select Windows-->Form Bean.)

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:

- Notice that the Form icon includes the text action='hello'. This indicates that the form passes data to the hello action method in the controller file
- Notice that the TextBox icon includes the text {actionForm.name}. This indicates that the TextBox data is bound to the name property of the form bean that is passed to the hello method

###

### 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:

- an icon labeled hello: this represents the action method hello
- a small box in the lower right-hand corner of the hello icon: this indicates that a form bean is passed to hello
- an arrow pointing from the submit.jsp icon to the hello icon: this indicates that data is submitted from the JSP, loaded into a Form Bean, and then passed to the method hello.

###

## 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: