SAPUI5 Walkthrough Step 4: XML Views

https://sapui5.hana.ondemand.com/#/topic/1409791afe4747319a3b23a1e2fc7064

如果将所有的控件都放到 index.html 中， 我们的界面将非常混乱而且不便于维护。因此我们需要将其进行模块化，并放到专门的视图中。

SAPUI5支持多种类型的视图（XML, HTML, JavaScript）， 我们在这里选择使用XML类型，这样可以将视图设计和逻辑控制进行分离(即MVC架构）

 

新增xml文件： webapp/view/App.view.xml 里面代码如下

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

使用sap.ui.core.mvc中的View控件，创建视图。里面放置一个Text控件，用于显示Hello World

 

修改webapp/index.js文件， 修改后内容如下

sap.ui.define([
    "sap/ui/core/mvc/XMLView"
], function (XMLView) {
    "use strict";

    XMLView.create({
        viewName: "zdemo_step1.view.App"
    }).then(function (oView) {
        oView.placeAt("content");
    });
});

使用sap.ui.core.mvc.XMLView类，创建视图。视图对应的文件为 zdemo_step1/view/App.view.xml（其中 zdemo_step1为 index.html 这种的 data-sap-ui-resourceroots ）

 

执行结果