Quantcast
Channel: SAPUI5 Developer Center
Viewing all articles
Browse latest Browse all 789

SAPUI5 walkthrough step 8 - translatable texts, dive in - how does i18n model work?

$
0
0

Welcome to my SAPUI5 Walkthrough, And Dive In blog series, where I’ll not only walkthrough the tutorial, but dive in, to explore the magic behind SAPUI5. Buckle up and sit tight, it's gonna be a bumpy ride as I’m no expert in any way shape or form, just a humble learner who loves coding and likes to get to the bottom of things =。=


This is a fairly straight forward step, but let’s go a little bit further than what the tutorial shows us.


Let’s first create an i18n_de.properties file.

01.png


And also, make German as the default language in the Chrome browser language settings.

02.png


With those preparations done, let’s run our application, and see what will happen and more importantly, ask the question how.


We see german on the screen, yeah.

03.png


Here comes the questions:


(1) How does SAPUI5 pick up the browser language setting.

(2) How does SAPUI5 know which i18n file to load.

(3) How does {0} turn into ‘World’.


(1) How does SAPUI5 pick up the browser language setting.


During the Core class instantiation process, a new Configuration object will be created.

04.png


The configuration object will pick up our Browser language settings, and make the first entry (de) as the default language value.

05.png


(2) How does SAPUI5 know which i18n file to load.


We go back to the App.controller.js to instantiate an i18nModel object.

06.png


During the instantiation process, we’ll get the language code from the configuration object.

07.png


It continues to construct the correct url (base url + the sLocale code) for requesting the resource.

08.png


Having the resource loaded.

09.png


(3) How does {0} turn into ‘World’.


Start with getText method call.

10.png

 

getText invokes jQuery.sap.formatMessage method.

11.png


Which does its regular expression magic to replace the pattern '{0}' with value ‘World’.

12.png


13.png

 

Mission completed  

14.png


Viewing all articles
Browse latest Browse all 789

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>