- 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.
- SAP Managed Tags:
