Mobile Internationalization

Contents 1 Introduction 2 Localized Texts 2.1 Available Labels 2.2 DOs and DON'Ts 3 Other Internationalizable Objects

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 which setContent 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 the setContent 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.

Category: Mobile Developers Guide