Localizing Custom Controls

User interface controls contain localizable strings that are not view-specific; for example, the Smart Search console in the data grid displays Filter and Clear buttons. These strings can be localized using the following steps:

The control developer should declare all translatable strings that a specific control can display as class variables in the control’s JavaScript file:

Ab.grid.MiniConsole = Ab.grid.ReportGrid.extend({ ...regular control code goes here... }, { // @begin_translatable z_TITLE_CLEAR: 'Clear', z_TITLE_FILTER: 'Filter', z_TOOLTIP_COLLAPSE: 'Collapse', z_TOOLTIP_EXPAND: 'Expand' // @end_translatable } );

Afterwards, the localization team will extract all translatable Javascript strings under \schema\ab-core . Once the strings have been translated, the localization team will output the strings and their translations to a JavaScript resource bundle file for each locale (i.e. \ schema\ab-core\controls\lang\ui-controls-xx.js , where "xx" is a locale name). The produced file has the standard structure, where: key1 is a control class name (such as, Ab.grid.MiniConsole), key2 is the file name (such as, ab-miniconsole.js), and key3 is the English string (such as, Clear).

The value attribute holds the localized text. For example:

Ab.localization.Localization = Base.extend({}, { localizedStrings: [ ... {key1: "Ab.grid.MiniConsole", key2: "ab-miniconsole.js", key3: "Clear", value: "Borrar"}, ...

At runtime Web Central includes one .js resource bundle file (chosen for the current user locale) into every rendered HTML page.

To display the translated string in JavaScript control:

var title = this.getLocalizedString(AFM.grid.MiniConsole.z_TITLE_CLEAR); ...display the title...

You should include <message> elements in AXVW files and use the getMessage() function to display translated strings in custom JavaScript views. Using the <message> elements is the recommended technique for all applications; using Z_XXX strings is a specific technique used only to localize core controls.