Telerik
/
Platform-Knowledge-Base
зеркало из https://github.com/telerik/Platform-Knowledge-Base.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность
Platform-Knowledge-Base/how-to/how-to-use-multiple-languag...

4.4 KiB
Исходник Ответственный История

title description type page_title slug position tags teampulseid ticketid pitsid
How to Use Multiple Languages in a Hybrid Mobile App An approach to localize a hybrid app in different languages based on user selection for preferred language. how-to How to Prepare a Hybrid App Content for Internationalization and Localization in Multiple Languages how-to-use-multiple-languages kendo, localization, internationalization, html 1065279, 1103587, 1081447

Environment

Service {{site.ab-s}} ({{site.ab}}), {{site.sb-s}}, {{site.tp}} General
Feature Localization, Internationalization
Mobile development type Hybrid ({{site.ac}} 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 {{site.sb-s}} service in {{site.tp}} 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 {{site.sb-s}} service is explained in Implement Multi-Lingual Support.

Refer to the solution below if you would like to update your existing app with intebrationalization support and/or use an approach outside of the {{site.sb-s}} service.

Solution

Consult the steps below for an example approach how to implement an internationalization support for your hybrid app built with {{site.tp}} 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