CD119

使用SAP Fiori模式构建响应式SAPUI5应用

张辉明 毛伟成
2014年3月
Disclaimer

This presentation outlines our general product direction and should not be relied on in making a
purchase decision. This presentation is not subject to your license agreement or any other agreement
with SAP. SAP has no obligation to pursue any course of business outlined in this presentation or to
develop or release any functionality mentioned in this presentation. This presentation and SAP's
strategy and possible future developments are subject to change and may be changed by SAP at any
time for any reason without notice. This document is provided without a warranty of any kind, either
express or implied, including but not limited to, the implied warranties of merchantability, fitness for a
particular purpose, or non-infringement. SAP assumes no responsibility for errors or omissions in this
document, except if such damages were caused by SAP intentionally or grossly negligent.

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 2

议程

SAPUI5 介绍
 总览 / 开发环境
 什么是SAPUI5
 关键特性和价值
 简化的架构
 发布周期以及维护策略

基于SAPUI5的SAP Fiori 应用
 Fiori 总览
 构建和扩展SAP Fiori 应用的演示

总结
 关键知识点

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 3

SAPUI5 介绍
UI development toolkit for HTML5 (SAPUI5)
总览

跨设备 SAP用户体验策略
响应式设计 消费级的用户界面
桌面应用 (比如SAP Fiori 应用)
用户体验

移动应用
UI
设计阶段工具包 Development 针对SAPUI5开发的提升开发效力的
基于Eclipse的SAPUI5开发工 Toolkit for HTML5 服务性接口
具包 (SAPUI5)
网页版的集成开发环境 SAP/
非SAP 后台数据访问 /
用户界面主题设计器 平台 永不过时的软件
ODATA服务
跨平台 SAP NetWeaver Gateway

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 5

UI development toolkit for HTML5 (SAPUI5)
SAP提供的用于构建轻量级、多平台的商业用户界面的HTML5工具包

SAPUI5是一款用于客户端的基于HTML5和JavaScript的展现类库和开发模型，它优化了对于SAP数据的访问。该产品在大家
所熟知的SAP的强项像企业级的可用性和产品标准的支持的基础上结合了一些新的优点像开放性和灵活性。

核心竞争力
 丰富的控件集，包含可用于所有设备的图表
 针对所有平台的应用开发环境
 针对永不过时软件的OData集成
 针对定制控件的可扩展性概念
 现代的主题设计和品牌定制概念
 接受开源框架和网页标准
 面向具有网页开发技能 (HTML, CSS3, JS) 的开发人员

价值
 设备和平台无关带来的业务敏捷性
 增强的灵活性，开放性和精准完美的设计带来的开发人员生产率和热
情的提升

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 6

UI development toolkit for HTML5 (SAPUI5)
SAP提供的用于构建轻量级、多平台的商业用户界面的HTML5工具包

关键特性和优势
愉悦 用户 培育 创新 基于 标准
分辨率和设备无关 无可比拟的可扩展性 企业级的可用性
前沿的控件 永不过时的SAP数据调用 基于Eclipse的开发设计环境
强大的主题设计和品牌定制 快速的发布周期 开放性和灵活性
高效和高性能 提升开发效力的服务 众所周知且简单易学
领先的网页开发技术
HTML5 jQuery OData OpenAJAX CSS3 LESS D3.js ARIA

运行于各种SAP以及非SAP平台
SAP HANA Cloud SAP NetWeaver AS ABAP SAP HANA XS

开源平台 (测试中) SAP NetWeaver AS Java / Portal SAP Mobile Platform (计划中)
更多: “Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5)”: http://scn.sap.com/docs/DOC-31625

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 7

UI development toolkit for HTML5 (SAPUI5)
SAPUI5 简化的架构
应用客户端

网页浏览器
SAP UI5 运行时
基于sap.m 基于
及类库 sap.ui.commons
基于JSON, XML or
类库的视图 Odata格式的模型
类库的视图
控制器

OData

SAP NetWeaver SAP NetWeaver SAP NetWeaver SAP HANA Extended SAP NetWeaver
应用服务端

AS ABAP Cloud Application Services

AS Java Gateway
(XS Engine)
资源管理器 资源管理器 资源管理器

JS JS JS JS JS JS JS JS
CSS CSS CSS CSS CSS CSS CSS CSS SAP 后台服务器 数据库

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 8

UI development toolkit for HTML5 (SAPUI5)
SAPUI5的发布周期以及维护策略

按季发布基于各种平台的 SAPUI5
 每3个月发布一个小版本 (1.12.0, 1.14.0, 1.16.0)
 新的小版本都遵循特定的兼容规则并且向后兼容以前的版本
 当前版本的修复会在补丁版本中提供 (比如 1.14.1, 1.14.2)
 新的版本一旦向客户发布，之前版本的问题都将在补丁版本中修复 (比如1.14.0 已经发布了，在1.12.9 中的问题将在
1.14.1 版本中修复)

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 9

基于SAPUI5的SAP Fiori 应用
保持简单事情的简洁性
 响应式的 简洁的 有影响力的 连贯的 实时价值

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 13

 所有
尺寸 | 设备 | 版本 | 渠道

一份
代码
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 14
演示
总结
使用SAP Fiori模式的响应式SAPUI5应用

总结
 SAPUI5是一个UI控件库，可以用在Eclipse上，很快在也可以在网页工具
上使用
 SAPUI5进行过优化以使用OData暴露的元数据
 SAPUI5帮助你高效地构建赏心悦目的响应式商业应用，它们基于HTML5
且可以运行在任何设备上
 SAPUI5可用于所有SAP平台
 SAPUI5接受网页标准
 SAPUI5是下一代SAP应用程序的关键技术
 SAPUI5最新提供了免修改的可扩展能力

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 17

SAP UX Explorer - http://uxexplorer.hana.ondemand.com
SAP Teched 拉斯维加斯, 演讲者网络课程SPK10209或SPK10210

 标识出相关的用户体验主题
 探索和比较你们的选择
 研究各主题间的关系
 理解必要的后续步骤
 直接链接到详细内容
 客户及合作伙伴都可访问

在用户体验展台与该演讲者面对面
或者访问演讲者网络课程
SPK10209或SPK10210
Jürgen Jakowski

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 18

Further Information

SAP Public Web

scn.sap.com
scn.sap.com/community/developer-center/front-end
www.sap.com

SAP Education and Certification Opportunities

www.sap.com/education
sapui5.netweaver.ondemand.com/sdk/#content/Overview.html

Watch SAP TechEd Online

www.sapteched.com/online

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 19

Feedback
Please complete your session evaluation for CD119.

Thanks for attending this SAP d-code session.