SAPUI5学习第三天-----（03）XML View和Controller当然是一起的咯_小言_互联网的博客

SAPUI5学习第三天-----（03）XML View和Controller当然是一起的咯

2021-06-04 13:13 364人阅读评论(0)

先上XML View

将我们所有的UI放入index.html文件很快就会导致混乱的设置。因此，让我们通过将sap.m.Text控件放入专用视图来实现第一个模块化。

SAPUI5支持多种视图类型(XML、HTML、JavaScript)。我们选择XML，因为这会产生最易读的代码，并迫使我们将视图声明与控制器逻辑分离。

webapp/view/App.view.xml

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

我们在app中创建一个新的视图文件夹，并在app文件夹中为XML视图创建一个新文件。
这里，我们引用了默认名称空间sap.m，我们的大多数UI资源都位于这里。
我们定义了一个附加的带有别名mvc的sap.ui.core.mvc命名空间，SAPUI5视图和所有其他Model-View-Controller (MVC)资源都位于其中。

命名空间标识项目的所有资源，并且必须是唯一的。如果您开发自己的应用程序代码或控件，则不能使用名称空间前缀sap，因为这个命名空间是为sap资源预留的。相反，只需定义您自己的唯一命名空间(例如，myCompany.myApp)。

在view标签内部，我们添加了文本控件的声明性定义，其属性与上一步中相同。XML标签被映射到控件，属性被映射到控件的属性。

webapp/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");
	});

});

我们用新的App XML view代替了sap.m.Text控件的实例化。view是由SAPUI5的工厂功能创建的，它确保view被正确配置，并且可以被客户扩展。该名称以命名空间sap.ui.demo.walkthrough.view作为前缀，以便唯一地标识该资源。

约定：
视图名称大写
所有视图都存储在视图文件夹中
XML视图的名称总是以*.view.xml结尾
默认的XML命名空间是sap.m
其他XML命名空间使用SAP名称空间的最后一部分作为别名(例如，SAP .ui.core.mvc的mvc)

webapp/index.html同上一步

ui5.yaml

115,112,101,99,86,101,114,115,105,111,110,58,32,39,48,46,49,39,10,109,101,116,97,100,97,116,97,58,10,32,32,110,97,109,101,58,32,87,97,108,107,116,104,114,111,117,103,104,84,117,116,111,114,105,97,108,10,116,121,112,101,58,32,97,112,112,108,105,99,97,116,105,111,110,10

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"
  }
}

Controller它来了！

在这一步中，我们将文本替换为一个按钮，并在按钮被按下时显示“Hello World”消息。按钮按下事件的处理是在视图的控制器中实现的。

webapp/view/App.view.xml

<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>

我们添加了对控制器的引用，并将文本控件替换为一个带有文本“Say Hello”的按钮。按钮被按下时触发. onshowhello事件处理函数。我们还必须指定连接到视图的控制器的名称，并通过设置视图的controllerName属性来保存. onshowhello函数。

视图并不一定需要显式分配的控制器。如果视图只是显示信息，而不需要其他功能，则不必创建控制器。如果指定了控制器，它将在视图加载后实例化。

webapp/controller/App.controller.js

sap.ui.define([
   "sap/ui/core/mvc/Controller"
], function (Controller) {
   
   "use strict";
   return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
   
      onShowHello : function () {
   
         // show a native JavaScript alert
         alert("Hello World");
      }
   });
});

我们创建了webapp/controller文件夹，并在其中创建了一个新文件App.controller.js。现在，我们将忽略管理所需模块的代码。我们将在下一步解释这部分。

“use strict”;文字表达式是由ECMAScript 5引入的。它告诉浏览器以所谓的“strict mode”执行代码。严格模式有助于在开发阶段的早期状态检测潜在的编码问题，这意味着，例如，它确保在使用变量之前声明变量。因此，它有助于防止常见的JavaScript陷阱，因此使用严格模式是一个很好的做法。

通过继承SAPUI5核心的controller对象，我们在它自己的文件中定义了应用程序控制器。一开始，它只保存一个名为onShowHello的函数，该函数通过显示警报来处理按钮的按下事件。