UI5-文档-4.4-XML Views

developer 2022年03月09日 SAP 192 0

将所有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