728x90
반응형
안녕하세요
[SAP UI5]SAP UI5 연습하기 - Walkthrough Tutorial Step (Translatable Texts)
포스팅 시작해보겠습니다.
i18n 다국어처리에 대해 알아보기
국저 다국어처리를 하는 이유는 소프트웨어를 한 나라에서만 사용하는 것이 아니기 떄문에 그 나라에 맞게 SW개발해야하기 떄문이다.
여기서는 간단하게 설명하고 i18n에 대해서는 다른 포스팅에서 따로 다뤄보겠습니다.
i18n.propertise 파일 만들기
먼저 webapp 폴더 밑 i18n폴더를 만들고 거기에 i18n.properties 파일을 만듭니다.
그리고 밑에 소스를 추가해줍니다.
showHelloButtonText=Say Hello
helloMsg=Hello {0}
텍스트파일에는 각요소에 대한 값들이 들어가 있습니다.
해당하는 값은 App.Controller를 통해서 App.view에서 값을 보여줍니다.
App.Controller.js 코드 수정
// set i18n model on view
const i18nModel = new ResourceModel({
bundleName: "ui5.walkthrough.i18n.i18n"
});
this.getView().setModel(i18nModel, "i18n");
이 코드를 통해서 JSON형태로 만들어준다.
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast",
"sap/ui/model/json/JSONModel",
"sap/ui/model/resource/ResourceModel"
], (Controller, MessageToast, JSONModel, ResourceModel) => {
"use strict";
return Controller.extend("ui5.walkthrough.controller.App", {
onInit() {
// set data model on view
const oData = {
recipient : {
name : "World"
}
};
const oModel = new JSONModel(oData);
this.getView().setModel(oModel);
// set i18n model on view
const i18nModel = new ResourceModel({
bundleName: "ui5.walkthrough.i18n.i18n"
});
this.getView().setModel(i18nModel, "i18n");
},
onShowHello() {
// read msg from i18n model
const oBundle = this.getView().getModel("i18n").getResourceBundle();
const sRecipient = this.getView().getModel().getProperty("/recipient/name");
const sMsg = oBundle.getText("helloMsg", [sRecipient]);
// show message
MessageToast.show(sMsg);
}
});
});
저도 onShowHello()부분은 정확하게는 모르겠는데 음.. i18n파일을 객체화 시키고 입력필드에 적힌 값을 받아서 MessageToast.show를 이용해서 보여주는 거 같습니다.
... 혹시 틀렸다면.. 댓글로 알려주세요 같이 성장해요..
App.view.xml
버튼에 있는 text 변경해주기 원래는 say Hello 로 고정적으로 박아두었지만 이제 i18n에 있는 변수 showHelloButtonText 값으로 변경됩니다.
<mvc:View
controllerName="ui5.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>
감사합니다.
반응형
