Step 4: Create a Page to Edit Customer Data

In this step you will add a JSP page for editing individual customer records.

The tasks in this step are:

• To Create a Record Editing Page
• To Make a Form for Updating the Customer Data
• To Set Up Navigation Back to the Customer List
• To Run the Page Flow

To Create a Record Editing Page

1. On the Page Flow Explorer tab, right-click on the Pages node and select New JSP Page.
2. Rename the page to editCustomer.jsp. Press Enter.
3. On the Page Flow Editor tab, place the cursor in the Quick Jump field, enter getCustomerById, and press the Enter key. This will display the getCustomerById node in the center pane. (Alternatively, you can click the getCustomerById node on the Page Flow Overview tab.)
4. Drag editCustomer.jsp icon (located on the Page Flow Explorer tab), onto the unspecified node (located on the Page Flow Editor tab).
   
   Note: make sure to drop directly on the unspecified node as shown below.
   
   

To Make a Form for Updating the Customer Data

1. On the Page Flow Explorer tab, double-click editCustomer.jsp to open its source code.
2. On the JSP Design Palette, in the NetUI Wizards section, drag the Update Form pattern onto the JSP source editor and drop it directly before the </netui:body> tag.
   
   
3. On the Update Form dialog, next to the Action field, click the New button.
   
   
4. On the New Action dialog,
   from the Control Method dropdown list, choose the updateCustomer(Customer) method,
   from the Form Bean dropdown list, select customerManagement.CustomerManagementController.GetCustomerByIdFormBean.
   Click the Next button.
   
   
5. In the New Action dialog, on the Input Mapping page, click Finish.
   
   
6. Click the Select button next to the Item Identifier field.
   
   
7. Select the id property and click OK.
   
   
8. On the Update Form dialog, on the Select Action page, click the Next button.

   

9. On the Update Form dialog, on the Select Properties page, click the Next button.

   

10. Arrange the fields so that they have the following order:
    
       Id
       First Name
       Last Name
       Company Name
       City
       State
       Zip
       Phone
       Email 
    
    Click the Finish button.
    
    
    
    By clicking Finish, you have added the following form to editCustomer.jsp.
    

    <netui:form action="updateCustomer">
    		<netui:hidden dataSource="actionForm.customer.id"></netui:hidden>
    		<table>
    			<tr valign="top">
    				<td>Customer:</td>
    				<td>
    				<table>
    					<tr valign="top">
    						<td>FirstName:</td>
    						<td><netui:textBox dataSource="actionForm.customer.firstName"></netui:textBox>
    						</td>
    					</tr>
    					<tr valign="top">
    						<td>LastName:</td>
    						<td><netui:textBox dataSource="actionForm.customer.lastName"></netui:textBox>
    						</td>
    					</tr>
    					<tr valign="top">
    						<td>CompanyName:</td>
    						<td><netui:textBox dataSource="actionForm.customer.companyName"></netui:textBox>
    						</td>
    					</tr>
    					<tr valign="top">
    						<td>City:</td>
    						<td><netui:textBox dataSource="actionForm.customer.city"></netui:textBox>
    						</td>
    					</tr>
    					<tr valign="top">
    						<td>State:</td>
    						<td><netui:textBox dataSource="actionForm.customer.state"></netui:textBox>
    						</td>
    					</tr>
    					<tr valign="top">
    						<td>Zip:</td>
    						<td><netui:textBox dataSource="actionForm.customer.zip"></netui:textBox>
    						</td>
    					</tr>
    					<tr valign="top">
    						<td>Phone:</td>
    						<td><netui:textBox dataSource="actionForm.customer.phone"></netui:textBox>
    						</td>
    					</tr>
    					<tr valign="top">
    						<td>Email:</td>
    						<td><netui:textBox dataSource="actionForm.customer.email"></netui:textBox>
    						</td>
    					</tr>
    				</table>
    				</td>
    			</tr>
    		</table>
    		<br /> 
    	<netui:button value="updateCustomer" type="submit" />
    	</netui:form>

To Set Up Navigation Back to the Customer List

1. On the Page Flow Editor tab, place the cursor in the Quick Jump field, enter updateCustomer, and press the Enter key. This will display the updateCustomer node in the center pane. (Alternatively, click the updateCustomer node on the Page Flow Overview tab .)
2. Drag the getCustomers action (located on the Page Flow Explorer tab) onto the right-hand side of the Page Flow Editor tab .
   
   
3. Press Ctrl-Shift-S to save your work.
4. The Page Flow Overview should appear as follows:

   

5. Close the source file for editCustomer.jsp.

To Run the Page Flow

1. On the Page Flow Explorer tab, click the server icon to deploy and run the Page Flow.

   

2. In the Run on Server dialog, confirm that BEA WebLogic v10.0 Server is selected, and click Finish.
   
   Wait a minute for the EAR and web application projects to deploy.
   You will see a browser tab appear, displaying a grid of customer data
3. Click the Edit link for "David Owen".
4. Update the information for David Owen and click updateCustomer.
5. Note that the information is updated on the grid page.

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