UI5-文档-4.15-Nested Views

我们的面板内容变得越来越复杂，现在是时候将面板内容移动到一个单独的视图中了。使用这种方法，应用程序结构更容易理解，应用程序的各个部分可以重用。

Preview

The panel content is now refactored to a separate view (No visual changes to last step)

Coding

You can view and download all files at Walkthrough - Step 15.

webapp/view/App.view.xml

<mvc:View

   controllerName="sap.ui.demo.walkthrough.controller.App"

   xmlns="sap.m"

   xmlns:mvc="sap.ui.core.mvc"

   displayBlock="true" >

   <App class="myAppDemoWT">

      <pages>

         <Page title="{i18n>homePageTitle}">

            <content>

               <mvc:XMLView viewName="sap.ui.demo.walkthrough.view.HelloPanel"/>

            </content>

         </Page>

      </pages>

   </App>

</mvc:View>

我们不会将面板及其内容直接放到App视图中，而是将其移动到一个新的单独的HelloPanel视图中。我们在面板的内容聚合中使用XMLView标记来引用它。

webapp/view/HelloPanel.view.xml (New)

<mvc:View

   controllerName="sap.ui.demo.walkthrough.controller.HelloPanel"

   xmlns="sap.m"

   xmlns:mvc="sap.ui.core.mvc">

   <Panel

      headerText="{i18n>helloPanelTitle}"

      class="sapUiResponsiveMargin"

      width="auto" >

      <content>

         <Button

            text="{i18n>showHelloButtonText}"

            press="onShowHello"

            class="myAppDemoWT myCustomButton"/>

         <Input

            value="{/recipient/name}"

            valueLiveUpdate="true"

            width="60%"/>

         <FormattedText

            htmlText="Hello {/recipient/name}"

            class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/>

      </content>

   </Panel>

</mvc:View>

面板的全部内容现在添加到新文件HelloPanel.view.xml中。我们还通过设置XML视图的controllerName属性来指定视图的控制器。

webapp/controller/HelloPanel.controller.js (New)

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 () {

         // read msg from i18n model

         var oBundle = this.getView().getModel("i18n").getResourceBundle();

         var sRecipient = this.getView().getModel().getProperty("/recipient/name");

         var sMsg = oBundle.getText("helloMsg", [sRecipient]);

         // show message

         MessageToast.show(sMsg);

      }

   });

});

为了拥有可重用资产，onShowHello方法也从app控制器移动到HelloPanel控制器。

webapp/controller/App.controller.js

sap.ui.define([

   "sap/ui/core/mvc/Controller"

], function (Controller) {

   "use strict";

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

   });

});

我们现在已经将所有东西移出app视图和控制器。应用程序控制器目前仍然是一个空存根，我们稍后将使用它来添加更多的功能。

Parent topic: Walkthrough

Previous: Step 14: Custom CSS and Theme Colors

Next: Step 16: Dialogs and Fragments