IBM Portal 7主题开发入门-PageBuilder2

banbanbai

　　1.1 简介
IBM WebShere Portal 7相对于之前版本最大的变化就增加了新的皮肤开发模式-PageBuilder2,官方翻译叫"页面构建器"。它同时支持旧的主题开发模式。新模式主要的改变就是将样式与页面布局分开了，同样页面布局可以应用不同的样式，就像WinXP的桌面主题，因此也带来了复杂性。
　　1.2 类型 
PageBuilder2主题开发模式分为两种：
第一种： 样式+war包式。
第二种： 独立war包式。
其中第一种的war包是非必须的，如果不想改变缺省的面布局及内容，你只需修改样式并共享产品自带的war包即可。
　　1.3 步骤
下面分别详细介绍一下。
我的wp7是装在windows2003上的。
　　1.3.1 样式+共享war包式
开始之前需要准备一款WebDAV客户端工具（WebDAV我就不赘述了，搜狗（^0^）一下），我选择的是一个免费的由Java开发的工具“AnyClient”（见附件）。AnyClient需要jre，最低1.5，最高1.6（1.4可打开，但运行异常）。
　　1）使用AnyClient连接Portal的WevDAV目录。
连接地址为 http://localhost:10039/wps/mycontenthandler/dav/themelist/。
 注意：
wps为上下文根，缺省名字为wps，如果你已经改变了文根，请将wps替换为你自定义的文根。
 提示：
用户名与密码就是Portal was控制台的管理员和密码。如果你在Win7下使用Anyclient，请将窗口主题切换为“windows经典”，否则AnyClient窗口将会是一个大白板。
连接WebDAV时可能会很慢，要耐心等...!
　　2）拷贝themelist/目录下的csa2.theme目录到本地。
　　3）修改下载的csa2.theme文件夹为你喜欢的名字，如：my_theme。
　　4）修改\metadata\localized_zh.properties文件内的title属性。
写个你喜欢的名字吧，最好是英文的（不能直接写中文，需要编码，非必须就别给自己找麻烦了^_^） 。
　　5) 将你修改好的主题文件夹利用AnyClient传输到themelist/文件下。
　　6）传输完成后，你就已经有一个新的主题可选了。
提示：
很显然，你在主体管理工具那是看不到新的主题的，这时你需要任意选择一个主题，点击编辑，然后再点一下保存，这样会强制wp刷新主题列表缓存，你新建的主题就出来了。
　　总结：
这种方式创建的新主题与wp7自带的主体样式是一样的（复制的嘛），并且共享Jsp页面文件。也就是你只能修改样式。说实话，我感觉真挺不好改的，主题里全是css与js，不知从何改起，我是没再深研究。
 
　　1.3.2 样式+独享war包式
如果想修改页面的布局与内容，你需要使用自己的主题war包。方法还是一样：复制并改名在传回去。
　　1）复制PageBuilder2 war包并改个名字。
路径为：wp7安装目录+\IBM\WebSphere\PortalServer\theme\wp.mashup.cc.theme\ installedApps\wp.mashup.cc.theme.ear\PageBuilder2.war
　　2）删除 ./skins 目录下的所有文件。
　　3）修改./themes/html/目录下的PageBuilder2文件夹的名字，如：my_pb2，以下都用my_pb2代表你喜欢的名字。
　　4）在WEB-INF文件夹里删除plugin.xml文件，别的文件不用删。
　　5）修改web.xml里的display-name属性为my_pb2。
　　6）修改ibm-web-bnd.xmi 与 ibm-web-ext.xmi 文件。
ibm-web-bnd.xmi修改位置为：<webapp href="WEB-INF/web.xml#my_pb2"/>
ibm-web-ext.xmi修改位置为：<webApp href="WEB-INF/web.xml#my_pb2"/>
 
　　7）将修改完的文件打成war包，部署到wp7的was控制台。
注意：
发布时，进行到映射服务器那步时，一定要选择WebSphere_Porta，系统自动选择的那个是错误的。
记住你在部署时输入上下文根路径如：my_pb2。
 
　　8）测试新部署的主题war包。

访问： http://localhost:10039/wps/my_pb2/dav/themelist/customTheme/

如果页面报500错误，证明你已经部署成功了。因为它缺少Portal环境，所以报错。

 
　　9）利用xmlaccess 导出主题部署信息。
xmlaccess在中文版中叫“导入xml”，菜单位置在portal后台管理左树－〉门户网站设置－〉导入xml。
将以下xml内容保存为一个文件，使用xmlaccess导入portal。
　　<?xml version="1.0" encoding="UTF-8"?> <request xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="PortalConfig_7.0.0.xsd" type="export" create-oids="true"> <portal action="locate"> <theme action="export" objectid="*" /> </portal> </request>


　　10）导入成功后，你会得到返回的xml字符串，保存为本地文件并修改其中的内容。
修改其中的 context root, resource root, uniquename与为“my_pb2”如：
　　<theme action="update" active="false" context-root="/my_pb2" default="false" domain="rel" objectid="ZJ_618LOIP300NI60IE2H5GHD3001" resourceroot="my_pb2" uniquename="my_pb2">


 
　　11）将修改完的文件利用xmlaccess导入回去。
　　12）修改样式包里的 theme.html 文件。
利用用AnyClient下载到本地修改在传回覆盖原文件。

样式包就是在1.3.1中我们自己创建的那个样式文件夹（my_theme）。

还是要修改上下文根为“my_pb2”如：

替换以下内容：

　　<link rel="dynamic-content" href="dyn-cs:id:head@tl:oid:csa2.theme">

 为:

　　<link rel="dynamic-content" href=" res:/my_pb2/themes/html/my_pb2/head.jsp">

 同样的，在theme.html中查找包含“rel="dynamic-content" ”的标签，根据 href属性中位于“id：”与"@"符号之间的内容，替换href属性内容：

　　<a rel="dynamic-content" href="dyn-cs:id:bannerNav@tl:oid:csa2.theme">

 

 根据红色字体，替换href属性：

　　<a rel="dynamic-content" href="res:/my_pb2/themes/html/my_pb2/bannerNav.jsp">

需要替换的所有jsp页面列表如下：

res:/customTheme/themes/html/customTheme/bannerNav.jsp

res:/customTheme/themes/html/customTheme/search.jsp

res:/customTheme/themes/html/customTheme/bannerCommonActions.jsp

res:/customTheme/themes/html/customTheme/status.jsp

res:/customTheme/themes/html/customTheme/tabNav.jsp

res:/customTheme/themes/html/customTheme/pageToolbar.jsp

res:/customTheme/themes/html/customTheme/asa.jsp

res:/customTheme/themes/html/customTheme/config.jsp

 

注意：

在/nls文件夹下还有一个theme_zh.html文件，也需要按照以上步骤修改。

 

总结：

完工了，现在就可以在主题管理里面使用新的皮肤了，显然它和缺省皮肤一样。如果只需要改样式，则修改样式文件，然后用WebDAV工具上传更新；如果要改变页面格局及内容，则需要修改样式war包中的jsp。

 

1.3.3 独立war包式

抱歉没有亲自实践，不敢乱写，请参考下面列出的文档吧，　　《Consolidated Steps for Creating Custom Themes in WP7 》里面有简单的介绍。

　　2 参考文档
　　Creating a new PageBuilder2 custom theme: wp7
　　How to deploy a theme as a custom war into WebSphere Application server console
　　Consolidated Steps for Creating Custom Themes in WP7

　　
后记：
这篇文章大都是翻译而来，其中添加了我遇到的一些问题及解决方法。次篇只是抛砖引玉，入门而已。再多讨论请查阅IBM的信息中心：
http://www-10.lotus.com/ldd/portalwiki.nsf/xpViewCategories.xsp?lookupName=WebSphere%20Portal%20and%20Lotus%20Web%20Content%20Management%20Version%207.0%20documentation
 
欢迎转载，请注明出处，谢谢！