5. SAP UI5 Resource Model Apply


SAP UI5 Resource Model Apply

(다국어 처리 - Translatable Texts)

이 단계에서는 UI5의 Data 처리를 위한 Model 중 하나 인 Resource Model을 활용하여 다국어를 적용하는 방법에 대해 살펴본다. 
(In this step, we will look at how to apply multiple languages using the Resource Model, one of the models for data processing in UI5.)


실행 결과(Results of this step)


실행 순서(Order of execution of this step):

  1. i18n property 파일 생성한다.
    (Create the i18n property file.)
  2. Controller에서 ResourceModel 선언 및 View에 할당한다.
    (The Controller assigns ResourceModel Declaration and View.)
  3. View에서 ResourceModel 연동한다.
    (In View, link ResourceModel.)


1. i18n property 파일 생성한다.
   (Create the i18n property file.)

  • webapp/i18n/i18n.properties 파일 생성 및 코드 작성한다.
    파일 이름은 사전에 약속된 Naming Rule로 정해져 있다.
    (Create and code the "webapp/i18n/i18n.properties file." The file name is set to the Naming Rule that was previously promised.)

    1
2
showHelloButtonText=Say Hello
helloMsg=Hello {0}

        

  • 코드 해석(Code description)

    • helloMsg=Hello {0}
      : ResourceModel을 사용하여 helloMsg의 값을 호출할 때 parameter로 넘어온 첫 번째 값을 {0}에 대체해서 표시한다.
      (      When calling the value of helloMsg using the ResourceModel, the first value crossed into the parameter is displayed as a substitute for {0}.)

2. Controller에서 ResourceModel 선언 및 View에 할당한다.
   (The Controller assigns ResourceModel Declaration and View.)

  • webapp/controller/App.controller.js 파일을 아래의 내용으로 수정

  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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_tutorial.controller.App", {
        onInit() {
            
            const oData = {
               recipient : {
                  name : "World"
               }
            };
            const oModel = new JSONModel(oData);
            this.getView().setModel(oModel);
 
            const i18nModel = new ResourceModel({
               bundleName: "ui5_tutorial.i18n.i18n"
            });
            this.getView().setModel(i18nModel, "i18n");
         },
 
       onShowHello() {
         const oBundle = this.getView().getModel("i18n").getResourceBundle();
         const sRecipient = this.getView().getModel().getProperty("/recipient/name");
         const sMsg = oBundle.getText("helloMsg", [sRecipient]);
         
         MessageToast.show(sMsg);
       }
    });
 });
 


  • 코드 해석(Code description)

    • "sap/ui/model/resource/ResourceModel"
      : ResourceModel을 사용하기 위한 라이브러리 import를 선언한 내용이다.
      (      This is the content that declared the import of libraries to use ResourceModel.)

    •  ], (Controller , MessageToast, JSONModel, ResourceModel) => {
      : 위에서 import한 ResourceModel을 ResourceModel 이름으로 할당하여 controller에서 사용한다.
      (The ResourceModel imported above is assigned as the "ResourceModel" name and used by the controller.)

    • const i18nModel = new ResourceModel({
                                                         bundleName: "ui5_tutorial.i18n.i18n"
                                     });
      : "i18nModel" 변수에 webapp/i18n/i18n.properties 파일을 "ResourceModel"에 담아 할당한다.
      (Allocate the webapp/i18n/i18n.properties file to the "i18nModel" variable in "ResourceModel".)

    • this.getView().setModel(i18nModel, "i18n");
      : 해당 View(여기서는 App.view.xml)에 i18n 이라는 이름으로 위에서 할당한 i18nModel을 바인딩하여 화면에서 ResourceModel을 사용할 수 있도록 한다.
      (Binds the "i18nModel" assigned above under the name "i18n" to the corresponding View (App.view.xml) to make the ResourceModel available on the screen.)

    • const oBundle = this.getView().getModel("i18n").getResourceBundle();
      : 해당 View(App.view.xml)에 “i18n” 이름으로 할당된 ResourceModel을 oBundle 변수에 할당한다.
      ( Assign a ResourceModel assigned to the corresponding View (App.view.xml) with the name "i18n" to the "oBundle" variable.)

    • const sRecipient = this.getView().getModel().getProperty("/recipient/name");
      :       해당 View(App.view.xml)에 할당되어 있는 JSONModel의 "recipient" 하위에 "name" 값을 "sRecipient" 변수에 할당한다.
      (Assign the "name" value to the "sRecipient" variable under the JSONModel's "recipient" assigned to the View (App.view.xml).)

    • const sMsg = oBundle.getText("helloMsg", [sRecipient]);
      : ResourceModel에 "sRecipient" 변수를 parameter로 넘겨 “helloMsg“로 등록되어 있는 Text를 가져와서 "sMsg" 변수에 할당한다.
      (In ResourceModel, the "sRecipient" variable is transferred to the parameter to get the text registered as "helloMsg" and assign it to the "sMsg" variable.)

    • MessageToast.show(sMsg);
      : "sMsg" 변수의 값을 UI5 MessageToast Module을 사용하여 브라우저에 Message Toast로 표시한다.
      (Use the UI5 MessageToast Module to display the value of the "sMsg" variable as MessageToast in the browser.)

3. View에서 ResourceModel 연동한다.
   (In View, Use ResourceModel.)

  • webapp/view/App.view.xml 에 controller에서 할당 받은 ResourceModel의 값을 UI 표시하도록 수정한다.
    (Modify the "webapp/view/App.view.xml" to UI the value of the ResourceModel assigned by the controller.)

    1
2
3
4
5
6
7
8
9
10
11
12
13
<mvc:View
   controllerName="ui5_tutorial.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>
 


  • 코드 해석(Code description)

    • {i18n>showHelloButtonText}
      : controller에서 바인딩된 ResourceModel을 i18n 변수를 사용하여 버튼 Text를 표시한다.
      (      Use the i18n variable to display the ResourceModel bound by the controller to display the button Text.)

참고사항:

  이번 단계에서는 property 파일을 하나만 사용합니다. 하지만 실제 프로젝트에서는 지원되는 각 언어에 대해 로케일 접미사가 붙은 별도의 파일을 사용하여 다국어를 적용합니다.
(예: i18n_de.properties - 독일어, i18n_en.properties - 영어 등)
사용자가 브라우저를 실행하면 SAPUI5는 사용자 환경에 가장 적합한 언어 파일을 로드합니다.
  (This step uses only one property file, but the actual project applies multilingualism to each supported language using a separate file with a locale suffix.
(e.g. i18n_de.properties - German, i18n_en.properties - English, etc.)
When the user runs the browser, SAPUI5 loads the language file that best fits your environment.)

댓글

댓글 쓰기

이 블로그의 인기 게시물

SAP UI5 개발환경 구성하기(Creating a Development Environment)

이미지
  SAP UI5 개발 환경 설치해보자. 설치 필요 항목( List of required installations ) Node.Js - javascript runtime & npm 사용을 위함 VS Code(Visual Studio Code) Install -  소스 코드 편집기 VS Code Extensions install UI5 CLI(Command Line Interface) - CMD 명령어를 통해서 UI5를 활용 가능 SAP Fiori Tools Extension Pack - 기본 제공되는 Fiori 구성 요소 활용 가능  Node.Js Install Node.Js 사이트에서 설치 파일 다운로드 및 설치 수행하자. ( Download and install the installation file from the Node.Js site.)   Node.Js URL:  https://nodejs.org 다운로드 받은 파일을 실행해서 기본 값 변경 없이 그냥 설치하면 된다. ( You just need to run the downloaded file and install it without changing the default value.)  VS Code(Visual Studio Code) Install Visual Studio Code 사이트에서 설치 파일 다운로드 및 설치 수행하자. ( Download and install the installation file from the VS Code site.)   Visual Studio Code URL:   https://code.visualstudio.com 다운로드 받은 파일을 실행해서 기본 값 변경 없이 그냥 설치하면 된다. ( You just need to run the downloaded file and install it without changing the default value.)    ...
자세한 내용 보기

9. SAP UI5 Custom CSS 적용(Apply)

이미지
SAP UI5 Custom CSS 적용 (Apply) 이 단계에서는 SAP UI5에서 제공하는 Margin 관련 CSS 적용 방법과 사용자가 직접 구성한 Custom CSS를 적용하는 방법을 알아본다. (In this step, we will find out how to apply the Margin-related CSS provided by SAP UI5 and how to apply the custom CSS configured by the user.) 실행 결과 (Results of this step)   UI5의 Text Component를 사용하여 UI5 표준 Margin 및 글씨체와 Bold를 적용한다.   (Apply UI5 standard Margin and font & Bold using the Text Component in UI5.) 실행 순서 (Order of execution of this step): UI5 Standard Margin CSS 적용하기 (Apply UI5 standard Margin.) Custom CSS 적용하기 (Apply the Custom CSS.) 1. UI5 Standard Margin CSS 적용하기    (Apply UI5 standard Margin.) webapp/view/sample/Pageviewsample.view.xml에 Text 컴포넌트 추가 및 CSS 내용 추가한다. (Add text components and CSS content to "webapp/view/samples/pageviewsample.view.xml".) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 < mvc:View      controllerName = "ui5_tutorial.controller.sample.PageViewSample"        x...
자세한 내용 보기

7. SAP UI5 Multilingual Application (다국어 적용)

이미지
  SAP UI5 Multilingual Application (다국어 적용)  이번 단계에서는 ResourceModel을 활용하여 Application에 다국어를 적용하는 방법에 대해서 살펴본다.  (In this step, we will look at how to apply multilingualism to applications using ResourceModel.) 실행결과(Results of this step)   브라우저의 언어가 한국어인 경우를 가정하여 i18n 파일을 활용하여 한국어가 적용된 application을 만든다.   (Assuming that the browser's language is Korean, use the i18n file to create an application to which Korean is applied.)      실행 순서(Order of execution of this step): i18n_ko.properties 파일 생성하여 한국어 등록한다. (Create the "i18n_ko.properties" file and register in Korean.) manifest.json 파일에 한국어 정보를 추가한다. (Add Korean information to the "manifest.json" file.) 1. i18n_ko.properties 파일 생성하여 한국어 등록한다.    (Create the "i18n_ko.properties" file and register in Korean.) webapp/i18n/i18n_ko.properties 파일을 신규 생성한 후 한국어 번역 정보를 추가한다. (Add Korean translation information after creating a new "webapp/i18n/i18n_ko.properties" file.) 한국어 외에 다른 언어를 추가할 때에는 로케일 접미사...
자세한 내용 보기