WebSphere Portal 的移动化之路
简介： 在移动设备越来越普及的今天，一个不可避免的话题就是基于门户的内容和应用程序如何被各类移动设备访问和使用。本文将为读者介绍 WebSphere Portal 所提出的两种移动化解决方案，一种是近年来一直在推广的基于 Mobile Portal Accelerator 的覆盖多种移动终端的解决方案；另一种是利用定制的门户 Mobile Theme 来针对主流智能移动终端 (iOS/Android/Blackberry) 提供的轻量级及优化的解决方案。
平均分 (7个评分)
在移动设备越来越普及的今天，一个不可避免的话题就是基于门户的内容和应用程序如何被各类移动设备访问和使用呢？ WebSphere Portal 作为企业级的门户产品又是如何适应潮流来满足用户的移动化需求呢？
本文将为读者介绍 WebSphere Portal 所提出的两种移动化解决方案，一种是近年来一直在推广的基于 Mobile Portal Accelerator 的覆盖多种移动终端的解决方案；另一种是利用定制的门户 Mobile Theme 来针对主流智能移动终端 (iOS/Android/Blackberry) 提供的轻量级及优化的解决方案。最后对这两种解决方案的优劣做了一番对比，并提供了各自适用场景的建议。
WebSphere Portal 为企业提供 Web 站点框架，整合应用程序，工作流，以及来自不同数据源的内容，并提供统一的前端展示界面。随着用户对移动访问需求的不断增长，WebSphere Portal 产品的移动化策略也面对着两种选择：是为不同厂商，不同制式的移动终端提供原生应用？还是提供一套统一的移动门户框架来服务各种终端设备？我们通过表 1 对这两种不同的解决方案做一个比较：
表 1. 原生移动应用和移动门户框架的比较
| 运行机制 | 通过运行在移动终端上的原生应用访问门户。 | 通过手机浏览器直接访问门户。终端不需要下载任何程序。 |
| 技术复杂度 | 需要面向不同的移动平台和终端开发应用。 | 基于门户原有开发模式。 |
| 运维成本 | 维护多种终端应用。开发、维护成本高。 | 统一站点提供给不同移动终端访问。开发、维护成本低。 |
| 用户体验 | 丰富的移动终端展示体验，可以和终端既有能力无缝集成。 | 多终端统一的浏览器访问体验。 |
通过比较我们可以看到，原生移动应用在用户体验上有明显的优势，但是从技术复杂度和运维成本角度考虑，要针对基于不同厂商、平台的终端设备做定制开发，成本和技术门槛相对较高。移动门户框架通过侦测客户端类型，使门户内容、应用自适应于不同的移动设备，满足用户快速上线的要求，技术上基于原有的门户开发模式，复杂度低，开发和维护成本也很低。
通过分析以上两种不同技术方案的优劣，以及门户产品用户市场的实际需求，WebSphere Portal 的移动化策略最终采用框架式的解决方案，提供面向不同终端设备的统一的 Web 移动应用服务。
WebSphere Portal 移动解决方案之移动门户加速器
移动终端可以是功能手机，智能手机，平板电脑，也可以是路边的公共信息发布亭。不同的移动终端具有不同的屏幕显示尺寸，不同的浏览器，支持不同的 Markup 语言。如何使这些移动终端在访问 WebSphere Portal 的时候能够得到适应于设备本身特性的访问体验？移动门户加速器（Mobile Portal Accelerator) 用来解决这个需求。
移动门户加速器是运行在 WebSphere Portal 上的一套应用服务，通过在显示层作转换，使门户的内容和应用适应于来自不同移动终端的访问。它具备以下特性：
- 采用标准的 HTTP/s 请求、响应技术
- 不需要在移动设备上下载，安装，维护任何代码
- 没有数据存储在移动终端
- 门户的更新会被即时应用到终端
- 对移动终端设备所采用的运营商，操作系统和网络没有特殊要求
- 需要终端设备内置浏览器和网络连接
在介绍移动门户加速器的架构之前，我们先来看一个重要技术：XDIME （XML-based Device Independent Markup Extensions）。XDIME 是基于开放标准的一组展示层标记语言扩展，它的作用是把各种设备独立的展示层数据和依赖于设备的元素（比如布局，样式，屏幕尺寸）做分离。相对于 HTML，XDIME 提供了更为强大的结构化元素（canvas，pane，region，segment）和布局元素（layout，fragment，form），可以定义显示在终端上内容的物理位置。
图 1. 移动门户加速器架构图
我们通过图 1 来介绍移动门户加速器的主要组件，以及它们的功能。
多通道服务器（MCS Runtime）
多通道服务器是运行在 WebSphere Portal 上的一个运行期第三方组件，它的作用是把 XDIME 标记语言转换成移动设备所支持的浏览器标记语言，比如 WML，XHTML。
多通道服务器存储库（MCS Repository）
WebSphere Portal 移动门户加速器目前支持超过 8000 多种设备，多通道服务器存储库为各种设备保存不同的展示层策略，比如布局策略，主题策略，组件策略。每种设备的属性信息都对应存储于这些策略文件中。
移动门户扩展（Mobile Portal Extension）
移动门户扩展是 IBM 提供的基于 WebSphere Portal 的一组应用，包括 XDIME 聚合器，主题，皮肤，和一组用于管理 XDIME 页面导航、属性的 Portlets。
媒体数据访问代理（Media Access Proxy）
媒体数据访问代理是一个第三方组件，用来对门户页面的图片做内部转码和文件大小的转换。对一张标准尺寸的图片，可以使之既适应于桌面终端的显示，也能够通过媒体数据访问代理的自动裁剪，适用于不同移动终端的屏幕尺寸。 需要注意的是媒体数据访问代理组件不能和门户服务器安装在一起， 从负载均衡的角度考虑，一般建议把它安装在一台独立的 WebSphere Application Server 上。
移动门户开发包（Mobile Portal Toolkit）
移动门户开发包是一套 XDIME Portlet 的开发工具，提供自动开发向导、设备策略编辑器以及单元测试环境。可以和 Rational Application Development 或 Eclipse 开发环境集成在一起。
图 2. 移动门户加速器内部交互
图 2 展示了移动门户加速器的内部交互流程。和来自于桌面浏览器的请求处理不同之处在于，移动终端设备的请求会首先被 MCS Filter 处理并交给 XDIME Aggregator 来聚合页面，最后由 MCS 生成适用于访问终端类型的标记语言，最终返回给请求设备。下面我们对其中的三个关键步骤分别作介绍：
如何鉴别发送请求的客户端的设备类型？
门户从客户端接收请求，通过获取 HTTP Header 里面的 User-Agent 属性，来确定访问设备的类型。在获取到 User-Agent 属性后，通过已经在门户中定义好的终端类型，来告诉门户需要用什么样的 Markup 语言来聚合页面。
图 3 展示了 WebSphere Portal 提供的 Manage Clients Portlet，在门户移动加速器安装完毕之后，所有被支持的终端类型都会列在 Manage Clients Portlet 里面，每种终端类型所支持的 Markup 语言也定义在里面。例如，当门户发现客户端请求的 User-Agent 属性里面包含 RIM 字段，那么通过 Manage Clients Portlet 里面 Client 与 Markup 的对应，就可以确定用 xdime 标记语言来聚合页面。
图 3. 终端类型管理 （Manage Clients Portlet）
如何处理来自移动终端设备的请求？
当门户鉴别出请求发起的终端设备类型，并且终端在门户中所对应的标记语言是 XDIME，该请求就会被 MCS Portal Filter 处理，并交给 XDIME Aggregator 来聚合并生成页面。XDIME Aggregator 基于 WebSphere Portal 聚合器之上，不同之处在于仅处理支持 XDIME 标记语言的 Portlet。
如何生成适用于不同终端的标记语言？
由 XDIME Aggregator 聚合好的页面，会传给多通道服务器。由多通道服务器通过策略匹配转换成相应设备所支持的标记语言。最后通过 MCS Portal Filter 把处理完的请求结果发回给客户端。
为了使现有门户的页面，内容适应于移动终端，门户管理者需要对已有 Portlets，引入 XDIME 标记语言的支持：
1. 首先，安装好 Mobile Portal Toolkit 开发环境，导入需要支持 XDIME 标记语言的的 Portlet。
2. 下一步编辑 Portlet.xml，加入 XDIME 作为支持的标记语言。
图 4. 加入 XDIME 支持
3. 接下来，创建一个或多个布局。使多通道服务器可以根据访问终端的屏幕，布局等属性来选择合适的布局展示。图 5 展示了同一个页面的三种布局，以及在三种不同终端上的显示方式。
图 5. 创建布局
4. 最后，创建和 HTML 文件夹平级的 XDIME 文件夹，把创建好的 XDIME JSP 放入。注意 XDIME JSP 的名字要和原有支持 HTML 的 JSP 文件保持一致。
图 6. 创建 XDIME JSP
WebSphere Portal 移动主题解决方案，面向市场主流的智能移动终端平台：Apple iOS，Android，和 Blackberry，使用轻量级的架构提供移动门户访问体验。门户移动主题提供一组 widget，来展示导航和内容的交互。用户可以在门户移动主题的框架之上，快速定制、开发，以满足自己的需求。下面介绍基于最新的 WebSphere Portal 8 的移动主题。
门户移动主题的安装过程非常简便，首先通过 IBM Collaboration Solutions Catalog 网站获得移动主题的免费下载。然后通过 WebSphere Portal ConfigEngine 工具进行安装和部署：
- 安装：
ConfigEngine.bat/sh install-paa -DPAALocation=mobile_theme_80.paa location - 部署：
ConfigEngine.bat/sh deploy-paa -DappName=mobile_theme_80
门户移动主题的文件结构由以下 4 种类型组成：
表 2. 门户移动主题的文件结构
| HTML |
|
|
| JSP | wp_profile_root\installedApps\cell\Mobile_Theme_80.ear\wp.theme.themes.mobile80.war\themes\html\ |
|
| JavaScript | dav:fs-type1:themes\mobile80\js |
|
| CSS | dav:fs-type1:themes\mobile80\css |
门户移动主题提供 3 种页面导航方式：Carousel, Scroller, 和 Drilldown。 默认的导航类型是 Carousel，每种导航类型通过一个 JavaScript 和 CSS 样式表来实现。
Carousel -提供一级导航。
默认显示当前页面的名字，通过点击左右箭头、在 Carousel 区域滑动一个手指，或者在页面区域滑动两个手指导航到前页或下页。
图 7.Carousel 导航
Scroller -提供一级导航。
在标签区域显示当前页面的名字。使用箭头或滑动一个手指来切换页面。
图 8.Scroller 导航
Drilldown -提供三级导航。
通过箭头切换同级页面，通过在子页面的箭头来到下级页面。
图 9.Drilldown 导航
以上三种页面导航可以通过编辑 theme.js 里面的 navigation_type 属性来进行切换：
图 10.theme.js
门户移动主题提供 4 种页面布局：Accordion，Carousel，Swap 和 Mobile select。
Accordion 布局
页面上多个 Portlets 显示在一列，通过触碰 Portlet 的标题来展开内容。 Accordion 布局有两种模式，默认模式是允许多个 Portlets 处于打开的内容展示状态，另一种模式是当前只能有一个 Portlet 处于打开的内容展示状态。
图 11.Accordion 布局
Carousel 布局
显示多个 Portlets 在一行，通过触碰左、右箭头来切换其他 Portlets，当前屏幕只显示一个 Portlet。
图 12.Carousel 布局
Swap 布局
和 Carousel 布局的相似之处在于，都是平行显示多个 Portlets，通过触碰左、右箭头来切换其他 Portlets。不同之处在于，Swap 布局可以通过在屏幕中滑动 Portlets 来进行切换。
图 13.Swap 布局
Mobile select 布局
显示页面上一行内所有 Portlets 的缩小图标，通过滑动手指来显示下一组 Portlets。当需要某个 Portlet 的全尺寸显示时，触摸屏幕上对应的 Portlet。
图 14.Mobile select 布局
移动主题布局的选择和传统门户页面的布局选择一样方便，在页面编辑模式下，我们可以看到四种应用于移动设备的布局。
图 15. 选择移动布局
通过对 WebSphere Portal 所提供的两种移动化解决方案的介绍，我们可以看到移动门户加速器技术更多的是考虑如何覆盖各种不同种类的移动终端，提供多终端统一的门户访问体验。 而移动门户主题技术提供一种轻量级的架构，面向目前市场上主流的智能终端，提供优化的适用于移动设备使用特点的访问体验。
用户可以根据自己的实际需求来选择最适合的方案。如果企业的门户更多的是用来发布内容，那么多终端的移动支持就非常重要，移动门户加速器是最好的选择。如果企业的门户考虑面向目前市场上主流的智能移动终端，那么门户移动主题提供的轻量级解决方案，就应该是最好的选择。
原文地址：http://www.ibm.com/developerworks/cn/lotus/ls-cn-portal-mobile/index.html