Skip to Content

SAPUI5

Previous

SAPUI5 官方教程

 

SAPUI5 是一种 UI 技术,能够为你提供构建企业级 Web 应用所需的一切。该技术不仅支持所有主要的 SAP 平台,还可以在 SAP 生态系统之外使用,因为大部分 SAPUI5 都已通过 OpenUI5 实现了开源。

了解 SAPUI5/OpenUI5,以及你如何借助该技术构建一流的 Web 应用。

Next

了解 SAPUI5

SAPUI5 基于以下原则构建:

企业级 Web 工具包

SAPUI5 具备满足当前大部分应用要求所需的全部功能,其高标准足以确保这些功能在标准 SAP 解决方案中得到实现。

强大的开发概念

SAPUI5 核心通过在后台管理现代化应用开发的诸多事务,为简化开发流程奠定了坚实的基础。该技术内置一系列支持服务,支持多种架构概念,比如 MVC、消息处理、数据绑定、发送等。

功能丰富的 UI 控件

SAPUI5 中包含了 400 余种控件,既有基本的元素,又有复杂的 UI 模式。你可以直接使用这些控件,也可以根据自己的需求对其进行扩展和调整。

拥有一致的用户体验

SAPUI5 应用的所有前端功能都采用一致的设计语言和预定义的用户体验模式,因此具有巨大的优势。你可以采用预定义的主题,也可以利用 UI 主题设计工具自己创建。

UI 自适应屏幕大小

SAPUI5 应用在智能手机、平板电脑和台式电脑上均可运行,你完全不需要担心设备规格问题。UI 控件会根据每款设备的容量自动作出调整,以充分利用可用的不动产。

易于使用


如果你熟悉 JavaScript 和通用的 Web 标准,那么对你而言,使用 SAPUI5 将会超级简单。你可以基于即用的应用模板开发应用。这些模板包含了通用的应用功能和测试,并且这些功能和测试具备可扩展性,你可以在需要时,轻松添加定制功能。

揭秘 SAPUI5 架构

Previous

SAPUI5 是基于 JavaScript、CSS 和 HTML5 的客户端 UI 技术。

利用 SAPUI5 开发的应用可以在任何设备(手机、平板电脑或台式电脑)的浏览器中运行。

用户访问 SAPUI5 应用时,系统会向相应的服务器发送请求,请求在浏览器中加载该应用。请求页面将访问相关资源库。通常,系统还会对该模式进行实例化,并从数据库中获取业务数据。

根据 SAPUI5 的具体使用环境,你可以将资源库或你的应用存储在 SAP NetWeaver Application Server 或 SAP Cloud Platform 中,并通过 SAP Gateway 利用 OData 模型访问业务数据。

Next

概要矩阵

功能 详细信息
易访问性
SAPUI5 控件旨在持续遵循各种产品标准,如屏幕阅读器支持、 高对比度主题
设置和键盘处理。
应用缓存清理程序

应用缓存清理程序类似于缓存清理程序,但前者针对的是应用资源。

SAPUI5 仅支持面向 ABAP 的 SAP NetWeaver Application Server 上的应用缓存清理程序。

应用模板
应用模板中整合了 SAP 的最新建议,可以用于各种用途,例如,开发人员可以基于这些模板,根据 SAP Fiori 设计指南开发应用。这些模板包含了通用的应用功能和测试,并且这些功能和测试具备可扩展性,你可以在需要时,轻松添加定制功能。
缓存清理程序

基于缓存清理程序,只有在 SAPUI5 资源发生变化时,SAPUI5 才会通知浏览器刷新资源。若资源没有变化,系统会始终从浏览器的缓存中获取资源。

SAPUI5 支持面向 Java 和 ABAP 服务器以及 SAP Cloud Platform 的缓存清理概念。SAP HANA 扩展应用服务不支持缓存清理概念。

组件
组件是指 SAPUI5 应用中使用的可重复使用的独立部件。
控件

控件用于定义屏幕区域的外观和行为。

SAPUI5 中包含了 200 余种控件,既有基本的元素,又有复杂的 UI 模式。

绑定
类型

SAPUI5 支持三种不同的绑定类型:属性绑定、聚合绑定和元素绑定。
数据绑定

数据绑定用于将两种数据源或信息源绑定在一起,以保持同步:
一个数据源中的所有变化都会反映在另一个数据源中。

SAPUI5 支持与 OData、JSON、XML 以及其他数据格式绑定。

描述符
描述符源自 W3C 引入的 Web Application Manifest(Web 应用清单)概念,提供了一个集中的、机器可读且易于访问的地点,用于存储与应用、应用组件或资源库相关的元数据。
设备适应性
SAPUI5 支持多种功能,旨在适应不同的操作系统和设备。
可扩展性
你可以根据自己的特定需求,扩展 SAPUI5 应用。例如,你可以扩展或替换视图和控制器, 或者更改语言特定文本。

碎片
碎片是指轻量级 UI 部件(UI 子树),可重复使用,定义与视图类似,但无需
使用任何控制器或其他行为代码。SAPUI5 提供 XML、HTML 和 JS 碎片。
灵活性
SAPUI5 集中管理 UI 和服务器消息。
消息管理
SAP Web IDE 依靠 SAP Cloud Platform(云平台)架构进行身份认证,以及与不同系统或其他组件建立安全连接。SAP Web IDE 可以使用任何身份提供程序 (IdP),包括客户定义的 IdP,或者使用 SAP HANA 云连接器与企业预置型系统建立安全连接
模拟服务器
模拟服务器的作用是提供模拟服务和模拟数据。该服务器支持基于服务元数据随机生成的数据,以及 JSON 文件提供的模拟数据。

模型

SAPUI5 的模型中存有数据,并提供从数据库中检索数据以及设置和更新数据的方法。

SAPUI5 提供以下预定义的模型:OData、JSON、XML 和资源模型。你也可以为未包含在框架中的数据源或 域特定的数据源创建自定义模型实现。

 
模型视图
控制器
SAPUI5 中采用了模型视图控制器 (MVC) 概念,用于将信息表示与用户交互区分开来。   
模块化和依赖
管理
针对综合型 JavaScript 应用的模块化,SAPUI5 框架提供了内置支持。   
导航 SAPUI5 提供了基于哈希算法的导航,支持你构建单页式应用。在此类应用中, 导航通过更改哈希算法来实现。
 
性能评估 SAPUI5 中含有评估应用性能的工具。  
资源处理 SAPUI5 中的资源处理分为客户端和服务器端两部分。这两部分相互补充,又互不依赖。  
“从右向左”支持 SAPUI5 支持从右向左 (RTL) 的布局。启用该功能后,整体页面方向
设置为从右向左,且所有 SAPUI5 内容都以从右向左的模式呈现。自动写入的控件和内容必须单独进行测试。
 
路由模式
SAPUI5 提供以下几种模式:硬编码模式、路径含有必输参数模式、路径含有可选参数模式、路径含有查询参数模式,以及通配参数模式  
支持工具 SAPUI5 具有多种不同的支持工具,能够帮助你排除故障和解决可能发生的任何问题。   
模板

SAPUI5 支持 HTML 模板和 XML 模板。

SAPUI5 中的 HTML 模板概念支持你根据模型中的属性绑定文本。若模型
中的属性发生变化, 文本会相应更新。

XML 模板概念支持你将 XML 视图用作模板。在从 XML 数据源中创建 SAPUI5 控件树前,在运行时期间,XML 预处理程序会在源级别(即 XML 文档对象模型)转换该模型。

 
测试 SAPUI5 提供了多种测试选项,如单元测试和集成测试,以及模拟服务器。  
文本本地化 SAPUI5 中文本本地化的框架概念与 Java 平台的基本概念一致。
 
主题 SAPUI5 支持创建和使用不同的视觉设计,即主题。 这些主题可以交替使用,实时切换,因此,根据用户的设计偏好或易访问性需求,同一款应用可以拥有截然不同的外观。
 
UI 适应性 参见“灵活性”  
浏览量 SAPUI5 中的视图负责定义和呈现 UI。SAPUI5 支持下列预定义的视图类型:XML、JSON、JS 和 HTML  

立即试用

基于 SAP Cloud Platform 的 SAPUI5

注册免费的 SAP Cloud Platform(开发人员版),试用 SAP Web IDE,即我们推荐的 SAPUI5 开发环境。你可以借此构建你的首款 SAPUI5 应用,并在 SAP 全球云网络上测试这一平台。

完全免费,仅供开发人员使用。

来自内容交付网络的 SAPUI5

内容交付网络提供了一个分布式服务器网络,能够自动从最近的位置向用户提供 SAPUI5。因此,你只需参考以下内容,在你的应用中加载 SAPUI5:

  • 特定的 SAPUI5 版本,用于管理你自己的更新(例如:SAPUI5 1.40.9
  • 最新稳定”版本,该版本可能随时更新,恕不另行通知。

你可以查阅可用在线版本清单。  
如果你还不清楚如何操作,请查看简单的示例,了解如何使用内容交付网络。 

开源版本 OpenUI5

OpenUI5 是 SAPUI5 的开源版本。在 GitHub 平台上,该产品免费包含在 Apache 2.0 许可中。

下载最新、稳定的 OpenUI5 运行时 — OpenUI5 软件开发工具包,其中包含了所有文档,或者转到下载页面,查看更多选项。

欢迎你帮助我们完善 OpenUI5。
  • 发现漏洞,请及时报告!
  • 如果你有关于漏洞修复或新功能方面的建议,那更好不过!

阅读此文档,了解你可以通过哪些方式帮助我们完善 OpenUI5。

Previous
博客
提问环节

求助 SAPUI5 社区

你可以搜索答案,发帖提问,并共享知识。
Next
image
有问题或反馈?联系我们
Back to top