新一代门户移动访问实现 - ibm · 2013-03-01 · 技术实现途径...

新一代门户移动访问实现

卓毓鸣

目录

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

解决途径

目录


第页

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形式的内容








HTML/CSS/JS

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

Adapter

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

Worklight Hybrid 应用

安全检查, 通知，等..








HTML/CSS/JS

Some HTML/JS/CSS

JDBC/WebService

目录


第页

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

Web Experience Factory

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

利用Mobile Theme的

样式及布局

客户端架构

利用概要文件与模板

快速构建移动应用

库和模板

Web Experience Factory

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

Application code

基于dojo mobile (1.7)


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


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 的开发——效果


本地客户端容器

Web应用内容

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

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

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

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

本地客户端容器

Web 应用内容

设备本地能力

设备本地能力

Worklight 与 IBM Portal的整合

THANK YOU

新一代门户移动访问实现 - ibm · 2013-03-01 · 技术实现途径...

Documents