将所有UI放到index.html文件将很快导致一个混乱的设置，有相当多的工作在我们前面。我们先用sap.m.Text进行模块化。控件导入专用视图。
SAPUI5支持多种视图类型(XML、HTML、JavaScript)。我们选择XML，因为它生成最易读的代码，并将迫使我们将视图声明与控制器逻辑分离。但是UI的外观不会改变。
Preview
The "Hello World" text is now displayed by a SAPUI5 control (No visual changes to last step)
Coding
你可以在此查看和下载所有文件Walkthrough - Step 4.
webapp/view/App.view.xml (New)
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"> </mvc:View>
请注意：命名空间标识项目的所有资源，并且必须是惟一的。如果开发自己的应用程序代码或控件，则不能使用名称空间前缀sap，因为该名称空间是为sap资源保留的。相反，只需定义您自己的惟一名称空间(例如，myCompany.myApp)。我们在应用程序中创建一个新的视图view文件夹，并在应用程序文件夹中为XML视图创建一个新文件.XML结构的根节点是view。这里，我们引用缺省名称空间sa .m，大部分UI资产都位于该名称空间。我们定义了一个附加的sa .ui.core。别名mvc的mvc命名空间，SAPUI5视图和所有其他模型-视图-控制器(mvc)资产都位于此。
webapp/view/App.view.xml
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"> <Text text="Hello World"/> </mvc:View>
在SAPUI5中，每个控件都有自己的ID。在上面的XML视图中，我们没有指定ID属性，因此SAPUI5运行时生成一个自己的ID并将其添加到控件中。但是，显式地设置控件的id是一种很好的实践，这样可以方便地标识控件。在view标记中，我们添加了文本控件的声明性定义，其属性与前一步相同。XML标记映射到控件，属性映射到控件的属性。
webapp/index.html
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <title>Walkthrough</title> <script id="sap-ui-bootstrap" src="/resources/sap-ui-core.js" data-sap-ui-theme="sap_belize" data-sap-ui-libs="sap.m" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async" data-sap-ui-resourceroots='{ "sap.ui.demo.walkthrough": "./" }' > </script> <script> sap.ui.getCore().attachInit(function () { sap.ui.xmlview({ viewName : "sap.ui.demo.walkthrough.view.App" }).placeAt("content"); }); </script> </head> <body class="sapUiBody" id="content"> </body> </html>
我们替换sap.m的实例化。文本控件，由我们的新应用程序XML视图。视图是由SAPUI5的工厂函数创建的，该函数确保视图被正确配置，并且可以被客户扩展。名称以名称空间sap.ui. walk .view作为前缀，以便惟一标识该资源。我们告诉SAPUI5 core, sap.ui.demo.walk - through名称空间中的资源位于与index.html相同的文件夹中。例如，对于在SAP Fiori launchpad中运行的应用程序来说，这是必要的。
请注意：从这一步开始，有必要在Web服务器上运行应用程序。我们使用从本地文件系统加载的多个文件来构造应用程序。如果没有Web服务器，浏览器会出于安全原因阻止这一操作。如果错误消息“sap未定义”出现在浏览器的开发工具中，则需要检查引导程序中的资源路径。
有关如何为特定环境安装Web服务器的更多信息，请参见Development Environment.
约定：
• 视图名称大写
• 所有视图都存储在view文件夹中
• XML视图的名称总是以*.view.xml结尾
• 默认的XML名称空间是sap.m
• 其他XML名称空间使用SAP名称空间的最后一部分作为别名(例如，SAP.ui.core.mvc的mvc)
Parent topic: Walkthrough
Previous: Step 3: Controls
Next: Step 5: Controllers
Related Information