Exercise 1.5: Adding portlets that search Auction site listings and provide listing details

Before you begin, you must complete Exercise 1.4: Creating pages for creating and updating user information.

In this exercise, you will create additional portlets that provide cooperative behavior, using the Click-to-Action mechanism to send data from a source portlet to a target portlet. The source portlet (ListingSearch) uses a session bean to access Auction item data. After locating specific listings with the ListingSearch portlet, the target ListingDetail portlet displays detailed information for the items located by a search. In each case, you must first create the portlet.

Create the ListingSearch portlet

To create the ListingSearch portlet, follow these steps:

  1. In the Project Explorer, expand the Dynamic Web Project folder, and locate the AuctionPortlet project folder. Right click on the project folder, and Select New > Portlet.
  2. In the initial page of the New Portlet wizard, change the Default name prefix to ListingSearch.
  3. Select the Faces portlet radio button.
  4. Click Next.
  5. Select AuctionPortlet application from Application name drop-down list.
  6. Type Listing Search in the Portlet title field.
  7. Click Finish.

ListingSearchView.jsp opens in the editing pane.

Add a data table to the ListingSearch portlet page

With the ListingSearchView.jsp file open in Page Designer, follow these steps to add session bean data as the data source for the ListingSearch page:

  1. Delete the default Place content here. text.
  2. Drag the EJB Session bean object from the Data drawer in the palette to the file.
  3. When the Session Bean wizard opens, click the New EJB Reference button.
  4. Expand the AuctionPortletEAR and AuctionEJB50 folders, and select ListingFacade to create the enterprise bean reference. Click Finish.
  5. Click Next in the Session Bean wizard.
  6. Select the findByTitle(String title) interface, which will be used for the input field on the portlet page, and click Next.
  7. Note that the title field is selected. Click Options.
  8. Type Find in the Label field. Click OK.
  9. Click Next, which should bring you to the Results Form page of the wizard. In this page, you will define the data table that will retrieve and display the data from the database.
  10. Click None to deselect all of the columns, so that you can individually select, organize, and configure the appropriate columns for the data table to be used in the portlet page. Then, select the check boxes for the following columns:
  11. Using the up down arrow buttons, move the selected data columns into the order shown in the step above.
  12. Select and change the Label value for the itemid column to Item ID.
  13. Click Finish to generate the default user interface for the UserAdminView.jsp page. The user interface will look similar to the following:
    ListingSearchView.jsp
  14. Save the file.

Add Java page code to the UserAdmin page

In this portion of the exercise, you will add Java page code to accomplish the following:

  • Store the title parameter in the session scope, so that it can be reused for any future refresh of the portlet content.
  • Initialize the parameter to be displayed in the Title input field with the one stored in session scope.
  • Initialize the result data using title parameter stored in the session scope.
  • You can add the EJB reference logic and the code to bind the invocation and results to the user interface, using the following steps:

    1. Select Edit Page Code from the pop-up menu in Page Designer.
    2. Type the following bold code into doListingFacadeLocalFindByTitleAction():
      public String doListingFacadeLocalFindByTitleAction() {
          String title = getListingFacadeLocalFindByTitleParamBean().getTitle();
          getSessionScope().put("title", title);
          try {
              listingFacadeLocalFindByTitleResultBean = 
              	getListingFacadeLocal().findByTitle(title);
          } catch (Exception e) {
              logException(e);
          }
          return null;
      }
      
    3. Type the following bold code into getListingFacadeLocalFindByTitleParamBean():
      public ListingFacadeLocalFindByTitleParamBean 
      	getListingFacadeLocalFindByTitleParamBean() {
          if (listingFacadeLocalFindByTitleParamBean == null) {
              listingFacadeLocalFindByTitleParamBean = 
              	new ListingFacadeLocalFindByTitleParamBean();
              String title = (String)getSessionScope().get("title");
              listingFacadeLocalFindByTitleParamBean.setTitle(title);
          }
          return listingFacadeLocalFindByTitleParamBean;
      }
      
    4. Type the following bold code into getListingFacadeLocalFindByTitleResultBean():
      public ItemData[] getListingFacadeLocalFindByTitleResultBean() {
          if (listingFacadeLocalFindByTitleResultBean == null) {
              String title = (String)getSessionScope().get("title");
              if (title != null) {
                  try {
                      listingFacadeLocalFindByTitleResultBean = 		
                           getListingFacadeLocal().findByTitle(title);
                  } catch (Exception e) {
                      logException(e);
                  }
              }
          }
          return listingFacadeLocalFindByTitleResultBean;
      }
      
    5. Save ListingSearchView.java.

    Create the ListingDetail portlet

    To create the ListingDetail portlet, follow these steps:

    1. In the Project Explorer, expand the Dynamic Web Project folder, and locate the AuctionPortlet project folder. Right click on the project folder, and Select New > Portlet.
    2. In the initial page of the New Portlet wizard, change the Default name prefix to ListingDetail.
    3. Select the Faces portlet radio button.
    4. Click Next.
    5. Select AuctionPortlet application from Application name drop-down list.
    6. Type Listing Detail in the Portlet title field.
    7. Click Finish.

    The ListingDetailView.jsp file will open in the editing pane.

    Add a data form to the ListingDetail portlet page

    With the ListingDetailView.jsp file open in Page Designer, follow these steps to add session bean data as the data source for the ListingDetail page:

    1. Delete the default Place content here. text.
    2. Drag the EJB Session bean object from the Data drawer in the palette to the file.
    3. When the Session Bean wizard opens, select ejb/ListingFacade and click Next.
    4. Select the findById(Integer itemid) interface, which will be used for the input field on the portlet page.
    5. Click Next.
    6. Note that the itemid field is selected. Select and change the Label value for the itemid field to Item ID:.
    7. Click Options.
    8. Type Find in the Label field. Click OK.
    9. Click Next, which should bring you to the Results Form page of the wizard. In this page, you will define the data form that will retrieve and display the data from the database.
    10. Click None to deselect all of the fields, so that you can individually select, organize, and configure the appropriate fields for the data table to be used in the portlet page. Then, select the check boxes for the following fields:
    11. Using the up down arrow buttons, move the selected data fields into the order shown in the step above.
    12. Click Finish to generate the user interface for the ListingDetailView.jsp page. The user interface will look similar to the following:
      ListingDetailView.jsp
    13. Save the file.

    Add Java page code to the UserAdmin page

    In this portion of the exercise, you will add Java page code to accomplish the following:

  • Store the itemid parameter in the session scope, so that it can be reused for any future refresh of the portlet content.
  • Initialize the parameter to be displayed in the Item ID input field with the one stored in session scope.
  • Initialize the result data using itemid parameter stored in the session scope.
  • You can add the EJB reference logic and the code to bind the invocation and results to the user interface, using the following steps:

    1. Select Edit Page Code from the pop-up menu in Page Designer.
    2. Type the following bold code into doListingFacadeLocalFindByIdAction():
      public String doListingFacadeLocalFindByIdAction() {
          Integer itemid = getListingFacadeLocalFindByIdParamBean().getItemid();
          getSessionScope().put("itemid", itemid);
          try {
              listingFacadeLocalFindByIdResultBean = 
              	getListingFacadeLocal().findById(itemid);
          } catch (Exception e) {
              logException(e);
          }
          return null;
      }
      
    3. Type the following bold code into getListingFacadeLocalFindByIdParamBean():
      public ListingFacadeLocalFindByIdParamBean 
      	getListingFacadeLocalFindByIdParamBean() {
          if (listingFacadeLocalFindByIdParamBean == null) {
              listingFacadeLocalFindByIdParamBean = 
              	new ListingFacadeLocalFindByIdParamBean();
              Integer itemid = (Integer)getSessionScope().get("itemid");
              listingFacadeLocalFindByIdParamBean.setItemid(itemid);
          }
          return listingFacadeLocalFindByIdParamBean;
      }
      
    4. Type the following bold code into getListingFacadeLocalFindByIdResultBean():
      public ItemData getListingFacadeLocalFindByIdResultBean() {
          if (listingFacadeLocalFindByIdResultBean == null) {
              Integer itemid = (Integer)getSessionScope().get("itemid");
              if (itemid != null) {
                  try {
                      listingFacadeLocalFindByIdResultBean = 
                           getListingFacadeLocal().findById(itemid);
                  } catch (Exception e) {
                      logException(e);
                  }
              }
          }
          return listingFacadeLocalFindByIdResultBean;
      }
      
    5. Save ListingDetailView.java.

    Add cooperative linking to the ListingSearch portlet

    The term cooperative portlets refers to the capability of portlets on a page to interact with each other by sharing information. One or more cooperative portlets on a portal page can automatically react to changes from a source portlet triggered by an action or event in the source portlet. Portlets that are targets of the event can react so that users are not required to make repetitive changes or actions in other portlets on the page. The mechanism used to implement cooperative behavior is called a Click-to-Action event.

    You launch a Click-to-Action event from an icon on the source portlet. The icon presents a pop-up menu containing the list of targets for the action. After the user selects a specific target, the property broker delivers the data to the target in the form of the corresponding portlet action. Using the Click-to-Action delivery method, users can transfer data with a simple click from a source portlet to one or more target portlets, causing the target react to the action and display a new view with the results.

    Use the following steps to set up cooperative behavior between the ListingSearch and ListingDetail portlets:

    1. Open ListingSearchView.jsp in Page Designer. (In the Project Explorer, expand the AuctionPortlet and WebContent folders, and double-click the file.)
    2. Drag a Click-to-Action Output Property object from the Portlet palette drawer and drop it onto the output field in the data table labeled {itemid}.

      Note: Ensure that you drop the Click-to-Action Output Property object onto the output field, not before or after it. The output field should be highlighted in a rectangular box, and look similar to this:
      Dropping an Output Property onto an output field.
      (You may need to move the dialog box aside to see the output field selection.)

    3. In the Insert Click-to-Action Output Property dialog, supply the following values: Save the file.
    4. To verify that the correct Click-to-Action code has been added, open the Source view, and ensure that the following code is included in the file:
      <h:outputText id="text3"
      	value="#{varlistingFacadeLocalFindByTitleResultBean.itemid}"
      	styleClass="outputText">
      	<f:convertNumber />
      </h:outputText>
      	<c2a:encodeProperty type="itemid" 
      		namespace="http://auctionportlet" name="itemid"
      		value="#{varlistingFacadeLocalFindByTitleResultBean.itemid}">
      	</c2a:encodeProperty>
      
      Note the highlighted value attribute. This attribute will be missing if the Output Property has not been added to the page correctly.

    These steps identify ListingSearch as the source portlet. Next, you must enable ListingDetail as the target portlet:

    1. Expand AuctionPortlet > Portlet Deployment Descriptor in the Project Explorer. Select Cooperative > Enable Target from the ListingDetail portlet's pop-up menu.
    2. In the Enable Cooperative Portlet dialog, type itemid in Data type field.
    3. Click the Browse button next to the Action field, and select /ListingDetailView.jsp > form1 > button1. Click OK.
    4. In the Enable Cooperative Portlet dialog, type Show Detail in Label field. Click OK.

    To verify that the Click-to-Action source are correctly identified, return to the Portlet Deployment Descriptor folder in the Project Explorer. The icons that signify a source portlet (ListingSearch) and a target portlet (ListingDetails) should look like this:
    Click-to-Action portlets

    Test cooperative behavior in the Listing portlets

    To verify that the ListingSearch and ListingDetail portlets are working as intended, you should run them in the test environment.

    To run the portlets, 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 portlets will display in the browser. Here you can see the input fields, buttons, and layout that a user would see on a portal site.
    4. In the ListingSearch portlet, type in the wildcard search character % to list all items, and click the Find button. The table below the Submit button will display the auction items that match the search string.
    5. Click the Click-to-Action icon Click-to-Action icon in the Item ID column to send the listing ID to the ListingDetail portlet. The ListingDetail portlet displays detailed information about the item that was located by the search.

    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 2.1: Creating a new portal to display the portlet application.

    Terms of use | Feedback
    (C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.