1. 程式人生 > >UI5-文件-4.8-Translatable Texts

UI5-文件-4.8-Translatable Texts

在這一步中,我們將UI的文字移動到一個單獨的資原始檔中。

這樣,他們都在一箇中心位置,可以很容易地翻譯成其他語言。這個國際化過程(簡稱i18n)是在SAPUI5中通過使用一種特殊的資源模型和標準的資料繫結語法實現的,但是沒有前面的/。

 

Preview

 

An input field and a description displaying the value of the input field (No visual changes to last step)

Coding

You can view and download all files at Walkthrough - Step 8

.

webapp/i18n/i18n.properties (New)

showHelloButtonText=Say Hello

helloMsg=Hello {0}

在本教程中,我們將只有一個屬性檔案。但是,在實際專案中,對於每種受支援的語言,您都有一個單獨的檔案,該檔案帶有地區字尾,例如i18n_de 德語屬性 i18n_en英語屬性,等等。當用戶執行應用程式時,SAPUI5將載入最適合使用者環境的語言檔案。我們建立資料夾webapp/i18n和檔案i18n。屬性裡面。解析後的包名是sap.ui.demo.walk.i18n,稍後我們將看到。文字的屬性檔案包含每個元素的名稱-值對。您可以向文字中新增任意數量的引數,方法是向文字中新增大括號中的數字。這些數字與訪問引數的順序(s)相對應.

 

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函式中,我們例項化了ResourceModel,它指向文字現在所在的新訊息包檔案(i18n).屬性檔案。包名sap.ui.demo. i18n.i18n包括應用程式名稱空間sap.ui.demo.演練(index.html中定義的應用程式根目錄)、資料夾名i18n,最後是不帶副檔名的檔名i18n。SAPUI5執行時計算到資源的正確路徑; 這裡是到i18n.properties屬性檔案。接下來,在檢視上將模型例項設定為具有鍵i18n的命名模型。當需要同時使用多個模型時,可以使用命名模型。

  在onShowHello事件處理函式中,我們訪問i18n模型來從訊息包檔案中獲取文字,並將佔位符{0}替換為資料模型中的接收方。getProperty方法可以在任何模型中呼叫,並將資料路徑作為引數。此外,資源包具有一個特定的getText方法,該方法將字串陣列作為第二個引數。

 

  可以使用ResourceModel的getResourceBundle方法訪問資源包。與手工連線可翻譯文字不同,我們可以使用getText的第二個引數用非靜態資料替換部分文字。在執行時,SAPUI5試圖載入正確的i18n_*。基於瀏覽器設定和區域設定的屬性檔案。在我們的例子中,我們只建立了一個i18n.properties檔案使其更簡單。但是,您可以從瀏覽器開發工具的網路流量中看到,SAPUI5試圖載入一個或多個i18n_*.properties檔案,然後返回到預設的i18n.屬性檔案。

 

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檢視中,我們使用資料繫結將按鈕文字連線到i18n模型中的showHelloButtonText屬性。資源包是平面結構,因此路徑可以省略前面的斜槓(/)。

  

  請注意:出於演示的目的,描述文字沒有完全本地化。為了安全起見,我們必須使用與控制器類似的機制來使用資源包中的字串並替換其中的部分。這可以用jQuery.sap完成。formatMessage格式化程式。此外,i18n檔案隻影響客戶端應用程式文字。從後端系統載入的文字可以以後端系統支援的所有語言顯示。

 

Conventions

  ▪用於國際化的資源模型稱為i18n模型。

  ▪預設檔名是i18n.properties。

  ▪資源包鍵是用(較低的)camelCase編寫的。

  ▪資源包值可以包含{0}、{1}、{2}、……

  ▪永遠不要連線翻譯後的字串,總是使用佔位符。

  ▪對特殊字元使用Unicode轉義序列。

 

Parent topic: Walkthrough

Previous: Step 7: JSON Model

Next: Step 9: Component Configuration

Related Information

Resource Model

API Reference:jQuery.sap.util.ResourceBundle

API Reference:sap.ui.model.resource.ResourceModel

Samples:sap.ui.model.resource.ResourceModel