SAP UI5学习笔记

富鲁特信息

已于 2022-12-06 18:32:24 修改

阅读量794

点赞数

CC 4.0 BY-SA版权

文章标签：学习 ui

于 2022-11-26 23:15:20 首次发布

本文链接：https://blog.csdn.net/weixin_39289390/article/details/128058896

学习地址：SAP UI5 应用开发教程的学习目录 - 循序渐进，由浅入深，适合不同水平的 SAP UI5 开发人员_汪子熙的博客-CSDN博客_sapui5

1、Hello World

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SAPUI5 Walkthrough</title>
</head>
<body>
	<div>Hello World</div>
</body>
</html>

<!DOCTYPE> H5都必须以此开头；

2、SAP UI5框架的引导过程

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>SAPUI5 Walkthrough</title>
    <！-- 引入UI5资源 -->
    <script
        id="sap-ui-bootstrap"
        src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-async="true"
        data-sap-ui-resourceroots='{
            "sap.ui5.walkthrough": "./"
        }'
        data-sap-ui-oninit="module:sap/ui5/walkthrough/index">
    </script>
</head>
<body>
<div>Hello World</div>
</body>
</html>

静态页面与js分离，页面打开后加载index.js

sap.ui.define([
], function () {
    "use strict";
    alert("UI5 库文件已经加载就绪");
});

1. UI5引导文件，可以在线引入，也可以本地方式：https://sapui5.hana.ondemand.com/resources/sap-ui-core.js

2. 异步加载：data-sap-ui-async="true"

3. data-sap-ui-resourceroots定义命名空间，并告诉SAP UI5框架，该命名空间下的资源路径

3、SAP UI5控件

id为content的div作为一个容器，作为后续控件的位置；命名必须与使用一致。

sap.ui.define方法接收两个参数，第一个参数是数组，存放需要加载的SAP UI5库，第二个参数是回调函数，当加载库文件之后，会自动调用这个回调函数。并将加载之后的库文件实现，作为输入参数，传递给回调函数。

use strict的作用是指定代码在严格模式下运行。

new Text是一个函数，通过sap.ui.define加载sap.m. Text控件对应的库之后生成的。

placeAt("context") 调用place方法确定显示位置。

4、XML视图

1. 创建视图实例XMLView.create，create方法确定视图名称和路径，返回promise对象，创建完毕后then方法里的回调方法会被执行。

跨域问题：我们本地运行的html其源为null，当试图请求来自源为file的App.view.xml时，就会遇到跨域问题报错。

解决办法：在Web服务器上运行。

新建package.json，manifest.json, ui5.yaml文件，内容如下：

指定命令行：ui5 server

指定依赖：@ui5/cli

5、控制器

view里指定controller，在app.controller.js里实现

controller.extend继承SAP UI5标准实现。

6、SAP UI5模块

sap.ui.define动态异步加载SAP UI5标准模块，待加载完毕后，SAP UI5框架调用指定的回调函数。

7、JSON Model的使用

1. 给视图绑定控制器App.controller.js

2. 给Input空间绑定值｛/recipient/name｝

3. valueLiveUpdate设置为true ，双向绑定

1. 导入JSON模型JSONModel

2. 新建JavaScript对象oData

3. 新建JSON模型，将oData作为参数传入构建函数

4. 用setModel将JSON模型与XML视图绑定

8、多语言支持

1. 在控制器引入新的依赖ResourceModel，这是i18n.properies内容加载后的运行时模型

2. 在function的输入参数里加上ResourceModel，使用该构建函数，新建一个Resource Model，将文件路径给到bundlename

3. 把建好的Model绑定到视图，同时重命名

9、SAP UI5组件

如果需要把UI5应用配置到Fiori Launchpad上，需要创建一个Component.js文件，该文件会在点击磁贴后被Fiori Launchpad加载

1. 导入UIComponent，基于标准Component创建自定义组件

2. 扩展UIComponent，指定项目中Component.js的路径，并且说明执行什么逻辑，渲染什么内容

2.1 确定根视图，view文件夹下的App视图

1. 调用标准的init方法

index.js改用ComponentContainer，即Component的容器

10、应用的描述符文件 manifest.json

1. sap.app

1.1 i18n字段指定多语言配置文件位置

1.2 title和description是标题和描述，{{appTitle}}指向语言配置文件的键值对

2. sap.ui

2.1 deviceTypes字段表明应用对桌面，平板，和手机端的支持

3. sapui5

3.1 rootView维护根视图信息

3.2 dependencies维护依赖，有了这个配置，可以删除index.html里的data-sap-ui-libs定义的依赖了

3.3 models定义了支持多语言的完整路径

维护了manifest后可以简化Component.js

index.html也有调整

11、容器类控件 Page 和 Panel

12、CSS美化UI5

13、自定义 CSS 类

配置到manifest.json

应用css

14、应用嵌入 XML 视图

控制器调整

15、应用对话框(Dialog)和视图片段(Fragments)

16、图标使用

17、聚合绑定在 SAP UI5 复合控件中的使用

在manifest.json中sap.ui5/models下配置invoice，有了上述配置，应用的Component在运行时会自动加载invoice.json，并创建JSONModel模型实例，这个实例会命名为invoice，并在整个应用程序中使用。

嵌入视图

使用List标签，声明一个列表

items="{invoice>/Invoices}"

这是聚合绑定的语法

聚合绑定使用符合>/ 来分割模型名称和字段名称，而行项目内部的属性绑定，分隔符为单个符号>

24、使用 OData 数据模型

在manifest.json添加dataSources

uri指定oData模型的元数据地址。元数据就是描述模型有哪些节点和节点段组成一种数据结构，支持XML和JSON格式

除了定义oData数据源，还需要声明oData模型，在model区域定义invoice模型，将invoiceRemote分配给invoice模型。

运行出现跨域问题，解决跨域问题有多种方式，如果已经部署到BTP，已经通过配置Destination的方式解决，如果只是在local测试，最简单的临时解决方法，就是禁用浏览器的安全策略检查。