[UI5] Formatters

invoiceList.view.xml

<firstStatus>
    <ObjectStatus text="{
        path: 'invoice>Status',
        formatter: '.formmatObj.statusText'
        }" />
</firstStatus>

이전에 사용했던 invoices.json파일에서 invoice모델의 status프로포티의 값인 status A,B,C가 반복하면서 데이터가 들어온다. 그 값이 formatter 함수의 인자에 들어가게 된다.

{ path: '경로',
formatter: '.함수명' }
바인딩에 뭔가 추가할때 path에 데이터 경로를 입력해 데이터를 가져오고, formatter 프로포티를 통해 그 데이터를 가지고 함수를 실행한다.

invoiceList.controller.js

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel",
    "../model/formatter"
], function (Controller, JSONModel, formatter) {
    "use strict";
    return Controller.extend("sap.ui.demo.walkthrough.controller.InvoiceList", {
        onInit : function (){
        },

        formatObj : formatter 

    });
});

여기서 formatObj는 뷰에서 함수로 입력한 .formatObj를 가리키고, formatter는 아래에서 생성할 formatter.js에서 리턴된 값을 가리킨다.

formatter.js

model 폴더를 새로 생성하고, 폴더에 formatter.js 파일을 만들어 formatter 함수를 따로 구현한다.

sap.ui.define([], function () {
    "use strict";

    return {statusText: function (sStatus) {
        var oBundle = this.getView().getModel("i18n").getResourceBundle();

        switch(sStatus) {
        case "A" :
            return oBundle.getText("invoiceStatusA");
        case "B" :
            return oBundle.getText("invoiceStatusB");
        case "C" :
            return oBundle.getText("invoiceStatusC");
        default:
            return sStatus;    
        }    
    }

  };
});

resource 모델안에서 getText로 텍스트 가져오는데 가져오기위해선 getResourceBundle을 사용한 객체에서만 가져올 수 있다. bundle은 다국어 i18n에서만 사용가능하다.

view에서 들어온 데이터가 A일때는 다국어파일 i18n에 있는 invoiceStatusA의 값이 출력된다. B와 C일때도 동일하다. 데이터는 아래에서 추가해준다.

i18n_ko.properties

invoiceStatusA=New
invoiceStatusB=In Progress
invoiceStatusC=Complete

화면에서 invoice의 오른쪽 단위아래에 텍스트가 출력되는 것을 확인할 수 있다.

뷰와 컨트롤러는 대부분 1대1관계를 가진다. formatter.js파일을 따로 만들지 않고 컨트롤러에 함수 로직을 추가하게 되면 여러 뷰에서 이 formatter를 사용한다고 했을때 각각의 컨트롤러마다 로직을 구현해야 할것이다. 하지만 이렇게 공통으로 formatter.js파일을 만들고 컨트롤러에서 formatter의 경로와 매개변수를 추가해줌으로써 재사용성을 높일 수 있다.