이번 튜토리얼은 다국어 번역 기능에 대해서 알아본다.

일반적으로 언어 별 텍스트가 백엔드 시스템에서 직접 파생되지 않는 한 변환 가능한 텍스트를 모델에 직접 배치하는 것은 좋은 프로그래밍 방법으로 간주되지 않는다.
따라서 모든 번역 가능한 텍스트를 리소스 번들에 배치하여 동적으로 만든다.

Preview

06_preview.png

Coding

Data Binding - Step 6.

webapp/index.js

sap.ui.require([
    "sap/ui/model/json/JSONModel",
    "sap/ui/core/mvc/XMLView",
    "sap/ui/model/resource/ResourceModel"
], function (JSONModel, XMLView, ResourceModel) {
    "use strict";

    // Attach an anonymous function to the SAPUI5 'init' event
    sap.ui.getCore().attachInit(function () {
        // Create a JSON model from an object literal
        var oModel = new JSONModel({
            firstName: "Harry",
            lastName: "Hawk",
            enabled: true
        });

        // Assign the model object to the SAPUI5 core
        sap.ui.getCore().setModel(oModel);

        // Create a resource bundle for language specific texts
        var oResourceModel = new ResourceModel({
            bundleName: "sap.ui.demo.db.i18n.i18n"
        });

        // Assign the model object to the SAPUI5 core using the name "i18n"
        sap.ui.getCore().setModel(oResourceModel, "i18n");

        // Display the XML view called "App"
        new XMLView({
            viewName: "sap.ui.demo.db.view.App"
        }).placeAt("content");
    });
});

sap.ui.getCore() 호출하여 oResourceModel의 bundleName과 i18n을 코어에 설정을 한다.
ResourceModel 참고 자료

note:
이전 튜토리얼의 oModel.setDefaultBindingMode(BindingMode.OneWay);을 지우고 해당 텍스트는 i18n이 있는 resourceMOdel로 바인딩 된다.

webapp/i18n/i18n.properties (New)

# Field labels
firstName=First Name
lastName=Last Name
enabled=Enabled

# Screen titles
panelHeaderText=Data Binding Basics

webapp/i18n 경로에 해당 파일을 생성한다.
panelHeaderText는 json 모델에서 i18n으로 이동이 되었다.
해당 i18n은 저장된 언어는 다국어 번역을 위한 java 규칙을 따른다.

webapp/view/App.view.xml

<mvc:View
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <Panel headerText="{i18n>panelHeaderText}" class="sapUiResponsiveMargin" width="auto">
        <content>
            <Label text="{i18n>firstName}" class="sapUiSmallMargin"/>
            <Input value="{/firstName}" valueLiveUpdate="true" width="200px" enabled="{/enabled}"/>
            <Label text="{i18n>lastName}" class="sapUiSmallMargin"/>
            <Input value="{/lastName}" valueLiveUpdate="true" width="200px" enabled="{/enabled}"/>
            <CheckBox selected="{/enabled}" text="{i18n>enabled}"/>
        </content>
    </Panel>
</mvc:View>

해당 xml 파일에 대한 text들을 i18n에 있는 속성들로 바인딩 한다.
index.js에서 serModel에서 resourceModel의 이름을 i18n으로 설정하였기 때문에 바인딩 구문은 {i18>}구문으로 사용하면 자동으로 매치되어 바인딩 된다.

Resource Model