i18n for Dynamic UI


Since YUI 3.1 version, the framework includes internationalizing utility. That’s pretty huge from the prospective of application maintenance and deserves a little review.

String translation

The Yahoo team intended to bring into the library some ideas from Java internationalization experience. Particularly Yahoo Resource Bundles based on idea of Java property files. So, translation of an application can be achieved the following way:

First, YRB is created. That can be a JSON-formatted file of .JS extension or YRB-formatted file of .pres extension. Resource files are located in src/module/lang/ folder

Second, available resources and languages specified when declaring a new YUI instance

modules: {
    "greetings": {
        lang: ["de", "zh-Hans"]

Third, when we need to access localized strings, we once obtain the resource within the module and then use it for strings

this._strings = Y.Intl.get("greetings");

It supports lookups. When translation token for the target language isn’t found it tries the same token of root language.

Date localization

YUI provides Y.DataType.Date utility to format dates. Date translations are already available in YUI on many languages (the list can obtained through Intl.getAvailableLangs). So, just specifying the language for YUI instance, we get date-based statements translated:

YUI({lang:"ru-RU"}).use("intl", "datatype-date", function(Y) { 
    alert(Y.DataType.Date.format(new Date(), {format:"%A %x %X"}));

We can also switch language dynamically and add new translations for date details.

Number/currency localization

YUI allow to create configurations for different locales to display numbers and currencies

YUI().use("datatype-number", function(Y) {
        prefix: "%26amp;#165;",
        thousandsSeparator: ".",
        decimalSeparator: ",",
        decimalPlaces: 2,
        suffix: " (YEN)"
    // This alerts the string "%26#165;123.123.123,18 (YEN)"