# Step 3: Create the JSP Pages

In this step you complete the presentation components of your page flow. The presentation components consist of two JSP pages: (1) request.jsp allows users to request a credit report and (2) response.jsp displays the completed credit report to the user.

Page flows allow you to separate how your web application processes data from how it presents that data to users. When data processing is separated from data presentation, it's much easier to re-use the data processing aspects of the application in other contexts and to manage any future changes to your web application. Page flows link data processing and data presentation by means of databinding. Databinding is accomplished through the use of a special library of JSP tags that allow you to associate the presentation of data on the JSP pages with the data processing inside the page flow file. The special library of JSP tags begin with the prefix "netui-databinding".

The JSP pages you create in this step demonstrate two cases of databinding: (1) databinding when a user submits data, (2) databinding when data is displayed to the user.

(1) The request.jsp page demonstrates databinding when a user submits data to a page flow. In this case, the data that a user inputs into the request.jsp page is databound to a Form Bean. The Form Bean acts as an intermediary between the submitted data and the Action method that consumes the data. This helps to separate the presentation and processing layers, because changes to one layer do not necessitate changes to the other. Instead, developers need only change the Form Bean that intermediates between the two layers.

(2) The response.jsp page demonstrates databinding for display to the user. In this case, you databind to a Java object in order to render it as HTML in the browser. In particular, you will bind to the credit report (= the m_applicant object) to render it as HTML on the response.jsp page.

The tasks in this step are:

- To create the request page
- To create the response page
- To test the user interface

To Create the Request Page

In this task you will rename the index.jsp page and add a user input form to the page. The form you add is databound to the PollForCreditReportForm Form Bean. The Form Bean is used as an intermediary between the data submitted by the user and the Action method that processes that data.

1. Confirm that the page flow file investigateJPFController.jpf is displayed in the main work area.
2. Click the Flow View tab.
3. Right-click the index.jsp icon and select Rename.
4. In the editable field provided, replace the text index.jsp with the text request.jsp and press Enter.
5. Double-click the request.jsp icon to display the JSP file in the main work area in Design View.
6. On the Design View tab, right-click the text New Web Application Page and select Cut.
7. On the Palette tab, in the section labeled NetUI, select the Form icon and drag it into Design View.
   The Form Wizard dialog appears.
8. In the Form Wizard - Choose Action dialog, confirm that Select Existing Action is selected and that the Action Name field displays pollForCreditReport.
9. Click Create.
   A user input form is added to the request.jsp page.
10. In Design View, select the gray pollForCreditReport button underneath the input box.
11. On the Properties Editor tab, in the value field and enter Submit (overwritting the text pollForCreditReport).
12. Press Enter.
    Note the change that takes place in Design View.
13. Click the Source View tab to view the code you have just added to request.jsp.

When a user submits this <netui:form>, two things occur: (1) the user's data is databound to a new instance of the Form Bean PollForCreditReportForm and (2) this Form Bean instance is passed as a parameter to the method pollForCreditReport.
The databinding is specified by the data binding expression {actionForm.taxID}. {actionForm....} refers to the Form Bean; {actionForm.taxID} refers to the taxID field of the Form Bean.
The target method is specified by the attribute action="pollForCreditReport". The action attribute specifies that the form submits its values to the pollForCreditReport method.

The following diagram shows how these expressions in request.jsp refer to elements in the page flow file.

14. Press Ctrl+S to save your work, then press Ctrl+F4 to close request.jsp.

To Create the Response Page

In this task you will create a JSP page to display the credit report. You will render the credit report as an HTML table.

1. Confirm that investigateJPFController.jpf is displayed in the main work area.
2. If necessary, click the Flow View tab.
3. Right-click the response.jsp icon and select Create.
   A new JSP page, response.jsp, is created in the investigateJPF folder.
4. Double-click the response.jsp icon.
   The response.jsp page is displayed in the main work area in Design View.
5. Click the Source View tab. Edit the source code so it looks like the following. Overwrite any code that already exists in the response.jsp file.

       <%@ page language="java" contentType="text/html;charset=UTF-8"%>
       <%@ taglib uri="netui-tags-databinding.tld" prefix="netui-data"%>
       <%@ taglib uri="netui-tags-html.tld" prefix="netui"%>
       <%@ taglib uri="netui-tags-template.tld" prefix="netui-template"%>
       <netui:html>
           <head>
               <title>
                   Investigate: Credit Report
               </title>
           </head>
           <body>
               <table border="1">
                   <tr>
                       <td colspan="2" bgcolor="#ccccff">
                           Credit Report
                       </td>
                   </tr>
                   <tr>
                       <td>Tax ID Number:</td>
                       <%--
                       The following netui:label tags use different databinding expressions to refer to
                       different fields on the m_applicant object.  The m_applicant object is a member variable
                       of the page flow file investigateJPFController.jpf
                       --%>
                       <td><netui:label value="{pageFlow.m_applicant.taxID}"/></td>
                   </tr>
                   <tr>
                       <td>First Name</td>
                       <td><netui:label value="{pageFlow.m_applicant.firstName}"/></td>
                   </tr>
                   <tr>
                       <td>Last Name</td>
                       <td><netui:label value="{pageFlow.m_applicant.lastName}"/></td>
                   </tr>
                   <tr>
                       <td>Available Credit Card Balance</td>
                       <td><netui:label value="{pageFlow.m_applicant.availableCCCredit}"/></td>
                   </tr>
                   <tr>
                       <td>Bankrupt?</td>
                       <td><netui:label value="{pageFlow.m_applicant.currentlyBankrupt}"/></td>
                   </tr>
                   <tr>
                       <td>Credit Score</td>
                       <td><netui:label value="{pageFlow.m_applicant.creditScore}"/></td>
                   </tr>
                   <tr>
                       <td>Approval Level</td>
                       <td><netui:label value="{pageFlow.m_applicant.approvalLevel}"/></td>
                   </tr>
                   <tr>
                       <td>Message</td>
                       <td><netui:label value="{pageFlow.m_applicant.message}"/></td>
                   </tr>
               </table>
               <p><a href="request.jsp">Request another credit report</a>
           </body>
       </netui:html>

   Note the <netui:label> tags in the code above. Each <netui:label> tag uses a databinding expression to refer to different fields of the m_applicant object, a member variable of the page flow file investigateJPFController.jpf.
   The expression {pageFlow....} refers to the current pageFlow file: investigateJPFController.jpf.
   The expression {pageFlow.m_applicant} refers to the member variable m_applicant on the current page flow file.
   The expressions {pageFlow.m_applicant.taxID}, {pageFlow.m_applicant.firstName}, etc. refer to different fields of the m_applicant object. (The different fields of the m_applicant object are specified by its data type: InvestigateSyncControl.Applicant. Open the InvestigateSyncControl.jcx file to see this type.)
6. Press Ctrl+S to save your work, then press Ctrl+F4 to close response.jsp.

To Test the User Interface

1. Confirm that investigateJPFController.jpf is displayed in the main work area.
2. Click the Start button, shown below.
   Your page flow is built and the Workshop Test Browser launches.
3. In the Workshop Test Browser, in the TaxID field, enter the 9 digit number 333333333 and click Submit.

   Note: Use one of the following (9 digit) taxID's to test your page flow:

   123456789, 111111111, 222222222, 333333333, 444444444, and 555555555.
   The response.jsp page displays the results.

Related Topics

Using Data Binding in Page Flows

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