Exercise 1.4: Creating pages for creating and updating user information

Before you begin, you must complete Exercise 1.3: Developing the UserAdmin page.

Based on the application flow that you defined the Web diagram, there should be separate UserAdmin pages for creating user information (UserAdminCreate.jsp) and updating existing user information (UserAdminUpdate.jsp).

Create the UserAdminCreate.jsp page

In this portion of the exercise, using a session bean you will create data access in the UserAdminCreate page that enables the administrator to create new user records. Because a user ID value is mandatory for creating new user records, this page also incorporates validation logic. In addition, you will add a Cancel button to allow a user to end this process.

  1. Return to the Web diagram editor and double-click the UserAdminCreate.jsp page.
  2. Click Finish in the creation wizard.

    The empty file opens in the editing area.

  3. Delete the default Place content here. text.
  4. Drag the EJB Session bean object from the Data drawer in the palette to the file.
  5. When the Session Bean wizard opens, select ejb/UserFacade and click Next.
  6. Select the create(RegistrationData data) interface, which will be used for the input field on the portlet page.
  7. Click Next.
  8. In the Input Form page, you will define the input form that will create new data in the database. Click None to deselect all of the fields, so that you can individually select, organize, and configure the appropriate fields for the input form to be used in the portlet page. Then, select the check boxes for the following fields:
  9. Using the up down arrow buttons, move the selected data fields into the order shown in the step above.
  10. Select and change the Label value for the data.userid field to User ID:.
  11. Click the Options button, and type Create in the Label field. Click OK.
  12. Click Finish to generate the input form in the UserAdminCreate.jsp page. The user interface will look similar to the following:
    UserAdminCreate.jsp with a Data Table
  13. Select the Create button in the page.
  14. Open the Properties view if it is not already active, and click the Add Rule button. (You may need to scroll to the right.)
    Add rule property for a command button.
  15. In the Add Navigation Rule dialog, select UserAdminView.jsp from the Page list box.
  16. Select the The outcome named radio button and type view.
  17. Click OK.
  18. Click the Quick Edit view tab. Click in the Quick Edit editing area, and type "view" in the return string:
    	return "view";

Add Validation logic

Because the user ID value is mandatory input for this page, we should add validation to check the user ID is specified.

  1. Select the User ID: Input component.
  2. Open the Properties view.
  3. Select the Validation tab.
  4. Click Value is required check box.
  5. Save UserAdminCreate.jsp.

You do not have to write any of the code necessary to run this portion of the application. All of the EJB reference logic and the code to bind the invocation and results to the user interface is generated.

Add Cancel logic

In addition, you should add a Cancel button, along with the appropriate navigation wiring to the search page:

  1. Drag a Command - Button from the Faces Components palette drawer, and drop it next to Create button.
  2. Open the Properties view if it is not already active.
  3. Click Display options tab in the set of properties, and type Cancel in the Button label field, and press Enter.
  4. Click the Quick Edit view tab. Click in the Quick Edit editing area, and type "view" in the return string:
    	return "view";
  5. Save the file. Now the UserAdminCreate.jsp page should look similar to the following:
    UserAdminCreate.jsp

Create the UserAdminUpdate.jsp page

In this portion of the exercise, using a JavaBean you will create data access for updating user information in the UserAdminUpdate page. In addition, you will add a Cancel button to allow a user to end this process, and add additional code to obtain existing records so that they can be updated in this page.

  1. Return to the Web diagram editor and double-click the UserAdminUpdate.jsp page.
  2. Click Finish in the creation wizard.

    The empty file opens in the editing area.

  3. Delete the default Place content here. text.
  4. Drag the EJB Session bean object from the Data drawer in the palette to the file.
  5. When the Session Bean wizard opens, select ejb/UserFacade and click Next.
  6. Select the update(RegistrationData data) interface, which will be used for the input field on the portlet page.
  7. Click Next.
  8. In the Input Form page, you will define the input form that will update data in the database. Click None to deselect all of the fields, so that you can individually select, organize, and configure the appropriate fields for the input fields to be used in the portlet page. Then, select the check boxes for the following fields:
  9. Using the up down arrow buttons, move the selected data fields into the order shown in the step above.
  10. Select and change the Label value for the data.userid field to User ID:.
  11. Select Output Field from the Control Type list for data.userid, because you want to avoid changing the ID when updating other information in the portlet.
  12. Click the Options button, and type Update in the Label field. Click OK.
  13. Click Finish to generate the input form in the UserAdminUpdate.jsp page. The user interface will look similar to the following:
    UserAdminUpdate.jsp with a Data Table
  14. Select the Update button in the page.
  15. Open the Properties view if it is not already active, and click the Add Rule button. (You may need to scroll to the right.)
  16. In the Add Navigation Rule dialog, select UserAdminView.jsp from the Page list box.
  17. Select The outcome named radio button and type view.
  18. Click OK.
  19. Click the Quick Edit view tab. Click in the Quick Edit editing area, and type "view" in the return string:
    	return "view";

You do not have to write any of the code necessary to run this portion of the application. All of the EJB reference logic and the code to bind the invocation and results to the user interface is generated.

Add Cancel logic

In addition, you should add a Cancel button, along with the appropriate navigation wiring to the search page:

  1. Drag a Command - Button from the Faces Components palette drawer, and drop it next to the Update button.
  2. Open the Properties view if it is not already active.
  3. Click Display options tab in the set of properties, and type Cancel in the Button label field, and press Enter.
  4. Click the Quick Edit view tab. Click in the Quick Edit editing area, and type "view" in the return string:
    	return "view";
  5. Save the file. Now the UserAdminUpdate.jsp page should look similar to the following:
    UserAdminUpdate.jsp

Add additional code for updating existing records

The update logic added in this portion of the exercise enables the application to obtain existing records, so that a user can update them with this page. The form is filled with relevant data by initializing the parameter bean using a method provided by UserFacade, findById().

  1. Select Edit Page Code from the UserAdminUpdate.jsp pop-up menu. The page code is the Java file that contains the underlying logic for UserAdminUpdate.jsp. Insert the following code (the bold-faced portion):
    public UserFacadeLocalUpdateParamBean getUserFacadeLocalUpdateParamBean() {
      if (userFacadeLocalUpdateParamBean == null) {
         userFacadeLocalUpdateParamBean = new UserFacadeLocalUpdateParamBean();
         Integer userid = (Integer)getSessionScope().get("userid");
         try {
         userFacadeLocalUpdateParamBean.setData(getUserFacadeLocal()
                                                 .findById(userid));
         } catch (Exception e) {
             logException(e);
         }
     }
     return userFacadeLocalUpdateParamBean;
    }
    
  2. Save and close UserAdminUpdate.java.

Add links for page navigation

Finally, to complete the UserAdmin portlet, you must add links to provide navigation from the master page (UserAdminView.jsp) to the details pages (UserAdminCreate.jsp and UserAdminUpdate.jsp). To add the links, follow these steps:

  1. Return to the Web Diagram file to take a final look at the completed Web diagram:
    Realized Web Diagram
    Note that each of the Web Page nodes have been realized, and the Command button links are in place.
  2. Open UserAdminView.jsp.
  3. Drag a Link component from the Faces Components palette drawer, and drop it next to the data table in the file.
  4. Type /UserAdminCreate.jsp in the URL field, and Create in the Label field. Click OK.
  5. Drag a Command - Hyperlink component from the Faces Components palette drawer, and drop it onto the output field labeled {userid} in the data table.
  6. Open the Properties view if it is not already active, and click the Add Rule button. (You may need to scroll to the right.)
  7. In the Add Navigation Rule dialog, select UserAdminUpdate.jsp from the Page list box.
  8. Select the The outcome named radio button and type update.
  9. Click OK.
  10. Select the Parameter tab in the Properties view.
  11. Click the Add Parameter button.
  12. Type userid in the Name field.
  13. Click the cell in the Value field, and then click the browse icon to open the Select Page Data Object dialog. Expand userFacadeLocal > findByName(java.lang.String) > userFacadeLocalFindByNameResultBean, and select userid (java.lang.Integer) in the Select Page Data Object dialog.

    Select Page Data Object dialog
  14. Click OK.

Next, you must add code for storing the parameter in the session scope, so that the update page can use the user ID to supply the user information in the update page's input form.

  1. Click the Quick Edit view tab. Click in the Quick Edit editing area, which will create an empty template for the action code associated with the Update button, and type the following code:
    String userid = (String)getRequestParam().get("userid");
    getSessionScope().put("userid", new Integer(userid));
    return "update";
    
  2. Save and close the file.

Run the UserAdmin portlet

To verify that pages in the UserAdmin portlet are working as intended up to this point, you should run the JSP file on the internal browser provided with Rational tools. To run the UserAdmin portlet, do the following:

  1. Select the AuctionPortlet project in the Project Explorer, and select Run > Run on server from its pop-up menu.
  2. Because you have already defined the WebSphere Portal v5.1 test environment, select it, and click Finish in the Server Selection wizard.
  3. The file will eventually display in the browser. Here you can see the input fields, links, and layout that a user would see on a portal site.
  4. Type % in the Name field and click the Find button to retrieve existing users from the database.

    Run the newly-created portlets

Notice that pressing the Create link or selecting a user in the data table opens the UserAdminCreate or UserAdminUpdate page, respectively. If you supply values in either of these pages and click the Create or Update button, the additions and updates will be accepted. Updated data should be reflected immediately in the UserAdminView page. If your search name matches a user name that you created (for example, you can use a wildcard character % to retrieve all users), the new user should be displayed when you return from the create page.

Before we move to the next exercise, stop the test environment server. To stop the test environment server, simply select it in the Servers view, and click the Stop the server tool bar button Stop the server.

Now you are ready to begin Exercise 1.5: Adding portlets that search Auction site listings and provide listing details.

Feedback
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.