1、SAP UI5 - 快 速 指 南SAP UI5 - 概 述SAP 提供了各种工具，用户可以使用这些工具来增强其用户体验，以便为Web 业务应用程序创建丰富的用户界面。 最常见的支持工具包括 - 主题设计师 NWBC 和侧面板 FPM 屏幕 SAP UI5 开 发工具使用 SAP UI5 创建的基于 Web 的应用程序可提供更一致的用户体验，并可在平板电脑，智能手机和笔记本电脑等设备上访问。 通过使用带有 UI5 的NetWeaver 网关，您可以在用户界面和业务逻辑之间定义明确的分隔。SAP UI5 提供以下主要功能 - 在代码和应用程序级别的可扩展性概念。 能够为典型用例创建复杂的 UI
2、模式和预定义布局。 模型 - 视图 - 控制器（MVC）和数据绑定方法。 键盘交互支持和辅助功能。 SAP UI5 基于 JavaScript，CSS 和 HTML5 等开放标准。 基于 CSS 的主题支持。以下是在业务中使用 SAP UI 的优点： 它有助于提高生产力。 增加用户适应。 减少手动错误。 降低培训成本。 SAP 系统的高性能。 完美设计的 API，可以很容易地消 费。SAP UI5版 本以下是最近推出的 UI5 版本的列表。 每个 UI5 都提供了来自以前版本的新功能和增强功能，平台支持，可用性增强等。 SAP UI5 1.26 SAP UI5 1.28 SAP UI5 1.3
3、0 SAP UI5 1.32 SAP UI5 1.34 SAP UI5 1.36 SAP UI5 1.38 和更多像 SAP UI5 1.6版 本 方 案SAP UI5 使用 3 位版本号。 例如，SAPUI5 1.36.5。 这里，数字（1）指定主版本。 第二个数字（36）指定次要版本号。 第三个数字指定补丁版本号（5）。在每个 SAP UI5 中，主版本和次版本以及修补程序版本都可用于标识修补程序。SAP UI5 与 开 放 UI5SAP UI5 和 Open UI5，都提供了 UI 开发环境。 然而，它们在以下方面彼此不同 -SAP UI5 是 SAP 产品套件的一部分，不是单独的许可证
4、。 它与不同的 SAP产品集成 - SAP NW 7.4 或更高版本 SAP NetWeaver AS 7.3x SAP HANA 云和内部解决方案打开 UI5 是一个用于应用程序开发的开源技术，并与 Apache 2.0 一起发布。SAP UI5 不是单独的产品，可用于SAP 产 品套件打开 UI5 是用于应用程序开发的免费开源平台SAP UI5 与之集成 SAP HANA SAP HANA 云平台 SAP NetWeaver 更高版本打开 UI5 引入了 Apache 2.0 许可证OpenUI5 是开源，并可在GitHub 上UI5 浏 览 器 支 持SAP UI5 支持来自 Micro
5、soft，Google 和 Firefox 的所有主要浏览器和最新版本。 但是，支持的功能因浏览器版本和供应商而异。SAP UI5 - 架 构在 SAP UI5 架构中，您有三个层 - 顶部是表示层，UI5 组件由移动设备，平板电脑和笔记本电脑等设备消耗。 在中间层，是包括用于主题和控制的 SAP UI5 库的应用程序客户端。 UI5 控件库包括o Sap.vizo Smons（控件类似文本字段和按钮）o Sap.ui.table（表的输入控件）o Sap.ui.ux3o Sap.m（包括移动设备的输入控件） 底部是选项服务器组件。 这包括用于 ABAP / Java 的 SAP NetWea
6、ver 应用服务器，用于开发的 SAP 后端，HANA XS 引擎或数据库。SAP UI5 - 主 要 组 件SAP UI5 有多个组件，它们是 UI5 应用程序中独立的可重用对象。 这些组件可以由不同的人开发，并且可以在不同的项目中使用。应用程序可以使用来自不同位置的组件，因此您可以轻松获得应用程序的结构。您可以在 SAP UI5 开发下创建不同类型的组件。无 表 面 元 件无表面组件用于从后端系统获取数据，并且它们不包含用户界面。示例 - 它们是 ponent 类的一部分UI 组 件UI 组件用于添加渲染功能并在用户界面上表示屏幕区域或元素。示例 - UI 组件可以是具有执行某些任务的设置
7、的按钮。 它是类的一部分：sap.ui.core.UIComponent注 - ponent 是面向和 UI 组件的基类。 要定义可扩展性功能，组件可以从基类继承或从 UI 开发中的其他组件继承。组件的模块名称称为包名称，而.component 将包名称定义为传递给组件构造函数的参数的名称。SAP UI5 组件也可以根据系统环境划分 - 客户端组件：o 控制库 sap.m，mon 等o 核心 Javascripto 测试包括 HTML 和 Javascript 服务器端组件o 定理发生器o Eclipse 中的控制和应用程序开发工具o 资源处理程序组 件 的 结 构每个组件以文件夹的形式表示，
8、并包含组件的名称和管理组件所需的资源。每个组件应包含以下文件 - Component.json 文件，包含设计时的元数据，仅用于设计时工具。 Component.js 用于定义负责运行时元数据的属性，事件和组件方法。如 何 创 建 一 个 新 的 SAP UI5 组 件 ？要创建新组件，您必须创建新文件夹。 让我们将其命名为 button 。接下来是创建 component.js 文件然后，您必须扩展 UI 组件基类 sap.ui.core.UIComponent.extend，并输入组件的名称和包路径。后来，要定义一个新的组件，你必须从 require 语句开始如下 -/ defining
9、a new UI ComponentjQuery.sap.require(“sap.ui.core.UIComponent“);jQuery.sap.require(“mons.Button“);jQuery.sap.declare(“ponents.button.Component“);/ new Componentsap.ui.core.UIComponent.extend(“ponents.button.Component“, metadata : properties : text: “string“);ponents.button.Component.prototype.create
10、Content = function()this.oButton = new mons.Button(“btn“);return this.oButton;/* Overrides setText method of the component to set this text in the button*/ponents.button.Component.prototype.setText = function(sText) this.oButton.setText(sText);this.setProperty(“text“, sText);return this;The next ste
11、p is to define the component.json in your folder as follows “name“: “ponents.button“,“version“: “0.1.0“,“description“: “Sample button component“,“keywords“: “button“,“example“,“dependencies“: How to Use a ComponentTo use a component, you have to wrap the component in a component container. You canno
12、t directly use a UI component in a page using placeAt method. Another way is to pass the component to the componentContainer constructor.Using placeAt MethodIt includes adding the component to the container and using placeAt method to place the component on the page.var oComp = sap.ui.getCore().crea
13、teComponent(name: “ponents.shell“,id: “Comp1“,settings: appTitle: “Hello John“);var oCompCont = new sap.ui.core.ComponentContainer(“CompCont1“, component: oComp);oCompCont.placeAt(“target1“);/using placeAt methodUsing componentContainer ConstructorA component container carries specific settings and
14、also contains the lifecycle methods of a regular control. The following code segment shows how to pass the component to the componentContainer constructor.var oCompCont2 = new sap.ui.core.ComponentContainer(“CompCont2“, name: “ ponents.shell“,settings: text: “Hello John 1“);oCompCont2.placeAt(“targe
15、t2“);SAP UI5 - Control LibrariesThere are various JavaScript and CSS libraries that you can use in combination for the application development. SAPUI5 can use these libraries in combination and they are called SAPUI5 control libraries.Common SAPUI5 control libraries Smons for control fields, buttons
16、, etc. Sap.m is the most common control library and is used for mobile devices Sap.ui.table includes table control Sap.ui.ux3Note SAPUI5 control library sap.m is the most common library and is used for application development. These libraries can be combined with other control libraries.Control Libr
17、ary Combinations You can use the control library sap.m with other control libraries - sap.ui.unified, sap.viz, sap.ui.table, sap.ui.layout, and sap.suite. You can combine control libraries - mons, sap.ui.table, sap.ui.ux3 and sap.ui.suite with each other. You can also combine control library mons an
18、d sap.ui.ux3 with other libraries like sap.ui.core, sap.ui.unified, sap.ui.layout, and sap.ui.table. You can combine sap.viz with all other libraries.The following table shows the main SAPUI5 control libraries and their description sap.m Library with controls specialized for mobile devices.sap.makit SAPUI5 library contains the markit monsCommon library for standard controlssap.ui.ux3 SAPUI5 library with controls that implement the SAP User Experience(UX)
