Results 1 to 10 of 10

Thread: Multilingual/Translations - best approach?

  1. #1

    Default Multilingual/Translations - best approach?

    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!

  2. #2
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    631

    Default

    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.

  3. #3
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,447

    Default

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

    https://github.com/mitchellsimoens/Ux.locale.Manager
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  4. #4
    Sencha Premium User
    Join Date
    Jun 2011
    Location
    Perth, Western Australia
    Posts
    180

    Default

    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.

    PHP Code:
    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":"???????????"}
    etcetcetc
    ]

    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.

    PHP Code:
    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() )

  5. #5

    Default

    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!

  6. #6
    Sencha Premium User
    Join Date
    Jun 2011
    Location
    Perth, Western Australia
    Posts
    180

    Default

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

    PHP Code:
    function findIndexByKeyValue(objkeyvalue) {
        if (
    value) {
            var 
    lowhighmid;
            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;


  7. #7
    Sencha Premium User
    Join Date
    Jun 2011
    Location
    Perth, Western Australia
    Posts
    180

    Default

    "...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

  8. #8

    Default

    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.

  9. #9
    Sencha - Training Team
    Join Date
    Nov 2009
    Location
    Washington, DC
    Posts
    76

    Default

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

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

  10. #10

    Default

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •