<<

. 28
( 87 .)



>>

(using the value public for non-logged-in, and protected for logged-in
users), or a speci¬c command (using one of the attribute values LoginUser,
LogoutUser, and ShowTools).


De¬ning Your Own Themes
Unless you are only exploring WebSphere Portal server or using it to build
very small implementations, it is almost certain that you will want to create
your own themes and possibly your own skins. While IBM made an effort
P1: FCH/SPH P2: FCH/SPH QC: FCH/SPH T1: FCH
WY009-08 WY009-BenNatan-v1.cls May 9, 2004 15:56




150 Chapter 8


to include a variety of themes and skins, to allow you to use the portal out of
the box, in reality you would need to conduct some further customization.
As with any Web site or Web application, you need to ¬ne-tune the visual
appearance to make it appealing to users and to ensure that it follows the
standards used throughout your organization.

Creating a New Theme
To create a new theme, you need to go back to the directory <WAS ROOT>/
installedApps/<HOSTNAME>/wps.ear/wps.war where themes and
skins are located. Here, you create a new directory with a new name corre-
sponding to the theme name. For example, to add a theme called NewTheme
you need to create a directory with this name.
Once the directory is created, you need to populate it with the various
resources needed, for example, JSP, images, and CSS style sheets. One way to
go about this is to just copy an existing theme, for example, the Corporate
theme.
Inside the theme directory, the most important JSP is the previously men-
tioned Default.jsp, which is the entry point for the theme. We have also
discussed the CSS style sheet Styles.css. A lot of small image ¬les are
used for the various buttons (for example, go.gif, help.gif) and you
may customize each one. The banner is stored in Banner.jpg, and the
¬le navfade.jpg provides the background for the navigation bar on the
left side of a page. As starters, we will change the banner. To do this, you
need to replace the ¬le Banner.jpg with your own ¬le. For example, we
will use the banner shown in Figure 8-6.
At this point you have your New Theme ready to be used, and we need
to make WebSphere Portal aware of it. To do this, you need to perform the
following sequence of operations:
1. Click the Administration button on the main toolbar.
2. Click Portal User Interface.
3. Click Themes and Skins.
4. You will now see the window as shown in Figure 8-7; click Add New
Theme.




Figure 8-6 New Banner.jpg.
P1: FCH/SPH P2: FCH/SPH QC: FCH/SPH T1: FCH
WY009-08 WY009-BenNatan-v1.cls May 9, 2004 15:56




Tailoring the Portal Web Design 151




Figure 8-7 Themes and skins management.



A new window will be shown (see Figure 8-8). Here you need to follow
these steps:

1. Enter the theme name, for example, New Theme.
2. Enter the theme directory name, in our case New Theme (note this is
a relative path).
3. Choose which themes may be used in this theme.
4. You may click Set locale-specific titles to choose local-speci¬c
names for this theme.
5. Select OK.

Finally, you can see the new theme (and speci¬cally the new banner) just
by returning to My Portal.
In the window shown in Figure 8-7 you may also remove a theme or edit a
theme. Removing the theme is important whenever you accidentally create
an erroneous theme, as leaving it in the portal might allow users to apply it.
Theme editing is quite limited, and allows you to control its local-speci¬c
naming and allowed skins.
It is usually a good idea to prepare a preview of your theme, and store it
in the preview.gif ¬le in the theme directory. This will allow users (or
other administrators) to associate the name with the theme.
P1: FCH/SPH P2: FCH/SPH QC: FCH/SPH T1: FCH
WY009-08 WY009-BenNatan-v1.cls May 9, 2004 15:56




152 Chapter 8




Figure 8-8 Adding a new theme.

Figure 8-9 shows the portal main page following the banner change.
Notice that the Portal Server automatically concatenated several copies of
the image provided to ¬ll the full width of the page.

The Anatomy of a Theme
A theme in WebSphere Portal Server is implemented via a set of JSPs. We
have mentioned the Default.jsp page, which serves as the entry point
for the generation of content. This page includes other JSPs, which are part




Figure 8-9 New banner within portal page.
P1: FCH/SPH P2: FCH/SPH QC: FCH/SPH T1: FCH
WY009-08 WY009-BenNatan-v1.cls May 9, 2004 15:56




Tailoring the Portal Web Design 153


of the theme de¬nition. If a theme does not include any of these ¬les, the
default version of the JSP is used.
The other JSPs are as follows:
AdminToolBarInclude.jsp. Displays links used by the
Administrator for customizing pages and creating new pages:
Edit Page
Assign Permissions
New Page
ToolBarInclude.jsp. Displays the toolbar available on the top of
the page, offering options such as Sign Up or Log in when the user is
not logged in, and options such as My Portal or Administration
when the user is logged in
Head.jsp. Displays the text in the <HEAD> element of the generated
HTML page
PlaceBarInclude.jsp. Displays a second level navigation toolbar
PageBarInclude.jsp. Displays a third level navigation toolbar
In addition to JSP ¬le, a theme directory contains other ¬les used as building
blocks for JSPs, such as GIF image ¬les, and CSS style sheets.

Customizing Themes
In the previous section we added a new theme, but in fact we did not change
much in terms of layout or functionality.
One of the ¬rst things you would like to change is the company name
and company logo used in the portal. There are two ways to go about doing
this. One way is to go to a ¬le called engine.properties located in <WPS
Root>/shared/app/nls, and edit the resource called title. Alternatively,
you can modify this in the ¬le Default.jsp of your theme. In order to
do this, you must have some basic acquaintance with JSPs, which we will
assume you have (if not, you can skip to the next section).
Given below is the default content of the ¬le Default.jsp. This is a rel-
atively short, albeit not very readable JSP. This JSP determines the general
layout of pages in the portal, using an HTML table construct. The most no-
table feature in this page is that it uses tags, which are speci¬c to WebSphere
Portal. As mentioned above, these tags are identi¬ed by the wps: pre¬x.
The ¬le Default.jsp starts with some standard headers.
<%@ page session="false" buffer="none" %>
<%-- Must be Transitional DTD or Mozilla/Netscape 6 will not correctly
display tables used for visual layout. --%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<%-- @copyright jsp --%>
P1: FCH/SPH P2: FCH/SPH QC: FCH/SPH T1: FCH
WY009-08 WY009-BenNatan-v1.cls May 9, 2004 15:56




154 Chapter 8

We then include the engine.tld taglib, with the pre¬x wps, as well as
some additional tag libraries.
<%@ taglib uri="/WEB-INF/tld/engine.tld" prefix="wps" %>
<%@ include file="./extension/TagLibInclude.jsp" %>
<%-- This includes Extend/Express specific tag libraries. --%>

Next comes a <wps:constants/> tag. This tag makes the two constants
wpsBaseURL and wpsDocURL available in the remainder of the page. Later
this page uses the former, which indicates the base URL for WebSphere
Portal, e.g. http://localhost:9081/wps/.
<wps:constants/>

The HTML page starts here, including the ¬le Head.jsp. This ¬le de¬nes
the HTML page header using a <head> tag. The Head.jsp page is of
course customizable, and in fact it is taken from the theme (that is, you may
de¬ne a different implementation for different user groups). By default, the
header reads “IBM WebSphere Portal.”
<html>
<%@ include file="./Head.jsp" %>

Next starts the page body, with some browser-speci¬c directives.
<%-- Set margins to 0 here in addition to stylesheet to support old
versions of Netscape --%>
<body marginwidth="0" marginheight="0" <%=bidiDirAttr%>
onLoad="if ( document.forms['wpsPageGroupSelectionForm'] != null )
document.forms['wpsPageGroupSelectionForm'].reset();" >

At this point, immediately after the <body> tag, the ¬le PageBeginIn-
clude.jsp is included. The content of this ¬le is dependent on the version
of WebSphere Portal Server used, but it is typically empty.
<%@ include file="./extension/PageBeginInclude.jsp" %>
<%-- This includes Extend/Express specific page logic. --%>

Finally we get to add the table, which is used to ensure a uniform width for
the components of the page. You can notice the use of the tag wps:text, for
example <wps:text key="title" bundle="nls.engine">. This re-
turns the text for the key title in the locale of the user. Replacing this with
a hard-coded title will be equivalent to changing the engine ¬le residing
in the directory shared\apps\nls under the Portal Server root, or one of
the locale-speci¬c variants of it. Obviously, to have a locale-speci¬c title it
might be easier to stick to the latter solution.
<%-- This table is here so the banner is the same width as the portlets
--%>
<table border="0" cellpadding="0" cellspacing="0" width="100%"
height="100%">
P1: FCH/SPH P2: FCH/SPH QC: FCH/SPH T1: FCH
WY009-08 WY009-BenNatan-v1.cls May 9, 2004 15:56




Tailoring the Portal Web Design 155


<tr> <!-- logo -->
<td valign="top" align="<%=bidiAlignLeft%>" nowrap>
<img align="absmiddle" alt='<wps:text key="title"
bundle="nls.engine">Portal Title</wps:text>'
title='<wps:text key="title" bundle="nls.engine"/>'
src='<wps:urlFindInTheme file="logo.gif"/>'>
<a href="#wpsMainContent"><img width="1" height="1" border="0"
src='<%= wpsBaseURL %>/images/dot.gif'
alt='<wps:text key="link.skiptocontent" bundle="nls.engine"/>'
title='<wps:text key="link.skiptocontent" bundle="nls.engine"/>'>
</a>
</td>
<td width="100%" height="1" valign="top" align="<%=bidiAlignRight%>">


We include the ¬le ToolbarInclude.jsp that controls the top-level
navigation, allowing you to switch between My Portal and Adminis-
tration. This would be the page to modify if you want to include another
visible node directly under the ContentRoot. Following it, another tool-
bar AdminLinkBarInclude.jsp is loaded based on the tag <wps:if
portletSolo="no">. This is a standard condition statement and several
conditions can be checked with its attributes. WebSphere Portal provides a
multitude of attributes, which can be checked, such as the locale, whether
a user is logged in or not, or client capabilities. Here only one condition is
checked and that is portletSolo is set to no, i.e. the portlet is not running
solo state. Portlets are running in one of the following four states: normal,
maximized, minimized, and solo. There is another possible condition
attribute for testing the portlet state, called portletState. Thus the con-
dition portletSolo="no" is equivalent to portletMode="solo". The
wps:if below is used to enclose an include statement for adding the nav-
igation JSP, which we will discussed later.

<%@ include file="./ToolBarInclude.jsp" %>
<%-- Don't show navigation in solo mode --%>
<wps:if portletSolo="no">
<%@ include file="./AdminLinkBarInclude.jsp"%>
</wps:if>

</td>
<tr>
<td colspan="2">

<<

. 28
( 87 .)



>>