SAPUI5 Walkthrough Step 15: Nested Views

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", {
    });
});

执行

标签：15,Views,HelloPanel,SAPUI5,Controller,controller,webapp,sap,view
来源： https://www.cnblogs.com/keyuming/p/15021639.html