SAP UI5 快速指南

---

---

SAP UI5 - 概述

SAP 提供各种工具，用户可以使用这些工具来增强用户体验，为 Web 业务应用程序创建具有丰富用户界面的应用程序。最常见的启用工具包括：

• 主题设计器
• NWBC 和侧边栏
• FPM 屏幕
• SAP UI5 开发工具

使用 SAP UI5 创建的基于 Web 的应用程序提供了更一致的用户体验，并且可以在平板电脑、智能手机和笔记本电脑等设备上访问。使用 NetWeaver 网关和 UI5，您可以定义用户界面和业务逻辑之间的清晰分离。

SAP UI5 提供以下关键特性：

• 代码和应用程序级别的可扩展性概念。
• 能够为典型用例创建复杂的 UI 模式和预定义布局。
• 模型-视图-控制器 (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.30
• SAP UI5 1.32
• SAP UI5 1.34
• SAP UI5 1.36
• SAP UI5 1.38 以及更多版本，例如 SAP UI5 1.6

版本方案

SAP UI5 使用三位数的版本号。例如，SAPUI5 1.36.5。这里，数字 (1) 指定主版本。第二位数字 (36) 指定次版本号。第三位数字指定补丁版本号 (5)。

在每个 SAP UI5 版本中，主版本和次版本以及补丁版本都可以用来识别补丁。

SAP UI5 与 Open UI5 的比较

SAP UI5 和 Open UI5 都提供 UI 开发环境。但是，它们在以下方面有所不同：

SAP UI5 是 SAP 产品套件的一部分，不是单独的许可证。它与不同的 SAP 产品集成，例如：

• SAP NW 7.4 或更高版本
• SAP NetWeaver AS 7.3x
• SAP HANA 云和本地解决方案

Open UI5 是一种用于应用程序开发的开源技术，它以 Apache 2.0 许可证发布。

UI5 浏览器支持

SAP UI5 支持来自 Microsoft、Google 和 Firefox 的所有主要浏览器及其最新版本。但是，支持的功能会因浏览器版本和厂商而异。

SAP UI5 - 架构

在 SAP UI5 架构中，您有三层：

• 最顶层是表示层，UI5 组件由移动设备、平板电脑和笔记本电脑等设备使用。

• 中间层是应用程序客户端，包括用于主题和控件的 SAP UI5 库。UI5 控件库包括

  • Sap.viz

  • Sap.ui.commons（文本字段和按钮等控件）

  • Sap.ui.table（表格的输入控件）

  • Sap.ui.ux3

  • Sap.m（包括移动设备的输入控件）

• 底层是可选的服务器组件。这包括用于 ABAP/Java 的 SAP NetWeaver 应用服务器、SAP 后端、用于开发或数据库的 HANA XS 引擎。

SAP UI5 - 关键组件

SAP UI5 具有多个组件，它们是 UI5 应用程序中独立且可重用的对象。这些组件可以由不同的人开发，并可用于不同的项目。

一个应用程序可以使用来自不同位置的组件，因此您可以轻松获得应用程序的结构。您可以在 SAP UI5 开发下创建不同类型的组件。

无界面组件

无界面组件用于从后端系统获取数据，并且不包含用户界面。

示例 - 它们是 sap.ui.core.component 类的一部分

UI 组件

UI 组件用于添加渲染功能，并在用户界面上表示屏幕区域或元素。

示例 - UI 组件可以是一个带有设置以执行某些任务的按钮。它是类的一部分：sap.ui.core.UIComponent

注意 - sap.ui.core.component 是无界面组件和 UI 组件的基类。为了定义可扩展性功能，组件可以继承自基类或 UI 开发中的其他组件。

组件的模块名称称为包名称，以及.component，其中包名称定义为传递给组件构造函数的参数的名称。

SAP UI5 组件也可以根据系统环境进行划分：

• 客户端组件：这包括：
  • 控件库 sap.m、sap.ui.common 等。
  • 核心 Javascript
  • 测试包括 HTML 和 Javascript
• 服务器端组件
  • 主题生成器
  • Eclipse 中的控件和应用程序开发工具
  • 资源处理器

组件的结构

每个组件都以文件夹的形式表示，并包含组件的名称以及管理组件所需的资源。

每个组件都应包含以下文件：

• Component.json 文件包含设计时元数据，仅用于设计时工具。

• Component.js 用于定义属性、事件和组件方法，这些方法负责运行时元数据。

如何创建一个新的 SAP UI5 组件？

要创建一个新组件，您必须创建一个新文件夹。让我们将其命名为button。

接下来是创建component.js 文件

然后，您必须扩展 UI 组件基类 sap.ui.core.UIComponent.extend 并输入组件的名称和包路径。

稍后，要定义一个新组件，您必须从require语句开始，如下所示：

// defining a new UI Component
jQuery.sap.require("sap.ui.core.UIComponent");
jQuery.sap.require("sap.ui.commons.Button");
jQuery.sap.declare("samples.components.button.Component");

// new Component
sap.ui.core.UIComponent.extend("samples.components.button.Component", {
   metadata : {
      properties : {
         text: "string"
      }
   }
});

samples.components.button.Component.prototype.createContent = function(){
   this.oButton = new sap.ui.commons.Button("btn");
   return this.oButton;
};

/*
* Overrides setText method of the component to set this text in the button
*/
samples.components.button.Component.prototype.setText = function(sText) {
   this.oButton.setText(sText);
   this.setProperty("text", sText);
   return this;
};

下一步是在您的文件夹中定义 component.json，如下所示：

{
   "name": "samples.components.button",
   "version": "0.1.0",
   "description": "Sample button component",
   "keywords": [
      "button",
      "example"
   ],
   "dependencies": {
   }
}

如何使用组件

要使用组件，您必须将组件包装在组件容器中。您不能直接使用 placeAt 方法在页面中使用 UI 组件。另一种方法是将组件传递给 componentContainer 构造函数。

使用 placeAt 方法

这包括将组件添加到容器中并使用placeAt方法将组件放置在页面上。

var oComp = sap.ui.getCore().createComponent({
   name: "samples.components.shell",
   id: "Comp1",
   settings: {appTitle: "Hello John"}
});

var oCompCont = new sap.ui.core.ComponentContainer("CompCont1", {
   component: oComp
});

oCompCont.placeAt("target1");
//using placeAt method

使用 componentContainer 构造函数

组件容器包含特定设置，还包含常规控件的生命周期方法。以下代码段显示了如何将组件传递给 componentContainer 构造函数。

var oCompCont2 = new sap.ui.core.ComponentContainer("CompCont2", {
   name: " samples.components.shell",
   settings: {text: "Hello John 1"}
});
oCompCont2.placeAt("target2");

SAP UI5 - 控件库

您可以结合使用各种 JavaScript 和 CSS 库来进行应用程序开发。SAPUI5 可以结合使用这些库，它们被称为 SAPUI5 控件库。

常见的 SAPUI5 控件库：

• Sap.ui.commons 用于控件字段、按钮等。
• Sap.m 是最常见的控件库，用于移动设备
• Sap.ui.table 包含表格控件
• Sap.ui.ux3

注意 - SAPUI5 控件库 sap.m 是最常见的库，用于应用程序开发。这些库可以与其他控件库结合使用。

控件库组合

• 您可以将控件库 sap.m 与其他控件库一起使用 - sap.ui.unified、sap.viz、sap.ui.table、sap.ui.layout 和 sap.suite。

• 您可以将控件库 - sap.ui.commons、sap.ui.table、sap.ui.ux3 和 sap.ui.suite 彼此结合使用。

• 您还可以将控件库 sap.ui.commons 和 sap.ui.ux3 与其他库结合使用，如 sap.ui.core、sap.ui.unified、sap.ui.layout 和 sap.ui.table。

• 您可以将 sap.viz 与所有其他库结合使用。

下表显示了主要的 SAPUI5 控件库及其说明：

SAP UI5 - 开发工具包

用于 HTML5 的 SAP UI5 开发工具包为您提供了一个用于开发基于 Web 的应用程序的环境，它为应用程序提供一致的用户体验。使用 SAP UI5 开发的 Web 应用程序在浏览器和设备之间具有响应能力，并且可以在智能手机、平板电脑和台式机上运行。

UI 控件会自动适应每个设备的功能。

您可以在以下平台上使用 SAP UI5：

• SAP HANA
• SAP HANA Cloud Platform
• 适用于 SAP NetWeaver 7.4 或更高版本的 SAP NetWeaver
• 适用于 SAP NetWeaver 应用服务器 7.3x 的 SAP NetWeaver 用户界面附加组件

您可以将应用程序部署到服务器上，其中包括存储库和从数据库获取数据。您可以使用 NetWeaver 应用服务器或 HANA Cloud 平台进行应用程序部署，并且可以使用 OData 模型通过 Gateway 访问业务应用程序的数据。请查看以下插图。

当用户从其移动设备/笔记本电脑发送客户端请求时，会向服务器发送请求以在浏览器中加载应用程序，并通过数据库访问数据，并访问相关库。

要构建 UI5 应用程序，您可以下载 Eclipse 的 SAP UI5 开发者工具。下载后，您可以解压缩文件并将其部署到 Web 服务器上。对于 ABAP，您可以安装适用于 SAP NetWeaver 的 UI 附加组件，这也包括 UI5 主题设计器。

SAP UI5 的前提条件

要安装和更新用于 HTML5 的 UI5 开发工具包，您应该满足以下前提条件：

现在让我们继续讨论如何在您的系统中安装 SAP UI5 开发工具包。

步骤 1 - 要安装 JDK，请访问 Oracle.com 并搜索所需的 JDK 版本。

步骤 2 - 下载并运行安装程序。您将收到如下截图所示的消息。

步骤 3 - 要安装 Eclipse，请访问 www.Eclipse.org/downloads

步骤 4 - 解压文件，如下面的截图所示。

步骤 5 - 要运行安装程序，请转到解压后的文件夹并运行应用程序文件，如下面的截图所示。

步骤 6 - 要安装 SAPUI5 工具，请转到 Eclipse → Help → Install New software。

您可以直接使用 URL 安装，也可以输入 UI5 演示工具包的路径。

步骤 7 - 接下来，在安装对话框中输入 URL https://tools.hana.ondemand.com/mars

步骤 8 - 查看可用的功能。按 ENTER 键。您可以选择功能并单击 Next。它将显示要安装的功能列表 → 单击 Next。

步骤 9 - 接受许可协议并单击 Finish 开始安装。

步骤 10 - 从以下链接下载 UI 开发工具包 for HTML 5：

http://scn.sap.com/community/developer-center/front-end 并将内容解压到同一个文件夹中。

步骤 11 - 启动 Eclipse 环境。转到 Help → Install New Software。

步骤 12 - 单击 Add → Local。

步骤 13 - 接下来，导航到本地更新站点位置，并选择工具更新站点文件夹，并将您解压 HTML5 开发工具包的文件夹作为更新源。

步骤 14 - 选择所有要安装的插件和功能。

步骤 15 - 在安装过程中选择“Contact all update sites”对话框以查找所需的软件。

步骤 16 - 单击 Finish 按钮完成设置。重新启动 Eclipse。

步骤 17 - 您可以通过 Eclipse 菜单 File → New → Other 底部创建一个新的 SAPUI5 应用程序项目来验证安装。选择 SAP UI5 Application Development 文件夹并展开以创建新项目。

步骤 18 - 输入项目名称，选择库，您可以选中复选框以创建初始视图。

步骤 19 - 使用项目中的一些示例代码创建一个视图。输入视图的名称并单击 Next 按钮。

步骤 20 - 选择开发范例并单击 Finish。您将在新窗口中看到一个新的 SAPUI5 开发项目，如下面的截图所示。

现在，要展示您的应用程序或在生产环境中运行它，您可以将您的 SAPUI5 应用程序部署到 tomcat 服务器上。如果您没有像 MAVEN 这样的工具，您可以使用导出选项手动导出项目。右键单击 Project → Export。

步骤 21 - 输入要放置 war 文件的目标路径。

接下来，将 war 文件复制到您的 apache tomcat 的 webapps 目录。您可以通过访问此路径来访问您的应用程序 - https://:8080/<your_app>/

注意 - 在正常情况下，许多 SAP 项目都在 Internet Explorer 中运行，但对于 SAPUI5 开发，建议使用带有 firebug 插件的 Google Chrome 或 Firefox，因为这两个系统都允许使用工具和插件来调试 JavaScript，以及使用 HTML 和 CSS。

SAP UI5 - MVC 概念

SAP UI5 开发中使用模型-视图-控制器 (MVC) 概念来使应用程序数据与用户交互分开。这允许您独立开发 Web 应用程序并对应用程序进行更改。

模型-视图-控制器在 UI 开发中扮演不同的角色：

• 模型负责管理数据库/后端中的应用程序数据。

• 视图负责向用户定义用户界面。当用户从其设备发送请求时，视图负责根据提交的请求显示数据。

• 控制器用于根据用户交互控制数据和视图事件，通过更新视图和模型。

您可以使用以下功能在 SAPUI5 中定义模型-视图-控制器概念：

模型

• 模型充当视图和应用程序数据之间的桥梁。
• 模型用于获取来自视图的请求并根据用户的输入进行响应。
• 模型不依赖于类。

视图

• 视图负责管理向用户显示的信息。
• 视图基于模型。

控制器

• 控制器负责接收设备提供的输入，并与模型/视图通信以触发正确的操作。

• 控制器基于模型。

SAP UI5 以单个文件的形式提供视图和控制器：

• sap.ui.core.mvc.XMLView
• sap.ui.core.mvc.JSView
• sap.ui.core.mvc.Controller
• sap.ui.core.mvc.JSONView

JSON 模型

• JSON 模型是客户端模型，用于小型数据集。
• JSON 模型支持双向绑定。数据绑定概念在本教程的后半部分提到。
• JSON 模型可用于将控件绑定到 JavaScript 对象数据。

XML 模型

• XML 模型可用于将控件绑定到 XML 数据。
• XML 也是客户端模型，因此仅用于小型数据集。
• XML 模型不提供任何用于基于服务器的分页或增量加载的机制。
• XML 模型也支持双向数据绑定。

SAP UI5 - 视图

视图使用 SAP 库定义如下：

• 带有 HTML 的 XML，混合或独立：库 - sap.ui.core.mvc.XMLView
• JavaScript：库 - sap.ui.core.mvc.JSView
• JSON：库 - sap.ui.core.mvc.JSONView
• HTML：库 - sap.ui.core.mvc.HTMLView

JavaScript 视图示例

Sap.ui.jsview(“sap.hcm.address”, {
   getControllerName: function() {
      return “sap.hcm.address”;
   },
   createContent: function(oController) {
      var oButton = new sap.ui.commons.Button({ text: “Hello” });
      oButton.attachPress(function() {
         oController.Hello();
      })
      Return oButton;
   }
});

HTML 视图示例

<template data-controller-name = ”sap.hcm.address’>
   <h1>title</h1>
   <div> Embedded html </div>
   <div class = ”test” data-sap-ui-type = ”sap.ui.commons.Button”
      Id = ”Button1” data-text =  ”Hello” Data-press = ”sayHello”>
   </div>
</template>

类似地，您可以创建从 sap.ui.core.mvc.JsonView 派生的 JSON 视图。

{
   “type”:”sap.ui.core.mvc.JsonView”,
   “controllerName”:”sap.hcm.address”,
   ……………………….
   …………………...
   …………………….
}

视图类型的比较

下表列出了与 MVC 概念相关的关键功能以及不同视图类型关于这些功能的比较。

SAP UI5 - 开发者工作室

SAPUI5 Developer Studio 提供简化 UI5 开发过程的工具。以下是其功能：

• 控件开发向导
• 项目创建向导
• 视图/控制器创建向导

您可以使用链接 https://support.sap.com/software.html. 从 SAP Marketplace 下载它。搜索 UI Add-on 1.0 for NetWeaver。

转到软件下载并输入您的 ID 和密码。然后，转到支持包和补丁。搜索 sapui5 tools ide plugin 1.00。

SCN 还提供 SAPUI5 框架的试用版。您可以访问此链接 http://scn.sap.com/community/developer-center/front-end

SAP UI5 - 创建 UI5 项目

步骤 1 - 要在 UI5 developer Studio 中创建一个新项目，请转到 File → New → Project。

步骤 2 - 输入项目名称、目标设备和“创建初始视图”。

步骤 3 - 在下一个窗口中输入视图名称和视图类型，然后单击 Next。

步骤 4 - 在最后一个窗口中，您将看到项目摘要。它向您显示项目属性。单击 Finish 按钮创建项目。

步骤 5 - 系统将提示您切换到 Java EE 透视图。单击 Yes，它将打开一个新的 UI5 项目窗口，其中包含一个初始视图 - JSView。

步骤 6 - 现在要向此视图添加 Shell，您可以使用库 sap.ui.ux3.Shell()。

步骤 7 - 由于 Shell 不是 sap.ui.commons 的一部分，因此您需要添加 sap.ui.ux3 库。您可以向 data-sap-ui-libs 添加其他库。

要运行应用程序，您有两个选项：

• 在服务器上运行
• 在 webapp 上运行

推荐在服务器上运行，因为它具有固定的端口，并且不像在 webapp 上运行那样使用一次性随机端口。

SAP UI5 ─ 配置

如下表所示，您可以在 SAP UI5 中定义各种配置属性：

核心功能

SAP UI5 中的核心功能如下：

• Sap.ui.getCore() - 用于获取核心实例。

• Sap.ui.getCore().byid(id) - 用于获取使用 id 创建的 UI5 控件的实例。

• Sap.ui.getCore().applyChanges() - 用于立即执行并呈现 UI5 控件的更改。

• jQuery.sap.domById(id) - 用于获取任何具有 id 的 HTML 元素。如果存在具有 id 的 UI5 控件，则返回的元素是 UI5 控件的最顶层 HTML 元素。

• jQuery.sap.byId(id) - 用于返回具有指定 Id 的 DOM 元素的 jQuery 对象。

SAP UI5 - 控件

在开发 UI5 应用程序时，您可以使用不同类型的 UI 控件。这些控件允许您在 UI5 应用程序中添加按钮、表格、图像、布局、组合框和各种其他控件。

常见的控件类型包括：

• 简单控件
• 复杂控件
• UX3 控件
• 对话框
• 布局

图像控件

Var image = new sap.ui.commons.Image();
Image.setSrc(“Image1.gif”);
Image.setAlt(“alternat.text”);

组合框

您可以使用组合框提供预定义的条目。

属性 - 项目、selectedKey

Var oComboBox2 = new sap.ui.commons.ComboBox (“ComboBox”,{
   Items:{path:”/data”,
      Template:oItemTemplate, filters:[oFilter]},
   Change: function(oEvent){
      Sap.ui.getCore(). byId(“field”).setValue(
         oEvent.oSource.getSelectedKey());
   }
});

简单按钮控件

使用 attachPresss 为推送操作分配事件处理程序。

Var oButton = new sap.ui.commons.Button ({text : “Click”,
   Press: oController.update
});

自动完成控件

自动完成输入的值。

Var uiElement = new sap.ui.commons.AutoComplete({
   Tooltip: ”Enter the product”,
   maxPopupItems: 4
});
For (var i = 0; i<aData.lenght; i++){
   uiElement.addItem(new sap.ui.core.ListItem(
      {text: aData[i].name}));
}

表格控件框

它派生自 sap.ui.table，每个表都包含列。

Var oTable = new sap.ui.table.Table({
   Columns: [
      New sap.ui.table.Column({
         Label: new sap.ui.commons.lable({ text: “First Column”}),
         Template: new sap.ui.commons.TextView({ text: “{Firstcolumn}” }),
         Width: “120px”
      })

SAP UI5 - 数据绑定

在 SAP UI5 中，数据绑定概念用于通过将数据与保存应用程序数据的控件绑定来自动更新数据。使用数据绑定，您可以将文本字段、简单按钮等简单控件绑定到应用程序数据，并在有新值时自动更新数据。

使用双向数据绑定，当绑定控件的值发生变化时，应用程序数据也会更新。值可以通过不同的方法更改，例如用户输入等。

在 SAP UI5 中，可以使用不同的数据模型进行数据绑定。这些数据模型支持不同的功能：

JSON 模型

JSON 模型用于将 JavaScript 对象绑定到控件。此数据模型是客户端模型，建议用于小型数据集。它不提供任何服务器端分页或加载机制。

主要功能包括：

• 用于数据绑定的 JSON 模型支持 JavaScript 表示法格式的数据。
• 它支持双向数据绑定。

创建模型实例：

Var oModel = new sap.ui.model.json.JSONModel(dataUrlorData);

XML 模型

XML 数据绑定的 XML 模型允许您将控件绑定到 XML 数据。它用于客户端对象和小数据集。它不提供任何服务器端分页或加载机制。

主要功能包括：

• XML 数据绑定的 XML 模型支持 XML 数据。
• 它也支持双向数据绑定。

创建模型实例：

Var oModel = new sap.ui.model.xml.XMLModel(dataUrlorData);

OData 模型

OData 模型是服务器端模型，因此所有数据都存在于服务器端。客户端只能看到行和字段，您无法在客户端使用排序和筛选。需要向服务器发送此请求才能完成这些任务。

OData 模型中的数据绑定是单向的，但您可以使用实验性写入支持启用双向绑定。

主要功能包括：

• OData 数据绑定的 OData 模型支持符合 OData 规范的数据。
• 此数据模型允许您创建 OData 请求并处理响应。
• 它支持实验性双向绑定。

创建模型实例：

Var oModel = new sap.ui.model.odata.ODataModel (dataUrl [,useJSON, user, pass]);

分配模型

您可以使用 setModel 方法将模型分配给特定的控件或核心。

Sap.ui.getcore().setModel(oModel);

将模型绑定到视图：

Var myView = sap.ui.view({type:sap.ui.core.mvc.ViewType.JS, viewname:”view name”});
myView.setModel(oModel);

将模型绑定到控件：

Var oTable = sap.ui.getCore().byId(“table”);
oTable.setModel(oModel);

您可以将控件的属性绑定到模型属性。您可以使用 bindproperty 方法将模型的属性绑定到控件。

oControl.bindProperty(“controlProperty”, “modelProperty”);
or by using below methodvar
oControl = new sap.ui.commons.TextView({
   controlProperty: “{modelProperty}”
});

聚合绑定

您可以使用聚合绑定来绑定值集合，例如将多行绑定到表。要使用聚合，您必须使用充当模板的控件。

您可以使用 bindAgregation 方法定义聚合绑定。

oComboBox.bindaggregation( “items”, “/modelaggregation”, oItemTemplate);

SAP UI5 - 设计模式

设计模式是 SAP UI5 开发中一个新的术语，当我们谈论 SAP 开发或 SAP Fiori 系统时。SAP 正在努力寻找新的设计模式，以支持使用 UI5 SDK 在 SAP 系统中进行开发。

SAP 发布了不同类型的设计模式：

主-详情

这是应用程序绑定的第一步，并由 SAP UI5 的 SplitApp 控件支持。此设计模式支持内容列表，并允许引导选择和详细视图。

主-主-详情

此设计模式在详情部分显示事务的详情。

示例：您正在网上订购，并且希望看到一个确认页面，该页面显示您正在购买的内容并显示交易的详细信息以及详细视图。

全屏

此设计模式主要推荐用于显示图表、图片数据和各种类型的图形。

多流程

当您使用复杂的应用程序流程并且需要使用所有设计模式来构建工作应用程序时，推荐使用此设计模式。

SAP UI5 - 模块化

在用于大型 JavaScript 应用程序的 SAPUI5 开发中，UI5 框架提供了对模块化的内置支持。模块化概念允许您将应用程序拆分为较小的部分，并且可以在运行时将它们组合在一起。这些较小的应用程序部分称为模块。

您可以通过调用 query jQuery.sap.declare 函数来声明您自己的 JavaScript 模块，这用于跟踪模块名称和已加载的模块。

要加载模块，您必须使用 jQuery.sap.require

示例

<script>
   jQuery.sap.require(“sap.ui.commons.MessageBox”);
   ………………………
</script>

当需要模块 jQuery.sap.require 且该模块未加载时，它会自动加载。它调用 declare 方法，因此当调用 require 时，它知道该模块已加载。

SAP UI5 - 本地化

SAP UI5 基于 Java 平台支持本地化概念。

识别语言代码：为了识别语言，框架使用字符串类型的语言代码。

资源包：资源包文件是 Java 属性文件，包含键/值对，其中值是依赖于语言的文本，键与语言无关，应用程序使用它来识别和访问相应的​​值。

资源包是*.properties文件的集合。所有文件都使用相同的基名称（标识资源包的前缀）、可选后缀（标识每个文件中包含的语言）和固定的 .properties扩展名命名。

语言后缀是根据旧的 JDK 区域设置语法形成的。按照约定，应该存在一个没有语言后缀的文件，其中包含开发人员语言中的原始未翻译文本。如果找不到更合适的语言，则使用此文件。

资源包 sap.ui.commons.message_bundle 包含以下文件：

• sap.ui.commons.message_bundle.properties：此文件包含来自开发人员的原始文本，它确定键集。

• sap.ui.commons.message_bundle_en.properties：此文件包含英文文本。

• sap.ui.commons.message_bundle_en_US.properties：此文件包含美式英语文本。

• sap.ui.commons.message_bundle_en_UK.properties：此文件包含英式英语文本。

在应用程序中使用本地化文本

SAPUI5 提供了两种在应用程序中使用本地化文本的选项：jQuery.sap.resources 模块和数据绑定。

以下代码用于获取给定语言的资源包：

jQuery.sap.require(“jquery.sap.resources”);
var oBundle = jQuery.sap.resources({url ; sUrl, locale:sLocale});

以下代码用于访问资源包中的文本：

Var sText = oBundle.getText(sKey);

以下代码用于获取资源的 URL：

Var sUrl = sap.ui.resource(“sap.ui.table”,”messagebundle.properties”);

SAP UI5 - 记事本控件

控件用于定义外观和屏幕区域。它包含诸如宽度和文本之类的属性。这些属性用于修改外观或更改控件显示的数据。您可以创建聚合控件或关联控件。

控件的关联控件定义为松散相关的控件，它们不是子控件或主控件的一部分。控件用于触发定义明确的事件。

SAPUI5 中的控件可以直接使用工具或 JavaScript 文件创建。使用 extend() 方法创建的控件也称为记事本控件。

以下代码用于使用 Extend 方法定义控件：

Sap.ui.core.control.extend (sname, oDefinition);

传递给此控件的参数：

• 控件的名称
• 控件的定义

控件的定义包含有关控件 API、聚合、事件等的 信息以及实现方法。

您还可以创建自定义控件。自定义控件的定义可以包含公共和私有方法、元数据和渲染方法等。

metadata:{
   properties: {},
   events: {},
   aggregations: {}
},

publicMethod: function() {},
_privateMethod: function() {},
init: function() {}
onclick: function(e) {},
renderer: function(rm, oControl) {}

创建一个从 Button 继承的新控件：

Sap.ui.commons.Button.extend (sname, oDefinition);

控件定义中的元数据由控件属性、事件和聚合的对象组成。

属性

• 类型：控件属性的数据类型
• 字符串：字符串属性的字符串
• 数字属性的整数或浮点数
• 整数数组的 Int[]
• 字符串数组的 String[]

事件

事件仅由事件名称定义。您通常将空对象传递给事件。应用程序使用 enablePreventDefault 标志来中断事件。

Events: {
   Logout:{},
   Close: {
      enablePreventDefault : true
   }
}

SAP UI5 - 扩展应用程序

您可以扩展远程或在 Web IDE 中的 UI5 应用程序。要创建新的扩展项目，您应该远程或在 IDE 中拥有一个应用程序。

步骤 1：要创建新项目，请转到文件→扩展项目。

步骤 2：选择工作区以选择要用作原始应用程序的所需 SAP Fiori 应用程序。

步骤 3：选择应用程序后，扩展项目名称字段将填充原始应用程序的名称以及后缀扩展名。您可以更改此名称→下一步

步骤 4：如有必要，选中在可扩展性窗格中打开扩展项目复选框，以便在项目生成后自动打开可扩展性窗格。

步骤 5：单击完成。

同样，您还可以扩展驻留在 SAP HANA Cloud 平台上的应用程序。请按照以下步骤操作。

步骤 1：要创建新项目，请转到文件→扩展项目。

步骤 2：选择开始→远程→SAP HANA Cloud Platform→从 SAP HANA Cloud Platform 对话框中选择应用程序。

步骤 3：在下一个窗口中，您必须输入 SAP HANA Cloud Platform 帐户、用户名和密码。

步骤 4：选择获取应用程序并搜索您要扩展的应用程序。

步骤 5：选择所需的应用程序→确定。扩展项目名称字段将自动填充到向导中。如有必要，您可以编辑此名称。

步骤 6：单击下一步。选择完成以确认并创建您的扩展项目。

SAP UI5 - 主题

UI 主题设计器是一个基于浏览器的工具，允许您通过修改 SAP 提供的主题模板之一来开发主题。

示例：您可以更改配色方案或添加您公司的徽标。该工具在您设计时提供主题的实时预览。

将您的企业品牌和外观应用于使用 SAP UI 技术构建的应用程序。UI 主题设计器是一个基于浏览器的工具，用于跨主题场景。使用它可以轻松地通过修改 SAP 提供的主题模板之一来构建您的企业标识主题。例如，您可以更改配色方案或添加您公司的徽标。该工具面向不同的用户群体，包括开发人员、视觉设计师和管理员。

支持的平台

• SAP NetWeaver 作为 ABAP（通过 UI Add-On 1.0 SP4）
• SAP NetWeaver Portal（7.30 SP10 和更高版本）
• SAP HANA Cloud（计划中）
• SAP NetWeaver Portal（7.02 计划中）

主要功能和优势

• 基于浏览器的图形化所见即所得编辑器：更改主题参数的值，并立即查看它如何影响所选预览页面的可视化。

• 内置预览页面：选择内置预览页面以查看自定义主题应用于应用程序时的外观：

  • 应用程序预览（示例：采购订单审批、SAP Fiori Launchpad）

  • 控件预览

• 不同级别的主题：

  • 快速主题（基本的跨技术主题设置）

  • 专家主题（特定于技术的主题设置）

  • 手动 LESS 或 CSS 编辑

• 可重复使用的调色板：指定一组参数，其中包含定义企业品牌的主要颜色值。

• 跨技术主题：创建一个一致的主题，该主题适用于各种 SAP UI 客户端和技术：

  • SAPUI5 标准库（包括 SAP Fiori 应用程序和 SAP Fiori Launchpad）

  • 统一渲染技术（例如 Web Dynpro ABAP 和 Floorplan Manager）

  • SAP NetWeaver业务客户端

如何在SAP Fiori中调用主题设计器？

步骤1 − 登录到SAP Fiori前端服务器。您可以使用事务代码：主题设计器或使用如下截图所示的快捷方式登录。

步骤2 − 登录后，您将拥有SAP为主题设计器提供的全部默认模板。选择默认主题并点击“打开”。

步骤3 − 输入Fiori Launchpad链接和应用程序名称，然后点击“添加”。

步骤4 − 在屏幕面板的右侧，您可以选择颜色、字体、图像和其他属性。您可以编辑颜色，如下面的截图所示。

步骤5 − 要保存主题，您可以点击如下截图所示的保存图标。您还可以选择“保存并构建”选项。

点击“保存并构建”后，它将开始保存，完成后，您将收到一条确认消息 - “保存并构建完成”。

步骤6 − 要获取此自定义主题的链接，请使用如下截图所示的事务代码 −

步骤7 − 选择您创建的主题，然后点击“信息”选项卡。

步骤8 − 使用Ctrl+Y复制屏幕上的URL并记下它。

支持的主题

这些是UI5附带的默认主题 −

• 蓝色水晶
• 金色反射
• 移动视觉标识
• 高对比度黑色

图表类型

sap.viz.ui5图表库中有多种图表类型可用于表示业务数据。以下是几种CVOM图表类型：柱状图、气泡图、折线图、饼图等。

SAP UI5 - 移动端

SAP UI5应用程序可在iPad和智能手机等不同的移动设备上运行。但是，为了获得更好的用户体验，您需要控制外观、触摸交互以及各种其他UI参数。

UI5包含一个支持移动设备应用程序开发并支持所有关键概念（如数据绑定、MVC等）的控件库sap.m。

主要功能

• 支持Android、iOS、BlackBerry平台
• 包含40个控件
• WebKit浏览器 - Google Chrome
• UI5概念 - MVC、本地化、模块化等

SAP UI5 - 在Web IDE中创建项目

本章将学习如何在Web IDE中创建项目。让我们一步一步来。

步骤1 − 要启动新项目，请转到“文件”→“新建”→“项目”。

步骤2 − 输入项目的名称。在下一个窗口中，选择模板。

步骤3 − 选择模板SAPUI5移动应用程序→下一步

步骤4 − 下一步是选择数据连接。选择服务URL→选择

步骤5 − 下一步，您需要执行模板自定义。

步骤6 − 点击“下一步”后，您将看到“完成”按钮。

点击“完成”后，您可以看到创建的新项目，该项目具有UI应用程序的默认结构。它包含视图、模型和项目名称。