Skip to Content

How I do self-study on a given Fiori control – part 9

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.

/wp-content/uploads/2015/10/clipboard1_819618.png

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
});

/wp-content/uploads/2015/10/clipboard2_819619.png

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.

/wp-content/uploads/2015/10/clipboard3_819632.png

3. the default binding mode: OneTime

/wp-content/uploads/2015/10/clipboard4_819633.png

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:

/wp-content/uploads/2015/10/clipboard9_819616.png

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.

/wp-content/uploads/2015/10/clipboard10_819647.png

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

/wp-content/uploads/2015/10/clipboard11_819648.png

Be the first to leave a comment
You must be Logged on to comment or reply to a post.