SAP学习笔记 - 开发15 - 前端Fiori开发 Boostrap，Controls，MVC(Model，View，Controller），Modules_sap fiori button
上一章讲了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
UI5 Walkthrough Hello World把上一章学习用的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.msap.fsap.ui.tablesap.tnt上面写了那个data-sap-ui-libs 之后，运行的时候，浏览器会下载这么一大堆内容：
（实际项目当中，应该也会把这些拿过去放本地吧，这个我也不太确定）
2，Control（控件）
也是需要先改几个文件：
1），index.html
跟上面差不多，就是加个body 标签
UI5 Walkthrough Hello, this is body\'s contents.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之后，也是生成了默认的代码：
咱们也是修改一下先：
视图创建好以后该怎么加载呢？就用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
说一下几行关键代码：
- 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
看一下下面几句代码：
- <Input
value=\"{/recipient/name}\" =》这句是属于简单取值，对应的是Controler里面的Jason的名值对
description=\"Hello {/recipient/name}\" =》这句是属于复杂取值，和Hello字符串 掺杂在一起
valueLiveUpdate=\"true\" =》value的即时更新，和Jason无关，value值变了，Des也会跟着变
width=\"60%\"/>
跑一下看看
value值变为 Fiori World，Description 值会自动变为 Hello + Fiori World
画张图展示一下包括上面mvc 的整体Image：
以上就是本篇的全部内容。
更多SAP顾问业务知识请点击下面目录链接或东京老树根的博客主页
https://blog.csdn.net/shi_ly/category_12216766.html
东京老树根-CSDN博客
