Multilingual/Translations - best approach?

[squarefan]

I am currently working on a multilingual app. What is the best approach on integrating multiple languages into the app or how are other users/sencha doing it?

this includes messages and texts. I was thinking of using arrays to hold the different labels etc. but if I want to change the language in the app I would have to go through all components and update them manually. Is there an easier or more elegant way to do this?

thanks!

[estesbubba]

We handle all the i18n functionality on the server side using Struts. When the application loads it is fed a map of key/value pairs for all the messages. This map is loaded into a MessageResource singleton and all components use it to look up text. For example:

{
xtype: 'textfield',
label: MessageResources.text('my.label.key')
}

If a user changes the language we reload the entire app which keeps it simple. If you want to change current views on the fly that complicates things.

[mitchellsimoens]

There are many things you can do to do this. Want Ajax loading and dynamic text changing?

https://github.com/mitchellsimoens/Ux.locale.Manager

[fairport]

FWIW ... to achieve this goal, we are using a program called Sisulizer to extract all the required strings out of our Sencha JS code into a Sisulizer project. Get our translations done, then from Sisulizer we export the translations into a single JSON array (via a few steps : XLS > OpenOffice CSV UTF-8 > an Online CSV-to-JSON converter "Mr Data Converter")
Paste the case insensitive sorted JSON Array into the sencha project... looks like this.

function getTranslations() {
    return [
        {"EN":"Abort?", "PT":"Abortar?", "ES":"Abortar?", "RU":"?????????"},
        {"EN":"About", "PT":"Sobre", "ES":"Acerca de", "RU":"? ????."},
        {"EN":"Activities", "PT":"Atividades", "ES":"Actividades", "RU":"??????."},
        {"EN":"Actual", "PT":"Atual", "ES":"Real", "RU":"???????????"}
etc, etc, etc
]
} 

Our array has about 800 records.
At program launch we load the array into a global variable... translationArray = getTranslations();

Throughout the code, each string that we want translated is wrapped in a function called "_ "
e.g. throughout the code there are these types of things... text : _('Abort?')

the _ function looks like this.

function _(msgid) {
   var locale  = global.getLocale() 
    if (!locale || locale == 'EN') {
        return msgid
    }
    else {
        var rec = findIndexByKeyValue(translationArray, 'EN', msgid); // <<< this is a binary searcher 
        if (rec == -1) {
            return msgid
        }
        else {
            return translationArray[rec][locale]; 
        }
    }
} 

Using a binary search it takes usually no more 3-4 attempts to find a string. Very fast.

With this setup, users can change language on-the-fly. using a settings screen with a selectfield of languages... which loads the value retrieved above ( global.getLocale() )

[squarefan]

Hey,

thanks for the input. I thought of doing it similar but your solution is really simple and easy to implement. How do you filter the data via the binary key finder. Are you using a different framework for that (jquery?) or just the generic binary searcher examples re purposed? Would be great if you could post that code too.

Also I don't quite grasp how the on-the-fly change would work. I can of course fire the global.getLocale() via e.g. a selectfield but how would that trigger a repopulation of the Text/Strings of e.g Tabs, formpanels. Messageboxes etc. would of course use the updated string but what about the fixed elements - is there a method that forces panels to reload the text?
Otherwise the app would have to reload before all changed would take affect?

thank you so much for your help!

[fairport]

Yeah... The missing bit
I found this in an old C Textbook... adapted it a little for js

function findIndexByKeyValue(obj, key, value) {
    if (value) {
        var low, high, mid;
        var lcvalue = value.toLowerCase();
        low = 0;
        high = obj.length - 1;
        while (low <= high) {
            mid = parseInt((low + high) / 2);
            //console.log(value+" "+mid);
            if (lcvalue < obj[mid][key].toLowerCase()) {
                high = mid - 1;
            }
            else if (lcvalue > obj[mid][key].toLowerCase()) {
                low = mid + 1;
            }
            else
                return mid;
        }
    }
    return -1;
} 

[fairport]

"...the app would have to reload before all changed would take affect?"

I initially thought the same ...

but, it seems to work fine without doing too much.
We destroy all panels either on deactivate (in some cases) or use an array to manage the persistence & then destruction of panels where we want panels to persist (for performance).
So when the user goes to our settings panel (from the 'Home Page') & changes the language, all (other) panels have either been destroyed or not yet created ... then, as the user goes to any of the other panels they will be created or re-created.
We also have to do tricks in our sqlite proxies to translate any data that is 'hardwired' in our database
We also use _(fieldname.value) inside ItemTpl's to translate disclosure list items.
Different tricks for different situations.
BTW, we store the users language setting in locaStorage, ready for next use

[squarefan]

OK cool thanks. Will try it out.

Do you know of any function that would force a panel to reload/refresh. That would make it so much to implement translations - kind of like the refresh in stores. If not I will look into the destroy option.

[sdruckerfig]

Here's another approach to multilingual in ST2.2 that worked well for me:

http://druckit.wordpress.com/2013/05...ender-monkeys/

[alexmorco]

You can easily create multi language site on WordPress using WordPress WPML plugin, it's quite easier than other platforms.