Localizing Sencha Touch application

Title: Localizing a Sencha Touch application

Summary: In this article we will see how to localize our Sencha Touch based application. There are two aspects to this. One, we will see how to localize the Sencha Touch framework related messages, formats, etc. Second, we will see how to localize our application specific messages and formats.

Problem Statement: Sencha Touch, as compared to ExtJS framework, does not come with out-of-the-box support for different locales. However, in an application, localization is considered as one of the important requirements. In this article, we would talk about the things that we will have to do to localize our application in different languages.

For simplicity, we will exclude the localization of the data as it is usually the offering of the data source and has nothing to do with Sencha Touch.

Prerequisites: Working knowledge of JavaScript, HTML, CSS, and Sencha Touch.

System Requirements: Sencha Touch framework. You may download the framework from here.

How to do it:

1. Create project folder: Extract the Sencha Touch framework to a folder of your choice, say, c:\touchworkspace (will refer this as ${TOUCH_WORKSPACE}). We will refer the extracted location as ${TOUCH_FRAMEWORK}. Create a project folder, say – localization, inside ${TOUCH_WORKSPACE}
2. Create locale folder inside the project folder where we will be creating our locale specific files to localize Sencha Touch framework.
3. Create touch-in_HI.js inside the locale folder to start localizing the framework for Hindi language, which is the first language in India
4. Sencha Touch offers components(list, form, index bar, etc.) and various classes (Validations, Model, etc.), which have got properties that must be localized to build a truly international application. In our approach, we will use the property overriding to localize the Sencha Touch framework. And for this purpose, we will use Ext.apply method given by the framework. To localize the complete framework, we will have to go through the complete source code to get the list of properties that need to be overridden. However, for demonstration purpose, we will see how to localize the default label of the OK button, which is offered by Ext.MessageBox class. First, let us find the property that we need to override. After looking at the code, we found that it is the text property on the Ext.MessageBox OK button that we will have to override to translate it into Hindi. So, we will add the following code to touch-in_HI.js file:

   Ext.apply(Ext.MessageBox.OK,   {text : 'ठीक है'});

   This will ensure that the label is now translated into Hindi, if touch-in_HI.js file is used in the application.

5. The previous step will take care of localizing the framework. However, in an application, we will also have application specific labels, messages, formats, etc. And it is this aspect, as well, that we need to take care of. E.g. the following image shows how our application looks in the default language, which is english:

   In the above form, we have various field labels, button text and messages. As a guideline for building an enterprise application, I assume that we have already externalized all these literals to a separate file, say app-en_US.js, as shown below:

   Messages = {
   WELCOME: 'Hello World',
   PERSONAL_INFO: 'Personal Information',
   NAME: 'Name',
   PASSWORD: 'Password',
   RE_PASSWORD: 'Re-enter Password',
   EMAIL: 'E-mail',
   PERSONAL_INST: 'Please enter the information above',
   RESET: 'Reset',
   SAVE: 'Save',
   SAVE_MSG: 'In real implementation, this will be saved!',
   INFO: 'Info'
   };

   And, we have used these constant literals in our application, as shown below:

   Ext.setup({
       onReady: function() {
   
           var form;
   
           var formBase = {
               scroll: 'vertical',
               items: [{
                       xtype: 'fieldset',
                       title: Messages.PERSONAL_INFO,
                       instructions: Messages.PERSONAL_INST,
                       defaults: {
                           required: true,
                           labelAlign: 'left',
                           labelWidth: '40%'
                       },
                       items: [
                       {
                           xtype: 'textfield',
                           name : 'name',
                           label: Messages.NAME,
                           useClearIcon: true,
                           autoCapitalize : false
                       }, {
                           xtype: 'passwordfield',
                           name : 'password',
                           label: Messages.PASSWORD,
                           useClearIcon: false
                       }, {
                           xtype: 'passwordfield',
                           name : 'reenter',
                           label: Messages.RE_PASSWORD,
                           useClearIcon: true
                       }, {
                           xtype: 'emailfield',
                           name : 'email',
                           label: Messages.EMAIL,
                           placeHolder: 'you@sencha.com',
                           useClearIcon: true
                       }]
                   }
               ],
               listeners : {
                   submit : function(form, result){
                       console.log('success', Ext.toArray(arguments));
                   },
                   exception : function(form, result){
                       console.log('failure', Ext.toArray(arguments));
                   }
               },
   
               dockedItems: [
                   {
                       xtype: 'toolbar',
                       dock: 'bottom',
                       items: [
                           {
                               text: Messages.RESET,
                               handler: function() {
                                   form.reset();
                               }
                           },
                           {
                               text: Messages.SAVE,
                               ui: 'confirm',
                               handler: function() {
                               	Ext.Msg.alert(Messages.INFO, Messages.SAVE_MSG);
                               }
                           }
                       ]
                   }
               ]
           };
   
           if (Ext.is.Phone) {
               formBase.fullscreen = true;
           } else {
               Ext.apply(formBase, {
                   autoRender: true,
                   floating: true,
                   modal: true,
                   centered: true,
                   hideOnMaskTap: false,
                   height: 385,
                   width: 480
               });
           }
   
           form = new Ext.form.FormPanel(formBase);
           form.show();
       }
   });

   You may save the above code in a file by name app.js.

   You may have your own custom components or classes defined where the default texts/formats/etc. are defined as part of the class. In that case, you may use the Ext.apply mechanism to override the desired properties.

   Now, to localize the application in Hindi, we will create a app-in_HI.js and add the translated text to it as shown below:

   Messages = {
   WELCOME: 'हेलो विश्व!! यह स्थानीयकरण का एक नमूना उदाहरण है!',
   PERSONAL_INFO: 'व्यक्तिगत जानकारी',
   NAME: 'नाम',
   PASSWORD: 'पासवर्ड',
   RE_PASSWORD: 'पुनः दर्ज करें पासवर्ड',
   EMAIL: 'ईमेल',
   PERSONAL_INST: 'कृपया उपरोक्त जानकारी दर्ज करें',
   RESET: 'रीसेट करें',
   SAVE: 'संचय',
   SAVE_MSG: 'वास्तविक कार्यान्वयन में यह बच जाएगा!',
   INFO: 'जानकारी'
   };

6. Now that we have created the various JS files with the localized information, it is the time to see them in action. Say, now we want our form to be displayed in Hindi. To accomplish this, we will create an index.html file and the following code to it:

   <html>
       <head>
           <title>Sencha Touch Localization</title>
   		<link rel="stylesheet" href="../sencha-touch/resources/css/sencha-touch.css" type="text/css">
   		<script type="text/javascript" src="../sencha-touch/sencha-touch-debug.js"></script>
                   <script type="text/javascript" src="touch-in_HI.js"></script>
   		<script type="text/javascript" src="app-in_HI.js"></script>
   		<script type="text/javascript" src="app.js"></script>
       </head>
       <body>
       </body>
   </html>

7. Now access the index.html in the browser, which supports HTML5 – say, Chrome. You shall see the labels and messages translated into Hindi, as shown below:

Similarly, you may translate the framework and you application to any language or your choice as I have done it for Bangla (language spoken in India and Bangladesh), as shown below:

Now, based on your deployment strategy, you will have to handle the inclusion of the locale specific files. Following are three different deployment strategies:

1. English only: In this case, the application is deployed with support for English language, only. If this is the case, we don’t have to do anything for framework localization. We only have to ensure that application specific locale file is included, which is in English. Note that the default english language supported by the framework is US english.
2. Non-english but single locale: In this strategy, the application is deployed with a single non-english locale support, e.g. Spanish. In this case, we will have to include the framework and application files, which contain the Spanish localization, in our index.html as we have shown in this article for Hindi.
3. Multiple locales: In this strategy, the application is deployed with support for multiple locales and it shall switch to the appropriate locale based on certain property in the application, e.g. language code selected in user preference. In this case, our application shall derive which locale files need to be loaded based on the application property and load those files, dynamically. This is done by creating a script tag and append it to the head element on the document.

This shall pretty mush set us with the localization.

About Ajit Kumar

Co-founder of Walking Tree, Speaker, Sencha Trainer, Author of Sencha Charts Essentials, Sencha Touch Cookbook, Sencha MVC Architecture, and ADempiere Cookbook.

‹ ExtJS Grid with header action

Financial Reporting in Adempiere ›

Tagged with: Internationalization, Localization, Localizing Sencha Touch, Multiple Locale support, Translate Mobile Apps
Posted in Sencha Touch