练习效果
当把所有的UI及UI代码放入index.html文件会导致代码混乱，并且我们还有很多工作、代码要做。因此，我们将sap.m.Text控件放入专用视图中进行第一个模块化。SAPUI5支持多种视图类型（XML，HTML，JavaScript）。我们选择XML，因为这会产生更易读的代码，并将迫使我们将视图声明与控制器逻辑分开。但是，我们的UI外观不会改变，
源码
您可以在演练-步骤4中查看和下载所有文件。
webapp/view/App.view.xml（新）
|
1 2 3 4 |
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"> </mvc:View> |
我们在应用程序中创建一个新的视图文件夹，并在应用程序文件夹中为XML视图创建一个新文件。XML结构的根节点是view。在这里，我们引用默认的名称空间sap.m大多数UI资产所在的位置。我们定义一个额外的sap.ui.core.mvc 具有别名的名称空间 MVC，其中包含SAPUI5视图和所有其他模型视图控制器（MVC）
注意
命名空间标识项目的所有资源，并且必须是唯一性。如果开发自己的应用程序代码或控件，则不能使用名称空间前缀SAP，因为此名称空间是为SAP资源保留的。相反，只需定义自己的唯一名称空间（例如，myCompany.myApp).
webapp/view/App.view.xml
|
1 2 3 4 5 |
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"> <Text text="Hello World"/> </mvc:View> |
在视图里，我们添加了声明性定义 文本控件具有与上一步骤中相同的属性。XML中标记映射到控件，而属性也映射到控件的属性。
webapp/index.js
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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"); }); }); |
在这里我们替换了 sap.m.Text控件， 应用程式XML视图。该视图是由SAPUI5的标准程序功能创建的，该功能可确保正确配置该视图并可由我们自己扩展。名称以名称空间为前缀 sap.ui.demo.walkthrough.view ，具有唯一性。
注意
从此步骤开始，有必要在Web服务器上运行该应用程序。我们使用从本地文件系统加载的多个文件来构建应用程序。如果没有Web服务器，由于安全原因，浏览器将阻止此操作。如果浏览器的开发人员工具中显示错误消息“未定义”，则需要检查文件中的resource引导程序中的路径。
您可以在Development Environment中找到有关如何为您的特定环境安装Web服务器的更多信息。
约定
在SAPUI5开发中，我们约定以下规范：
- 视图名称大写
- 所有视图都存储在 view 夹
- XML视图的名称始终以 * .view.xml
- 默认的XML名称空间是 sap.m
- 其他XML名称空间使用SAP名称空间的最后一部分作为别名（例如，MVC 对于 sap.ui.core.mvc)