Show TOC

Step 4: InternationalizationLocate this document in the navigation structure

For localization, or internationalization (i18n), use data binding and the sap.ui.model.resource.ResourceModel as a named model. This allows easily using translation keys instead of the actual texts. The alternative, using ResourceBundles, requires code execution for every translated text set on a control.

Let's examine the relevant code that we briefly saw earlier in the Component section. The i18n model is set up in the Component's initialization section, based upon configuration in the component's metadata: 

 // always use absolute paths relative to our own component
        // (relative paths will fail if running in the Fiori Launchpad)
        var rootPath = jQuery.sap.getModulePath("sap.ui.demo.tdg");

        // set i18n model
        var i18nModel = new sap.ui.model.resource.ResourceModel({
            bundleUrl : [rootPath, mConfig.resourceBundle].join("/")
        });
        this.setModel(i18nModel, "i18n");

Use "i18n" as the name for the model; use only one global property file that contains all texts used in the application.

The configuration specifies the relative location of the resource bundle. This is made absolute (in relation to our app's namespace) by use of the jQuery.sap.getModulePath utility function, and then used to create the named model, before it is set on the component. Here's an excerpt from the messageBundle.properties file in the i18n folder:

masterTitle=Products
masterFooterAddButtonTooltip=Add new product
masterListNoDataText=No products
notFoundTitle=Not Found
notFoundText=The requested resource was not found
addProductTitle=Add Product
addProductButtonSave=Save
...

Group view specific texts with prefixes, as shown here (master, notFound, addProduct). If you have texts that are common across all views of your app, do not apply a prefix, so as to avoid redundancies. Note that here, the name of the resource bundle file has no locale-specific suffix. This is the 'catchall' case. SAPUI5 will attempt to load the most specific locale-specific resource bundle file, with graceful degradation down to this catchall case. For example, with a UK-based browser, and no explicit language-related URL parameters, the SAPUI5 runtime, given the above configuration, will attempt to load the following files in this order:

  1. messageBundle_en_GB.properties
  2. messageBundle_en.properties
  3. messageBundle.properties

Texts for translation keys in more specific resource bundles (loaded earlier) will take precedence over texts for the same translation keys in less specific resource bundles (loaded later). In our sample application we only have the least specific messageBundle.properties file.

Note Note that when using the sap.ui.model.resource.ResourceModel, the translation keys are referred to without the slash prefix that normally denotes a root data property. In other words, in the data binding, use {i18n>masterTitle} rather than {i18n>/masterTitle}.
Progress Check

We've added the i18n subfolder, and the messageBundle.properties file in it, so our app folder content looks like this:

tdg/
  |
  +-- i18n/
  |     |
  |     +-- messageBundle.properties
  |
  +-- Component.js
  +-- index.html
  +-- MyRouter.html

But as you might expect, we'll get the same outcome as before, as we still don't have the App view. Let's press on.