Mobile Internationalization
Contents |
Introduction
Openbravo mobile application can (and should) be designed in a way that allows them to be internationalized.
Localized Texts
The translation of mobile applications is based on Messages defined in the backend.
These messages are used to display not only actual messages but also any label that appears in the UI.
Translating this messages to different languages and creating translation modules is achieved in the same way any other Openbravo module is localized. For more detailed information read the section in Localization Guide covering this topic.
The way to obtain a localized message in the front-end is:
OB.I18N.getLabel('myLabelSearchKey');
Where myLabelSearchKey is the Search Key of the message that will be replaced by its text.
Available Labels
Not all messages defined in the backend are loaded in client side. By default, the loaded labels are:
- The ones defined in Mobile Core Infrastructure module
- The ones defined in current mobile application module
- The ones defined in any module depending (at any level) on current mobile application module
DOs and DON'Ts
The object containing all the messages is loaded in the client side after loading all static resources, but before the login. At this first load, default language is used for the labels. When the user login, labels are loaded again with the proper session language. Because of this, follow this guide:
- DON'T use static labels as part of the class definition
// INCORRECT CODE enyo.kind({ content: OB.I18N.getLabel('MYMOD_Label'); // At this point, the label is still not available });
- DO Instead: call a
initComponents
function in whichsetContent
is set
// CORRECT CODE enyo.kind({ initComponents: function () { this.setContent(OB.I18N.getLabel('MYMOD_Label')); // At this point labels are loaded } });
- DO use, when available, the
i18NLabel
attribute. This is an attribute that some kinds have. Define it with the desired Search Key and the content will be automatically localized
enyo.kind({ kind: 'OB.UI.Button', i18NLabel: 'MYMOD_Label' // 'MYMOD_Label' search key is replaced with the actual text });
- DO create your components adding a
i18NLabel
attribute and thesetContent
logic
enyo.kind({ name: 'MYMOD.MyComponent', i18NLabel: '', initComponents: function () { this.setContent(OB.I18N.getLabel(this.i18NLabel)); } });
- DON'T compose complex messages concatenating strings. Example:
Messages in the backend: Search Key: MYMOD_LinesUpdated Message Text: Lines updated Search Key: MYMOD_And Message Text: and Search Key: MYMOD_LinesUpdated Message Text: lines deleted.
// INCORRECT CODE: Do not use in this way enyo.kind({ initComponents: function () { this.setContent(5 + OB.I18N.getLabel('MYMOD_LinesUpdated') + ' ' + OB.I18N.getLabel('MYMOD_And') + 2 + OB.I18N.getLabel('MYMOD_LinesUpdated')); } });
Result: 5 Lines updated and 2 lines deleted.
- DO use parameterized messages when needed. Parameterized messages can have multiple parameters (identified by %0, %1...) that are used as placeholders inside the message. The
OB.I18N.getLabel
function accepts as second parameter an array of values to replace these placeholders. Note that doing it this way, translations to different languages can use the parameters in a different order. The previous example would be now:
Messages in backend: Search Key: MYMOD_LinesUpdatedAndDeleted Message Text: %0 Lines updated and %1 lines deleted. Message Text (Spanish translation): Se borraron %1 líneas y se actualizaron %0,
// BETTER CODE: Do use in this way enyo.kind({ initComponents: function () { this.setContent(OB.I18N.getLabel('MYMOD_LinesUpdatedAndDeleted', [5, 2])); } });
Result: 5 Lines updated and 2 lines deleted. Result (Spanish): Se borraron 2 líneas y se actualizaron 5. <- Note the order of the parameters has been switched in this case
Other Internationalizable Objects
In addition to localized labels, the client's OB.I18N
object exposes some other methods to facilitate internationalization. The result obtained when these methods are invoked is determined by the System locale configuration.
- formatCurrency. Returns the number passed as parameter formatted using the currency precision, decimal separator symbol and thousands separator symbol. Note it does not include the currency symbol.
> OB.I18N.formatCurrency(8000) "8,000.00"
- formatRate
> OB.I18N.formatRate(5.666) "5.67%"
- formatDate
> OB.I18N.formatDate(new Date()) "19-04-2013"
- formatHour
> OB.I18N.formatHour(new Date()) "09:16"
OB.Format
contains all different available numeric and date formats.