IBM WebShere Portal主题与皮肤开发

所谓主题与皮肤，主要指门户系统的界面风格与显示方式。在企业门户项目的实施中，主题与皮肤的开发是重中之重。因为作为所有企业内外信息、应用的统一入口，可谓是一个企业的脸面。另一方面讲，在一个企业内，没有任何系统比他们的门户系统有更多的员工使用，在项目实践经验中我也发现，花在主题与皮肤开发上面的时间往往占很大的比重，对美工的要求也比较严格。所以本书把这一部分内容作为第一章讨论。
8{V4_v@Y
M!i l-NPortal 的主题与皮肤开发，说穿了还是普通jsp的开发，只不过大量使用了ibm自带的标签库，而且页面之间的调用非常复杂，初级开发者甚至找不到页面元素所在的文件，所以开发起来显得比较麻烦。另外，IBM WebSphere Portal6.0较之以前的版本又做了较大的改动，或者说随着新版本的推出，我们将面对不断地技术更新与挑战。但是，如果您深刻洞悉了与主题、皮肤相关的这几个文件之间的调用关系，使用起来就能运用自如了。)^uE;z6Y{$Z
本章主要是对5.1的介绍，附加了对6.0的延伸，尤其是变化比较大的地方。我们将从一下部分来讨论：+f?;}3H#z

2FB[r
b hBportal爱好者1、初级入门：什么是Portal的主题与皮肤开发？portal爱好者e6|ag;en#LK
2、中级开发：如何更换Portal系统的logo图标；
SEu
C�l3、中级进阶：开发个性化的主题；%[UX:eR(r*?3I]
4、高级探索：开发自适应分辨率的主题与皮肤；
$M|0_z7H*t^r4B5、高手过招：更改Portal系统的登录方式；FJ2x9Z$pG x|*g1On
6、Portal的皮肤开发简介。
g9^[%ic3YfO!?7、主体与皮肤开发调试方法。E aF4Za
O(@
,i{.Ty`2p#r
portal爱好者
EXJXJW;J.~2b
www.portalfan.com.sH K1E"Xu0o�r|t6[

l/|5bH,v U5.1 入门：Portal的主题与皮肤开发：~1dR
p F

fc!x;I[@:C$Dwww.portalfan.com要了解如何开发portal的主题，首先要了解IBM WebSphere Portal的显示流程。IBM WebSphere Portal 使用不同的 Java Server Page（JSP）、级联样式表（Cascading Style Sheet，CSS）和图像来显示门户页面。它使用位于X:\WebSphere\AppServer\installedApps\ YourNodeName\wps.ear\wps.war 目录下 themes、skins 和 screens 目录中的 JSP 来构造门户页面。这些目录中的每一个都包含 html、wml 和 chtml 子目录，WebSphere Portal 将它们用于服务不同客户机，例如桌面浏览器和移动设备。我们这里以通常使用的html方式下的主题开发为例，介绍Portal的主题开发。
:Hjig5l;f所谓Portal的主题，指的是系统的整体界面风格与显示方式，主要包括网站页面初始化以前的调用，徽标Logo，一级菜单、二级菜单，网站下边的版权信息，以及页面初始化完成后的善后逻辑处理。我们要开发一套主题，可以直接复制themes/html下的一个包含有各个页面的文件的文件夹，重新命名并在管理界面里面添加、赋给县官页面就可以了。在这个文件夹里面，默认的初始调用文件为Default.jsp，这个文件绘制了一张表格，然后在各个格内调用不同的文件。在IBM Portal5.1中调用了如下几个文件：Head.jsp 、AdminLinkBarInclude.jsp、 ToolBarInclude.jsp、PlaceBarInclude.jsp、PageBarInclude.js以及延伸出来的 PageBeginInclude.jsp、 PageEndInclude.jsp；在IBM Portal6.0中引入了jspf技术，所以调用也相应的发生了变化，主要有：head.jspf，topNav.jspf，foot.jspf， footfly.jspf等文件。下面主要针对5.1座以下介绍。gbd\]%?`&Zg
注意：这部分内容属于最初级的开发，您要弄懂这些介绍，必须具备一定的jsp、jspf基础、css基础和标签库的基础，最好做过相应的开发。-e pZJ`5z

d n s Qof4A5.1.1 Default.jsp：
@a_o#Z
iQP\W*b所有屏幕聚集都从 Default.jsp 开始。用于缺省主题的 Default.jsp 位于wp_root\app\wps.ear\wps.war\themes\html。这个 JSP 包含其它用于显示标题、公司徽标、工具栏的 JSP 以及用于往可用位置及页面植入内容的 JSP。在 Default.jsp 的末尾处，screenRender JSP 标记选择被请求的屏幕（例如 login 或 forgotpassword）。Default.jsp初始化一张表格，表格内部划分为任意的单元格，每个单元格几可以直接显示内容，也可以调用别的 jsp页面。我们以从上到下、从做到有的顺序，来分别介绍开发主题所用到的页面。以下介绍的jsp就是以这样的顺序先后调用的。
m"ag*C9I4\ \:E5.1.2 Head.jsp][7`*b[;v
Head.jsp 位于Default.jsp所初始化的表格的最上一行单元格，负责生成标题并嵌入指向样式表文件的链接。它还定义了支持 BIDI（双向）文本所需的变量。这个页面一般没有实质性的显示内容，例外的是，开发者喜欢在这里初始化网页的标题，通常是读取属性文件，比如位于 web_inf/下的engine.properties。这样安排比较灵活，后期维护可以直接在属性文件里面进行。当然，如果用户的网站标题是确定的而且是不在更改的，您也可以通过在这里定死，这比IBM公布的以标签的方式写来的容易，也更易使用。如果您开发了多套主题，而且这几套主题的page title如果也一样的话（除了虚拟门户，一般是这样子），您可以把这几个文件放到themes/html的根目录下，其他主题的default.jsp 都来调用这个文件就可以了。@5e{ OEm1o&H1l

.v3G$C�W6\\nportal爱好者5.1.3 AdminLinkBarInclude.jsp"g)B-L*s+My
AdminLinkBarInclude.jsp主要用来显示了“新建页面”、“编辑页面”、“分配页面许可权”三个标签。Default.jsp初始化表格中的第二行被调用。用户使用这三个链接来创建、修改自己的个性化页面，也可以由门户网站管理员来布局整个网站的风格，管理页面资源的权限。不过在开发实践中您会发现，大部分客户不喜欢这几个标记，他们宁肯要求我们将这些标签放到管理界面，取而代之的是一些欢迎信息，比如：“某某员工，欢迎您登陆！”。要实现这个也很容易，我们只要稍微修改一下这个页面页就可以了。比如我们可以写个标签，读出登陆用户的姓名，然后添加一个Label就解决了。
|"qx6Ki$W5.1.4 ToolBarInclude.jspz2`7S
_-IS#wMq
ToolBarInclude.jsp 显示欢迎消息以及为用户提供的链接工具栏。门户网站上显示什么样的链接工具栏取决于用户上下文。例如，登录的用户看到“我的门户网站”、“管理”（仅管理员可见）、“编辑我的‘概要文件’”、“注销”等之类的工具；而注销的用户看到 “忘记密码”、“登录”、“帮助” 之类的工具。通常的做法是将“管理”链接放到一个portlet中，只有当登陆的用户是Portal系统管理员时才在该portlet中显示，或者先是为欢迎信息，或是其它的资源链接。@�m;U(OJp HT;U
5.1.5 PlaceBarInclude.jsp
L:m!{aSQ,RPlaceBarInclude.jsp用来显示一级菜单，即“首页”、“文档管理器”、“公司概况”、“业务简介”等，属于最高层的目录，您在任何一个一级菜单上都可以通过“新建页面”来创建二级菜单，你创建的内容将被存储到数据库（原始使用的是cloundscape），您也可以把它导入导出到db2、oracle等任何一个portal所支持的数据库中，此内容将在我的下一篇文章中详细论述，这里不再一一提及。
yaq/k}\j&I$Eportal爱好者
+}-OC[I*`gMIb5.1.6 PageBarInclude.jsp
o@YA4]yR用来显示二级菜单，当您点击一级菜单中的任一标签时，系统会调用该文件，并检索出该菜单的所有子菜单，默认显示在PlaceBar的下面。该文件在Default.jsp初始化表格的第三行被调用，如果我们不调用该文件，那么，包含子菜单的一级菜单被调用时，其子菜单将在屏幕的左侧显示，该文件位于皮肤文件夹下，具体的文件操作我们将在接下来的皮肤开发中介绍。
v`{C,Gn
Q{5.1.7 Portal6.0中的调用关系www.portalfan.com|2c1_y;]
V3q
现在我们拿出一节的篇幅来简要介绍Portal6.0中的文件调用关系以其职责。如图：&o#UqCMvB4HM
YE7Z]d5tp:O
图：Portal6.0开发一套主题需要调用的页面清单.E%Jm5]FZ_,No
我们通常使用的是这几个：;d)dA5C3?8{4h)Oiz

CI[!_Q+nPU ff详细的开发内容下面将一一介绍。
noCl0T.O9D
;cd;N$Z^portal爱好者5.2 初级：如何更换Portal系统的logo图标；
/KQ%{t5|5.2.1 Default.jsp的工作原理：
}Y$k8ysSI@X
3w6d0d:]Vs-]5P
w\;Gq&W8a�T我们看这个例子，Default.jsp大致上将Portal系统的默认页面划分为这样一个表格：
:Fc;O!U)`7l.e
i6z+HgN+V1nwww.portalfan.com表-1： Default.jsp总体调用效果
au/IlnF
v
kwww.portalfan.comPageBegin: /O@?Yk'jK!^
用来显示页面生成以前的提示文字，例如：Portal系统正在加载，请稍候……d2IN
u:t1gTt6~
PageContent：\~2d&]Lg-C,`\
Portal系统主体部分：用来显示详细的Portal页面；portal爱好者sFFNo
c!U6Q!O/A#np
PageEnd.jsp用来显示页面生成以后的东西。例如公司版权信息等。9?z,[email protected] p

G1[vgmc7N!O5.2.2 换一个logo：6A]UW\q5Pg
打开Default.jsp，您会开到一个表格，在表格的左上角，有这样一段语句，用来显示默认主题的Logo徽标：
F�h+oQ#Y%R*F
?V3O
/Tbg|]t9^
?S'W-}portal爱好者
(deC6x0}XP/siportal爱好者上面已经介绍过，整个Portal系统的页面由Default.jsp分割成一个大的表格，用来显示或者调用不同的jsp。我们在这个大表格的最左上角化出一个,用来显示公司的徽标。这段语句就是在这个单元格内插入一个图片，叫做Logo.gif。aELw
V1XW
明白了吗？您可以将这个文件名改称您想插入的任意一张图片的名字，只要将这张图片放到.war/images/目录下就可以了。这里支持几乎所有的图片格式，您可以任意摆放，大小、位置等都有您说了算。到这里，您可能已经想到了：那么，我养插入一个Flash呢？别着急，下面将会提到这点。
7i'KxS-EX5.2.3 用flash作logo：
r n3D9` Ywww.portalfan.com用Flash作徽标是个不错的注意，它可以使您的门户网站看起来更丰富、生动一些。但是，Flash，也就是.swf格式的文件，是不能直接通过这种方式来插入的，因为我们的浏览器并不能识别它。要插入一个动画，必须位置制定相应的驱动。您可以用以下这段代码，为之生成：&W F7`)Y5w�_x(z0i

G3`y[1l P.n�q这里在插入了一个名字为 firstpagelogo.swf的影片做公司徽标，他的大小是 510*81，请将这个影片文件放在.war/images目录下，重启服务器，看看您的首页上，是不是已经出现了？实际效果参考上面，该企业集团的企业门户守夜上就是个Flash。portal爱好者 wVN-B/df.[&qG
细心的读者可能已经发现，在安装了更新系统编号为KB912945的补丁, 凡是一个页面内使用