Step 8: Translatable Texts

opensapkr·2019년 7월 3일

Walkthrough ui5

ui5-Walkthrough

목록 보기

9/39

Text들을 다른 언어로 번역 해보자 internationalization 프로세스 i18n은 SAPUI5에서 special resource model과 표준 데이터 바인딩 구문을 사용한다.

Coding

Preview

08_preview

webapp/i18n/i18n.properties (New)

showHelloButtonText=Say Hello
helloMsg=Hello {0}

i18n.properties 파일의 번들 이름은 sap.ui.demo.walkthrough.i18n이다.
properties 파일에는 text를 위한 name-value가 쌍으로 각 요소로 들어간다.
중괄호 안에 숫자를 추가하여(0부터 시작) 텍스트에 원하는 수의 매개 변수를 추가 할 수 있다.

사용자가 응용 프로그램을 실행하면 SAPUI5는 사용자 환경에 가장 적합한 언어 파일을 로드한다.

만약 파일을 그대로 실행시키고 브라우저의 개발자 모드를 켜면 http://localhost:8080/i18n/i18n_ko.properties 404 error가 보일 것이다.
이는 브라우저 설정에서 사용자가 사용하는 언어를 바탕으로 자동으로 properties 파일을 읽으므로 (브라우저 콘솔에서 navigator.language을 입력하면 현재 사용중인 언어 정보가 나온다.)
i18n/i18n_ko_KR.properties 파일을 생성하면 해결된다.

controller/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 () {
         // set data model on view
         var oData = {
            recipient : {
               name : "World"
            }
         };
         var oModel = new JSONModel(oData);
         this.getView().setModel(oModel);
         // set i18n model on view
         var i18nModel = new ResourceModel({
            bundleName: "sap.ui.demo.walkthrough.i18n.i18n"
         });
         this.getView().setModel(i18nModel, "i18n");
      },
      onShowHello : function () {
         // read msg from i18n model
         var oBundle = this.getView().getModel("i18n").getResourceBundle();
         var sRecipient = this.getView().getModel().getProperty("/recipient/name");
         var sMsg = oBundle.getText("helloMsg", [sRecipient]);
         // show message
         MessageToast.show(sMsg);
      }
   });
});

onInit 함수에서 i18n.properties 파일을 가리키는 ResourceModel을 인스턴스화한다.

번들 이름 sap.ui.demo.walkthrough.i18n.i18n은 응용 프로그램 네임 스페이스 sap.ui.demo.walkthrough(index.html에 정의 된 응용 프로그램 루트)
폴더 이름 i18n 및 파일 이름 i18n으로 구성된다.

모델 인스턴스는 i18n 키가 있는 모델로 뷰에 설정된다. 이벤트 Handler 함수 onShowHello에서 i18n 모델에 액세스하여 message bundle file에서 텍스트를 가져오고

{0}을 데이터 모델 oData의 변수recipient 로 바꾼다.

getProperty 메소드는 모든 모델에서 호출할 수 있으며 데이터 경로를 인수로 사용한다.

resource bundle에는 두 번째 인수로 array of strings을 사용하는 특정 getText 메서드가 있다.

resource bundle은 ResourceModel의 getResourceBundle method를 사용하여 액세스 할 수 있다.

텍스트를 수동으로 연결하는 대신 getText의 두 번째 매개 변수(sRecipient)를 사용하여 텍스트의 일부를 동적으로 바꿀 수 있다.

런타임 중에 SAPUI5는 브라우저 설정 및 사용자의 위치(미국,한국,중국)에 따라 올바른 i18n _ *. properties 파일을 로드 하려고 시도한다.

webapp/view/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>

XML view에서 데이터 바인딩을 사용하여 버튼 텍스트를 i18n 모델의 showHelloButtonText 속성에 연결한다.

자원 번들은 선행 슬래시 (/)를 경로에 대해 생략 할 수 있다.

ote:
이 예제에서는 description text 가 완전히 번역 되지 않았다.
보안성 측면에서 예제와 동일한 방식으로 컨트롤러에서와 메커니즘을 사용하여 리소스 번들의 문자열을 replace하는 것이 좋다.
이 작업은 jQuery.sap.formatMessage 포맷터를 사용하여 수행 할 수 있다.
또한 i18n 파일은 클라이언트 측 응용 프로그램 텍스트에만 영향을 준다.
백엔드 시스템에서 로드 된 텍스트는 모든 언어로 나타날 수 있다.