[UI5] JSON Model

입력필드의 값을 바꾸면 오른쪽의 텍스트도 바로 변경된다.

인사버튼을 누르면 입력필드에 입력한 데이터와 함께 반갑습니다라는 알림창이 뜬다.

App.view.xml

<mvc:View
    controllerName="sap.ui.demo.walkthrough.controller.App"
    xmlns="sap.m"    
    xmlns:mvc="sap.ui.core.mvc">
    <Button text="{i18n>showHelloButtonText}" press=".onShowHello" />
    <Input 
    value="{/recipient/name}"
    description="Hello {/recipient/name}"
    valueLiveUpdate="true"
    width="60%" /> 
</mvc:View>

i18n>showHelloButtonText
프로포티는 /로 가져왔다면 Model을 가져올땐 >로 가져온다. 키워드를 적어주면, 키워드에 해당하는 값을 가져온다. 그래서 버튼의 텍스트는 해당 키워드의 value인 '인사'를 가져오게 된다.

press=".onShowHello"
.은 명시한 파일의 펑션을 말하고, 버튼을 클릭했을때 onShowHello라는 함수를 실행한다.

<Input value~~>
sap.m.Input control을 view에 추가하면 이를 통해 사용자는 인사말을 받을 사람을 입력할 수 있다. XML 뷰에 대한 선언적 바인딩 구문을 사용하여 모델에 해당 값을 바인딩한다. /recipient/name는 모델의 경로를 선언한 것이다.

중괄호{}는 'recipient' 객체에서 'name' 프로퍼티의 값으로부터 얻어진 데이터를 가리키고 이를 데이터바인딩이라고 한다.

App.controller.js

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageToast",
    "sap/ui/model/json/JSONModel",
    "sap/ui/model/resource/ResourceModel" /* 다국어 지원*/
], function(Controller, MessageToast, JSONModel, ResourceModel){
    "use strict";
    return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
        onInit :  function() {
            var oData = {
                recipient : {
                    name : "Nion"
                }
        };


        var oModel = new JSONModel(oData); //모델에 데이터를 담고
        this.getView().setModel(oModel);    //모델을 뷰에 바인딩, 데이터를 뷰에 바로 바인딩할수 없다 

define함수에서 배열의 갯수와 매개변수의 갯수는 맞춰주는 것이 좋다.

onInit 함수에 JSON Model을 인스턴스화한다. 이 Model은 'recipient'라는 하나의 프로퍼티만 가지고 있고 'recipient' 프로퍼티에는 'name'이라는 하나의 프로퍼티만 존재한다.
XML view에서 이 Model을 사용하기 위해 view에서 setModel이라는 함수를 호출하고 새로 생성된 Model을 할당한다.

---

이후 i18n이라는 폴더를 하나 생성해주고, i18n_ko.properties라는 파일을 하나 만들어준다.

UI의 텍스트를 별도의 이 resource 파일로 옮기는거다. 이 방법은 모든 텍스트를 한곳에 모아두고 다른 언어로 쉽게 번역이 가능해 다국어를 사용할때 유용하다. 특별한 resource 모델과 스탠다드 데이터 바인딩 구문에 의해 선행 "/" 없이 SAPUI5에서 완성된다.

다국어 기능을 지원해줘서 다른언어로 가져올땐 또 다른언어 파일을 여기서 만들어주면 된다. 지금은 한국어만 사용해본다.

showHelloButtonText = 인사  
helloMsg= {0}님 반갑습니다. 

showHelloButtonText는 키워드이고 인사는 value이다. helloMsg도 마찬가지로 키워드이고 {0}는 placeHolder라고 구멍을 뚫어주는거다.

그리고 index.html에 data-sap-ui-language="ko" 구문을 추가해준다.

다시 controller.js로 와서,

        var i18nModel = new ResourceModel({
            bundleName : "sap.ui.demo.walkthrough.i18n.i18n" //i18n.properties
        });
        this.getView().setModel(i18nModel, "i18n");    //디폴트모델아닌 이름 지정한 모델 
      },    //양방향바인딩, 모델을 통해 한군데만 수정했는데 두군데 다 반영

        onShowHello : function () {
            var oBundle = this.getView().getModel("i18n").getResourceBundle(); //리소스모델을 가져와서 객체로 만들고 객체를 가져와 변수에 담는다
            var sRecipient = this.getView().getModel().getProperty("/recipient/name"); //디폴트모델에서 name프로포티 글자 읽어와 변수에 담는다, getProperty: 모델의 데이터 가져옴
            var sMsg = oBundle.getText("helloMsg", [sRecipient]);    //("키워드",[ ]) 인사라는 문자열이 키워드에 리턴됨 //helloMsg= {0}님, 반갑습니다. , sRecipient = Nion

            MessageToast.show(sMsg);
        }
    });
});

만약 oBundle.getText("helloMsg", ["a","b","c"]); 이런식으로 배열에 데이터가 여러개가 있고 helloMsg에 {0}님 {2}반갑습니다. {1} placeHolder가 여러개가 있으면, 배열에 인덱스로 해당하는 구멍에 값을 넣어준다. 그래서 a님 c반갑습니다.{b 라고 출력된다. placeHolder엔 구멍이 여러개 뚫려있는데 데이터가 없으면 undefined로 출력된다.

Translatable Texts

• 다국어를 위한 resource 모델은 i18n 모델이라고 한다.
• 기본 파일이름은 i18n.preoperties
• Resource bundle key는 camelCase 방법으로 적혀진다.
• Resource bundle value 값들은 {0}, {1}, {2}, 같은 방법으로 파라미터를 들어갈 수 있다.
• 번역된 문자를 연속적으로 연결시키지 않고 항상 placeholders를 사용한다.
• 특수 문자의 경우 유니코드로 변경해서 사용한다.