Phonegap/Sencha Language Localization

Question

The Problem:
I'm about to implement language localization to an already very large ipad application that was built using sencha touch wrapped in phonegap. I have the english and spanish translations in json files.

What I'm Planning on Doing:
I plan to load the json files into a sencha touch store, creating a global object. Then in each place where I call text that is displayed, i will replace the text with a call to the global object.

My question(s):

1. Is there an easier way to implement language localization with my setup?

2. Will I run into issues with native sencha stuff (like datepickers)?

3. When loading/reloading language json files, will I have performance issues (require a webview reload?, sencha object resizing issues, etc)

---

edit 1 : Useful Related Info:
For those going down this road, it quickly becomes useful to write a simple phonegap plugin to get the ipad/iphone device's language setting into your javascript. This requires a plugin, which will look something like this:
Javascript :
part 1:

PhoneGap.exec("PixFileDownload.getSystemLanguage");

part 2(callback Function):

setLanguage(returnedLanguage)
{
   GlobalVar.CurrentLanguage = returnedLanguage; //GloablVar.CurrentLanguage already defined
}

Objective C:

-(void)getSystemLanguage:(NSMutableArray*)paramArray withDict:(NSMutableDictionary*)options
{
    /*Plugin Details
    PhoneGap.exec("PixFileDownload.getSystemLanguage");
    Returns Language Code
    */

    NSUserDefaults* defs = [NSUserDefaults standardUserDefaults];
    NSArray* languages = [defs objectForKey:@"AppleLanguages"];
    NSString *language = [languages objectAtIndex:0];
    NSLog(@"####### This is the language code%@",language);
    NSString  *jsCallBack;
    jsCallBack = [NSString stringWithFormat:@"setLanguage('%@');",language];    
[self.webView stringByEvaluatingJavaScriptFromString:jsCallBack];

}

---

edit 2: character encoding When adding additional language characters to a sencha project (or any webview phonegap project), ensure that you have the proper encoding specified in the index file. This is the tag i needed.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Answer 1

I've finished this language localization plugin. It's not amazing, but it worked better than I originally speculated. Here are the short answers to each of the questions.

1- Is there an easier way to implement language localization with my setup?

Not that i'm aware of. The comment by Stuart provided this link Sencha-touch localization. Use a store or a global JSON object? which had some good information on one way that you can use class overrides. I didn't like this approach, because it spread my language translations into different classes. But certainly, if you are doing something simple, or you want something that could be more powerful, perhaps you should investigate that.

2- Will I run into issues with native sencha stuff (like datepickers)?

I ended up specifically leaving "datepickers" in english for now. But everything else was really relatively easy to customize. Almost every graphical UI element can have it's text altered.

3- When loading/reloading language json files, will I have performance issues (require a webview reload?, sencha object resizing issues, etc).

The method that i employed (see below) worked exceptionally well in regards to performance. The one issue that you have is right when you switch the languages, you need that specific page to reload. Sencha handled resizing without any flaws, except where I had been foolish and statically set sizes.

Some of what I did was described in edits to the question. Here is a detailed overview of my solution. (warning, it's not the most elegant solution.)

Instead of using a pure JSON file, I ended up just using a javascript function. This isn't the greatest solution because it requires some minimal maintenance, but JSON parsing with phonegap/sencha isn't the best. (I get JSON files from translater's, and quickly paste into the javascript file. Takes around 2 minutes, see further explanation below).

Language.js

function setLanguage(language)
{

    if(language == "en")
    {
        //console.log("inside if Language == en");
        GlobalLanguage.CurrentLanguage = language;

        GlobalLanguage.ID = {"glossary": [
        {   
            //CONVERTED JSON
            about : 'About',
            checking_for_updates : 'Checking for updates...(This may take a few minutes.)'
            //Any additional translations

        }
        ]};
    }
    if (language == "es"){
        //console.log("inside language == es");
        GlobalLanguage.CurrentLanguage = language;
        GlobalLanguage.ID = {"glossary": [
            {
            //CONVERTED JSON
            about : 'Acerca de ',
            checking_for_updates : 'Verificando actualizaciones... (Capas que demore algunos minutos).'
            //Any additional translations

        }]};
    }
        if (language == "pt"){
        //console.log("inside language == pt");
        GlobalLanguage.CurrentLanguage = language;
        GlobalLanguage.ID = {"glossary": [
            {
             //CONVERTED JSON
              about : 'Sobre',
              checking_for_updates : 'Verificando se há atualizações... (pode demorar alguns minutos.)'
              //Any additional translations

        }]};
    }
}

As you can see, this file allows for 3 languages (Portugese, English, and Spanish). After setting the language, you could access each localized string anywhere in your object. For example, if you need to access the word "about" simply use:

GlobalLanguage.ID.glossary[0]["about"]

This will access the GlobalLanguage object which will have whatever language loaded into the properties. So throughout your project, you could have these calls. However, I'd recommend taking it one step further

function langSay(languageIdentifier){


   // console.log("inside langSay");

    if(!GlobalLanguage.ID.glossary[0][languageIdentifier]){
        return "[! LANGUAGE EXCEPTION !]";
    }
    else{
        return GlobalLanguage.ID.glossary[0][languageIdentifier];
    }
}

This protects you from having language exceptions and having your program crash without knowing where (you may have hundreds or thousands of properties being set in that language.js file). So now simply :

langSay("about")

One additional note about formatting from JSON. The format you want your language files in is:

languageIdentifier : 'Translation',
languageIdentifier : 'Translation',
languageIdentifier : 'Translation'

I used Excel for the formatting. Also the languageIdentifiers are unique identifiers without spaces. I recommend just using Excel to format first 3 to 4 words word1_word2_word3_word4 of the english translation.

word1_word2_word3 : 'word1 word2 word3'

Hope this helps you out! I'd be happy to respond to any questions