Exercise 2.1: Creating a new portal to display the portlet application

Before you begin, you must complete Exercise 1.5: Add portlets that search Auction site listings and provide listing details.

In this exercise, you will create a new portal application with pages that will contain the portlets that have been created up to this point.

Create the portal project

To create the Auction portal project, follow these steps:

  1. From the workspace menu, select File > New > Portal Project.
  2. In the initial page of the New Portal Project wizard, type AuctionPortal into the Name field.
  3. Note that the WebSphere Portal version defaults to 5.1. Click Next.
  4. Select a default theme for the site. For purposes of this tutorial, select the WebSphere theme.
  5. Select a default skin associated with the the WebSphere theme. Note that default skins for a portal site are always associated with a default theme. For purposes of this tutorial, select the Outline skin.

    There are two types of default skin. One is for the overall portal site, and the other is for a theme. In this wizard, you are specifying only the default skin for the selected default theme. (Only one skin can be a default skin for a portal site.) Typically, each theme has a default skin defined, and the default skin for a portal site is rarely used.

  6. Click Finish. If you are asked to switch to the Web Perspective, click OK.

Portal Designer displays the project's Portal Configuration file, which shows the default navigation structure with one label and a child page:
Portal Configuration file
Portal Designer provides specialized editors for working with a number of familiar portal elements, including labels, pages, a navigation, and themes and skins, which, along with cascading style sheets, allow you to control the look and feel of a portal site.

Create a label and pages to contain the portlet applications

Use Portal Designer to create the portal layout elements for the portlets that you have created:

  1. Select Label1 and then select the Properties view tab. Click the Title tab in the Properties view, and change Label1 to Auction. Press Enter.
  2. Select Page1 and then select the Properties view tab. Click the Title tab in the Properties view, and change Page1 to Registration. Press Enter.
  3. Drag a Page component from the Portal drawer in the palette onto the Auction label. This will add a new page next to the Registration page. Change the new page's title to Listing, as you did in the previous step.

Add rows and columns to layout portal pages

The portal pages provide a framework for adding content to your portal site. You have already created this content in the form of the portlets defined in previous exercises. In order to add multiple portlets to individual pages, you can define a spatial layout with some combination of rows and columns that allow you to place portlets on the page in a logical fashion.

By default, each page that you create includes a single column and a single row. It is a simple process to add columns and rows as you would for any "table" in a Web application. (Note that the table metaphor is not part of the standard portal terminology--it is only being used for instructional purposes.) Because you will be adding two portlets to the listing page, you can add another "cell" to the Listing page layout, in this case a column. You can do this in one of two ways:

In either case, the additional column is created, so that the ListingDetail portlet can be inserted later. The Portal Configuration displays the empty column:
Portal Configuration file

Add portlets to the portal pages

Now that there are new pages with layout elements under the Auction label, you can add the portlets that were created in earlier exercises in the following way:

  1. Select the Registration page.
  2. Drag a Portlet item from the palette to the column in the Registration page. Select the User Admin portlet from the options in the Insert Portlet dialog, and click OK.

    Note that you can also perform the same action using the Outline view. In the Outline view, expand the Layout node, and then the Registration node. Under the Column, you will see the UserAdmin portlet icon. Select the column and right-click to open the pop-up menu. Observe that there are cascading menus to add additional portlets to the page.
    Portlet in the Outline view

  3. Select the Listing page, by clicking Listing in the navigation area. You are now ready to add the cooperative Listing portlets to the Listing page:
    1. Using one of the methods described in the previous step, insert the ListingSearch portlet into the first column of the Listing page.
    2. Select the column to the right of the ListingSearch portlet, and insert the ListingDetail portlet.
  4. Save the file.

    The updated Listing page should look similar to this:
    Listing page

The portal site is nearly completed. In the exercise that follows, you will learn how to customize the look and feel of the portal site using some of the specialized editors that work in conjunction with Portal Designer.

Now you are ready to begin Exercise 2.2: Customizing the portal site.

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