Predix UI组件本地化

 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.