IBM Websphere Portal主题与皮肤开发

[b]IBM Websphere Portal[/b][b]主题与皮肤开发[/b]

北京东华合创数码科技公司郑文平

内容简介：
Portal的主题与皮肤开发说穿了还是普通jsp的开发，只不过大量使用了ibm自带的标签库，开发起来显得比较麻烦。但是，如果您深刻洞悉了与主题、皮肤相关的这几个文件之间的调用关系，使用起来就能运用自如了。这里是作者从大量的项目经验中总结出的几点体会，贡献出来，希望与大大家分享。
在这篇文章里我想从以下几个方面来介绍websphere portal的主题与皮肤开发：
1、初级入门：什么是Portal的主题与皮肤开发？
2、中级开发：如何更换Portal系统的logo图标；
3、中级进阶：开发个性化的主题；
4、高级探索：开发自适应分辨率的主题与皮肤；
5、高手过招：更改Portal系统的登录方式；
6、Portal的皮肤开发简介。

一、初级入门：Portal的主题与皮肤开发：

要了解如何开发portal的主题，首先要了解websphere portal的显示流程。IBMWebSphere Portal使用不同的Java [b]Server Page[/b]（JSP）、级联样式表（Cascading Style Sheet，CSS）和图像来显示门户页面。它使用位于X:/WebSphere/AppServer/installedApps/YourComputerName /wps.ear/wps.war目录下themes、skins和screens目录中的JSP来构造门户页面。这些目录中的每一个都包含html、wml和chtml子目录，WebSphere Portal将它们用于服务不同客户机，例如桌面浏览器和移动设备。我们这里以通常使用的html方式下的主题开发为例，介绍Portal的主题开发。

用于显示门户页面的JSP流程：本文描述了缺省主题定义的Default.jsp、Head.jsp、AdminLinkBarInclude.jsp、ToolBarInclude.jsp、PlaceBarInclude.jsp、PageBarInclude.js以及延伸出来的PageBeginInclude.jsp、PageEndInclude.jsp的内容和流程。下面简单介绍这几个jsp。注意：这部分内容属于最初级的开发，您要弄懂这些介绍，必须具备一定的jsp基础、css基础和标签库的基础，最好做过相应的开发。

1、Default.jsp：

所有屏幕聚集都从Default.jsp开始。用于缺省主题的Default.jsp位于wp_root/app/wps.ear/wps.war/themes/html。这个JSP包含其它用于显示标题、公司徽标、工具栏的JSP以及用于往可用位置及页面植入内容的JSP。在Default.jsp的末尾处，screenRender JSP标记选择被请求的屏幕（例如login或forgotpassword）。以下介绍的jsp是以这样的顺序先后调用的。

2、Head.jsp

Head.jsp生成标题并嵌入指向样式表文件的链接。它还定义了支持BIDI（双向）文本所需的变量。这个JSP的内容将在这里描述。您也可以通过<title></title>在这里定死portal网站的标题，这比IBM公布的以标签的方式写来的容易，也更易使用。如果您开发了多套主题，而且这几套主题的page title如果也一样的话（除了虚拟门户，一般是这样子），您可以把这几个文件放到themes/html的根目录下，其他主题的default.jsp都来调用这个文件就可以了。

3、AdminLinkBarInclude.jsp

AdminLinkBarInclude.jsp主要用来显示了“新建页面”、“编辑页面”、“分配页面许可权”三个标签

4、ToolBarInclude.jsp

ToolBarInclude.jsp显示欢迎消息以及为用户提供的链接工具栏。门户网站上显示什么样的链接工具栏取决于用户上下文。例如，登录的用户看到“我的门户网站”、“管理”（尽管理员可见）、“编辑我的‘概要文件’”、“注销”等之类的链接；而注销的用户看到“忘记密码”、“登录”、“帮助”之类的链接。

5、PlaceBarInclude.jsp

PlaceBarInclude.jsp用来显示一级菜单，即“首页”、“文档管理器”、“公司概况”、“业务简介”等，属于最高层的目录，您在任何一个一级菜单上都可以通过“新建页面”来创建二级菜单，你创建的内容将被存储到数据库（原始使用的是cloundscape），您也可以把它倒入到db2、oracle等任何一个portal所支持的数据库中，此内容将在我的下一篇文章中详细论述，这里不再一一提及。

6、PageBarInclude.jsp

用来显示二级菜单，当您点击一级菜单中的任一标签时，系统会调用该文件，并检索出该菜单的所有子菜单，默认显示在PlaceBar的下面。

二、中级开发：如何更换Portal系统的logo图标；

1、Default.jsp的工作原理：

aspectratio="t" v:ext="edit">

我们看这个例子，Default.jsp大致上将Portal系统的默认页面划分为这样一个表格：

表-1：Default.jsp总体调用效果

PageBegin:用来显示页面生成以前的提示文字，例如：Portal系统正在加载，请稍候……

Portal系统主体部分：用来显示详细的Portal页面；

PageEnd.jsp用来显示页面生成以后的东西。例如公司版权信息等。

表-2：Portal系统正文部分的调用关系：

徽标部分，在default中调用	我的门户菜单，在ToolBar中调用 个性化菜单，在AdminLink中调用
Portal的Body部分，用来显示各个portlet以及高层次的三级菜单。
页面的结尾，用来显示公司版权信息等。

2、换一个logo：

打开Default.jsp，您会开到一个表格，在表格的左上角，有这样一段语句，用来显示默认主题的Logo徽标：

<td width="100%" 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>
上面已经介绍过，整个Portal系统的页面由Default.jsp分割成一个大的表格，用来显示或者调用不同的jsp。我们在这个大表格的最左上角化出一个<td>,用来显示公司的徽标。这段语句就是在这个单元格内插入一个图片，叫做Logo.gif。
明白了吗？您可以将这个文件名改称您想插入的任意一张图片的名字，只要将这张图片放到.war/images/目录下就可以了。这里支持几乎所有的图片格式，您可以任意摆放，大小、位置等都有您说了算。到这里，您可能已经想到了：那么，我养插入一个Flash呢？别着急，下面将会提到这点。

3、用flash作logo：

用Flash作徽标是个不错的注意，它可以使您的门户网站看起来更丰富、生动一些。但是，Flash，也就是.swf格式的文件，是不能直接通过这种方式来插入的，因为我们的浏览器并不能识别它。要插入一个动画，必须位置制定相应的驱动。您可以用以下这段代码，为之生成：

<td width="510" border="0" cellpadding="0" cellspacing="0" height="81" valign="middle" align="left">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="510" height="81">
<param name=movie value="<%= wpsBaseURL %>/images/firstpagelogo.swf">
<param name=quality value=high>
<embed src="firstpagelogo.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="510" height="81">
</embed>
</object>
</td>

这里在插入了一个名字为firstpagelogo.swf的影片做公司徽标，他的大小是510*81，请将这个影片文件放在.war/images目录下，重启服务器，看看您的首页上，是不是已经出现了？

三、中级进阶：开发个性化的Portal主题

1、理解、开发各级菜单；

Default.jsp调用PlaceBarInclude.jsp文件来显示一级菜单，如果一级菜单下面还有二级菜单，那么当您点击该一级菜单是，Default将调用PageBarInclude.jsp来显示二级菜单。当然，您也可以不再调用该文件，那么系统将缺省调用Portlet的皮肤里面的LayerContainer.jsp文件，用来以三级菜单代替二级菜单，这便是个性化的左侧管理菜单。
打开这两个文件，您会发现里面的内容非常简单。请看下面的清单：
l 首先由这样一个标签：
<wps:if navigationAvailable="yes" screen="Home,LoggedIn,LoggedOut">
意思是如果菜单时可用的，那么当您登录进去以后将执行如下操作。使用这句代码，必须引入Portal的标签库，具体的过程这里不再赘述。接下来绘制了一个表格，用来显示里面的操作。表格内的内容，下面将作介绍。
l 菜单的左右协调：如果您一共定义了十几个一级菜单，而一栏只能显示8个，剩下的菜单怎么办？我们在这里放置了两个三角形的小图标，如果右边还有更多的菜单，小图标会自动出现，当您点击时，就会显示出剩余的菜单。 具体的代码是通用的，这里不再赘述。我们需要强调的是：菜单条在这里支划分为两种情况：一是选中的情况下，一是为选中的情况下，即：
<wps:if nodeInSelectionPath="yes">
<table>这里用来显示选中该菜单的情况下该菜单条的显示方式。</table>
</wps:if>
<wps:if nodeInSelectionPath="no">
<table>这里用来显示未选中该菜单的情况下该菜单条的显示方式。</table>
</wps:if>
例如：
<td Background="<%= wpsBaseURL %>/images/title_back01.jpg" height="30">
<img border="0" src='<%= wpsBaseURL %>/images/b01.jpg' alt="">
<a href='<%=wpsNavModelUtil.createSelectionChangeURL(wpsNavNode)%>' class="wpsSelectedPlaceLink">
<%= com.ibm.wps.model.LocaleHelper.getTitle((com.ibm.portal.Localized)wpsNavNode, com.ibm.wps.engine.RunData.from( pageContext.getRequest()).getLocale())%>