个人寿险保全作业申请书(其他变更类)---客户备案 · Title: 个人寿险保全作业申请书(其他变更类)---客户备案 Created Date: 6/12/2014 10:12:45
新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径...
Transcript of 新一代门户移动访问实现 - 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
解决途径
目录
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