UI5-文档-4.8-Translatable Texts

sanshao 2022年03月09日 SAP 181 0

在这一步中，我们将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