【IDEA-SAPUI5-Walkthrough学习】Step 4: XML Views

描述：为了规范视图和文件布局，需要将控件放入专用视图进行模块化（让视图声明和控制器逻辑分离且UI外观不改变）

相关学习资料：

SAP UI5 sap.ui.unified 命名空间的作用介绍 - 知乎 (zhihu.com)

• 命名空间
  • 在index.html中
    • data-sap-ui-resourceroots=' { "sap.ui.demo.db" : "./" }'
      //sap.ui.demo.db将指向 index.html 所在的文件夹（因为将属性设置为当前文件夹./）
  • 在js编程中
    • 定义一个控制器，并使用"myapp.controller.Home"作为它的命名空间。
    • 可以在应用的其他部分通过这个命名空间来引用或使用这个控制器。例如，在一个视图中通过controllerName属性定义来使用这个控制器

基础 | 三层架构与MVC模式 - 知乎 (zhihu.com)

• mvc模式
  • 概念：软件项目架构
  • 模式结构理解
    • 视图（View）
      • 数据的可视化
      • SAPUI5：在App.view.xml文件中创建视图
    • 控制器（Controller）
      • model↔控制器存取数据↔更新视图
    • 模型（Model）
      • 数据（逻辑：当数据变化时更新控制器）

基础 | 三层架构与MVC模式 - 知乎 (zhihu.com)

• XML概念
  • 可拓展标记语言
    • 标记：用一系列标签对数据进行描述
    • 拓展：用户可自定义标签
  • 元素（标签、节点）的属性
    • 基 本格式：<元素名 属性名=“属性值” 属性名=“属性值”>
  • 标签的前缀
    • 相当于一个url地址或者本地文件夹位置

如何理解 SAP UI5 的 sap.ui.define 函数-CSDN博客

• sap.ui.define(sModuleName?, aDependencies?, vFactory, bExport?)
  •  

    sModuleName 是一个可选参数，它是正在定义的模块的名称。 

  • aDependencies 是作为依赖项的模块名称的字符串数组。

    这个数组包含了在确定当前定义的模块的值之前需要加载的依赖模块。

  • vFactory 是一个强制性的工厂函数，用于计算模块的值。

    每个依赖模块名称都作为参数传递给这个工厂函数，其顺序与它们在字符串数组中指定的顺序相同。

  • bExport 是一个布尔变量，保留供 SAP 使用。

异步JavaScript编程：深入了解Promise的.then()方法 - 知乎 (zhihu.com)

•  then()方法是异步执行，当.then()前的方法执行完后再执行then()内部的程序，这样就避免了，数据没获取到等的问题
• 异步JavaScript编程：深入了解Promise的.then()方法 - 知乎 (zhihu.com).then(onCompleted, onRejected)
  •  

  • promise必需。Promise 对象。

  • onCompleted必需。承诺成功完成时要运行的履行处理程序函数。

  • onRejected可选。承诺被拒绝时要运行的错误处理程序函数

创建webapp/view/App.view.xml

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

<mvc:View
//mvc（前缀，作用为防止命名冲突）:View（元素名/标签名/节点名）
   xmlns="sap.m"
//引用默认的名称空间（包含大部分UI资产）
   xmlns:mvc="sap.ui.core.mvc">
//定义前缀mvc的附加名称空间（包含SAPUI5和其他所有MVC资产）

//注意结构，<mvc:View>  名称空间为标签属性而非内容
   <Text text="Hello World"/>
//视图标记格式：<元素名 属性名=“属性值” 属性名=“属性值”/>
</mvc:View>

更改webapp/index.js

//调用sapui的方法来定义控件
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.define([
    "sap/ui/core/mvc/XMLView"

//加载依赖模块XMLView
], (XMLView) => {

//将依赖模块名传递给工厂函数
    "use strict";

    XMLView.create({
        viewName: "ui5.walkthrough.view.App"

//调用模块内置函数创建视图，通过viewName属性定义该视图的命名空间（物理位置）
    }).then((oView) => oView.placeAt("content"));

//创建视图后返回参数oView，执行then内函数，将oView置于html的节点中
});