级别： 初级 Sukumar
Konduru, 顾问软件工程师, 达拉斯，IBM Developer Technical Support Center
2003 年 7 月 01 日 您可能想知道如何将您门户网站上的徽标换成您公司的徽标。或者您想在门户网站上添加一个左侧导航窗格，或更改其背景颜色。通过了解 WebSphere Portal 用于显示门户页面的 JSP 流程以及这些 JSP 的内容，您可以创建或修改主题或皮肤，使您的门户网站看上去象您公司的 Web 站点。
© 2003 International Business Machines Corporation. Allrights reserved.
引言
您可能想知道如何将您门户网站上的徽标换成您公司的徽标。或者您想在门户网站上添加一个左侧导航窗格，或更改其背景颜色。通过了解 WebSphere Portal 用于显示门户页面的 JSP 流程以及这些 JSP 的内容，您可以创建或修改主题或皮肤，使您的门户网站看上去象您公司的 Web 站点。
IBM WebSphere Portal Enable for Multiplatforms V4.2 使用不同的 Java Server Page（JSP）、级联样式表（Cascading Style Sheet，CSS）和图像来显示门户页面。它使用位于
C:\WebSphere\PortalServer\app\wps.ear\wps.war 目录下
themes 、
skins 和
screens 目录中的 JSP 来构造门户页面。这些目录中的每一个都包含
html 、
wml 和
chtml 子目录，WebSphere Portal 将它们用于服务不同客户机，例如桌面浏览器和移动设备。
本文是一系列文章的第一篇，这一系列将讲解 WebSphere Portal 如何为通过 Internet Explorer（IE）访问 WebSphere Portal 的客户机使用缺省主题和缺省皮肤显示门户页面。对于所有其他的主题和皮肤，处理过程也是类似的。
本系列文章说明了:
本文描述了缺省主题定义的
Default.jsp 、
Head.jsp 和
ToolBarInclude.jsp 的内容和流程。
Default.jsp
所有屏幕聚集都从
Default.jsp 开始。用于缺省主题的
Default.jsp 位于
wp_root\app\wps.ear\wps.war\themes\html 。这个 JSP 包含其它用于显示标题、工具栏的 JSP 以及用于往可用位置及页面植入内容的 JSP。在
Default.jsp 的末尾处，
screenRender JSP 标记选择被请求的屏幕（例如
login 或
forgotpassword ）。图 1 演示了
Default.jsp 的流程。
图 1：Default.jsp 的流程
下面的讨论将带您了解
Default.jsp 的内容。当您阅读这些讨论时，您可能想要
查看 Default.jsp 的清单。
-
Default.jsp 文件包含一个 JSP 标记库
engine.tld ，该库使用下列 URI：
<%@ taglib uri="/WEB-INF/tld/engine.tld" prefix="wps" %>
|
这一标记库提供了植入位置名称、页面以及在所要求的主题和皮肤定位图像所需的 JSP 标记。您需要了解这一标记库以便定制您门户网站的外观和感觉。
- 为获取门户网站的基本 URL 以及文档 URL，在
Default.jsp 中使用了
constants JSP 标记。这一元素使得下列两个脚本变量可用于该页面。
-
wpsBaseURL：用于获取门户网站 URL，例如
http://sukumar.ibm.com/wps/ 。使用此变量可生成指向
wp_root\app\wps.ear\wps.war 目录中资源的链接。
-
wpsDocURL：用于生成指向门户网站帮助文件的链接。
- html 内容的头部分通过包含
Head.jsp 而生成，该
Head.jsp 与
Default.jsp 在同一个目录下。本文下一部分将描述
Head.jsp
。
- 接下来，
Default.jsp 包含
extension/PageBeginInclude.jsp 。这个 JSP 只包含用于 WebSphere Portal Enable 版的注释；其内容不在此处加以讨论。
- 对于所有版本，
Default.jsp 都包含下列三个 JSP。
- 在包含了这些 JSP 页之后，定义下面的链接。
<a name="wpsMainContent"> </a>
|
这个链接就定义在
screenRender JSP 标记前面。该链接是从
ToolbarInclude.jsp 引用，并包含一个隐藏的图像
dot.gif 。利用此链接，使用支持语音合成的浏览器（例如
Home Page Reader）收听页面内容的人，可以跳过导航链接直接收听页面上用户定制的 portlet 的内容。为满足可访问标准，需要此链接。
- 这时，WebSphere Portal 使用
screenRender 标记开始处理来自当前页面上用户定制的 portlet 的内容。该标记的执行将调用
skins 和
screens 目录中的 JSP。这些 JSP 的流程和内容将在后继文章中讨论。
-
Default.jsp 包含
extension/PageEndInclude.jsp 。这个 JSP 只包含用于 WebSphere Portal Enable 版的注释；其内容不在这里讨论。
Head.jsp
Head.jsp 生成标题并嵌入指向样式表文件的链接。它还定义了支持 BIDI（双向）文本所需的变量。这个 JSP 的内容将在这里描述。当您阅读这些讨论时，您可能想要
查看 Head.jsp 的清单。
-
text JSP 标记使您可以读取由
bundle 属性指定的文件中的
key 属性定义的属性。下列代码从位于
C:\WebSphere\AppServer\lib\app\nls 目录的
engine_en.properties 文件读取
title 属性，以便浏览器访问时以英语作为首选语言。要更改门户页面的
title ，请修改
engine_en.properties 文件。
<title><wps:text key="title" bundle="nls.engine"/></title>
|
-
urlFindinTheme JSP 标记生成指向门户网站所使用的主题中资源的 URL 链接。下列代码生成指向由
file 属性指定的样式表的链接。
<link href='<wps:urlFindInTheme file="Styles.css"/>' rel="styleSheet"
type="text/css">
<link href='<wps:urlFindInTheme file="HelpStyles.css"/>' rel="styleSheet"
type="text/css">
|
对于通过 IE 访问的英语使用环境，用于门户网站样式及帮助样式的文件都位于
wp_root\app\wps.ear\wps.war\themes\html\ie\en 。
每次修改过包含的 JSP，请务必保存
Default.jsp 。否则，门户网站将显示来自先前编译过的 JSP 中的内容。
ToolBarInclude.jsp
ToolBarInclude.jsp 显示公司徽标、欢迎消息以及为用户提供的链接
工具栏。门户网站上显示什么样的链接工具栏取决于用户上下文。例如，登录的用户看到
Edit Layout、
Edit my profile和
Log Off之类的链接；而注销的用户看到
I forgot my password、
Log in和
Sign up之类的链接。图 2 显示某用户登录之后的门户网站。
图 2：用户已经以 wpsadmin 的身份登录到门户网站
图 3 显示用户注销之后的门户网站。
图 3. 用户注销之后的门户网站
ToolbarInclude.jsp 文件显示两个表格行。第一行包含两列。第一列在左侧显示
logo.gif ，第二列在右侧显示链接工具栏。对于 BIDI 语言这两列的显示情况与此相反。
第二行被用作工具栏和
PlaceBarInclude.jsp 显示的位置名称之间的分隔符。它显示使用
Styles.css 中指定的
wpsToolbar CSS 元素的背景颜色的条纹。该 JSP 的内容在此描述。当您阅读这些讨论时，您可能想要
查看 ToolBarInclude.jsp 的清单。
指定公司徽标
公司徽标使用下列代码显示。
<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"/>'>
|
对于缺省主题，
logo.gif 文件位于
wp_root\app\wps.ear\wps.war\themes\html 目录下。通过替换
logo.gif 或将您公司的徽标复制到缺省主题的目录中并修改上述代码中的
file 属性，您就可以更改公司的徽标。
alt 属性的文本从
engine_en.properties 文件读取。
链接到
wpsMainContent
下列代码嵌入一个链接以满足可访问性标准。
<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>
|
这一链接允许残障用户跳过工具栏链接直接访问门户网站的内容。此链接使用一个非常小的图像
dot.gif ，使用桌面浏览器看不到该图像，除非用户在
logo.gif 后面缓慢的移动光标。此链接定义于前面说明的
Default.jsp 中。
定义
firstButton
变量
下列代码阐明了
firstButton JSP 脚本编制变量。
<% boolean firstButton = true; %>
|
在门户网站右上方，所有链接和欢迎消息都用定界符
|进行分隔。初始化时置
firstButton 变量为
true ，这意味着 WebSphere Portal 不在链接之前放置
|。在生成第一个链接之后，它将该值设置为
false 并在后面所有链接之前放置 | 。图 2 和 3 显示工具栏链接之间的定界符
|。
执行
if
JSP 标记
后两个子段的代码片段放置在
if JSP 标记的主体（body）之内。
<wps:if loggedIn="yes" screen="Home,LoggedIn">
<%-- Code fragment from "Displaying welcome message" subsection --%>
<%-- Code fragment from "Links for quick customizer" subsection --%>
</wps:if>
|
只有当用户登录进去而屏幕是
Home 或
LoggedIn 时才执行这一
if JSP 标记的主体。
显示欢迎消息
下面的代码片段从带有
Welcome {0}! 值的
nls\engine_en.properties 文件中读取
welcome 属性的值。
<wps:text key="welcome" bundle="nls.engine">
<wps:textParam>
<wps:user attribute="givenName"/>
</wps:textParam>
<wps:textParam>
<wps:user attribute="familyName"/>
</wps:textParam>
</wps:text>
|
当用户以
wpsadmin 身份登录到门户网站之后，图 2 显示
Welcome Wps!，因为
Wps 是
wpsadmin 注册用的名字。在上面的代码中，用第一个
textParam JSP 标记的值替换了
{0} 这个值。
由于
welcome 属性的值并不包含
{1} ，第二个
textParam 标记的值被忽略。同样的，为显示
textParam JSP 标记生成的用户姓氏，把
welcome 属性的值更改为
welcome {0} {1}! 。修改过属性文件之后，您需要重新启动门户服务器。
user 标记允许您使用
givenName、familyName 或
userid 属性并返回相应值。
快速定制器链接
WebSphere Portal 4.2 引入了一个新的 JSP 标记
urlselect ，使您可以为指定的属性
placeName 和
pageName 创建链接。此标记使链接在标记主体内可用作
wpsSelectURL 脚本变量。
urlselect 标记用于生成指向
Edit Layout和
New Page的链接。
下面的代码定义了
Edit Layout工具栏链接。
<wps:urlSelect placeName="Work with Pages" pageName="Edit My Pages"
type="editlayout">
<% if (firstButton) { firstButton = false; }
else { %>& |& <% } %>
<a class="wpsToolBarLink" href='<%= wpsSelectURL %>'><wps:text
key="link.editlayout" bundle="nls.engine"/></a>
</wps:urlSelect>
|
下面的代码定义了
New Page工具栏链接。
<wps:urlSelect placeName="Work with Pages" pageName="Edit My Pages"
type="editlayout">
<% if (firstButton) { firstButton = false; } else { %>& |& <% } %>
<a class="wpsToolBarLink" href='<%= wpsSelectURL %>'><wps:text
key="link.editlayout" bundle="nls.engine"/></a>
</wps:urlSelect>
|
您可以使用
urlSelect JSP 标记添加其它页面链接。
I forgot my password
链接
如果用户登录失败，则使用
url 标记生成指向
I forgot my password的链接。当用户单击此链接时，将显示位于
screens 目录中
forgotpassword.jsp 的内容。下列代码说明了如何创建指向
I forgot my password的链接。
<%-- forgot password button --%>
<wps:if loggedIn="no" notScreen="ForgotPassword">
<% if (firstButton) { firstButton = false; } else { %>& |& <% } %>
<a class="wpsToolBarLink" href='<wps:url screen="ForgotPassword" home="public"/>'>
<wps:text key="link.password" bundle="nls.engine"/></a>
</wps:if>
|
Edit my profile
链接
带有
PrepareSelfCare 命令值的
url 标记生成指向
Edit my profile的链接。单击此链接，将显示位于
screens 目录下的
UserProfileForm.jsp 。下列代码演示了用于显示该链接的代码。
<%-- selfcare button --%>
<wps:if loggedIn="yes" notScreen="SelfcareUserForm,SelfcareUserConf">
<% if (firstButton) { firstButton = false; } else { %>& |& <% } %>
<a class="wpsToolBarLink" href='<wps:url command="PrepareSelfcare"
reqid="no"/>'>
<wps:text key="link.selfcare" bundle="nls.engine"/></a>
</wps:if>
|
Sign up
链接
带有
PrepareEnrollment 属性的
url 标记使您可以生成指向
Sign up的链接，以便用户能够自行登记。单击此链接，将显示位于
screens 目录的
UserProfileForm.jsp 。下列代码展示了用于显示
Sign up链接的代码。
<wps:if loggedIn="no">
<%
String dt = com.ibm.wps.puma.UserManager.instance().getDirectoryType();
if (dt==null)
{
dt = "";
}
if (!dt.equals("SSPM"))
{
%>
<% if (firstButton) { firstButton = false; } else { %>& |& <% } %>
<a class="wpsToolBarLink" href='<wps:url command="PrepareEnrollment"
home="public" reqid="no"/>'>
<wps:text key="link.enrollment" bundle="nls.engine"/></a>
|
如果您想禁止用户自行登记到门户网站，您可以从
ToolBarInclude.jsp 中除去前面的代码。
Help 链接
Help链接通过
wpsDocURL JSP 变量生成。通过包含
Default.jsp部分说明的
constants JSP 标记，就可以访问此变量。
<%-- help button --%>
<% if (firstButton) { firstButton = false; } else { %>& |& <% } %>
<a class="wpsToolBarLink" href="<%= wpsDocURL %>/InfoCenter/help/index.html"
target="PortalHelpWindow"
onClick="javascript: window.open('<%= wpsDocURL %>/InfoCenter/help/index.html',
'PortalHelpWindow',
'resizable=yes,scrollbars=yes,menubar=no,toolbar=yes,status=no,width=800,
height=600,screenX=10,screenY=10,top=10,left=10').focus(); return false;">
<wps:text key="link.help" bundle="nls.engine"/></a>
|
Log in link
带有
home=public 和
screen=Login 属性的
url 标记生成
Log in链接。单击此链接，将显示位于
screens 目录的
login.jsp 。您需要修改
login.jsp 以更改登录屏幕。此
login.jsp 使用带有
command=LoginUser 属性的
url 标记来生成指向凭证提交的 URL。下列代码说明如何生成这一链接。
<wps:if loggedIn="no" notScreen="Login">
<% if (firstButton) { firstButton = false; } else { %>& |& <% } %>
<a class="wpsToolBarLink" href='<wps:url home="public" screen="Login"
ssl="false"/>'><wps:text key="link.login" bundle="nls.engine"/></a>
</wps:if>
|
Log off
链接
command 属性的值为
LogoutUser 的
url 标记生成
Log off链接。下列代码说明如何生成这个链接。
<wps:if loggedIn="yes">
<% if (firstButton) { firstButton = false; } else { %>& |& <% } %>
<a class="wpsToolBarLink" href='<wps:url command="LogoutUser"/>'>
<wps:text key="link.logout" bundle="nls.engine"/></a>
</wps:if>
|
第二行
下列代码显示一条颜色，作为工具栏和地址栏之间的分隔符。颜色定义为
Styles.css 中的
wpsToolBarSeparator 元素。您可以修改此 CSS 元素的
background-color 属性。
<td class="wpsToolBarSeparator" height="10" colspan="2"><img width="1"
height="1" border="0" src='<%= wpsBaseURL %>/images/dot.gif' alt="">
|
结束语
本文说明了 WebSphere Portal 显示门户网页的流程。描述了位于缺省主题目录中的
Default.jsp 、
Head.jsp 和
ToolBarInclude.jsp 的内容。所有这些 JSP 页都使用在
engine.tld 文件中定义的标记。了解这些 JSP 标记并知道如何在门户 JSP 页中使用它们将有助于您创建新主题以及修改现有主题。
相关信息
关于作者  | | |
Sukumar Konduru是位于达拉斯的 IBM Developer Technical Support Center 的顾问软件工程师。他拥有休斯敦大学的计算机科学硕士学位。您可以通过
konduru@us.ibm.com与 Sukumar Konduru 联系。
|
对本文的评价
| 
