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 ）

執行結果