[ SAPUI5 ] JSONModel

○ JSONModel을 활용해 보자.

    - JSONModel 정의 

    - onInit : View 로딩 시, 무조건 1번 실행됨

      * onBeforeRendering : Xml View가 브라우저 랜더링(화면 생성) 전에 실행되는 function

      * onAfterRendering : Xml View가 브라우저 랜더링 후에 실행되는 function

      * onExit : Xml View를 떠난 후 실행되는  function

                     View를 벗어난 Routing으로 인한 이동 시에 초기화 및 실행 function 등록

    - oData(Open Data Protocol)

      1) 웹상에서 손쉽게 데이터를 조회 및 수정할 수 있도록 주고 받는 웹(프로토콜)

      2) OPEN API를 오픈된 공통규약으로 제공 가능

      3) Atom Publishing Protocol의 확장 형식

      4) REST(REpresentational State Transfer) 프로토콜

 

[ sapganeung.controller.js ]

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageToast",
    "sap/ui/model/json/JSONModel"
],
    /**
     * @param {typeof sap.ui.core.mvc.Controller} Controller
     */
    function (Controller, MessageToast, JSONModel) { 
        "use strict";

        return Controller.extend("helloquickstart.controller.sapganeung", {
            onInit : function () {
                var oData = {
                    recipient : {
                        name : "World"
                    }
                }
                var oModel = new JSONModel(oData);
                this.getView().setModel(oModel);
            },
           
            onShowHello: function () {
               MessageToast.show("Hello World!")
            }

        });
    });

 

[ sapganeung.view.xml ]

<mvc:View controllerName="helloquickstart.controller.sapganeung"
    xmlns:mvc="sap.ui.core.mvc" 
    displayBlock="true"
    xmlns="sap.m">

    <Shell id="shell">
        <App id="app"> 
            <pages>
                <Page id="page" title="{i18n>title}">
                    <content>
                            <Button text="Say Hello"
                                    press="onShowHello">
                            </Button>
                            <Text text="Hello World!"/>

                            <Input
                                value="{/recipient/name}"
                                description="Hello {/recipient/name}"
                                valueLiveUpdate="true"
                                width="60%"/>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>