Parent | Child | Previous | Next
 

MobileAppFramework_Client-side-Language_Translation

Description

This example shows how to localize an application client-side at run-time, allowing you to build multi-lingual offline-enabled mobile applications. The same technique can also be applied to web applications.

Discussion

Alpha Anywhere's Language and Text Dictionary tags can be used to add multi-language support to an application. However, both Language tags and Text Dictionary tags are server-side features -- the language translation is done on the server before the content is sent to the user's browser or mobile device. In Cordova application, this translation will not occur prior to the app being installed on the user's device. This means Language tags and Text Dictionary tags cannot be used to localize a Cordova application.

In a multi-lingual Cordova application, it is necessary to translate the application client-side using client-side. This UX template demonstrates how localization can be done on the client-side. The component contains a function called doTranslate and a JSON object that contains the language definitions. The object and the function (shown below) are defined in the Javascript functions pane of the UX Component.

function doTranslate(language) { 
    if(typeof _translations == 'undefined') return false;
    var arr = document.getElementsByClassName('_language');
    var ele = '';
    var id = '';
    var key = '';
    for(var i = 0; i < arr.length; i++) { 
        ele = arr[i];
        id = ele.id;
        key = id.split('_language_')[1];
        if(typeof _translations[key] == 'undefined' || _translations[key] == null) return false;
        var string = _translations[key][language];
        if(typeof string != 'undefined' && string != null && string != '') $(id).innerHTML = string;
    }
}

var _translations = { 
    "LASTNAME" : {
        "english" : 'Last Name',
        "french" : 'Nom de famille',
        "german" : 'Familienname',
        "spanish" : 'Apellido'
    },
    "FIRSTNAME" : { 
        "english" : 'First Name',
        "french" : 'Pr&#0233;nom',
        "german" : 'Vorname',
        "spanish" : 'Nombre de pila'
    },
    "CITY" : {
        "english" : 'City',
        "french" : 'Ville',
        "german" : 'Stadt',
        "spanish" : 'Ciudad'

     }
}

A DropdownBox in the sample application is used to select the language to display:

images/mobLang1.png

When the selected language changes, the control's onChange event calls the doTranslate function. The function then looks up the translated value of the string and replaces the string with the translated text.

images/mobLang2.png

If a translation is not found for a particular string, the string is not replaced. For example, when you select Italian from the DropdownBox control, no strings are replaced. This is because there are no translation definitions for Italian.

images/mobLang3.png

While this example uses a statically defined JSON object to define the translations, it could be modified to use translations stored in a SQLite database on the device or downloaded and stored in the Client-side Data Cache. See PhoneGap - SQLite Actions and Client-side Data Cache Actions to learn more about these features.

See Also