https://sapui5.hana.ondemand.com/#/topic/df8c9c3d79b54c928855162bafcd88ee

巢狀檢視。當我們頁面上內容越來越多時，我們需要將內容進行分類並放置到不同的頁面上。這樣我們的程式將更便於管理和維護，同樣頁面也還可以被重複使用。

新增檢視HelloPanel

選擇中webapp目錄， 右鍵New->SAPUI5 View。

在New SAPUI5 View頁面上，View Type和Namespace預設即可， 輸入View Name: HelloPanel

建立完成後， 多出兩個檔案（webapp/view/HelloPanel.view.xml 和 webapp/controller/HelloPanel.controller.js )

修改webapp/view/HelloPanel.view.xml

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="sap.ui.demo.walkthrough.controller.HelloPanel"
    xmlns:html="http://www.w3.org/1999/xhtml">
    <Panel headerText="{i18n>helloPanelTitle}" class="sapUiResponsiveMargin"
 
 width="auto">
        <content>
            <Button text="{i18n>showHelloButtonText}" press=".onShowHello" class="myCustomButton"/>
            <Input value="{jsonModel>/recipient/name}" valueLiveUpdate="true" width="50%"/>
            <FormattedText htmlText="Hello {jsonModel>/recipient/name}"
 
 class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/>
        </content>
    </Panel>
</mvc:View>

修改webapp/controller/HelloPanel.controller.js

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

    return Controller.extend("sap.ui.demo.walkthrough.controller.HelloPanel", {
        onShowHello: function() {
            var oBundle = this.getView().getModel("i18n").getResourceBundle();
            var sRecipient = this.getView().getModel("jsonModel").getProperty("/recipient/name");
            var sMsg = oBundle.getText("helloMsg", [sRecipient]);
            MessageToast.show(sMsg);
        }
    });
});

修改webapp/view/App.view.xml檔案，刪除Panel元件。使用 XMLView元件，引用我們的HelloPanel檢視

<mvc:View controllerName="sap.ui.demo.walkthrough.controller.App" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true" xmlns="sap.m">
    <Shell>
        <App class="myAppDemoWT">
            <pages>
                <Page title="{i18n>title}">
                    <content>
                        <mvc:XMLView viewName="sap.ui.demo.walkthrough.view.HelloPanel"/>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

修改webapp/controller/App.controller.js檔案

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

    return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
    });
});

執行