How to localize a Sencha Touch App

Hey guys,

In this post I’m going to show you how to localize an app built in Sencha Touch. Since most mobile apps target a large number of user groups who speak different languages, you need to support multiple languages in your app. And unfortunately, unlike EXT JS, Sencha Touch does not provide built in support for multiple languages. So if you’re building a cross platform app on Sencha Touch, you need to localize it (i.e. provide support for multiple languages) manually. To do that, you need to address three things:

• Framework components
• Dates
• Application specific views

Before you begin though, I would recommend that you make separate files for each language to store their strings. You should identify the strings that will be used in your app and place their translation in their respective files.

For this tutorial, I’ve made two files (as depicted below), one for English and one for Spanish. For better organization of code, I have created a folder named locale in the app folder of my MVC based Sencha touch project and placed the files in it. The project’s name is Demo.


Ext.define('Demo.locale.English', {
statics: {
sampleViewTitle: "Localization Sample",
sampleViewHtml: "This is an example of localization in Sencha Touch. Selected language is ",
languageBtnText: "Change Language",
buttonTextOk: "OK",
buttonTextCancel: "Cancel",
buttonTextDone: "Done",
fullFormMonth0: "January",
fullFormMonth1: "February",
fullFormMonth2: "March",
fullFormMonth3: "April",
fullFormMonth4: "May",
fullFormMonth5: "June",
fullFormMonth6: "July",
fullFormMonth7: "August",
fullFormMonth8: "September",
fullFormMonth9: "October",
fullFormMonth10: "November",
fullFormMonth11: "December"
}
});



Ext.define('Demo.locale.Spanish', {
statics: {
sampleViewTitle: "Localisation Échantillon",
sampleViewHtml: "Este es un ejemplo de la localización en Sencha Touch. De idioma es ",
languageBtnText: "Cambiar idioma",
buttonTextOk: "OK",
buttonTextCancel: "Cancelar",
buttonTextDone: "Hecho",
fullFormMonth0: "Enero",
fullFormMonth1: "Febrero",
fullFormMonth2: "Marzo",
fullFormMonth3: "Abril",
fullFormMonth4: "Mayo",
fullFormMonth5: "Junio",
fullFormMonth6: "Julio",
fullFormMonth7: "Agosto",
fullFormMonth8: "Septiembre",
fullFormMonth9: "Octubre",
fullFormMonth10: "Noviembre",
fullFormMonth11: "Diciembre"
}
});


The above files also need to be added in the project’s dependencies in order to be used as shown below.


//app.js file
requires: [
'Demo.locale.English', 'Demo.locale.Spanish', 'Demo.util.Localization'
],


Framework Components

Now that the strings are setup, let’s move to the actual localization process. Lists, DataView, PullRefresh and MessageBox are some examples of Framework components. For localization, we’ll use the Ext.apply method, which is very useful for copying properties of one object to another. Below is an example, of the usage of this method, for localizing the OK and Cancel buttons of the Prompt Message box in Spanish (as depicted below). You can use this example to localize other framework in a similar manner.


//Demo.util.Localization.language has the currently selected language
var language = Demo.util.Localization.language;

Ext.apply(Ext.MessageBox, {
OKCANCEL: [
{text : Demo.locale[language].buttonTextCancel},
{text : Demo.locale[language].buttonTextOk}
]
});

//Display a prompt, refer figure 1.1
Ext.Msg.prompt('Introduzca su nombre');


Localizing Dates

Some Sencha Touch components and functions are used to display dates and days in the application. The most commonly used ones are the date picker control and the Ext.Date.format function. The simplest solution for localizing dates, which is also mentioned in Sencha Touch documentation, is to override the Ext.DateExtras class.

The code snippet below depicts an example for handling the localization of months. You can use the Ext.Date.getShortMonthName class for short form of months, the Ext.Date.dayNames class for day names and so forth. The complete class can be found here.


//Demo.util.Localization.language has the currently selected language
var language = Demo.util.Localization.language;

for (var i = 0; i < 12; i++) { Ext.Date.monthNames[i] = Demo.locale[language]['fullFormMonth' + [i].toString()]; }

Now if you use Ext.Date.format and the date picker control, you’ll use the following code and will get the result depicted in the figure below.

Application specific views

In order to achieve localization of app views, you must assign properties dynamically in the view that you wish to localization. For example, let’s say I have added items in my sample view dynamically in the initialize function (as depicted below).


Ext.define('Demo.view.Main', {
extend: 'Ext.Panel',
xtype: 'main',
config: {

styleHtmlContent: true
},
initialize: function() {
//Demo.util.Localization.language has the currently selected language
var language = Demo.util.Localization.language,
items = [
{
xtype: 'titlebar',
docked: 'top',
title: Demo.locale[language].sampleViewTitle
},
{
xtype: 'container',
height: '120px',
style: 'text-align: center',
html: '

' + Ext.Date.format(new Date(), 'F j, Y') + '

' +
Demo.locale[language].sampleViewHtml + language + '.'
},
{
xtype: 'button',
text: Demo.locale[language].languageBtnText,
id: 'changeLocale'
}
];

this.add(items);
this.callParent();
}
});


Wrapping-up

In order to localize an app developed in Sencha Touch you need to perform the following:

• Make separate files of strings for every language your app supports, including English
• Use the Ext.apply method to update object properties (View, Component, etc.)
• Override the Ext.DateExtras class to localize dates
• Assign items dynamically in your views



Explore our blog




ABOUT FOLIO3

As a leading mobile app development company (iPhone, Android, Windows Phone, HTML5 app development), Folio3 specializes in native app development services and cross platform mobile app development services for the iPhone and iPad. We also offer extensive mobile app testing and QA services. If you have a mobile app idea that you’d like to discuss please or would like to know more about our iPhone app development services, please Contact Us. Learn more about our iPhone, Android and Windows Phone app development services.

Blog Post