SAP学习笔记 - 开发15 - 前端Fiori开发 Boostrap，Controls，MVC(Model，View，Controller），Modules

上一章讲了Fiori开发的准备，以及宇宙至简之HelloWorld。

SAP学习笔记 - 开发14 - 前端Fiori开发 HelloWorld-CSDN博客

本章继续学习 Fiori 开发的知识：

Bootstrap，Controls，MVC(Model，View，Controller），Modules的概念。

1，Boostrap

1-1，先改/加几个文件

1-2，简单说一下几个属性

2，Control（控件）

1），index.html

2），index.js

3，XML View

1），App.view.xml

2），index.js

4，Controllers

1），App.view.xml

2），App.controller.js

5，Modules

1），App.controller.js

6，JSON Model

1），App.Controller.js

2），App.view.xml

下面是详细内容。

1，Boostrap

OpenUI5 SDK - Demo Kit

所谓的Bootstrap，就是加载，引导。

你要用OpenUI5，那你咋用呢？你得加载UI5的包(就是一个js文件），然后才能用里面的功能。

1-1，先改/加几个文件

1），index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>UI5 Walkthrough</title>
	<script
		id="sap-ui-bootstrap"
		src="resources/sap-ui-core.js"
		data-sap-ui-theme="sap_horizon"
		data-sap-ui-libs="sap.m"
		data-sap-ui-compat-version="edge"
		data-sap-ui-async="true"
		data-sap-ui-on-init="module:ui5/walkthrough/index"
		data-sap-ui-resource-roots='{
			"ui5.walkthrough": "./"
		}'>

	</script>
</head>
<body>
<div>Hello World</div>
</body>
</html>

把上一章学习用的VSCode打开，然后把 index.html 替换成上面的内容

2)，index.js

加完文件默认就给写了个框架，这个还比较好哈

先按官网写成下面这样看看效果

sap.ui.define([], () => {
	"use strict";
	alert("UI5 is ready");
});

然后用 ui5 serve 启动。跑出来是这样的

然后按下 F12 键，发现咋出错了呢？

官方文档有点儿挫哈，其实这里就是它先假定你已经把SAP UI5的js给下载到本地了，咱还没下呢

或者你可以这么理解，官网上面的代码，其相对路径是基于它自己网址的，比如下面是完整路径

https://openui5.hana.ondemand.com/resources/sap-ui-core.js

我们可以下载下来，然后放到本地，作为我们自己的相对路径，

或者你直接写上面那个完整路径也OK

我这里改成完整路径：https://openui5.hana.ondemand.com/resources/sap-ui-core.js

这样再跑一下，就能加载了

1-2，简单说一下几个属性

- src="resources/sap-ui-core.js"
这个上面已经说了，就是指向UI5 js文件的路径。现实项目一般都会指向本地js文件

- data-sap-ui-theme="sap_horizon"
这个就是css样式主题

- data-sap-ui-libs="sap.m"
这个就是使用的库，sap.m 是 SAP Fiori 应用的标准移动控件库，比如button，text...

- data-sap-ui-compat-version="edge"
这个表示使用的是最新稳定版本，可能不包含向后兼容的过时版本内容

- data-sap-ui-async="true"
这个表示适用异步

- data-sap-ui-on-init="module:ui5/walkthrough/index"
这个就相当于加个包名

- data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
这个东西有点儿意思，和上面那个配套，就是该包 ui5/walkthrough 实际指向的是当前文件的所属文件夹

上面用的是sap.m库，这里再说几个常用的库：

库名	用途
`sap.m`	移动端控件 (Fiori 标准)
`sap.f`	Flexible Column Layout 等布局
`sap.ui.table`	高级表格控件
`sap.tnt`	工具类控件 (SideNavigation 等)

上面写了那个data-sap-ui-libs 之后，运行的时候，浏览器会下载这么一大堆内容：

（实际项目当中，应该也会把这些拿过去放本地吧，这个我也不太确定）

2，Control（控件）

也是需要先改几个文件：

1），index.html

跟上面差不多，就是加个body 标签

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>UI5 Walkthrough</title>
	<script
		id="sap-ui-bootstrap"
		src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
		data-sap-ui-theme="sap_horizon"
		data-sap-ui-libs="sap.m"
		data-sap-ui-compat-version="edge"
		data-sap-ui-async="true"
		data-sap-ui-on-init="module:ui5/walkthrough/index"
		data-sap-ui-resource-roots='{
			"ui5.walkthrough": "./"
		}'>
	</script>
</head>
<body class="sapUiBody" id="content">
	Hello, this is body's contents.
</body>
</html>

2），index.js

这里用的是 sap/m 库下面的Text 控件

sap.ui.define([
	"sap/m/Text"
], (Text) => {
	"use strict";

	new Text({
		text: "This is sap/m/Text Control - Hello World"
	}).placeAt("content");
});

跑一下看看结果

下面这个是index.html 文件里面写的文本再加上sap/m/Text组件里面 placeAt 函数加到后面的。

- Hello, this is body's contents. This is sap/m/Text Control - Hello World

3，XML View

OpenUI5 SDK - Demo Kit

上面显示网页内容的时候，是在index.js 里面直接用 Control，比如 new Text 这种来实现。

那要是这么用的话，实际画面一般都很复杂，不太好画。

SAP提供了XML View这种方式来方便的渲染前端。

1），App.view.xml

新建App.view.xml之后，也是生成了默认的代码：

咱们也是修改一下先：

<mvc:View
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Text text="Hello World in mvc:View"/>
</mvc:View>

视图创建好以后该怎么加载呢？就用index.js来控制加载。

2），index.js

sap.ui.define([
	"sap/ui/core/mvc/XMLView"
], (XMLView) => {
	"use strict";

	XMLView.create({
		viewName: "ui5.walkthrough.view.App"
	}).then((oView) => oView.placeAt("content"));
});

说明一下这里的几行关键代码：

- "sap/ui/core/mvc/XMLView"

引入XMLView 模块

- viewName: "ui5.walkthrough.view.App"

这里就是指向 ui5.walkthrough （真实路径是在index.html 里面定义的）里面的view，

也就是 App.view.xml

- then((oView) => oView.placeAt("content"));

处理异步结果，使浏览器不会卡在这里，而是继续往下跑，等这里加载OK了再执行then里的代码

这样就加载了App.view.xml 视图了

这个视图的用途，就如其名，是为了写视图专用的

index.js 是该视图的控制器，用于控制加载哪个视图等等。

上面说了View（视图），以及控制使用哪个视图的index.js，那么视图里面的按钮等事件是怎么控制的呢？就需要Controllers（控制器）。

4，Controllers

OpenUI5 SDK - Demo Kit

1），App.view.xml

<mvc:View
   controllerName="ui5.walkthrough.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Button
      text="Say Hello"
      press=".onShowHello"/>
</mvc:View>

说一下几行关键代码：

- controllerName="ui5.walkthrough.controller.App"

关联该View所对应的控制器，这里指的是 controller文件夹下的App.controller.js文件

- xmlns:mvc="sap.ui.core.mvc">

xmlns 指向的是命名空间，应该就是包名

- press=".onShowHello"/>

press 指的是按下，Web HTML里面叫click，但是移动设备也没法click，press比较贴切

.onShowHello，「.」（点号）指的是本控制器，即与view同名（比如这里是App）的控制器

2），App.controller.js

默认也是生成了大框

先修改一下成下面这样

sap.ui.define([
   "sap/ui/core/mvc/Controller"
], (Controller) => {
   "use strict";

   return Controller.extend("ui5.walkthrough.controller.App", {
      onShowHello() {
         // show a native JavaScript alert
         alert("Hello World in mvc/Controller");
      }
   });
});

说明一下几行关键代码：

- "sap/ui/core/mvc/Controller"

这个跟 include 差不多，引入基类

- ], (Controller) => {

将引入的基类作为参数传入

- Controller.extend("ui5.walkthrough.controller.App", {

继承基类，在此基础上加功能，这里就是加 onShowHello函数

贴张图展示上面的View，Controller之间的关系：等以后Model再加上，mvc就全乎了

跑一下看看，就是画面上有个Say Hello 按钮，点了之后，就出来一个Message

5，Modules

OpenUI5 SDK - Demo Kit

注意这个还不是mvc中的m，这里就指的是模块儿，具体介绍一个MessageToast模块儿。

我合计SAP是不是搞模块搞上瘾了。

咱们来看一下这个模块是个啥东西。

1），App.controller.js

sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast"
], (Controller, MessageToast) => {
   "use strict";

   return Controller.extend("ui5.walkthrough.controller.App", {
      onShowHello() {
         MessageToast.show("Hello World from Controller");
      }
   });
});

来说明一下几行关键代码：

- "sap/m/MessageToast"

导入MessageToast工具（这个就叫模块儿），不导入它你就用不了它，用Include/Import导进来

- ], (Controller, MessageToast) => {

这个东西本身叫回调函数，参数就是传入或者叫注入Include的模块儿

这里想说明一下异步的问题：只有当这些模块都加载完之后，前端才会开始执行回调

- MessageToast.show("Hello World from Controller");

加载完Module（模块）之后，进入到回调函数里面，就可以用导入的模块啦

效果就弹出来这么一个toast message

之前用alert 弹出来的，框框丑丑的，这种toast message比较漂亮

不管它过一阵子它自己就会自动消失，你点一下它就马上消失

6，JSON Model

OpenUI5 SDK - Demo Kit

上面那个Module不是mvc中的m，那mvc中的m 是啥呢？这不就来了，就是这个JSON Model。

1），App.Controller.js

sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast",
   "sap/ui/model/json/JSONModel"
], (Controller, MessageToast, JSONModel) => {
   "use strict";

   return Controller.extend("ui5.walkthrough.controller.App", {
      onInit() {
         // set data model on view
         const oData = {
            recipient : {
               name : "World in oData"
            }
         };
         const oModel = new JSONModel(oData);
         this.getView().setModel(oModel);
      },

      onShowHello() {
         MessageToast.show("Hello World from button");
      }
   });
});

下面来看看几行代码的含义：

- "sap/ui/model/json/JSONModel"
- ], (Controller, MessageToast, JSONModel) => {

上面两句代码的意思是Include/Import JSONModel基类，然后将该类传入回调函数

- 下面这一段的意思是

- 定义一个名叫 recipient 的 oData变量（本质是Json字符串），正式项目里面，会从DB取值

- 然后把该变量给塞到JSONModel对象里面，赋值给oModel变量（常量）

- 用this.getView函数取得该Controller的同名View，即 App.view.xml

- 再用setModel 把 oModel变量赋值给该View

const oData = {
recipient : {
name : "World in oData"
}
};
const oModel = new JSONModel(oData);
this.getView().setModel(oModel);

2），App.view.xml

<mvc:View
   controllerName="ui5.walkthrough.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Button
      text="Say Hello"
      press=".onShowHello"/>
   <Input
      value="{/recipient/name}"
      description="Hello {/recipient/name} from View"
      valueLiveUpdate="true"
      width="60%"/>
</mvc:View>

看一下下面几句代码：

- <Input

value="{/recipient/name}" =》这句是属于简单取值，对应的是Controler里面的Jason的名值对

description="Hello {/recipient/name}" =》这句是属于复杂取值，和Hello字符串掺杂在一起

valueLiveUpdate="true" =》value的即时更新，和Jason无关，value值变了，Des也会跟着变

width="60%"/>