SAPUI5教程：XML视图的使用-CSDN博客

本文档介绍了在SAPUI5中如何使用XML视图进行UI模块化，以提高代码可读性和分离视图声明与控制器逻辑。通过创建一个XML视图文件并替换直接的HTML元素，展示了XML视图的优势，同时提到了命名空间的使用和视图创建的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明

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

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

预览

在这里插入图片描述

"Hello World"文本现在由SAPUI5控件显示(与上一步没有视觉上的变化)

代码

你可以在演练-第4步查看和下载所有文件。

webapp/view/App.view.xml (New)

<mvc:View
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
</mvc:View>

我们在app中创建一个新的view文件夹，并在app文件夹中为XML视图创建一个新文件。XML结构的根节点是view。这里，我们引用了默认名称空间sap.m，我们的大多数UI都位于这里。我们定义了一个附加的带有别名mvc的sap.ui.core.mvc名称空间，SAPUI5 视图和所有其他模型-视图-控制器(mvc)都位于其中。

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

webapp/view/App.view.xml

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

在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视图替换了sap.m.Text控件的实例化。视图是由SAPUI5的工厂功能创建的，它确保视图被正确配置，并且可以被客户扩展。该名称以名称空间sap.ui.demo.walkthrough.view作为前缀，以便唯一地标识该资源。

注意
从这一步开始，有必要在Web服务器上运行应用程序。我们用多个从本地文件系统加载的文件来构造应用程序。如果没有Web服务器，出于安全原因，浏览器将阻止这种情况。如果浏览器的开发人员工具中出现错误消息“sap is not defined”，您需要检查引导程序中的资源路径。

你可以使用发布在非SAP站点上的UI5 工具来启动本地开发服务器，而不是安装一个Web服务器。有关更多信息，请参见开发环境。