SAPUI5是一个JavaScript库，可以从应用程序所在的同一Web服务器或不同的服务器加载。如果SAPUI5部署在服务器上的其他位置，或者您想使用其他服务器，则需要在引导程序中调整相应的路径（此处：src =” / resources / sap-ui-core.js”），请根据您自己的要求。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SAPUI5 Walkthrough</title>
<script
id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true"
data-sap-ui-resourceroots='{
"sap.ui.demo.walkthrough": "./"
}'
data-sap-ui-oninit="module:sap/ui/demo/walkthrough/index">
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
SAPUI5是一个JavaScript库，可以从应用程序所在的同一Web服务器或不同的服务器加载。如果SAPUI5部署在服务器上的其他位置，或者您想使用其他服务器，则需要在引导程序中调整相应的路径（此处：src =” / resources / sap-ui-core.js”），请根据您自己的要求。
在此步骤中，我们从本地Web服务器加载SAPUI5框架，并
使用以下配置选项初始化核心模块：
src 的属性 <脚本>标记告诉浏览器在哪里可以找到SAPUI5核心库–它将初始化SAPUI5运行时并加载其他资源，例如 在data-sap-ui-libs 属性。 SAPUI5控件支持不同的主题，我们选择 sap_belize 作为我们的默认主题。
我们指定所需的UI库 汁液 包含本教程需要的UI控件。为了利用SAPUI5的最新功能，我们将兼容性版本定义为边缘。 我们将“引导”过程配置为异步运行。这意味着 出于性能原因，可以在后台同时加载SAPUI5资源。
我们告诉SAPUI5核心，sap.ui.demo.walkthrough 命名空间与 index.html。例如，对于在SAP Fiori启动板中运行的应用程序来说，这是必需的。
view/APP.VIEW.xml
```sql
<mvc:View
controllerName="sap.ui.demo.walkthrough.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Button
text="Say Hello"
press=".onShowHello"/>
</mvc:View>
我们在应用程序中创建一个新的视图文件夹，并在应用程序文件夹中为XML视图创建一个新文件。XML结构的根节点是view。在这里，我们引用默认的名称空间sap.m大多数UI资产所在的位置。我们定义一个额外的sap.ui.core.mvc 具有别名的名称空间 MVC，其中包含SAPUI5视图和所有其他模型视图控制器（MVC）
命名空间标识项目的所有资源，并且必须是唯一性。如果开发自己的应用程序代码或控件，则不能使用名称空间前缀SAP，因为此名称空间是为SAP资源保留的。相反，只需定义自己的唯一名称空间（例如，myCompany.myApp).
我们添加了对控制器controller的引用，并将文本控件替换为带有文本“ Say Hello”的按钮。该按钮在按下时触发 .onShowHello事件，并调用相对应的处理功能代码。我们还必须指定连接到视图并保存视图的控制器的名称sap.ui.demo.walkthrough.controller.App。.onShowHello 通过设置功能 controllerName 视图的属性。
controller/app.controller.js
```sql
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast"
], function (Controller, MessageToast) {
"use strict";
return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
onShowHello : function () {
MessageToast.show("Hello World");
}
});
});
现在，我们创建一个新的index.js脚本，其中将包含本教程步骤的应用程序逻辑。我们这样做是为了避免
出于安全原因直接在HTML文件中包含可执行代码。该脚本将由
index.html 调用。我们以声明的方式将其定义为模块。
我们将控件的构造函数调用链接到标准方法 placeAt用于将SAPUI5控件放置在文档对象模型（DOM）或任何
其他SAPUI5控件实例的节点内。我们将DOM节点的ID作为
参数传递。作为目标节点，我们使用HTML文档的body标签并为其指定ID内容。
仅实例 sap.ui.core.Control 或它们的子类可以独立呈现并具有 placeAt功能。每个控件扩展sap.ui.core.Element只能在控件内部呈现。查看API参考以了解有关控件继承层次结构的更多信息。每个控件的API文档均引用直接已知的子类。
我们通过完全限定的路径扩展了所需模块的数组 sap.m.MessageToast。一旦两个模块 Controller 和 MessageToast加载后，将调用回调函数，我们可以通过访问传递给函数的参数来使用这两个对象。这种异步模块定义（AMD）语法可以清楚地将模块加载与代码执行分开，从而大大提高了应用程序的性能。浏览器可以在代码执行之前决定何时以及如何加载资源。
index.js
sap.ui.define([
"sap/ui/core/mvc/XMLView"
], function (XMLView) {
"use strict";
XMLView.create({
viewName: "sap.ui.demo.walkthrough.view.App"
}).then(function (oView) {
oView.placeAt("content");
});
});
在这里我们替换了 sap.m.Text控件， 应用程式XML视图。该视图是由SAPUI5的标准程序功能创建的，该功能可确保正确配置该视图并可由我们自己扩展。名称以名称空间为前缀 sap.ui.demo.walkthrough.view ，具有唯一性。
Ui5.yaml
specVersion: '0.1'
metadata:
name: WalkthroughTutorial
type: application
package.json
{
"name": "WalkthroughTutorial",
"private": true,
"version": "1.0.0",
"author": "SAP SE",
"description": "UI5 Demo App - Walkthrough Tutorial",
"dependencies": {
"@openui5/sap.m": "^1",
"@openui5/sap.ui.core": "^1",
"@openui5/themelib_sap_fiori_3": "^1"
}
}
在SAPUI5开发中，我们约定以下规范：
视图名称大写
所有视图都存储在 view 夹
XML视图的名称始终以 * .view.xml
默认的XML名称空间是 sap.m
其他XML名称空间使用SAP名称空间的最后一部分作为别名（例如，MVC 对于 sap.ui.core.mvc)
控制器名称大写
控制器的名称与相关视图的名称相同（在1：1对应关系）
事件处理程序带有前缀on,比如前面的：onShowHello
控制器名称始终以 * .controller.js形式。
采用 sap.ui.define用于控制器和所有其他JavaScript模块定义全局名称空间。使用命名空间，可以在整个应用程序中对对象进行寻址。
采用 sap.ui.require 用于异步加载依赖关系，但不声明名称空间，例如仅需要执行但无需从其他代码调用的代码。
Use the name of the artifact to load for naming the function parameters (without namespace).。
195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
