Topic
  • 5 replies
  • Latest Post - ‏2012-12-05T20:50:03Z by EDF3_Steven_Creighton
EDF3_Steven_Creighton
43 Posts

Pinned topic dojox.mobile.i18n - Help or an Example?

‏2012-12-03T19:52:30Z |
Hi all,

I wanted to know if anyone has a really simple sample project of Dojo using the mobile module for i18n? Or can someone do the simplest thing possible in a few minutes and share a sample project with me? I'm really struggling to understand how to get this to work and provide the files in the correct manner that the app is expecting. Unfortunately, I don't know enough about Dojo to make sense of the reference guides on this topic, and I can't find ANY examples online. The way in which I've been trying to get it to work is as follows:

  • Adding

    Day Of The Week

    to my home screen on the app
  • putting this in my main js file wlCommonInit method: dojo.require("dojox.mobile.i18n");
var bundle = dojox.mobile.i18n.load("dojox.mobile.tests", "sample"); - I get a 'no method require found' error for this, I trust I'm not defining it correctly

And this is kind of where I'm stuck. The doc (https://dojotoolkit.org/reference-guide/1.8/dojox/mobile/internationalization.html) says that you then need to specify the nls resource to look something like this:

define({
L_DAY_OF_THE_WEEK: "Day of the Week",
L_DAY_SUNDAY: "Sunday"
});

but where do I define this? How would it know where to locate this nls file?

I'm awfully confused and feel a really simple project to have a look at would be extremely helpful if anyone would be so kind. If not, if you could provide any help that would be wonderful.
  • EDF3_Steven_Creighton
    43 Posts

    Re: dojox.mobile.i18n - Help or an Example?

    ‏2012-12-03T19:54:02Z  
    I didn't realise that 'Day Of The Week' above would actually be printed using the html I input. This is a dojox.mobile.Heading - the same that is used on the reference page (https://dojotoolkit.org/reference-guide/1.8/dojox/mobile/internationalization.html)
  • Eric Durocher
    Eric Durocher
    38 Posts

    Re: dojox.mobile.i18n - Help or an Example?

    ‏2012-12-04T17:04:52Z  
    I didn't realise that 'Day Of The Week' above would actually be printed using the html I input. This is a dojox.mobile.Heading - the same that is used on the reference page (https://dojotoolkit.org/reference-guide/1.8/dojox/mobile/internationalization.html)
    Hi,

    Here is a minimal app that shows how to use dojox/mobile/i18n. I attached only the application (i.e. the contents under 'apps') not the whole project, hope this will get through...

    Basic ideas:

    • The nls files containing localized strings are under the 'nls' directory in your app's common directory (so, next to your main HTML).
    • In my example the nls file is called "sample.js", you may choose another name of course.
    • There is one "root" nls file just under nls/, this will be the fallback strings
    • For each supported locale there is a subdirectory containing the translated file e.g. nls/fr/sample.js (Note: the syntax is slightly different in the root and translated files, there is an additional 'root' level in the root file, and also it lists the available locales).
    • You must add the following code to tell dojox/mobile to load your nls files (in bold, what you have to add manually over what Worklight Studio generates).

    require(
    // Set of module identifiers
    [ "dojo", "dojox/mobile/i18n", "dojo/i18n!nls/sample",
    "dojox/mobile/parser", "dojox/mobile/Heading", "dojox/mobile", "dojox/mobile/compat", "dojox/mobile/deviceTheme" ],
    // Callback function, invoked on dependencies evaluation results
    function(dojo , i18n, sampleBundle ) {
    i18n.registerBundle(sampleBundle);
    dojo.ready(function() {
    });
    });

    After that, the nls keys (i.e. property names in the nls files) used in you HTML markup will automatically be replaced by the corresponding values in the nls file. in my example I only have one translated label:

    <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'HeadingLabel'"></h1>

    And the nls files contain:

    "HeadingLabel": "Heading in English"
    ...
    "HeadingLabel": "Titre en francais"

    Note that in my example I forced the locale ( locale: 'fr' ), you would normally not do that but you would let Dojo get the locale of the device automatically.

    Hope that's clear...

    Eric
  • EDF3_Steven_Creighton
    43 Posts

    Re: dojox.mobile.i18n - Help or an Example?

    ‏2012-12-05T16:29:12Z  
    Hi,

    Here is a minimal app that shows how to use dojox/mobile/i18n. I attached only the application (i.e. the contents under 'apps') not the whole project, hope this will get through...

    Basic ideas:

    • The nls files containing localized strings are under the 'nls' directory in your app's common directory (so, next to your main HTML).
    • In my example the nls file is called "sample.js", you may choose another name of course.
    • There is one "root" nls file just under nls/, this will be the fallback strings
    • For each supported locale there is a subdirectory containing the translated file e.g. nls/fr/sample.js (Note: the syntax is slightly different in the root and translated files, there is an additional 'root' level in the root file, and also it lists the available locales).
    • You must add the following code to tell dojox/mobile to load your nls files (in bold, what you have to add manually over what Worklight Studio generates).

    require(
    // Set of module identifiers
    [ "dojo", "dojox/mobile/i18n", "dojo/i18n!nls/sample",
    "dojox/mobile/parser", "dojox/mobile/Heading", "dojox/mobile", "dojox/mobile/compat", "dojox/mobile/deviceTheme" ],
    // Callback function, invoked on dependencies evaluation results
    function(dojo , i18n, sampleBundle ) {
    i18n.registerBundle(sampleBundle);
    dojo.ready(function() {
    });
    });

    After that, the nls keys (i.e. property names in the nls files) used in you HTML markup will automatically be replaced by the corresponding values in the nls file. in my example I only have one translated label:

    <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'HeadingLabel'"></h1>

    And the nls files contain:

    "HeadingLabel": "Heading in English"
    ...
    "HeadingLabel": "Titre en francais"

    Note that in my example I forced the locale ( locale: 'fr' ), you would normally not do that but you would let Dojo get the locale of the device automatically.

    Hope that's clear...

    Eric
    Hi Eric,

    That's absolutely fantastic; excellent described, thank you.

    I have one further question, is it just Dojo labels and such that can be manipulated by i18n or could I override a String using this? If so, how would I go about defining the string that's to be overwritten when different locale is encountered?

    In your example below, HeadingLabel is the key. Are you able to use paragraph id's for the same sort of use? I just wondered how far stretching this is, if it's just limited to Dojo labels, its use may be limited.

    Thanks again,

    Steve
  • Eric Durocher
    Eric Durocher
    38 Posts

    Re: dojox.mobile.i18n - Help or an Example?

    ‏2012-12-05T17:24:13Z  
    Hi Eric,

    That's absolutely fantastic; excellent described, thank you.

    I have one further question, is it just Dojo labels and such that can be manipulated by i18n or could I override a String using this? If so, how would I go about defining the string that's to be overwritten when different locale is encountered?

    In your example below, HeadingLabel is the key. Are you able to use paragraph id's for the same sort of use? I just wondered how far stretching this is, if it's just limited to Dojo labels, its use may be limited.

    Thanks again,

    Steve
    There are actually two different i18n mechanisms, dojo/i18n which just loads bundles of properties according to the locale, and dojox/mobile/i18n, built on top of dojo/i18n, that automatically translates labels/texts in Dojo Mobile widgets.

    The dojox/mobile/i18n automatic feature is limited to labels in Dojo Mobile widgets. Basically each widget calls internally the i18n mechanism to translate its label/text attributes.

    But you can also use the basic dojo/i18n mechanism in your code. You could have any other strings in the sample bundle (or another bundle that you would load in the same way using the dojo/i18n! syntax). Once loaded, the sample is a simple JavaScript object that you can use like this:

    var label = sampleBundle.HeadingLabel; // or any other property that you add in sample.js
    // do whatever you want with the translated label...
    Eric
  • EDF3_Steven_Creighton
    43 Posts

    Re: dojox.mobile.i18n - Help or an Example?

    ‏2012-12-05T20:50:03Z  
    There are actually two different i18n mechanisms, dojo/i18n which just loads bundles of properties according to the locale, and dojox/mobile/i18n, built on top of dojo/i18n, that automatically translates labels/texts in Dojo Mobile widgets.

    The dojox/mobile/i18n automatic feature is limited to labels in Dojo Mobile widgets. Basically each widget calls internally the i18n mechanism to translate its label/text attributes.

    But you can also use the basic dojo/i18n mechanism in your code. You could have any other strings in the sample bundle (or another bundle that you would load in the same way using the dojo/i18n! syntax). Once loaded, the sample is a simple JavaScript object that you can use like this:

    var label = sampleBundle.HeadingLabel; // or any other property that you add in sample.js
    // do whatever you want with the translated label...
    Eric
    Makes sense, thanks for your help Eric!