• How to Use Multiple Languages in a Hybrid Mobile App

How to Use Multiple Languages in a Hybrid Mobile App

Environment

Service Code (AppBuilder), Views, Telerik Platform General
Mobile development type Hybrid (Apache Cordova app)

Description

By adding a support for more languages than the default language of your app you can make it usable for more users.

The Views service in Telerik Platform already provides a way to do so in the generated code for newly-created apps. The procedure for doing so in a project generated via the Views service is explained in Implement Multi-Lingual Support.

Refer to the solution below if you would like to update your existing app with internationalization support and/or use an approach outside of the Views service.

Solution

Consult the steps below for an example approach how to implement an internationalization support for your hybrid app built with Telerik Platform and Kendo Hybrid UI.

  1. Create a variable (or a file) that contains a mapping for the static strings and texts used in your app for the different languages you would like to support. For instance, an object containing a few strings to be used for either English or Bulgarian language support in the app:

    app.strings = {
        en: {
            name: "English",
            homeHeader: "Welcome",
            homeTitle: "Home",
            homeLangButton: "Switch Language"
        },
        bg: {
            name: "Bulgarian",
            homeHeader: "Добре дошли",
            homeTitle: "Начало",
            homeLangButton: "Смени езика"
        }
    };
    
  2. Iterate over your application views and set one of the language sets as default. You can also use the changeLanguage function to allow the user switching the language.

    'use strict';
    
    app.home = kendo.observable({
        onShow: function() {},
        afterShow: function () { },
        lang: app.strings.en,
        changeLanguage: function () {
            var currentLanguage = this.get("lang").name;
    
            if (currentLanguage == "English") {
                this.set("lang", app.strings.bg);
            }
            else {
                this.set("lang", app.strings.en);
            }
        }
    });
    
  3. Make sure to bind the required elements in your views to the provided string values. For example, the following markup is binding the header title, a header of the page and a button to the localized strings.

    <div data-role="view" data-layout="main" data-model="app.home" 
        data-init="app.home.onInit" data-show="app.home.onShow" data-after-show="app.home.afterShow" 
        id="homeScreen" class="screen">
        <header data-role="header">
            <div data-role="navbar">
                <h2 data-bind="text: lang.homeTitle"></h2>
            </div>
        </header>
        <h2 data-bind="text:lang.homeHeader"></h2>
        <a data-role="button" data-bind="events: {click: changeLanguage}">
            <span data-bind="text: lang.homeLangButton"></span>
        </a>
    </div>
    

Notes

You can also use the methods of the Cordova Globalization Core Plugin to detect the device culture. According to the detected device language set programmatically which set of strings to be used in your application.

See Also

Start a free trial Request a demo
Contact us: +1-888-365-2779
sales@telerik.com
Copyright © 2016-2017, Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.