html设置ut-8,步骤8：可翻译文字-配置APP多语言

1.练习效果

在这一步中，我们把用户界面的文本移动到单独的资源文件中，这样用户可以在必要时候文本内容，同时可以为不同的用户语言，使用不同的文本，以便于在用户界面中显示不同的语言内容。

这样就可以轻松地翻译成其他语言。简而言之，这个i18n–在SAPUI5中通过使用特殊的资源模型和标准的数据绑定语法来实现APP的多语言功能。

2.源码

您可以在演练-步骤8中查看和下载所有文件。

webapp / i18n / i18n.properties(新)

ABAP

showHelloButtonText=Say Hello

helloMsg=Hello {0}

1

2

showHelloButtonText=SayHello

helloMsg=Hello{0}

这里我们创建文件夹 webapp / i18n 和文件 i18n.properties。解析的捆绑包名称为 sap.ui.demo.walkthrough.i18n，我们将在后面的代码中看到。他的属性properties 文本文件包含每个元素的名称或值。可以在文本中添加任意数量的参数，方法是在括号中添加数字。这些数字对应于访问参数的顺序(从0开始，0，1，2…)。

在此例子中，我们将只有一个属性文件。但是，在实际项目中，对于每种受支持的语言，您将有一个单独的文件，并带有一个语言环境的后缀。比如：i18n_de.properties 对于德国语言， i18n_en.properties 英语， i18n_cn.properties 中文，等等。用户运行应用程序时，SAPUI5将自动加载最适合用户环境的语言文件来达到APP的多语言设置。当然用户在使用过程中也可以指定使用的语言。

controller/App.controller.js

ABAP

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);

}

});

});

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

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";

returnController.extend("sap.ui.demo.walkthrough.controller.App", {

onInit:function(){

//setdatamodelonview

varoData={

recipient:{

name:"World"

}

};

varoModel=newJSONModel(oData);

this.getView().setModel(oModel);

//seti18nmodelonview

vari18nModel=newResourceModel({

bundleName:"sap.ui.demo.walkthrough.i18n.i18n"

});

this.getView().setModel(i18nModel,"i18n");

},

onShowHello:function(){

//readmsgfromi18nmodel

varoBundle=this.getView().getModel("i18n").getResourceBundle();

varsRecipient=this.getView().getModel().getProperty("/recipient/name");

varsMsg=oBundle.getText("helloMsg", [sRecipient]);

//showmessage

MessageToast.show(sMsg);

}

});

});

在里面JS文件中  实例化了onInit函数，并且 资源模型 ResourceModel指向我们的文本现在所在的新消息捆绑的文件(i18n.properties)名称为sap.ui.demo.walkthrough.i18n.i18n ，其中的sap.ui.demo.walkthrough 由应用程序名称空间组成 (如 在文件index.html中定义)，文件夹名称 i18n，最后是文件名 i18n，此没有扩展名。该SAPUI5运行时间计算正确的路径资源; 在这种情况下，通往我们的道路i18n.properties文件。接下来，使用关键值将模型实例设置为视图上的命名模型 i18n。当需要并行使用多个模型时，可以使用命名模型。

在里面 onShowHello 事件处理函数我们访问 i18n 文件，从消息捆绑文件中获取文本并替换占位符 {0}并且，我们的数据模型中的收件人联系 的 getProperty方法可以在任何模型中调用，并以数据路径作为参数。此外，资源束具有特定的 getText 将字符串数组作为第二个参数的方法。

可以使用 getResourceBundle 方法 来绑定资源模型文件。我们可以使用的第二个参数，而不是手动连接可翻译文本getText用非静态数据替换部分文本。在运行时，SAPUI5尝试加载正确的i18n _ *。properties文件根据您的浏览器及您的所在区域来自动设置。在这里，我们仅创建了一个 i18n.properties文件使其变得简单。但是，您可以在浏览器开发人员工具的网络流量调试中可以看到，SAPUI5尝试加载一个或多个i18n _ *.properties ,对于中国用户来说，最常见的就是会自动加入i18n_cn.properties 文件。

webapp/view/App.view.xml

ABAP

controllerName="sap.ui.demo.walkthrough.controller.App"

xmlns="sap.m"

xmlns:mvc="sap.ui.core.mvc">

text="{i18n>showHelloButtonText}"

press=".onShowHello"/>

value="{/recipient/name}"

description="Hello {/recipient/name}"

valueLiveUpdate="true"

width="60%"/>

1

2

3

4

5

6

7

8

9

10

11

12

13

controllerName="sap.ui.demo.walkthrough.controller.App"

xmlns="sap.m"

xmlns:mvc="sap.ui.core.mvc">

text="{i18n>showHelloButtonText}"

press=".onShowHello"/>

value="{/recipient/name}"

description="Hello {/recipient/name}"

valueLiveUpdate="true"

width="60%"/>

在这个XML视图中，我们使用数据绑定将按钮文本连接到 i18n 文件中，并且取 showHelloButtonText 的属性仩。资源束是平面结构，因此该路径可以省略前面的斜杠(/)。

3.注意

在本示例中，描述文本未完全定位。为了安全起见，我们将必须使用与控制器中类似的机制来使用资源束中的字符串并替换其中的一部分。这可以通过jQuery.sap.formatMessage 格式化程序。

此外， i18n文件仅影响客户端应用程序文本。从后端系统加载的文本可以以后端系统支持的所有语言显示。

4.约定

国际化的多语言资源模型称为 i18n model。

默认文件名是 i18n.properties.

资源束密钥被写在(下部)camelCase中。

资源束值可以包含如下参数 {0}, {1}, {2}, …

切勿串联已翻译的字符串，始终使用占位符。

对特殊字符使用Unicode转义序列。