. 27
( 87 .)


We went through the process of modifying the default preinstalled portal,
as well as de¬ning our own new portal. This chapter provided a glimpse
into the ease with which WebSphere Portal is con¬gured and customized.
At this point you should be able to de¬ne new portals and pages, and to
place portlets within pages.
It goes without saying that controlling portal structure is merely the ¬rst
step in customizing your portal. An important aspect of your portal design
that has a strong impact on usability and user adoption is the look and
feel of the portal. In the next chapter we will expand on the topic of portal
customization, going into the visual (or Web design) aspects. Later in the
book you will learn how to develop your own portlets.
WY009-08 WY009-BenNatan-v1.cls May 9, 2004 15:56


Tailoring the Portal
Web Design

In the previous chapter we described the process of customizing the struc-
ture and content of WebSphere Portal. In this chapter we focus on visual
aspects of the portal. The visual aspects of your portal have a signi¬cant
impact on the quality of user experience, and thus indirectly on the success
of your portal. You would like the look and feel of your portal to be appeal-
ing, and usually you would like it to be unique. In this chapter you will
learn how to customize the visual appearance of your portal. For the most
part, such customization requires at least basic JSP programming skills.

Themes and Skins
A WebSphere Portal theme is an abstraction that captures the look and feel
of a Web site. The theme is used to determine the global visual appearance
of a page. Thus the choice of theme affects the navigational structure, logos,
banners, fonts, and colors. For example, the theme determines whether
navigation is performed using a toolbar on top of the page or a menu on
the side of the page. It also determines the colors and fonts used.
Skins control the look and feel of borders around components. Skins
can be either independent or associated with themes. For example, you
may have a skin for which portlets have no borders, or another skin where
borders are rectangular with rounded corners.
It is important to realize that both themes and skins are not necessarily
¬xed throughout the portal. It is possible to have a page of a set of pages
with one theme and other pages with another theme. Similarly, portlets
even within a single page can have different skins.

WY009-08 WY009-BenNatan-v1.cls May 9, 2004 15:56

144 Chapter 8

Similar to other aspects of WebSphere Portal customization, theme and
skin customization can take place at three different levels:

Portal Administrator. Controls user access permissions, and de¬nes
the extent to which a user may customize pages in the portal
Web Designer. Controls visual aspects usually going into the level of
End user. Controls content and appearance as much as is permitted
by the administrator

Default Themes and Skins
One of the easiest ways of understanding how something is built is to look
at some existing examples. The themes and skins available to WebSphere
Portal are stored in the directory <WAS ROOT>/installedApps/
<HOSTNAME>/wps.ear/wps.war. In this location you can ¬nd two
directories named themes and skins. On a Windows machine called
Potter and using the default installation location for WebSphere, you have
these directories under C:\Program Files\WebSphere\AppServer\
installedApps\potter\wps.ear\wps.war. Each of the two directo-
ries contains subdirectories for the different markup types supported. By
default HTML, cHTML, and WML are supported, and each has a separate
directory. However, in the default con¬guration WebSphere Portal supports
themes only for HTML. This makes perfect sense, as cHTML and WML are
used to deliver text-based content to cell phones. In the HTML directory, the
JSP page Default.jsp is used as the entry point for the default theme.
Additional themes have their own subdirectories under the directory HTML:


Each of these directories has its own Default.jsp page, and in addition
it contains CSS style sheets and images. The default style sheet in each theme
is called Styles.css, and the default version of this ¬le is directly under
the HTML directory. Images are used as much as they would in the context
of ordinary HTML content, and for example the ¬le Banner.jpg holds the
banner shown on top of each page. Figure 8-1 shows the default theme as
well as the other four preinstalled themes. Note that the ¬le preview.gif
in the directory corresponding to each theme shows a downsized version
of a page rendered with the theme.
WY009-08 WY009-BenNatan-v1.cls May 9, 2004 15:56

Tailoring the Portal Web Design 145

Figure 8-1 Preinstalled themes.

At this point you might wonder why WebSphere Portal organizes the por-
tal resources in such a complicated way, where the default theme is de¬ned
in one directory and all other themes are de¬ned in subdirectories. This
organization stems from the fact that the portal provides fully dynamic ag-
gregation of information, depending on locale, client, theme, and markup.
In order words, whenever a certain resource is needed (be it a JSP, image,
or CSS style sheet), the portal looks for it based on the directory structure.
For example, when looking for the Banner.jpg ¬le, the directory of the
current theme is searched, and if nothing is found, the same ¬le in the HTML
directory is used. More generally, each research is sought for by traversing
a set of directories, starting from the most speci¬c location and moving
higher in the hierarchy. The location is based not only on theme, but also
on locale, client, and markup. For example, consider the ¬le Styles.css
when you are in the Engineering theme, using an Internet Explorer client
using an en (English) locale. The search sequence would be as follows:

WY009-08 WY009-BenNatan-v1.cls May 9, 2004 15:56

146 Chapter 8

While this method of organizing resources might be confusing at ¬rst
due to its complexity, it is quite powerful in allowing you to adapt style
and content to different users. The search sequence starts with the most
speci¬c de¬nition to the most general and stops when the needed resource
is found. The way resources are sought allows you to minimize duplication
of resources. By placing a resource at a high level of the hierarchy, you make
it available for all locales and clients, and you can make customized copies
of it when needed. It goes without saying that if a resource is nowhere to
be found, the resulting HTML content might be erroneous. To this end,
it is important to keep a default copy of important resources in the root
Similar to themes, there is a directory skins under the wps.war direc-
tory. The default skins are:


The visual effects of the various skins are shown in Figure 8-2. The dif-
ferentiation between skins is through the look and feel of the title bar and
window borders.

Choosing Themes and Skins
In the previous chapter, we saw how the Manage Pages window allows
you to browse through the content hierarchy, and edit various properties
of pages and labels. One such property is the theme, which may be edited
through the Edit Page Properties button. An example of this is shown in Fig-
ure 8-3 where the theme for the My Portal label is set. The drop-down menu
lists the available themes, as well as Portal Default Theme. For lower-level
WY009-08 WY009-BenNatan-v1.cls May 9, 2004 15:56

Tailoring the Portal Web Design 147

Figure 8-2 Preinstalled skins.

Figure 8-3 Choosing a theme.
WY009-08 WY009-BenNatan-v1.cls May 9, 2004 15:56

148 Chapter 8

Figure 8-4 Choosing a skin.

nodes in the content hierarchy, the ¬rst entry (and the default one) is In-
herit Parent Theme. This implements the simplest policy, which implies a
uniform look and feel for the whole portal.
Clicking the Appearance bar brings the appearance portlet, which enables
the selection of skins. Figure 8-4 shows this window for the default welcome
window used when WebSphere Portal is ¬rst installed. Note that there are
six different portlets, and each one may have its own skin.
End users can customize themes according to their own preference, as
long as they have permission to do this. End-user editing is made through
the page itself using the Edit Page link when available.
The easiest way to see the effects of different skins would be to choose
six different skins for each of the portlets here, and going back to My Portal
to see the visual effect. Figure 8-5 shows the Welcome portlet with a Hint

In addition to themes and skins, WebSphere Portal de¬nes a notion of
screens. A screen is de¬ned as a template for a page of portal content.
Don™t confuse this de¬nition of a screen with that of a portal page, which
is the end result of a process involving the screen. A portal page that is
visible to the user is the product of the aggregation of several information
sources, which include the portal page (which is part of the portal hierarchy
as discussed in the previous chapter), page theme, skins, and the screen.
WY009-08 WY009-BenNatan-v1.cls May 9, 2004 15:56

Tailoring the Portal Web Design 149

Figure 8-5 Welcome portlet with Hint skin.

The default screen is the Home screen, located in the ¬le Home.jsp. This
¬le is located in the directory screens\html under the aforementioned
wps.war directory.
A portal page is only loaded when the tag <wps:screenRender/> is
found in the page. This tag is a WebSphere Portal Server JSP tag, as implied
by the wps: pre¬x. The Portal Server de¬nes dozens of tags to support the
customization of your portal, and we will cover most of them in the remain-
der of this chapter. Literally, the screenRender tag indicates the location
where the current screen is to be rendered. This speci¬c tag can only be used
once within a portal JSP. We will see an example of its use in a short while.
Switching to a different screen is usually done through toolbar links. This
is done using a special tag wps:url. This tag generates a URL pointing into
a page in the portal. This tag can use the attributes screen, home, or com-
mand. These attributes specify respectively a screen name, the home page


. 27
( 87 .)