Predix UI组件本地化
在应用开发中, 不可避免的会遇到针对国家或者地区的本地化工作. 这里介绍一下如何在Predix UI中进行组件的本地化.
Predix UI组件的本地化主要包括三个方面: 字符串本地化, 日期时间本地化, 以及图表的本地化.
字符串本地化
在实际工作中, 绝大多数本地化的工作都是字符串的本地化. 大部分Predix UI组件(如: px-alert-message, px-data-table)都可以轻松本地化, 只需要为组件传递language
和resources
属性.
language
属性决定组件的地区信息, 如: en
. resources
属性是一个以语言为key的json对象, 与language
相对应的子对象的值会被组件应用为字符串的值. Predix UI本身不提供翻译服务, 各个语言的信息需要开发人员通过第三方途径提供. 下面是一个resources
对象的例子:
{
'en': {
'Apply': 'Apply',
'Cancel': 'Cancel'
},
'fr’: {
'Apply': 'Appliquer',
'Cancel': 'Annuler'
}
}
resources
内容的加载可以通过两种方式:
- 加载来自外部的JSON文件
attached: function() {
this.loadResources(this.resolveUrl('locales.json'));
}
- 在代码中内联(in-line)加载
resources: {
value: function() {
return {
'en': { 'hello': 'My name is {name}.' },
'fr': { 'hello': 'Je m\'apelle {name}.' }
}
}
}
resources
可以只包含当前language
对应的字符串, 也可以包含多语言的字符串. 在实际中, 可以一个工程采用一个全局的resources
对象, 并将其传递到每个组件中. 也可以为每个语言分别创建json文件, 独立加载. 未来Predix UI可能会提供更合适的加载方式.
日期时间的本地化
Predix UI日期与时间相关组件使用了moment.js
(momentjs.com)来处理时间和日期. 由于moment.js
本身提供了一整套本地化方案, 在Predix UI组件中可以轻松的使用Px.moment.changeLocale()
来加载本地化信息.
例:
Px.moment.changeLocale('fr', function() {
console.log('moment locale changed!');
});
注: 在使用上例的方法之前, 必须在项目中引入px-datetime-common/momentLocale
.
也可以引入自定义的本地化信息:
Px.moment.changeLocale(null, null, yourCustomLocale)
注: 定制信息的格式请遵循 http://momentjs.com/docs/#/customization/
图表的本地化
Predix UI的图表组件使用了d3.js来处理时间以及数字的本地化. 与moment.js
类似, 可以简单的通过Px.d3.changeTimeLocale()
和Px.d3.changeNumberLocale()
来实现.
例:
Px.d3.changeTimeLocale('ca-ES', function() {
console.log('d3 time locale changed');
});
Px.d3.changeNumberLocale('ca-ES', function() {
console.log('d3 number locale changed');
});
注: 在使用上例的方法之前, 必须在项目中引入px-d3-imports/timeLocale
和px-d3-imports/timeLocale
.
总结
综上所诉, 通过以上几种方式在项目中实现Predix UI组件的本地化, 已基本满足应用场景. 对于moment.js
与d3.js
所支持的完整locale列表, 参见Custom Locale Support.