Step 15: Nested Views

 Step 설명

panel 컨텐츠는 점점 더 복잡해져서 분리된 view에 옮겨야 합니다. 이 방법을 사용하면 application 구조가 이해하기 훨씬 쉬워지고 app의 각 부분을 재사용할 수 있습니다. 

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 view에 panel과 컨텐츠를 직접 넣는 대신에 새로 분리하는 HelloPanel로 옮깁니다. panel 컨텐츠 aggregation에서 XMLView 태그를 사용해 이것(HelloPanel)을 참조합니다.

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>

panel의 전체 컨텐츠를 새로운 파일 HelloPanel.view.xml에 추가합니다. XML view의 controllerName 속성을 설정해서 view의 컨트롤러를 지정합니다.

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);
      }
   });
});

재사용 가능한 asset(자산)을 가지려면 메소드 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 view와 controller의 밖으로 옮겼습니다. app controller는 빈 공간(stub-그루터기)만 남았습니다. 나중에 더 많은 함수를 추가하기 위해 사용할 것 입니다.