`

WebSphere Portal 的移动化之路

阅读更多

WebSphere Portal 的移动化之路

 

刘 琨, 软件工程师, IBM
申 毅, 软件工程师, IBM

 

简介: 在移动设备越来越普及的今天,一个不可避免的话题就是基于门户的内容和应用程序如何被各类移动设备访问和使用。本文将为读者介绍 WebSphere Portal 所提出的两种移动化解决方案,一种是近年来一直在推广的基于 Mobile Portal Accelerator 的覆盖多种移动终端的解决方案;另一种是利用定制的门户 Mobile Theme 来针对主流智能移动终端 (iOS/Android/Blackberry) 提供的轻量级及优化的解决方案。

发布日期: 2013 年 1 月 11 日 
级别: 初级 
访问情况 : 3024 次浏览 
评论: 1 (查看 | 添加评论 - 登录)

平均分 4 星 共 7 个评分 平均分 (7个评分)
为本文评分

 

在移动设备越来越普及的今天,一个不可避免的话题就是基于门户的内容和应用程序如何被各类移动设备访问和使用呢? WebSphere Portal 作为企业级的门户产品又是如何适应潮流来满足用户的移动化需求呢?

本文将为读者介绍 WebSphere Portal 所提出的两种移动化解决方案,一种是近年来一直在推广的基于 Mobile Portal Accelerator 的覆盖多种移动终端的解决方案;另一种是利用定制的门户 Mobile Theme 来针对主流智能移动终端 (iOS/Android/Blackberry) 提供的轻量级及优化的解决方案。最后对这两种解决方案的优劣做了一番对比,并提供了各自适用场景的建议。

WebSphere Portal 的移动化策略

WebSphere Portal 为企业提供 Web 站点框架,整合应用程序,工作流,以及来自不同数据源的内容,并提供统一的前端展示界面。随着用户对移动访问需求的不断增长,WebSphere Portal 产品的移动化策略也面对着两种选择:是为不同厂商,不同制式的移动终端提供原生应用?还是提供一套统一的移动门户框架来服务各种终端设备?我们通过表 1 对这两种不同的解决方案做一个比较:


表 1. 原生移动应用和移动门户框架的比较
  原生移动应用 移动门户框架
运行机制 通过运行在移动终端上的原生应用访问门户。 通过手机浏览器直接访问门户。终端不需要下载任何程序。
技术复杂度 需要面向不同的移动平台和终端开发应用。 基于门户原有开发模式。
运维成本 维护多种终端应用。开发、维护成本高。 统一站点提供给不同移动终端访问。开发、维护成本低。
用户体验 丰富的移动终端展示体验,可以和终端既有能力无缝集成。 多终端统一的浏览器访问体验。

通过比较我们可以看到,原生移动应用在用户体验上有明显的优势,但是从技术复杂度和运维成本角度考虑,要针对基于不同厂商、平台的终端设备做定制开发,成本和技术门槛相对较高。移动门户框架通过侦测客户端类型,使门户内容、应用自适应于不同的移动设备,满足用户快速上线的要求,技术上基于原有的门户开发模式,复杂度低,开发和维护成本也很低。

通过分析以上两种不同技术方案的优劣,以及门户产品用户市场的实际需求,WebSphere Portal 的移动化策略最终采用框架式的解决方案,提供面向不同终端设备的统一的 Web 移动应用服务。

 

WebSphere Portal 移动解决方案之移动门户加速器

移动终端可以是功能手机,智能手机,平板电脑,也可以是路边的公共信息发布亭。不同的移动终端具有不同的屏幕显示尺寸,不同的浏览器,支持不同的 Markup 语言。如何使这些移动终端在访问 WebSphere Portal 的时候能够得到适应于设备本身特性的访问体验?移动门户加速器(Mobile Portal Accelerator) 用来解决这个需求。

WebSphere Portal 移动门户加速器的概念


移动门户加速器是运行在 WebSphere Portal 上的一套应用服务,通过在显示层作转换,使门户的内容和应用适应于来自不同移动终端的访问。它具备以下特性:

  • 采用标准的 HTTP/s 请求、响应技术
  • 不需要在移动设备上下载,安装,维护任何代码
  • 没有数据存储在移动终端
  • 门户的更新会被即时应用到终端
  • 对移动终端设备所采用的运营商,操作系统和网络没有特殊要求
  • 需要终端设备内置浏览器和网络连接

WebSphere Portal 移动门户加速器的架构

在介绍移动门户加速器的架构之前,我们先来看一个重要技术:XDIME (XML-based Device Independent Markup Extensions)。XDIME 是基于开放标准的一组展示层标记语言扩展,它的作用是把各种设备独立的展示层数据和依赖于设备的元素(比如布局,样式,屏幕尺寸)做分离。相对于 HTML,XDIME 提供了更为强大的结构化元素(canvas,pane,region,segment)和布局元素(layout,fragment,form),可以定义显示在终端上内容的物理位置。


图 1. 移动门户加速器架构图
图 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 开发环境集成在一起。

WebSphere Portal 移动门户加速器的内部交互


图 2. 移动门户加速器内部交互
图 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)
图 3. 终端类型管理 (Manage Clients Portlet) 

如何处理来自移动终端设备的请求?

当门户鉴别出请求发起的终端设备类型,并且终端在门户中所对应的标记语言是 XDIME,该请求就会被 MCS Portal Filter 处理,并交给 XDIME Aggregator 来聚合并生成页面。XDIME Aggregator 基于 WebSphere Portal 聚合器之上,不同之处在于仅处理支持 XDIME 标记语言的 Portlet。

如何生成适用于不同终端的标记语言?

由 XDIME Aggregator 聚合好的页面,会传给多通道服务器。由多通道服务器通过策略匹配转换成相应设备所支持的标记语言。最后通过 MCS Portal Filter 把处理完的请求结果发回给客户端。

XDIME Portlet 的开发

为了使现有门户的页面,内容适应于移动终端,门户管理者需要对已有 Portlets,引入 XDIME 标记语言的支持: 

1. 首先,安装好 Mobile Portal Toolkit 开发环境,导入需要支持 XDIME 标记语言的的 Portlet。

2. 下一步编辑 Portlet.xml,加入 XDIME 作为支持的标记语言。


图 4. 加入 XDIME 支持
图 4. 加入 XDIME 支持 

3. 接下来,创建一个或多个布局。使多通道服务器可以根据访问终端的屏幕,布局等属性来选择合适的布局展示。图 5 展示了同一个页面的三种布局,以及在三种不同终端上的显示方式。


图 5. 创建布局
图 5. 创建布局 

4. 最后,创建和 HTML 文件夹平级的 XDIME 文件夹,把创建好的 XDIME JSP 放入。注意 XDIME JSP 的名字要和原有支持 HTML 的 JSP 文件保持一致。


图 6. 创建 XDIME JSP
图 6. 创建 XDIME JSP 
 

WebSphere Portal 移动解决方案之移动主题

WebSphere Portal 移动主题解决方案,面向市场主流的智能移动终端平台:Apple iOS,Android,和 Blackberry,使用轻量级的架构提供移动门户访问体验。门户移动主题提供一组 widget,来展示导航和内容的交互。用户可以在门户移动主题的框架之上,快速定制、开发,以满足自己的需求。下面介绍基于最新的 WebSphere Portal 8 的移动主题。

WebSphere Portal 移动主题的安装

门户移动主题的安装过程非常简便,首先通过 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

WebSphere Portal 移动主题的文件结构

门户移动主题的文件结构由以下 4 种类型组成:


表 2. 门户移动主题的文件结构
类型 位置
HTML
 dav:fs-type1:themes\mobile80\theme.html 
 dav:fs-type1:themes\mobile80\skins\mobileStandard\skin.html 
 dav:fs-type1:layout-templates\mobileSwap\layout.html 
 dav:fs-type1:layout-templates\mobileSelect\layout.html 
 dav:fs-type1:layout-templates\mobileCarousel\layout.html 
 dav:fs-type1:layout-templates\mobileAccordion\layout.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

WebSphere Portal 移动主题导航

门户移动主题提供 3 种页面导航方式:Carousel, Scroller, 和 Drilldown。 默认的导航类型是 Carousel,每种导航类型通过一个 JavaScript 和 CSS 样式表来实现。

Carousel -提供一级导航。 
默认显示当前页面的名字,通过点击左右箭头、在 Carousel 区域滑动一个手指,或者在页面区域滑动两个手指导航到前页或下页。


图 7.Carousel 导航
图 7.Carousel 导航 

Scroller -提供一级导航。
在标签区域显示当前页面的名字。使用箭头或滑动一个手指来切换页面。


图 8.Scroller 导航
图 8.Scroller 导航 

Drilldown -提供三级导航。
通过箭头切换同级页面,通过在子页面的箭头来到下级页面。


图 9.Drilldown 导航
图 9.Drilldown 导航 

以上三种页面导航可以通过编辑 theme.js 里面的 navigation_type 属性来进行切换:


图 10.theme.js
图 10.theme.js 

WebSphere Portal 移动主题布局

门户移动主题提供 4 种页面布局:Accordion,Carousel,Swap 和 Mobile select。

Accordion 布局 
页面上多个 Portlets 显示在一列,通过触碰 Portlet 的标题来展开内容。 Accordion 布局有两种模式,默认模式是允许多个 Portlets 处于打开的内容展示状态,另一种模式是当前只能有一个 Portlet 处于打开的内容展示状态。


图 11.Accordion 布局
图 11.Accordion 布局 

Carousel 布局 
显示多个 Portlets 在一行,通过触碰左、右箭头来切换其他 Portlets,当前屏幕只显示一个 Portlet。


图 12.Carousel 布局
图 12.Carousel 布局 

Swap 布局 
和 Carousel 布局的相似之处在于,都是平行显示多个 Portlets,通过触碰左、右箭头来切换其他 Portlets。不同之处在于,Swap 布局可以通过在屏幕中滑动 Portlets 来进行切换。


图 13.Swap 布局
图 13.Swap 布局 

Mobile select 布局

显示页面上一行内所有 Portlets 的缩小图标,通过滑动手指来显示下一组 Portlets。当需要某个 Portlet 的全尺寸显示时,触摸屏幕上对应的 Portlet。


图 14.Mobile select 布局
图 14.Mobile select 布局 

移动主题布局的选择和传统门户页面的布局选择一样方便,在页面编辑模式下,我们可以看到四种应用于移动设备的布局。


图 15. 选择移动布局
图 15. 选择移动布局 
 

结束语

通过对 WebSphere Portal 所提供的两种移动化解决方案的介绍,我们可以看到移动门户加速器技术更多的是考虑如何覆盖各种不同种类的移动终端,提供多终端统一的门户访问体验。 而移动门户主题技术提供一种轻量级的架构,面向目前市场上主流的智能终端,提供优化的适用于移动设备使用特点的访问体验。

用户可以根据自己的实际需求来选择最适合的方案。如果企业的门户更多的是用来发布内容,那么多终端的移动支持就非常重要,移动门户加速器是最好的选择。如果企业的门户考虑面向目前市场上主流的智能移动终端,那么门户移动主题提供的轻量级解决方案,就应该是最好的选择。

 

原文地址:http://www.ibm.com/developerworks/cn/lotus/ls-cn-portal-mobile/index.html

分享到:
评论

相关推荐

    WebSphere Portal Server 白皮书

    WebSphere Portal Server还提供单点登录、安全性、Web内容发布、个性化、协作服务、企业应用集成等服务,并支持移动设备,具备站点分析功能,是行业内最全面的门户解决方案之一。 #### 3.2 个性化与业务流程集成 ...

    ibm websphere portal 学习资料

    IBM WebSphere Portal 是一款强大的企业级门户平台,它允许组织构建、管理和个性化复杂的Web...这些学习资料将是你通往IBM WebSphere Portal专家之路的重要指南,帮助你在实际项目中发挥WebSphere Portal的最大潜力。

    IBM演示-WebSpherePortal教程

    通过IBM演示-WebSpherePortal教程.exe文件,你可以逐步学习如何配置和使用这个平台,从基础概念到高级功能,包括安装、配置、portlet开发、安全设置等,全面掌握WebSphere Portal的运用技巧。教程将通过实例和演练...

    Websphere Portal 开发教材

    7. **移动支持**:Websphere Portal提供对移动设备的支持,包括响应式设计和专门的移动portlet,让企业门户可以在不同平台上顺畅运行。 8. **性能优化**:理解和优化Portal的性能至关重要,包括portlet缓存、页面...

    WebSphere Portal 开发文档

    WebSphere Portal的核心功能包括用户界面管理、内容聚合、个性化、安全性和可扩展性。它允许组织通过单一入口点访问多种应用和内容源,提供个性化的用户体验。文档可能涵盖了以下关键概念: 1. 门户架构:解释了...

    Websphere Portal管理与开发

    Websphere Portal不仅提供了丰富的特性,如个性化、社区构建、内容管理和集成服务,还支持多渠道访问,包括桌面、移动设备和社交媒体,为企业构建统一的信息和应用入口提供了有力支持。以下将深入探讨Websphere ...

    基于 WebSphere Portal 的企业门户架构pdf

    8. **未来趋势**:探讨 WebSphere Portal 的最新发展,例如云计算支持、移动门户以及人工智能在企业门户中的应用前景。 这份PDF文档对于了解和掌握基于 WebSphere Portal 的企业门户架构有着重要的参考价值,无论是...

    自己整理的websphere portal主题皮肤开发资料

    8. **拖放功能(Drag and Drop)**:Websphere Portal支持拖放功能,允许用户重新排列使用了外表的portlet的位置,甚至在页面间移动定制portlet。 9. **主题策略(Theme Strategy)**:主题策略控制着页面上主题的...

    ibm websphere portal 6.1 培训资料(二)

    - 了解WebSphere Portal对移动设备的支持,如IBM Everyplace Server和Lotus Notes Traveler的集成。 - 实现移动友好的portlet设计。 10. **最佳实践与案例研究**: - 分析实际项目中的问题和解决方案,学习最佳...

    Websphere Portal 7 guide

    WebSphere Portal 7 是 IBM 提供的一款功能强大且灵活的门户解决方案,旨在帮助企业构建高度交互、个性化且集成度高的企业级门户网站。此版本(Version 7 Release 0)不仅在用户界面、安全性以及性能方面进行了显著...

    IBM WebSphere Portal 信息中心

    - **第 11 节**:开始讨论 WebSphere Portal 的核心功能之一——个性化页面和内容管理。 - **第 12 节**:进一步解释内容管理和发布机制。 - **第 13 节**:介绍如何使用 WebSphere Portal 进行页面设计和布局。 ...

    Websphere Portal Document

    作为IBM的旗舰产品之一,WebSphere Portal 在企业信息化建设中扮演着重要角色。以下是关于WebSphere Portal 的一系列关键知识点: 1. **门户概念**:门户是一种Web应用程序,它整合了来自不同来源的信息,提供单点...

    ibm websphere portal 6.1 培训资料(一)

    13. **移动支持**:探讨WebSphere Portal 6.1对移动设备的支持,如Everyplace,以及如何为移动用户提供门户体验。 14. **监控和管理**:学习如何使用WebSphere Portal管理员工具进行日志分析、性能监控和故障排查。...

    IBM WebSphere Portal 介绍 IBM门户解决方案

    IBM WebSphere Portal 是一个企业级的门户平台,它为企业提供了一个集中化的访问点,将各种不同的信息系统、应用程序和内容整合到一个统一的界面上。这个平台旨在解决企业中常见的信息分散、账号管理复杂、数据利用...

    IBM_WebSphere_Portal门户解决方案

    IBM WebSphere Portal 是一款全面的企业门户解决方案,旨在为用户提供一个统一的、集成化的电子工作空间。该解决方案允许用户通过单一入口访问各类后台应用程序、信息资源,并提供强大的协作工具。其核心组成部分是 ...

    IBM WebSphere Portal 5.1 中文版(门户集成开发)

    总的来说,IBM WebSphere Portal 5.1 是一个强大且全面的门户解决方案,旨在为企业提供统一、安全且高效的数字化工作环境,促进业务流程自动化,提升用户交互体验,并支持多设备访问,适应不断变化的业务需求。

    IBM WebSphere Portal Version 6.1 & 6.1.5 指南

    针对不同行业的特定需求,IBM WebSphere Portal 提供了定制化的行业解决方案: - **医疗保健**:支持患者信息管理、预约系统等。 - **政府**:提供公民服务、信息发布平台等。 - **零售业**:集成电子商务功能,如...

    websphere portal 上卷

    7. **移动支持**:WebSphere Portal支持移动设备访问,开发者需要了解如何优化portlet以适应不同屏幕尺寸和触摸交互。 总之,WebSphere Portal是一个功能强大的企业级解决方案,其开发涉及的技术和概念复杂且全面。...

Global site tag (gtag.js) - Google Analytics