认识 WebSphere Portal 7.0 主题：PageBuilder (CSA2)

作者：soldierxue@163.com

WebSphere Portal 主题和布局从版本7开始有了很大的变化，本文将重点分析这些变化，从而更好地认识 WebSphere Portal v7.x 自带的主题：

各版本主题/布局概览（Version 5.1 to Version 7.0)

Table 1: 各版本主题

版本	特点	图示
v5.1	轻量级  基于表格的布局 容易理解
v6.0	页面元数据 主题策略 flyout / CSS 基于表格的布局
v6.1	主题定制Portlet Quick Link Shelf 搜索Widget (Dojo) Web2.0 主题  语义标记(LiveText) 主题包含在一个WAR包中 客户端聚合CSA 服务器端聚合SSA
v6.1.5	引入 Page Builder 主题  导航 iWidget  混合页面聚合技术  基于Lotus OneUI 技术
v7.0	支持WebDAV 相对于v6.1.5来说，开箱即用（OOTB）的样式少了 文件目录结构被重新设计了 旧的主题不推荐使用 ”Portal“ 主题仅仅使用在管理页面

几中主题之间的对比

在上一部分中，我们了解了 Portal 主题的演变历程，本段中我们继续解析下几种常见主题的特性：

Table2： 三种常见主题对比

PageBuilder 主题	Portal主题	PortalWeb2主题
服务器端聚合（SSA）	服务器端聚合（SSA）	客户端聚合（CSA）
JSTL/EL + Dojo	JSP tags/scriptlets	Dojo + XSLT
简化的文件目录结构	主题策略	主题策略
样式表	调色板	调色板
布局模板	支持主题定制Portlet	支持主题定制Portlet
最佳适合： Web/CSS 开发者 用户定制 完整的布局控制	最佳适合： 利用主题定制Portlet 多租户模式(Multi-tenancy)	最佳适合： 那些需要完整CSA支持的页面

Portal 7自带的主题

Portal 7 自带了两个主题：Page Builder （CSA2）以及 Portal；用户 继续以前版本的主题，不过Portal 7默认不会包含这些主题：PortalWeb2以及Mashup主题。

Portal 7主题相关资源的位置

PageBuilder 主题文件类型有两种：

1. 动态J2EE资源：JSP文件；包含在WAR文件目录中；
2. 静态资源：HTML，CSS，javascript 和 image；静态资源可以通过 WebDAV 浏览与管理；

存储在 WebDAV 的内容是一些静态资源如主题，皮肤，布局模板，同时包含CSS，图片和Javascript文件。动态资源如 JSPs 通过 WAR 包进行部署，可以被用在主题和皮肤模板中的动态内容标记位置。

注：不要修改任何WebSphere Portal自身带的主题文件，因为它们在安装 补丁时被同时更新。另外，可以拷贝一份，然后更改拷贝的内容。

J2EE资源

• 主题相关的部署在： PortalServer_root/theme/wp.mashup.cc.theme/installedApps/wp.mashup.cc.theme.ear/PageBuilder2.war/.
• 历史主题被部署在: PortalServer_root/installer/wp.ear/installableApps/wps.ear/wps.war/. 不再支持在该目录下直接部署定制主题
• 注意： PortalServer_root 是只读的. 不要修改该目录下的任何文件
• 当你部署自己定制的主题WAR包时，资源文件被放到如下目录： wp_profile_root/installedApps/node/your-ear-name.ear/your-war-name.war/.
• 主题的Entry Point 是 Default.jsp 或者 Plain.jsp, 这两个文件在:
  
  PortalServer_root/theme、wp.mashup.cc.theme/installedApps/wp.mashup.cc.theme.ear/PageBuilder2.war/themes/html/
• 主题模板中的动态内容标记（dynamic-content spots）引用位置在:
  PortalServer_root/theme、wp.mashup.cc.theme/installedApps/wp.mashup.cc.theme.ear/PageBuilder2.war/themes/html/PageBuilder2/

静态资源

在历史版本的 Portal 系统中，主题静态资源也包含在对应的 WAR 文件中。但对于 Portal 7中的 Page Builder 主题，静态资源被部署到 WebDAV。你可以通过根目录URL以及下面的入口位置访问 WebDAV 文件存储器，根目录URL是 http://hostname:port/wps/mycontenthandler/dav/entrypoint/.: 

• 管理主题的入口点: 

•     /themelist
  •    这是管理主题的WebDAV入口 
      /skinlist/
  •    这是管理皮肤的WebDAV入口
    
   
  文件存储器入口: 

/fs-type1/themes/

• 该入口可以创建，更新或者删除主题的HTML，CSS，Javascript或图片文件.

/fs-type1/skins/

• 该入口可以创建，更新或者删除静态的皮肤 HTML, Javascript, and image 文件.

/fs-type1/layout-templates/

• 该入口可以创建，更新，或者删除布局模板.

/fs-type1/common-resources/

      该入口是管理被多个主题共享的通用资源

• 其它细化入口点: 

OneUI CSS - 公共CSS定义文件

fs-type1:\common-resources\ibm\css\

Page Builder CSS - 包含覆盖 OneUI 的CSS 定义 以及 特定于 Page Builder 主题

fs-type1:\themes\PageBuilder2\css\

Menu Definitions

fs-type1:\themes\PageBuilder2\menuDefinitions\

Customization Shelf Configuration

fs-type1:\themes\PageBuilder2\system\

Dojo以及其它Javascript资源

Dojo 被部署到该目录下： PortalServer_root/theme/wp.theme.dojo/installedApps/dojo.ear/dojo.war/.  系统提供了多版本的Dojo，以支持迁移过来的针对特定版本dojo开发的主题。Dojo v1.3.2 文件在dojo.war的根目录下，新版本的在子目录下，如：/v1.4.3.

Dojo 1.4.3 源文件包括所有Page Builder相关的 javascript 和 widget，被放在一个压缩包里：PortalServer_root/theme/wp.theme.dojo/installedApps/dojo.ear/dojo.war/source.zip ， 该压缩包中，包含 主题 javascript layers 的 Dojo profile 文件，”portal_dojo_143.profile.js". 该源文件以及 Dojo profile 文件可以用来创建任何新的定制layer。 如果很多 Javascript 被加到了主题中，就建议大家创建新的 javascript layer 部署到生产环境。

• 主题使用了两个 javascript layer: theme.js （所有View模式下需要的JS）和 theme.edit.js（针对Edit模式以及页面定制）, 位置：PortalServer_root/theme/wp.theme.dojo/installedApps/dojo.ear/dojo.war/v1.4.3/com/ibm/themes/PageBuilder2
• Page Builder：portalserver_root\theme\wp.theme.dojo\installedApps\dojo.ear\dojo.war\v1.4.3\com\ibm\pb\
  
• Enabler：portalserver_root\theme\wp.theme.dojo\installedApps\dojo.ear\dojo.war\v1.4.3\com\ibm\mm\enabler\
  
• Builder：portalserver_root\theme\wp.theme.dojo\installedApps\dojo.ear\dojo.war\v1.4.3\com\ibm\mm\builder\
  
• Dojo javascript layers (包含Page Builder, Enabler and Builder javascript， 压缩和非压缩): portalserver_root\theme\wp.theme.dojo\installedApps\dojo.ear\dojo.war\v1.4.3\com\ibm\themes\PageBuilder2\
  
• Dojo：portalserver_root\theme\wp.theme.dojo\installedApps\dojo.ear\dojo.war\v1.4.3\dojo\

如果想使用非压缩版本的 Javascript 文件，参考以下步骤：

1. 1. 打开 WAS 控制台
   2. 转到页面 Resources -> Resource Environment -> Resource Environment Providers
   3. 找到并选择打开 "WP CommonComponentConfigService"
      
   4. 打开 定制属性 （custom properties）
   5. 将属性 "cc.isDebug" 的值改成 true
   6. 重新启动 Portal

参考文档：

1. Wiki:Developing an Exceptional Web Experience