Mobile App Localization

IFML Modeling with WebRatio Mobile Platform
122 views Published on May 08, 2015 | Time 7 min
Applies to: 8.0 or higher

A mobile application can be localized in order to show texts using the device language. Localization means translating texts and customizing data patterns according to a specific locale. This lesson shows you how to add several locales to your mobile applications, how to translate texts and set data patterns.


Table of contents

Lesson Overview

The Localization feature permits to define the labels, the messages and the type patterns to translate the mobile app at runtime accordingly to the selected locale. In our example, the user views a screen containing details about an employee. The data in the screen are displayed according to the current device locale and the corresponding format defined for it. This lesson shows you how to localize your mobile application using WebRatio Mobile Platform.

How to Model the Sample Project

Let's suppose you want to create a mobile app showing detailed information about a selected employee. These information must be displayed differently according to the device locale. Let's start by creating a new Mobile Project. In WebRatio Platform, click "File", then "New" and finally "Mobile Project". In the opening dialog write a name for the project, then press the "Finish" button.

Once we have the Mobile Project, we need to define the "Employee" class in the Domain Model. Select the "Class" element from the toolbar and place it in the work area. Let's use the "Edit Class" command to add all the required attributes.

Let's start modeling the user interface for our mobile app. Move to the App View. Click "View Container", select the screen and place it in the work area. Type a name for it, such as "Localization Sample". Now, select the "Details" item from the toolbar section related to "View Containers" and place it in the screen. Type a name for the Details, then define the Data Binding for it: press the "Select" button and choose the "Employee" class in the opening dialog. Then press the "OK" button. Let's remove the Conditional Expression automatically added by WebRatio Platform. In this way the first element in the "Employee" class will be displayed. Expand the "Employee Detail" node in the Outline View, right-click on the Conditional Expression, then select the "Delete" option and confirm the deletion by pressing "Yes".

Select the Details Component and move to its Properties View. Now define set the "Display Attribute" property, then set a sort criteria for the displayed attributes.

How to Configure the Localization

Let's suppose that the mobile application supports two languages: English and Italian. We need to configure these languages in a dedicated dialog.

Now let's define the localization. Press the "Localize" button. WebRatio Platform automatically creates a locale (English) used by default in Mobile Projects. You can easily recognize the default locale since it is marked by a blue triangle. Select the "Locales" item.

Let's start adding the supported languages. Each language corresponds to a locale. Right-click on the "Locales" item, click on "Add Locale" and elect the "Italian" locale. Then press the "OK" button.

Now, let's define for the Italian locale, a different pattern to display dates. Move to the "Patterns" tab, select the "date" types, uncheck the "Device Default" property and change the pattern for the date. In this way, when the mobile app will be run on a device having the language set to "Italian", the date will be displayed according to the pattern we defined. Move back to the "Message" tab.

Let's localize also the label for the attributes we defined in the "Employee" class. Select the "Employee" Class. As you can see, the "Localize" dialog provides a key for each model component having a defined "Name" property in the Mobile Project. We can associate a message for each key. Type a message for the "Birth Date" label and then repeat the operation for each key. Let's localize also the label for the screen and the Details View Component.

Finally let's define the localization for the "English" locale. In this case, we will use the Default Message which corresponds, for each object, to the "Name" property defined in the Mobile Project. Right-click on the "Employee Detail" key and click "Set Default Message". Then confirm your choice. Repeat this operation for all the remaining keys we want to localize. Regarding the date pattern for the "English" locale, let's leave the Device Default pattern. Move to the "Patterns" tab and press the "OK" button.

How to Emulate the Sample Project

Press the "Generate and run" button. Let's change the device language settings. Move to Settings, choose "Language & Input", then select "Languages". Choose "Italiano". Now let's test the mobile app we generated with WebRatio Platform. Open the WebRatio Developer App and press the "Scan QR Code" button to connect with the mobile app on the device. As you can see the information are displayed according to the Italian locale we defined in the Localize section of the Mobile Project. The localized label are displayed in Italian, the pattern used for the date is dd/MM/yyyy.

Let's now restore the "English" locale on the mobile device. Move to Settings, choose "Lingua e immissione", select "Lingua" and then select "English (United States)". Let's check what is the date format set for the mobile device: select "Date & time", select "Choose date format". The Device Default pattern for dates is MM/dd/yyyy.

Let's test again our mobile app with the "English" locale. Open WebRatio Developer App, press the "Write Address" button and then the "Connect" button. As you can see the information are now displayed using the "English" locale. Moreover, the date format used in this case is to the one defined in the mobile device settings. The pattern used for the date is MM/dd/yyyy.