CODEWITHSUNDEEP
javascriptdojo
fneron
fneron

Reputation: 1087

Simple Dojo i18n implementation

I just recently started learning dojo for personnal use and for experience. So far, I have been doing the tutorials on various dojo stuff (on their website and over the web) and I have been "struggling" with implementing a concrete infrastructure for more complex application (or good practice). I have find one interesting project (https://github.com/csnover/dojo-boilerplate) and article (http://www.sitepen.com/blog/2011/05/04/what-is-the-best-way-to-start-a-dojo-project/). With that, I think my first problem is resolved. Correct me, if I'm wrong.

I feel like the tutorial on i18n is missing concrete implementation. For example, I would like to add i18n on the dialog box from the boilerplate project. 

define([ 'dojo/_base/declare', 'dijit/Dialog' ], function (declare, Dialog) {
    return declare(Dialog, {
        title: 'Hello World',
        content: 'Loaded successfully!'
    });
});

Here, My project hierarchy is:

enter image description here

AS you can see, I create my own nls folder for my application and store for different (lang-locale) my "strings". Now, how do I specify the locale content on title or content for my dialog code above. I have done recently i18n on ruby on rails (with the concept of MVC) and depending on my view I had to create for this specific view a file for localization (.yml). I know that RoR and Dojo are really not the same thing, but does a widget (could be compared to my view) and so each widget needs to have their own localization... I have come accross 2 tutorials, first and second. Maybe, I'm reading it all wrong.

I have something like this right now, but it doesn't work.. What am I missing?

dojo.requireLocalization("app", "dialog");

define([ 'dojo/_base/declare', 'dijit/i18n' 'dijit/Dialog' ], function (declare, Dialog) {
    i18n: dojo.i18n.getLocalization("app", "dialog"),
    return declare(Dialog, {
        title: i18n.title,
        content: i18n.content
    });
});

Thank you.

EDIT:

define([ 'dojo/_base/declare', 'dojo/i18n!app/nls/labels', 'dijit/Dialog' ], function (declare, labels, Dialog) {
    return declare(Dialog, {
        title: labels.title,
        content: labels.content
    });
});

I have no error now, but my labels.title is empty...?

EDIT(1): I forgot to add the root on the default nls folder.

Upvotes: 4

Views: 3326

Answers (1)

Craig Swing
Craig Swing

Reputation: 8162

Here's an example of how I have built some dialogs with localization.

directory structure

myApp\
  dialog\
    myDialog.js
    nls\
      dialog.js
      fr-ca\
        dialog.js

myDialog.js

define("myApp/dialog/myDialog", [
  "dojo", "dijit/Dialog", "dojo/i18n", 
  "dojo/i18n!./nls/dialog" // this is a relative path to the 
                           // dialog.js from myDialog.js
], function(dojo, Dialog) {

  var i18n = dojo.i18n.getLocalization(
    "myApp.dialog",  // this is the directory path to the nls folder
    "dialog"         // this is the file
  );       

  return declare(Dialog, {
    title:    i18n.title,
    content:  i18n.content
  });
});

Upvotes: 4

Related Questions