新一代门户移动访问实现

卓毓鸣

目录

IBM Portal在IBM Mobile解决方案中的定位 IBM 门户支持的移动应用场景 技术实现 IBM Portal Moble Theme (移动主题) 技术实现 Web Experience Factory 开发Web Mobile App 技术实现 Worklight 集成Hybrid App

第 页

独立的移动 应用程序

多渠道的 Web站点

集成的、个性化站点 多应用的聚集，多内容的聚合 多渠道、多设备的支持 跨渠道的授权与认证

定制的独立应用程序 例如：IBM Connections, Sametime 等

WebSphere Portal & Mobile Portal Accelerator

Application Server

核心特性

平台

样例

Worklight ( 存在 hybrid （混合）需求)

统一的通用技术框架支撑多设备的Web体验

设备能力的应用与设备的管控

技术实现途径

应用需要多设备适配，设备类型种类繁多

客户需求

7,500 + Devices

IBM Mobile Portal Accelerator

Portal Mobile Themes +

WebSphere Experience Factory +

第三方工具（例如： PhoneGap）

扩展Web体验到特定的机型

简单的设备本地资源调用

快速开发，部署混合应用或客户端应用程序，并提供设备本地资源的调用

编写一次，多设备适配。 Browsers and Smartphones, Tablets, Kiosks, even Web TV

WorkLight +

WebSphere Experience Factory +

Portal Mobile Themes

解决途径

目录

IBM Portal在IBM Mobile解决方案中的定位 IBM 门户支持的移动应用场景 技术实现 IBM Portal Moble Theme (移动主题) 技术实现 Web Experience Factory 开发Web Mobile App 技术实现 Worklight 集成Hybrid App

第 页

Mobile 是方向，但繁杂

平台选择：Android, iOS, WinPhone...外加一些小众手机

屏幕适配: 480*320(low end),800*480(milestone2,小米

),1280X720(galaxy),1280X800(Note),960x640(ip4),1136 x

640(ip5),1024x768(mini,ip2),2048×1536(newip)

应用场景: OA？业务应用？对外：供应商？客户？

支持设备策略：特定平台 VS. 所有手持设备

开发团队技术要求: Java, Android sdk, Obj-c, cocoa, html5, css3,

js(dojo,jquery...)

开发成本: 专业手机开发人员，web 开发人员，UI 设计人员

IBM门户移动应用场景 Demo

© 2012 IBM Corporation

桌面浏览器 手机浏览器 Worklight

Hybrid 本地应用

防火墙 & 反向代理

Worklight Server 通知 应用授权 应用有效期 应用升级 等...

WebSphere Portal Server 个性化，权限管控，定制，其它...

IBM Connections 社交服务

企业应用与服务

HTML/JS/CSS, Ajax REST Services

安全检查、 通知注册等….

Web 内容 Portlets 多渠道、多设备Web应用程序

Demo总结

桌面浏览器 手机浏览器 平板浏览器

防火墙 & 反向代理

Portal Server/WEF 个性化 权限管控 定制 Web 内容 其它...

业务集成层 / 公共服务提供

Html/JS/CSS 连同 Ajax 一起，提供REST Services

服务提供建议使用Rest Services 数据格式建议使用RSS/Atom/JSON

Web内容管理 模板化展示 Web内容管理 其它...

HTML/CSS/JS

传统手机浏览器

Mobile Web场景：仅有Web形式的内容

Worklight Hybrid 应用

Worklight 服务器 通知 应用授权 应用有效期 等...

安全检查, 通知，等..

Web + Hybrid场景 ：仅有Web形式的内容

桌面浏览器 手机浏览器 平板浏览器

防火墙 & 反向代理

Portal Server/WEF 个性化 权限管控 定制 Web 内容 其它...

业务集成层 / 公共服务提供

Html/JS/CSS 连同 Ajax 一起，提供REST Services

服务提供建议使用Rest Services 数据格式建议使用RSS/Atom/JSON

Web内容管理 模板化展示 Web内容管理 其它...

HTML/CSS/JS

Worklight 服务器 通知 应用授权 应用有效期 等...

Adapter

Web + Hybrid: 部分的设备资源调用

Worklight Hybrid 应用

安全检查, 通知，等..

桌面浏览器 手机浏览器 平板浏览器

防火墙 & 反向代理

Portal Server/WEF 个性化 权限管控 定制 Web 内容 其它...

业务集成层 / 公共服务提供

Html/JS/CSS 连同 Ajax 一起，提供REST Services

服务提供建议使用Rest Services 数据格式建议使用RSS/Atom/JSON

Web内容管理 模板化展示 Web内容管理 其它...

HTML/CSS/JS

Some HTML/JS/CSS

JDBC/WebService

目录

IBM Portal在IBM Mobile解决方案中的定位 IBM 门户支持的移动应用场景 技术实现 IBM Portal Moble Theme (移动主题) 技术实现 Web Experience Factory 开发Web Mobile App 技术实现 Worklight 集成Hybrid App

第 页

IBM WebSphere Portal Mobile Theme 体验

站点导航

外观

页面布局

Mobile theme – 轻量级, 丰富的特效, CSS3 视觉效果

Navigation widgets – 多种通用的Mobile页面导航模式

Page layouts – 多种通用的Mobile应用交互模式

可以基于 dojo.mobile, jQuery, etc.. 扩展

旋转 滚动 向下钻取

Mobile 导航

• 单击此处编辑母版文本样式 – 第二级

• 第三级 – 第四级

» 第五级 • 单击此处编辑母版文本样式 – 第二级

• 第三级 – 第四级

» 第五级

• 单击此处编辑母版文本样式 – 第二级

• 第三级 – 第四级

» 第五级

旋转 选择

交换 折叠 Mobile布局

Mobile导航 与 Mobile布局的组合

页面导航: 旋转

内容布局: 旋转

页面导航: 旋转

内容布局: 折叠

页面导航: 旋转

内容布局: 选择

Mobile Theme 下载地址 https://greenhouse.lotus.com/plugins/plugincatalog.nsf/assetDetails.xsp?action=editDocument&documentId=03AF9B252CDED3B28525791100581049

多种分辨率的支持

可以基于设备的宽、类型、分辨率动态的适配

可以基于需求扩展支持的设备类型

CSS meida query and portal device classes

可以基于需求定制页面式样 2.样式文件，可以修改css 文件

3.呈现的内容可以修改jsp文件。

1.相关资源位置 CSS 、JS在WebDAV目录： http://<Hostname>:10039/wps/mycontenthandler/dav/fs-type1/themes/mobile JSP在目录： WebSphere\PortalServer\theme\wp.theme.themes\mobile\installedApps\wp.theme.themes.mobile.ear

目录

IBM Portal在IBM Mobile解决方案中的定位 IBM 门户支持的移动应用场景 技术实现 IBM Portal Moble Theme (移动主题) 技术实现 Web Experience Factory 开发Web Mobile App 技术实现 Worklight 集成Hybrid App

Web Experience Factory

支持2种移动应用开发模式

利用Mobile Theme的

样式及布局

客户端架构

利用概要文件 与 模板

快速构建移动应用

库和模板

Web Experience Factory

代码生成引擎 Model Builder 1 Builder 2 Etc.

Application code

基于dojo mobile (1.7)

© 2012 IBM Corporation

Web Mobile App 的开发——如何做？ 1/ 创建概要文件......

© 2012 IBM Corporation

Web Mobile App 的开发——如何做？ 2/ 概要文件条目绑定访问设备......

Web Mobile App 的开发——如何做？

3/ 设备逻辑判断............ Main主线程

设备页面定义

Web Mobile App 的开发——添加导航页 4/ Web Mobile 页面定制............

Mobile Portlet 的开发-效果

Web Mobile App 的开发——图像设置 4/ Web Mobile 页面定制............

Mobile Portlet 的开发——效果

Web Mobile App 的开发——报表展现 4/ Web Mobile 页面定制............

Web Mobile App 的开发——效果

目录

IBM Portal在IBM Mobile解决方案中的定位 IBM 门户支持的移动应用场景 技术实现 IBM Portal Moble Theme (移动主题) 技术实现 Web Experience Factory 开发Web Mobile App 技术实现 Worklight 集成Hybrid App

© 2012 IBM Corporation

本地客户端容器

Web应用内容

WebSphere Portal, WCM 集成的、个性化站点

多应用的聚集，多内容的聚合 多渠道、多设备的支持 跨渠道的授权与认证

IBM Worklight 访问设备特有的本地能力

(相机, 本地联系人,等...) 应用商城 应用管理 通知

本地客户端容器

Web 应用内容

设备本地能力

设备本地能力

Worklight 与 IBM Portal的整合

THANK YOU