• Tutorial Index – how I do self study on the following topics
  • Part1 – UI5 Module lazy load mechanism
  • Part2 – Control renderer
  • Part3 – Html native event VS UI5 semantic event
  • Part4 – Control metadata
  • Part5 – Control instance data – how are setXXX and getXXX implemented
  • Part6 – Control data binding under the hood
  • Part7 – Implementations for different binding mode: OneWay, TwoWay, OneTime
  • Part8 – Control ID
  • Part9 – this blog
  • Part10 – Button control in XML view
  • Part11 – Button control and its underlying DOM
• Content of this blog
  • Simply application setup for this blog
  • button text displayed with Chinese locale
  • button text displayed with default locale

Tutorial Index – how I do self study on the following topics

Part1 – UI5 Module lazy load mechanism

Part2 – Control renderer

Part3 – Html native event VS UI5 semantic event

Part4 – Control metadata

Part5 – Control instance data – how are setXXX and getXXX implemented

Part6 – Control data binding under the hood

Part7 – Implementations for different binding mode: OneWay, TwoWay, OneTime

Part8 – Control ID

Part9 – this blog

Part10 – Button control in XML view

Part11 – Button control and its underlying DOM

Content of this blog

In this part, let’s research the control internationalization ( I call it i18n in this blog ) support.

There is some small modification needs to be done on the simple application.

Simply application setup for this blog

The complete source code of html file:

Create a folder named “buttontutorial”, and put two files into that folder:

• i18n.properties: this file only contains one line: BUTTON_LABEL=Jerry
• i18n_zh.properties: this file only contain one line: BUTTON_LABEL=\u5409\u745E. ( By the way, this is the unicode for my Chinese name: 吉瑞 )

The folder structure should be below:

— | buttontutorial|

            |- i18n.properties

            |- i18n_zh.properties

  | application.html

In the runtime, you will see two buttons below, with the two resource files downloaded via the Network tab.

button text displayed with Chinese locale

This is for the button in the left, with text “吉瑞”.

Put the mouse on the column “Initiator” for the first file “i18n_zh.properties”, and through the callstack you can find the load of this file is just triggered by the line:

var oAppI18nModel1 = new sap.ui.model.resource.ResourceModel({
 bundleName : "buttontutorial.i18n",
 bundleLocale : oLocale
});

What does the returned object oAppl18nModel1 consist of?

1. A local information zh ( Correct, since my Chrome language setting is set to Chinese )

2. the value for key “BUTTON_LABEL”. When you call function getText() of _oResourceBundle, it is just this value returned.

3. the default binding mode: OneTime

Still remember the Implementations for different binding mode: OneWay, TwoWay, OneTime introduced in part7 of this tutorial?

In SAP UI5 documentation, it is also mentioned that Resource model only supports OneTime binding mode:

button text displayed with default locale

This is for button with text “Jerry”. As I have explicitly pass the locale “en” into constructor of ResourceModel, the 404 error for i18n_en.properties is expected since I don’t create such file under “buttontutorial” folder.

However, why is the second i18n.properties loaded? Let’s first have a look at the state of oAppI18nModel2. Please compare mProperties with the one in oAppI18nModel1. It is empty, so according to the logic in previous chapter, getText will fail to serve.

Fortunately, the UI5 framework has fallback mechanism to try the load the default file instead. See the comment below.