Fiori学习专题十五：Nested Views

Nested Views也就是嵌套页面，有时候我们同一个页面会用在多处，为了不重复构造页面，可以把这个页面剥离出来。
1.view文件夹下新建一个页面HelloPanel.view.xml

<mvc:ViewcontrollerName="ui5.walkthrough.controller.HelloPanel"xmlns="sap.m"xmlns:mvc="sap.ui.core.mvc"><PanelheaderText="{i18n>helloPanelTitle}"class="sapUiResponsiveMargin"width="auto"><content><Buttontext="{i18n>showHelloButtonText}"press=".onShowHello"class="myCustomButton"/><Inputvalue="{/recipient/name}"valueLiveUpdate="true"width="60%"/><FormattedTexthtmlText="Hello {/recipient/name}"class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/></content></Panel>
</mvc:View>

2.新建controller，webapp/controller/HelloPanel.controller.js

sap.ui.define(["sap/ui/core/mvc/Controller","sap/m/MessageToast"
], (Controller, MessageToast) => {"use strict";return Controller.extend("ui5.walkthrough.controller.HelloPanel", {onShowHello() {// read msg from i18n modelconst oBundle = this.getView().getModel("i18n").getResourceBundle();const sRecipient = this.getView().getModel().getProperty("/recipient/name");const sMsg = oBundle.getText("helloMsg", [sRecipient]);// show messageMessageToast.show(sMsg);}});
});

3.改造App.view.xml 以及 App.controller.js

<mvc:ViewcontrollerName="ui5.walkthrough.controller.App"xmlns="sap.m"xmlns:mvc="sap.ui.core.mvc"displayBlock="true"><Shell><App class="myAppDemoWT"><pages><Page title="{i18n>homePageTitle}"><content><mvc:XMLView viewName="ui5.walkthrough.view.HelloPanel"/></content></Page></pages></App></Shell>
</mvc:View>

sap.ui.define(["sap/ui/core/mvc/Controller"
], (Controller) => {"use strict";return Controller.extend("ui5.walkthrough.controller.App", {});
});

这里其实我们就是把Panel控件的内容抽出来放在一个新的页面上，再通过<mvc:XMLView viewName=“ui5.walkthrough.view.HelloPanel”/>，放在App.view。同时对于新的页面，需要创建新的controller。