《sap-ui5---快速指南》由会员分享，可在线阅读，更多相关《sap-ui5---快速指南（58页珍藏版）》请在金锄头文库上搜索。
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.26SAP UI5 1.28SAP UI5 1.30SAP UI5 1.32SAP UI5 1
3、.34SAP UI5 1.36SAP 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 产品套件的一部分，不是单独的许可证。 它与不同的 SAP 产品集成 -SAP NW 7.4 或
4、更高版本SAP NetWeaver AS 7.3xSAP HANA 云和内部解决方案打开 UI5 是一个用于应用程序开发的开源技术，并与 Apache 2.0 一起发布。SAP UI5 不是单独的产品，可用于 SAP 产品套件打开 UI5 是用于应用程序开发 的免费开源平台SAP UI5 与之集成SAP HANASAP HANA 云平台SAP NetWeaver 更高版本打开 UI5 引入了 Apache 2.0 许可证OpenUI5 是开源，并可在 GitHub 上UI5浏览器支持SAP UI5 支持来自 Microsoft，Google 和 Firefox 的所有主要浏览器和最新 版本。
5、但是，支持的功能因浏览器版本和供应商而异。SAP UI5 - 架构在 SAP UI5 架构中，您有三个层 -顶部是表示层，UI5 组件由移动设备，平板电脑和笔记本电脑等设备消耗。在中间层，是包括用于主题和控制的 SAP UI5 库的应用程序客户端。 UI5 控件库包括oSap.vizoSmons（控件类似文本字段和按钮）oSap.ui.table（表的输入控件）oSap.ui.ux3oSap.m（包括移动设备的输入控件）底部是选项服务器组件。 这包括用于 ABAP / Java 的 SAP NetWeaver 应用服务器，用于开发的 SAP 后端，HANA XS 引擎或数据库。SAP UI5
6、- 主要组件SAP UI5 有多个组件，它们是 UI5 应用程序中独立的可重用对象。 这些组件 可以由不同的人开发，并且可以在不同的项目中使用。应用程序可以使用来自不同位置的组件，因此您可以轻松获得应用程序的结构。您可以在 SAP UI5 开发下创建不同类型的组件。无表面元件无表面组件用于从后端系统获取数据，并且它们不包含用户界面。示例示例 - 它们是 ponent 类的一部分UI组件UI 组件用于添加渲染功能并在用户界面上表示屏幕区域或元素。示例示例 - UI 组件可以是具有执行某些任务的设置的按钮。 它是类的一部分：sap.ui.core.UIComponent注注 - ponent 是面
7、向和 UI 组件的基类。 要定义可扩展性功 能，组件可以从基类继承或从 UI 开发中的其他组件继承。组件的模块名称称为包名称，而.component 将包名称定义为传递给组件构 造函数的参数的名称。SAP UI5 组件也可以根据系统环境划分 -客户端组件：o控制库 sap.m，mon 等o核心 Javascripto测试包括 HTML 和 Javascript服务器端组件o定理发生器oEclipse 中的控制和应用程序开发工具o资源处理程序组件的结构每个组件以文件夹的形式表示，并包含组件的名称和管理组件所需的资源。每个组件应包含以下文件 -Component.json 文件，包含设计时的元数据
8、，仅用于设计时工具。Component.js 用于定义负责运行时元数据的属性，事件和组件方法。如何创建一个新的SAP UI5组件？要创建新组件，您必须创建新文件夹。 让我们将其命名为 button 。接下来是创建 component.js 文件文件然后，您必须扩展 UI 组件基类 sap.ui.core.UIComponent.extend，并输 入组件的名称和包路径。后来，要定义一个新的组件，你必须从 require 语句开始如下 -/ defining a new UI ComponentjQuery.sap.require(“sap.ui.core.UIComponent“);jQuer
9、y.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.createContent = function()this.oButton = new mons.Button(“btn“);return this
10、.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 step is to define the component.json in your folder as follows “name“: “
11、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 cannot directly use a UI component in a page using placeAt method. Another
12、 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().createComponent(name: “ponents.shell“,id: “Comp1“,settings: appTitle: “He
13、llo 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 also contains the lifecycle methods of a regular control. The followi
14、ng 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(“target2“);SAP UI5 - Control LibrariesThere are various JavaScript and CSS
15、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, etc.Sap.m is the most common control library and is used for mobile devicesSap.ui.table includes table controlSap.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 Library CombinationsYou can us
