. 25
( 87 .)


De¬ning Portals and Pages 129

Figure 7-1 Default Content Root composition.

under Content Root). The page properties are accessed when you click the
context-sensitive Properties icon on a window or under Manage Pages.

Browsing through the Content Hierarchy
The Manage Pages window allows you to browse through the content hier-
archy. For example, clicking on My Portal would go to the next level down
this hierarchy and show the nodes under My Portal, as shown in Figure 7-2.
Note that the options at the top of the page allow you to search for a page by
various criteria, and below that you see the current node you are viewing,
as well as the path in the hierarchy leading up to it, starting with Content
Root. Each of the parent node names is a clickable link, bringing you to that
page. On the right-hand side of the current node name are some buttons
(Figure 7-3 summarizes the buttons available under Manage Pages):

Editing page properties
Editing page layout (only for page nodes)
WY009-07 WY009-BenNatan-v1.cls May 17, 2004 18:43

130 Chapter 7

Figure 7-2 Default My Portal composition.

Controlling access permissions
Deleting the node
A table below the current node summarizes the children nodes for this
node. In the case of My Portal in Figure 7-2, we have six groups and one
page. Clicking on any of the child node names brings you to that node,
allowing you to drill lower in the portal structure. Each one of the children
pages has three or four buttons similar to the ones beside the current node
name. In addition, each such children page has an up arrow, or down arrow,
or both. These arrows allow you to change the ordering of children nodes.
The ordering of children nodes controls their order in toolbars.

Button Meaning
Edit Page Layout
Remove Page
Move down in current node
Move up in current node
Edit Properties
Set Page Permissions

Figure 7-3 Buttons available under Manage Pages.
WY009-07 WY009-BenNatan-v1.cls May 17, 2004 18:43

De¬ning Portals and Pages 131

Customizing the Portal Structure
WebSphere Portal provides several levels of customization. Here we will
look at customizing the structure”that is, adding new pages and editing
their attributes. In the next chapter we will look into customizing the Web
design of the portal. It is important to remember that the most powerful
way of customizing the portal is by adding new portlets, but we will get to
this only in Part 3 of the book.

Adding New Nodes
To add a new node under My Portal, go to Manage Pages and navigate to
the My Portal page (as shown in Figure 7-2).
1. Click the New Label button.
2. Enter My Stuff in the Title ¬eld.
3. Select OK.
4. Select OK in the con¬rmation window shown next.
The new group will be added under My Portal as shown in Figure 7-4.
Now add a new page in this group.
1. Click My Stuff in the table of children nodes shown in Figure 7-4.
2. Click the New Page button.
3. Enter Sample Page in the Title ¬eld.
4. Click the Advanced Options button.
5. Click the two-column under A Content Page with These Properties
(second option).
6. Select OK.
7. Select OK in the con¬rmation window shown next.
Finally, add a new URL under the same group. As mentioned above, we
can use a URL node to point to any URL-addressable resource.
1. Click the New URL button.
2. Enter Thinkpad in the Title ¬eld.
3. Enter http://www.ibm.com/thinkpad in the HTML ¬eld.
4. Select OK.
5. Select OK in the con¬rmation window shown next.
Now you should see both new nodes under My Stuff, as shown in Fig-
ure 7-5.
WY009-07 WY009-BenNatan-v1.cls May 17, 2004 18:43

132 Chapter 7

Figure 7-4 New group under My Portal.

Figure 7-5 User view of new group My Stuff under My Portal.
WY009-07 WY009-BenNatan-v1.cls May 17, 2004 18:43

De¬ning Portals and Pages 133

Figure 7-6 Viewing My Stuff through My Portal.

To see the new group from the user perspective, click My Portal on the
portal toolbar, and then click My Stuff on the second layer toolbar. You
should see the window shown in Figure 7-6. As you can see, the page
Sample Page is empty, and clicking on Sample URL gets you to the IBM
ThinkPad site.
The interesting thing to note at this point is how smoothly the new com-
ponents were integrated into the portal as perceived by the user. If you have
any experience with WebSphere Application Server (or any other applica-
tion server), you will appreciate this seamless update of the con¬guration
without the need to restart the server or any container.

De¬ning Page Content
In the previous section we added a new page but it remained empty. To
place some content in the page, we can edit the page layout. To edit a page
layout you need to go to the page and click the Edit Page link just below the
portal toolbar. Another way is to go to Manage Pages, navigate to Sample
page and click the Edit Page Layout button (denoted by a pencil icon).
The Edit Layout page (shown in Figure 7-7) allows you to choose between
six layout types:

One column
Two column
Three column
T layout
Reverse T layout
I layout

Our page was de¬ned as a two-column page, so it includes two adjacent
containers. Each of these containers is a column container, which means
elements within it will stack vertically.
WY009-07 WY009-BenNatan-v1.cls May 17, 2004 18:43

134 Chapter 7

Figure 7-7 Page Customizer Content tab.

Below the layout type you can insert portlets into each of the containers.
In our case we have two containers, and each can have several portlets. To
add a portlet in the left column, simply click the Add Portlet button below
that column.
A new window opens, and here you may select which portlet to add. The
set of portlets available depends on whatever portlets were installed. Later
in the book we will see how to develop our own portlets, but for now we
will stick to the ones packaged into the default installation. For example,
add the World Clock portlet (in version 5.0, it is the 41st entry shown on the
5th page). Once we add the portlet, it is visible inside the column container,
with the following two buttons:

Left arrow. Move to the container on the right
Trashcan. Delete portlet

You may add a portlet on the right column as well, for example the
Currency Calculator portlet. Note that this portlet will have a button for
moving it to the container on the left. In general, a portlet will have a button
for moving it in each of the four possible directions (left, right, up, and down)
where there is a container (see Figure 7-8).
WY009-07 WY009-BenNatan-v1.cls May 17, 2004 18:43

De¬ning Portals and Pages 135

Button Meaning
Edit Page Layout
Remove portlet
Move portlet down
Move portlet up
Move portlet left
Move portlet right

Figure 7-8 Page Customizer Portlet buttons.

Note that at this point you may also edit the page properties via the Edit
Properties button and delete the page using Delete this Page button.
Once you click the Done button, the page is instantaneously updated,
and you may view it going back to My Portal.

Editing Node Properties
Node properties are edited as part of addition of a new node, as we have
seen earlier for both page and label nodes. When editing the properties of
a label node we may modify the following properties (see Figure 7-9):

Title. Text ¬eld controlling the title of the label
Theme. Theme used for Web design (more on themes will be
discussed in the next chapter)
Advanced options.

This page supports: WML, cHTML, HTML. Markup language
support. The default markup language for all pages is HTML, and
a markup is only available for selection if supported for the parent
node of the label.
I want to set titles and descriptions. Allows you to set the title and
description for this label in each of the locales de¬ned (24 of them
by default).

When editing a page node, you may modify the following properties:

Title. Text ¬eld controlling the page title
Advanced options.

This page can be added to a user™s My favorites list. A check box
determining whether a user may bookmark (using the portal™s My
favorites drop menu) the page. This check box is checked by
WY009-07 WY009-BenNatan-v1.cls May 17, 2004 18:43

136 Chapter 7

Figure 7-9 Editing node properties.


. 25
( 87 .)