Localization
Cx supports different culture-specific number, currency and date formatting based on Intl helpers
provided by modern browsers. Besides that, Cx offers translation of standard messages to any language.
function loadCulture(culture) {
// Code-splitting - it's mandatory to use string
// constants so webpack can know how to prepare packages
switch (culture) {
case 'de-de':
return import('cx/locale/de-de');
case 'es-es':
return import('cx/locale/es-es');
case 'fr-fr':
return import('cx/locale/fr-fr');
case 'nl-nl':
return import('cx/locale/nl-nl');
case 'pt-pt':
return import('cx/locale/pt-pt');
case 'sr-latn-ba':
return import('cx/locale/sr-latn-ba');
default:
case 'en-us':
return import('cx/locale/en-us');
}
}
function setCulture(culture, store) {
loadCulture(culture)
.then(() => {
Culture.setCulture(culture);
store.notify(); // Force re-render
});
}
function setCurrency(currencyCode, store) {
Culture.setDefaultCurrency(currencyCode);
store.notify(); // Force re-render
}
class PageController extends Controller {
onInit() {
this.store.init('$page.number', 123456.78);
this.store.init('$page.date', new Date().toISOString());
// Cultures
this.store.set("$page.cultures", [
{ id: 0, text: 'DE-DE' }, { id: 1, text: 'EN-US' }, { id: 2, text: 'ES-ES' },
{ id: 3, text: 'FR-FR' }, { id: 4, text: 'NL-NL' }, { id: 5, text: 'PT-PT' },
{ id: 6, text: 'SR-LATN-BA' }
]);
this.store.set("$page.culture", { id: 1, text: 'EN-US' });
this.addTrigger("change-culture", ["$page.culture.text"], (text) =>
setCulture(text.toLowerCase(), this.store)
);
// Currencies
this.store.set("$page.currencies", [
{ id: 0, text: 'EUR' }, { id: 1, text: 'USD' },
{ id: 2, text: 'GBP' }, { id: 3, text: 'BAM' }
]);
this.store.set("$page.currency", { id: 1, text: 'USD' });
this.addTrigger("change-currency", ["$page.currency.text"], (text) =>
setCurrency(text, this.store)
);
}
}import { Culture } from 'cx/ui';The Culture object provides methods for selecting UI cultures used for formatting and localizing
messages. It is even possible to combine different cultures at the same time, one for number
formatting and another for datetime formatting, using the methods described below.
| Methods |
|---|
Culture.setCulture(cultureCode)Sets the current culture. Read more about available culture codes here. |
Culture.setDateTimeCulture(cultureCode)Sets the datetime culture. Read more about available culture codes here. |
Culture.setDefaultCurrency(currencyCode)Sets the default currency, which is otherwise |
Culture.setNumberCulture(cultureCode)Sets the number culture. Read more about available culture codes here. |
Culture.getDefaultDateEncoding()Returns a function that is used to encode dates. That function expects a Date and returns a string or a number. |
Culture.setDefaultDateEncoding(encoding)Sets the function that will be used to encode dates for DateField, Calendar
and other date/time related widgets. The default encoding simply invokes the
|
import { Localization } from 'cx/ui';The Localization object offers methods for providing errors messages and other texts that appear in widgets
in different languages.
| Methods |
|---|
Localization.localize(cultureCode, name, values)Override prototype properties for a given culture and component name. |
Localization.override(name, values)Override prototype properties for a given component name. Used for changing defaults and theme adjustments. |
Localization.registerPrototype(name, componentType)Registers component type for localization. |
// Register widget for localization
Localization.registerPrototype('cx/widgets/TextField', TextField);
// Localize widget
Localization.localize('de', 'cx/widgets/TextField', {
validationErrorText: 'Ungültige Eingabe.',
minLengthValidationErrorText: 'Bitte tragen Sie noch {[{0}-{1}]} Zeichen ein.',
maxLengthValidationErrorText: 'Benutzen Sie {0} oder weniger Zeichen.'
});