Step 8: Translatable Texts


In this step we move the texts of our UI to a separate resource file.


Step 8: Translatable Texts - 第1张  | 优通SAP


You can view and download all files at Walkthrough – Step 8.

webapp/i18n/ (New)

We create the folder webapp/i18n and the file inside. The resolved bundle name is
sap.ui.demo.walkthrough.i18n, as we will see later. The
properties file for texts contains name-value pairs for each
element. You can add any number of parameters to the texts by adding numbers in
curly brackets to them. These numbers correspond to the sequence in which the
parameters are accessed (starting with 0).

In this tutorial we will only have one properties file. However, in real-world projects, you would have a separate file for each supported
language with a suffix for the locale, for example for German,
for English, and so on. When a user runs the app, SAPUI5 will load the
language file that fits best to the user’s environment.


In the onInit function we instantiate the ResourceModel that points to the new message bundle file where our
texts are now located ( file). The bundle name sap.ui.demo.walkthrough.i18n.i18n consists of
the application namespace sap.ui.demo.walkthrough (the application root as defined in the index.html), the
folder name i18n and finally the file name i18n without extension. The SAPUI5 runtime calculates the correct path to the resource; in this case
the path to our file. Next, the model instance is set on the view as a named model with the key
i18n. You use named models when you need to have several models available in parallel.

In the onShowHello event handler function we access the i18n
model to get the text from the message bundle file and replace the placeholder
{0} with the recipient from our data model. The
getProperty method can be called in any model and takes the
data path as an argument. In addition, the resource bundle has a specific
getText method that takes an array of strings as second

The resource bundle can be accessed with the getResourceBundle method of a
ResourceModel. Rather than concatenating translatable texts
manually, we can use the second parameter of getText to replace
parts of the text with non-static data. During runtime, SAPUI5 tries to load
the correct i18n_*.properties file based on your browser settings
and your locale. In our case we have only created one file to make it simple. However, you can see in
the network traffic of your browser’s developer tools that SAPUI5 tries to load
one or more i18n_*.properties files before falling back to the
default file.


In the XML view, we use data binding to connect the button text to the
showHelloButtonText property in the i18n
model. A resource bundle is a flat structure, therefore the preceding slash (/) can
be omitted for the path.


The description text is not completely localized in this example for illustration purposes. To be on the safe side, we would have to use a similar mechanism as in the controller to use a string from the resource bundle and replace parts of it. This can be done with the formatter.

Furthermore, i18n files only impact client-side application texts. Texts that are loaded from back-end systems can appear in all languages that are supported by the back-end system.

6. Conventions

  • The resource model for internationalization is called the
    i18n model.

  • The default filename is

  • Resource bundle keys are written in (lower) camelCase.

  • Resource bundle values can contain parameters like {0},
    {1}, {2}, …

  • Never concatenate strings that are translated, always use placeholders.

  • Use Unicode escape sequences for special characters.



16 − 14 =