티스토리 뷰

SAPUI5

Step 8: Translatable Texts

선즈반 2018. 12. 5. 11:27


Step 설명

UI의 텍스트를 별도의 resource 파일로 옮겨봅니다.

이 방법은 모든 텍스트를 한곳에 모아둡니다. 다른 언어로 쉽게 번역할 수 있습니다. 국제화(internationalization) 프로세스는 특별한 resource 모델과 스탠다드 데이터 바인딩 구문에 의해 선행 "/" 없이 SAPUI5에서 완성됩니다.

Preview

Step 7과 보이는 부분은 동일

webapp/i18n/i18n.properties (New)

showHelloButtonText=Say Hello
helloMsg=Hello {0}

webapp/i18n 폴더를 만들고 폴더 안에 i18n.properties 파일을 생성합니다. bundle 이름은 sap.ui.demo.walkthrough.i18n입니다. 텍스트를 위한 properties 파일은 각 글자마다 "키-밸류"를 쌍으로 가지고 있습니다. 해당 글자들에 중괄호와 숫자를 추가해 원하는 수만큼에 파라미터를 추가할 수 있습니다. 이 숫자들은 파라미터가 엑세스되는 순서를 나타냅니다(시작은 0부터)

이 튜토리얼에서는 하나의 properties 파일만 가집니다. 그러나 실제 프로젝트에서는 상황에 맞게 지원되는 각 언어에 따라  별도의 파일을 가질 수 있습니다. (예: 독일어는 i18n_de.properties, 영어는 i18n_en.properties) App이 실행 될 때 SAPUI5는 유저 환경에 가장 적합한 언어 파일을 로드할 수 있습니다.


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 함수에서 텍스트가 들어있는 새로운 메세지 bundle 파일(i18n.properties file)을 가리키는 ResourceModel을 인스턴스화합니다. sap.ui.demo.walkthrough.i18n.i18n(bundle 이름)는 application namespace sap.ui.demo.walkthrough (index.html에 정의된 application root), 폴더 이름 i18n 및 파일 이름 i18n으로 로 구성되어 있습니다. SAPUI5 런타임은 resource에 대한 정확한 경로로 계산합니다. 이런 경우 i18n.properties  파일에 대한 경로입니다. 생성된 모델 인스턴스는 i18n으로 명명된 모델이름으로 view에 설정합니다. 동시에 사용가능한 모델들을 가지고 있어야 하는 경우 지정된 이름의 모델을 사용합니다.

onShowHello  함수에서 i18n모델에 접근하여 메세지 번들 파일로부터 텍스트를 가져오고 placeholder {0}을 데이터 모델(View에 세팅한 Model-17Line)의 'recipient'  프로퍼티의 값으로 바꿉니다.  getProperty 메소드는 모든 모델에서 호출 할 수 있으며 데이터 경로를 인수로 사용합니다.(27Line) 또한 리소스 번들에는 두 번째 인수로 문자열 배열을 사용하는 specificgetText 메서드가 있습니다.(28Line)

리소스 번들은 리소스 모델의 getResourceBundle  메소드로 접근할 수 있습니다. 번역 가능한 텍스트를 수동으로 연결하는 대신 텍스트의 일부분을 'non-static data'로 대체하기 위해 getText의 두번째 파라미터를 사용할 수 있습니다. (아래의 규칙의 5번째 내용을 얘기하는데 번역된 텍스트를 변수로 이어서 사용하지 말고 placeholer로 구멍을 뚫어서 넣어 사용하란 얘기) 런타임 동안 SAPUI5은 브라우저에 세팅과 locale에 맞는 i18n_*.properties를 가져오려고 할 겁니다. 여기에서는 간단하게 만들기 위해 하나의 i18n.properties 파일을 만들었습니다. 그러나 당신은 브라우저의 개발툴의 네트워크 트래픽을 통해 SAPUI5가 기본 i18n.properties 파일을 falling back(정확한 뜻을 모르겠네요) 하기 전에 하나 또는 하나 이상의 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  프로퍼티에서 버튼 글자를 연결하기 위해 데이터 바인딩을 사용합니다. 리소스 번들은 평면구조이기 때문에 경로에서 'preceding slash' (/)를 생략할 수 있습니다.


Conventions

- 다국어를 위한 resource 모델은 i18n 모델이라고 합니다.

- 기본 파일이름은 i18n.preoperties입니다.

- 리소스 번들 키는 cameCase 방법으로 적혀집니다.

- 리소르 번들 값들은 {0}, {1}, {2}, … 같은 방법으로 파라미터를 들어갈 수 있습니다.

- 번역된 문자를 연속적으로 연결시키지 말고 항상 placeholders를 사용합니다.

- 특수 문자의 경우 유니코드로 변경해서 사용합니다.



이전 내용 - Step 7: JSON-Model

다음 내용 - Step 9: Component Configuration

'SAPUI5' 카테고리의 다른 글

Step 10: Descriptor for Applications  (0) 2018.12.06
Step 9: Component Configuration  (0) 2018.12.06
Step 7: JSON Model  (0) 2018.12.05
Step 5: Controllers  (0) 2018.12.05
Step 6: Modules  (0) 2018.12.05
댓글