Skip to content

Latest commit

 

History

History

ex4

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
images
images
 
 
README.md
README.md
 
 

README.md

solution demo

Exercise 4 - Introduce Localization

In this exercise you'll learn how easy it is to enable localization for your UI5 application.

Exercise 4.1 - Replacing Hard-Coded Text With i18n Variables

In your existing UI5 application you've used hard-coded text values. That's OK if you'd like to implement a fast proof of concept. In your productive application no hard-coded text should be used, however, because it would be displayed regardless of the actual browser language the user has configured. Your goal is to build an enterprise-ready application which is fully localized. UI5 comes with a huge set of localization features out of the box, one of which is automatic language selection and text localization. To benefit from it, you need to replace all occurrences of hard-coded text in your UI5 application. Luckily, there's only one occurrence 😃 However, it's good practice to start directly with localization in mind instead of refactoring many places in your application afterwards.

  1. Open the Sensors.view.xml located under sensormanager/webapp/view/.

  2. Replace the noDataText value with the i18n key noSensorDataText. "i18n" is a common abbreviation of "internationalization".

                    <f:GridList
                        id="sensorsList"
                        items="{path: 'sensorModel>/sensors', sorter: {path:'customer', group:true, descending: false}}"
                        noDataText="{i18n>noSensorDataText}">
  1. Add the newly introduced i18n key also to your i18n.properties file, which is located under sensormanager/webapp/i18n/, and by the way, let's also pick a better title and prepare some other strings we'll need later.

sensormanager/webapp/i18n/i18n.properties

title=Keep Cool Inc. Sensor Manager
appTitle=Sensor Manager
appDescription=The sensor manager
noSensorDataText=No Sensor Data
distanceLabel=Distance
distanceUnit=km
msgSensorDataLoaded=All sensors online!
msgFilterAll=All
msgFilterCold=Cold
msgFilterWarm=Warm
msgFilterHot=Too Hot
toolTipSelectCustomer=Select Customer
titleSelectCustomer=Select Customers
titleSensorStatus=Sensor Status
cardTitle=Customer: {0}
locationLabel=Location
cardSubTitle={0}: {1}, {2}: {3}{4}
temperatureUnit=°C
  1. Switch browser tabs and refresh the page to see the changed user interface of your UI5 application.



Exercise 4.2 - Add Additional Languages

Your UI5 application is prepared for localization. No matter which browser language is configured, your UI5 application currently displays the texts of the i18n.properties file. Let's provide new language files for English and German.

  1. Go to folder sensormanager/webapp/i18n/ and right-click.

  2. In the popup, click New File.

  3. Enter i18n_en.properties as file name.

  4. Repeat Steps 1 and 2.

  5. Enter i18n_de.properties as file name.

  6. Open i18n_en.properties and paste the following content:

sensormanager/webapp/i18n/i18n_en.properties

title=Keep Cool Inc. Sensor Manager
appTitle=Sensor Manager
appDescription=The sensor
noSensorDataText=No Sensor Data
distanceLabel=Distance
distanceUnit=km
msgSensorDataLoaded=All sensors online!
msgFilterAll=All
msgFilterCold=Cold
msgFilterWarm=Warm
msgFilterHot=Too Hot
toolTipSelectCustomer=Select Customer
titleSelectCustomer=Select Customers
titleSensorStatus=Sensor Status
cardTitle=Customer: {0}
locationLabel=Location
cardSubTitle={0}: {1}, {2}: {3}{4}
temperatureUnit=°C
  1. Open i18n_de.properties and paste the following content:

sensormanager/webapp/i18n/i18n_de.properties

title=Keep Cool Inc. Sensor Verwalter
appTitle=Sensor Verwalter
appDescription=Der Sensor Verwalter
noSensorDataText=Keine Sensordaten
distanceLabel=Distanz
distanceUnit=km
msgSensorDataLoaded=Alle Sensoren aktiv!
msgFilterAll=Alle
msgFilterCold=Kalt
msgFilterWarm=Warm
msgFilterHot=Zu Heiß
toolTipSelectCustomer=Wähle den Kunden
titleSelectCustomer=Wähle die Kunden
titleSensorStatus=Sensor Status
cardTitle=Kunde: {0}
locationLabel=Ort
cardSubTitle={0}: {1}, {2}: {3}{4}
temperatureUnit=°C
  1. Depending on the browser language you've configured, you'd now be able to see different text on your user interface.
    • If your browser language is English, the content of i18n_en.properties is used.
    • If your browser language is German, the content of i18n_de.properties is used.
    • For any other language, the content of i18n.properties is used.

Exercise 4.3 - Configure Supported Languages

Usually, only the i18n.properties file is maintained by developers. The language-dependent files will be filled by native speakers or translators. As an application developer, you can configure which languages are supported by your application, and which language is your default (aka fallback) language. In this session English will be the default language, and additionally German should be supported.

  1. Open the manifest.json located under sensormanager/webapp.

  2. Go to section sap.ui5 / models / i18n. Here, add two new configurations inside your settings object.

    1. Add the property supportedLocales and assign the locales for German and English ["de", "en"]
    2. Add the property fallbackLocale and assign the English locale "en"

sensormanager/webapp/manifest.json

            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "settings": {
                    "bundleName": "keepcool.sensormanager.i18n.i18n",
                    "supportedLocales": ["de", "en"],
                    "fallbackLocale": "en"
                }
            },

  1. Let's see if your UI5 application is able to start in English and German! Switch to the browser tab with an opened application preview and reload the page. The UI5 application should start in English or in German, depending on your browser language.



  2. UI5 provides a URL parameter to simulate another browser language. Add ?sap-ui-language=de to the URL shown in your browser. UI5 should now start in German regardless of the language you have configured as your browser language.



  3. You can simulate any other language, e.g. English. Add ?sap-ui-language=en to the URL shown in your browser. UI5 should now start in English regardless of the language you have configured as your browser language.



  4. Let's try to start the application in another language, e.g Hindi. Add ?sap-ui-language=hi to the URL shown in your browser. UI5 should now start in English, because you have configured English as your fallback locale.



If you'd like to support Hindi, or any other language of your choice, feel free to repeat the steps described in Exercise 4.2 Add New Languages with your desired language.

Summary

Yay! You've accomplished successfully Exercise 4 - Introduce Localization.

Continue to Exercise 5 - Improve Visualization.

Further Information