说明
在这一步中,我们将UI的文本移动到一个单独的资源文件中。
这样,它们都在一个集中的位置,可以很容易地翻译成其他语言。这个国际化过程(internationalization 简写为i18n)是在SAPUI5中通过使用特殊的资源模型和标准的数据绑定语法实现的,但是没有前面的 /。
预览
输入字段和显示输入字段值的描述(与上一步没有视觉上的改变)
代码
你可以在演练-第8步查看和下载所有文件。
webapp/i18n/i18n.properties (New)
showHelloButtonText=Say Hello
helloMsg=Hello {0}
我们创建了文件夹webapp/i18n并在里面创建了文件i18n.properties。解析的包名称是sap.ui.demo.walkthrough.i18n,稍后我们将看到。文本的属性文件包含每个元素的name-value(键值对)。通过向文本中的花括号内添加任意数量的数字参数。这些数字对应于访问参数的顺序(从0开始)。
在本教程中,我们将只有一个属性文件。但是,在实际的项目中,对于每种受支持的语言都有一个单独的文件,并带有区域设置的后缀,例如:i18n_deproperties (德语),i18n_en.properties (英语)等等。当用户运行应用程序时,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函数中,我们实例化了ResourceModel,它指向我们的文本现在所在的新消息包文件(i18n.properties 文件)。包名称sap.ui.demo.walkthrough.i18n.i18n由应用程序命名空间sap.ui.demo.walkthrough (index.html中定义的应用程序根目录)、文件夹名i18n和最后不带扩展名的文件名i18n组成。SAPUI5运行时计算资源的正确路径;在本例中是我们的i18n.properties文件的路径。接下来,将以i18n为键值的已命名实例化的模型设置到视图上。当您需要同时使用几个模型时,您可以给模型命名。
在onShowHello事件处理函数中,我们访问i18n模型以从消息包文件中获取文本,并将占位符{0}替换为数据模型中的recipient。getProperty方法可以在任何模型中调用,并将数据路径作为参数。此外,资源绑定有一个特定的getText方法,该方法将字符串数组作为第二个参数。
可以使用ResourcModel的getResourceBundle方法访问资源包。我们可以使用getText的第二个参数将部分文本替换为非静态数据,而不是手动连接可翻译文本。在运行时,SAPUI5会根据浏览器设置和语言环境加载正确的i18n_*.properties文件。在本例中,我们只创建了一个i18n。属性文件使其简单。但是,您可以在浏览器的开发人员工具的Network中看到,SAPUI5尝试加载一个或多个i18n_*.properties文件,然后返回到默认的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视图中,我们使用数据绑定将按钮文本连接到i18n模型中的showHelloButtonText属性。资源包是一个扁平结构,因此前面的斜杠(/)可以省略。
注意
出于演示的目的,本例中的描述文本没有完全本地化。为了安全起见,我们必须使用与控制器中类似的机制来使用来自资源包的字符串并替换其中的部分内容。这可以用sap.base.strings.formatMessage格式化器完成。
此外,i18n文件只影响客户端应用程序文本。从后端系统加载的文本可以以后端系统支持的所有语言显示。
约定
- 用于国际化的资源模型称为i18n模型。
- 默认文件名是i18n.properties。
- 资源包键是用(小写)驼峰大小写编写的。
- 资源包的值可以包含像{0},{1},{2},…
- 永远不要连接经过翻译的字符串,总是使用占位符。
- 对特殊字符使用Unicode转义序列。
章节
- 第1步:你好世界
- 第2步:引导
- 第3步:控件
- 第4步:XML视图
- 第5步:控制器
- 第6步:模块
- 第7步:JSON模型
- 第8步:可翻译的文本
- 第9步:组件配置
- 第10步:应用程序描述符
- 第11步:页面和面板
- 第12步:Shell控件作为容器
- 第13步:外边距和内边距
- 第14步:自定义CSS和主题颜色
- 第15步:嵌套视图
- 第16步:对话框和片段
- 第17步:片段回调
- 第18步:图标
- 第19步:重用对话框
- 第20步:聚合绑定
- 第21步:数据类型
- 第22步:表达式绑定
- 第23步:自定义格式器
- 第24步:过滤
- 第25步:排序和分组
- 第26步:远程OData服务
- 第27步:模拟服务器配置
- 第28步:使用QUnit进行单元测试
- 第29步:与OPA的集成测试
- 第30步:调试工具
- 第31步:路由和导航
- 第32步:路由与参数
- 第33步:路由回溯和历史
- 第34步:自定义控件
- 第35步:响应性
- 第36步:设备适应
- 第37步:内容密度
- 第38步:可访问性