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
-
On the
Application tab, right-click
GettingStarted_WebAppWeb
folder and select
New-->
Page Flow.

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

-
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.
-
In
Flow View, right-click the icon
index.jsp and
select
Rename.

-
In the field provided, enter
submit
and press the
Enter key.

-
Double-click the icon
submit.jsp to open this page
in the main area.

-
Right-click the text
New Web Application Page
and select
Cut.
-
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.
-
In the
Form Wizard - Choose Action dialog, in the
Action Name field, enter
hello.
-
Click New... to bring up the New Form Bean dialog.
-
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.
-
Click Ok to return to the Form Wizard - Choose
Action dialog.
-
In the
Form Wizard - Choose Action dialog, click
Create.
-
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:
Test the Web Application
Let's now test the page flow to make sure you have correctly executed the
above steps.
-
Make sure that the HelloController.jpf file
is displayed in the main area.
-
Click the
Start button, shown below:

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