Topic
IC4NOTICE: developerWorks Community will be offline May 29-30, 2015 while we upgrade to the latest version of IBM Connections. For more information, read our upgrade FAQ.
5 replies Latest Post - ‏2012-12-05T20:50:03Z by EDF3_Steven_Creighton
EDF3_Steven_Creighton
43 Posts
ACCEPTED ANSWER

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
    ACCEPTED ANSWER

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

    ‏2012-12-03T19:54:02Z  in response to EDF3_Steven_Creighton
    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
      ACCEPTED ANSWER

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

      ‏2012-12-04T17:04:52Z  in response to EDF3_Steven_Creighton
      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
        ACCEPTED ANSWER

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

        ‏2012-12-05T16:29:12Z  in response to Eric Durocher
        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
          ACCEPTED ANSWER

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

          ‏2012-12-05T17:24:13Z  in response to EDF3_Steven_Creighton
          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
            ACCEPTED ANSWER

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

            ‏2012-12-05T20:50:03Z  in response to Eric Durocher
            Makes sense, thanks for your help Eric!