【SAPUI5】뷰 포함

소개

지금까지는 한 뷰(App.view.xml)에 모든 콘텐츠를 작성했습니다.
콘텐츠가 늘어나고 복잡해지면 콘텐츠마다 별도의 보기로 하는 것이 깔끔합니다.

이번에는 다음과 같이 App.view.xml 콘텐츠의 일부를 다른 뷰로 잘라내고 뷰를 App.view.xml에 포함하는 것을 시도해 보겠습니다.
보기마다 컨트롤러가 필요하므로 컨트롤러도 신설합니다.

단계

전제: 【SAPUI5】입문편의 기사 정리(2)

임베디드 뷰 만들기

컨트롤러 만들기

App.controller.js 변경

App.view.xml에 뷰 포함

1. 포함을 위한 뷰 만들기

view 폴더 아래에 "HelloPanel.view.xml"이라는 파일을 새로 만듭니다.


다음 코드를 입력합니다. App.view.xml에서 첫 번째 Panel을 그대로 복사하고 컨트롤러의 이름만 바꾸고 있습니다.

<mvc:View
    controllerName="test.helloworld.controller.HelloPanel" 
    xmlns="sap.m" 
    xmlns:l="sap.ui.layout" 
    xmlns:mvc="sap.ui.core.mvc">
    <Panel headerText="{i18n>panel1Header}">
        <content>
            <l:VerticalLayout class="sapUiContentPadding">
                <Button text="{i18n>helloButton}" press="onShowHello"/>
                <Text text="{mPrice>/product/name}"/>
                <Text binding="{mPrice>/product}" text="{mPrice>price}"/>
                <Text text="{
                    path: '/date',
                    type: 'sap.ui.model.type.Date',
                    formatOptions: {
                        style: 'short'
                    }
                }"/>
            </l:VerticalLayout>                             
        </content>
    </Panel>    
</mvc:View> 

2. 컨트롤러 만들기

controller 폴더 아래에 "HelloPanel.controller.js"라는 파일을 새로 만듭니다.


다음 코드를 입력합니다.

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel",
    "sap/m/MessageToast",
    "test/helloworld/model/formatter"
], function (Controller, JSONModel, MessageToast, formatter) {
   "use strict";
   return Controller.extend("test.helloworld.controller.HelloPanel", {
        _data : {
            "date" : new Date()
        },

        onInit : function (oEvent) {
            var oModel = new JSONModel(this._data);
            this.getView().setModel(oModel);
        },  

        onShowHello : function () {
            // read msg from i18n model
            var oBundle = this.getView().getModel("i18n").getResourceBundle();
            var sProduct = this.getView().getModel("mPrice").getProperty("/product/name");
            var sMsg = oBundle.getText("helloMessage", [sProduct]);

            // show a native JavaScript alert
            MessageToast.show(sMsg);
        },
   });      

3. App.controller.js 변경

App.controller.js에서 새 컨트롤러로 잘린 부분을 주석 처리합니다. (댓글 아웃 부분은 삭제해도 문제 없습니다)

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    //"sap/ui/model/json/JSONModel",
    "sap/ui/model/Filter",
    "sap/ui/model/FilterOperator",
    //"sap/m/MessageToast",
    "test/helloworld/model/formatter"
], function (Controller, Filter, FilterOperator, formatter) {
   "use strict";
   return Controller.extend("test.helloworld.controller.App", {

        formatter: formatter,
        /*
        _data : {
            "date" : new Date()
        }

        onInit : function (oEvent) {
            var oModel = new JSONModel(this._data);
            this.getView().setModel(oModel);
        },

        onShowHello : function () {
            // read msg from i18n model
            var oBundle = this.getView().getModel("i18n").getResourceBundle();
            var sProduct = this.getView().getModel("mPrice").getProperty("/product/name");
            var sMsg = oBundle.getText("helloMessage", [sProduct]);

            // show a native JavaScript alert
            MessageToast.show(sMsg);
        },
        */

        onFilterProducts : function (oEvent) {

            // build filter array
            var aFilter = [];
            var sQuery = oEvent.getParameter("query");
            if (sQuery) {
                aFilter.push(new Filter("name", FilterOperator.Contains, sQuery));
            }

            // filter binding
            var oList = this.byId("productList");
            var oBinding = oList.getBinding("items");
            oBinding.filter(aFilter);           
        },      
   });
});     

4. App.view.xml에 뷰 포함

먼저 App.view.xml에서 Panel1 부분을 제거합니다. 컨트롤 "sap.ui.layout"도 불필요하므로 삭제합니다.

<mvc:View 
    controllerName="test.helloworld.controller.App" 
    xmlns="sap.m" 
    xmlns:mvc="sap.ui.core.mvc">
    <App>
        <pages>
            <Page title="{i18n>pageTitle}">
                <content>
                    <ここにビューを埋め込み>
                    <Panel headerText="{i18n>panel2Header}">

・・・

이 시점에서 실행하면 Panel1이 사라집니다.


Panel1이 있던 곳에 다음 코드를 추가합니다.<mvc:XMLView viewName="test.helloworld.view.HelloPanel"/>

실행 결과

실행 결과는 다음과 같습니다.

요약

뷰 안에 다른 뷰를 임베드할 수 있다

각 뷰에 컨트롤러 필요

참고로 한 페이지

Get Started: Setup and Tutorials-Walkthrough-Step 15: Nested Views