Internationalization(i18n)



Globalization and localization
It is a way, how a computer software could be adapted to different languages. Internationalization(i18n) is actually the process of designing a software so that it can be adapted to different languages across the world, here 18 stands for number of alphabets between I & n.  Localization is the process of adapting internationalized software for a particular region or language by adding locale-specific components and translating text.

Here's my video in youtube, explaining the concept of Globalization


We use internationalization and localization in our Sapui5 application for replacing the hard coded text from the application. It is one of the best practices of SAP to use i18n for hard coded texts.  Generally we use Resource Model for defining, since it is one way binding (sap.ui.model.resource.ResourceModel)  
The i18n model is set up in the Component's initialization section, or it could also be defined in the manifest.json file.
//set i18n model
var rootPath = jQuery.sap.getModulePath("sap.ui.demo.tdg");

Var i18nModel = newsap.ui.model.resource.ResourceModel({
bundleUrl : "i18n/messageBundle.properties"
});
oView.setModel(i18nModel, "i18n"
);
Now create a folder named i18n in the project directory and maintain i18n files according to the languages.
The configuration specifies the relative location of the resource bundle. This is made absolute (in relation to our app's namespace) by use of the jQuery.sap.getModulePath utility function, and then used to create the named model, before it is set on the component.
Now in the i18n.properties file, enter all the hard coded text that has been used in the application. And bind the data using the i18n model
Example
<Table id="idOrderTable">

      <columns>
            <Column width="8em">
                  <Text text="{i18n>s3OrderColumnSales}" />
            </Column>
            <Column>
                  <Text text="{i18n>s3OrderColumnDelivery}" />
            </Column>
            <Column>
                  <Text text="{i18n>s3OrderColumnOrder}" />
            </Column>
            <Column>
                  <Text text="{i18n>s3OrderColumnRequested}" />
            </Column>
            <Column>
                  <Text text="{i18n>s3OderColumnAmount}" />
            </Column>
      </columns>
</Table>

Here we have used a table and, the column text name is a hard coded value, hence we are using i18n model for the same.  Now we have to maintain the same fields in the i18n.properties file.
s3OrderColumnSales=Sales Order
s3OrderColumnDelivery=Delivery Status
s3OrderColumnOrder=Order Date
s3OrderColumnRequested=Requested Date
s3OderColumnAmount=Order Amount
Hence this is done, now to serve the real purpose of i18n file, another file will be created in the i18n folder for the german language. Name it as i18n_DE.properties


Now, maintain the same field names in this particular file.
s3OrderColumnSales=Kundenauftrag
s3OrderColumnDelivery=Lieferstatus
s3OrderColumnOrder=Auftragsdatum
s3OrderColumnRequested=Wunschtermin
s3OderColumnAmount=Bestellbetrag
Now to see the output, in german language, just add DE instead of EN in the application url. Add ?sap-ui-language=DE after the url.
Suppose the default url is http://localhost:42067/demo_i18n/index.html just add ?sap-ui-language=DE. Now the url would be  http://localhost:42067/demo_i18n/index.html?sap-ui-language=DE
Output
 
Previous
Next Post »