IBM WebSphere Portal 中的 Web 2.0 主题与皮肤定制开发介绍

简介： 在众多门户项目中，满足用户对 UI 的需求是项目成败的关键因素之一。良好的界面设计不但可以使用户操作更加便捷，而且能够使得应用呈现条理更加清晰，从而提高用户的生产效率。WebSphere Portal 6.1 版本中新增加的 Web 2.0 主题特性通过 AJAX 的方式进行页面的客户端页面聚合。相比起原来的服务器端聚合，这种方式在性能与用户体验上有了大幅度的提升。基于此，本文希望对 Web 2.0 主题皮肤框架的定制与开发方面作全面的介绍。读者通过阅读本文可以快速开展 Web 2.0 主题的设计与开发工作。

传统门户页面聚合方式介绍
Portal 的技术就是以松耦合的方式将 portlet 应用程序有机的聚合起来形成一个站点。其中，页面的聚合是最重要的平台能力之一。页面是 Portlet 应用呈现的容器。基于内容与展现分离的原则，可以理解为：portlet 是门户的内容，而主题皮肤则是展现。如图 1 所示。

图 1. 门户页面聚合

在 6.1 以前的 WebSphere Portal 版本中，只存在有一种的页面聚合方式：服务器端聚合（SSA）。这种聚合方式的原理是在服务器端将 portlet 的内容在服务器端完成编译后使用皮肤将这些内容有顺的加入到主题的页面中形成一个更大的 JSP 文件！这一文件在服务器端完成转换后（HTML），便会以应答的方式返回给客户端。

门户 Web 2.0 主题与皮肤框架介绍
客户端聚合（CSA）是在新版本门户（6.1.x）中呈现页面的一种新方式。它结合服务器端内容及客户端代码（javascript）的办法，将门户页面的各种内容：导航、工具栏、portlet 内容、菜单等以 REST 服务的接口向客户端代码开放。客户端使用新版本中内置的 javascript 引擎（基于 dojo 实现）加载页面各个部分的内容。利用 DOM 的方式将从 REST 取回来的内容填充到页面相应的位置上。当用户对页面进行操作，会激发这个引擎的事件处理机制。引擎继而定位要更新的页面部分，向服务器提出 REST 请求，再将返回的内容更新对应的部分。使得用户浏览门户页面的整体体验有了大幅提升。

图 2. CSA 架构


如图 2 所示，CSA 框架是基于页面的 DOM 对呈现的元素进行控制。框架在页面下载的第一次进行初始化，将页面的元素定位及相应的事件注册完毕。CSA 负责与服务器端的 REST 服务 Servlet (Remote Model API) 通信。服务器端返回 ATOM (application/atom+xml) 格式的模型 Feeds。其中 portlet 间通信一类的交互将由 Portal Servlet 进行处理。整个架构包含有 2 个缓存，一个是客户端浏览器的缓存，一个是服务器端的中间缓存。对于 JS、CSS 一类的静态文件，相当程度是依赖于客户端浏览器提供的缓存机制提高其性能。服务器端的缓存则用于处理重复类型的请求，如导航、菜单等。