Localizing Declaratively Created Dojo Widgets | 2

Localizing Declaratively Created Dojo Widgets [con't]

Select Options

The same procedure as described on the previous page can be followed to set the Select Options text. The Option value is used as the language key and the text property is accessed directly to set the display text:

Button Text

When setting button text, remember that Dojo relies on the label attribute, and not the value, as you might expect. The code below replaces the label attribute's contents with that of the localized array element of the same name:

Validation Messages

Dojo has a number of validation-related messages that must be considered if you want to override the defaults. The placeHolder is text that appears in a text field and goes away as soon the control receives the focus. I included code to insert those.

Dojo tooltip validation messages include the promptMessage, invalidMessage, missingMessage, and the rangeMessage. Since the form contains some mandatory fields, we could include code to set the missingMessages. All other validation messages will display localized defaults:

Creating a Localized Dialog Box

At the end of the A Localization Primer for Dojo Dijit and Dojox Controls article, I suggested as an exercise to create a dijit.Dialog with an OK button and set the title, content, and button label to a language other than English. Here is how to do that:

The dialog is really a centered div element and not a true modal window like the JavaScript alert and prompt boxes. The dialog contents can be any object(s) that you could place within a regular <DIV> tag, but keep in mind that once initialized, the dialog contents are exposed via the content attribute, which holds a string. Hence, if you need to change any one component, you'll have to refresh the entire contents:

The above code shows another way to set display text using the Dojo postCreate() event. It fires after widgitizing occurs, so we have to use the set() method instead of attr(), which is the preferred way of setting Dojo widget attributes.

An alternate dialog is displayed when a validation error occurs. It contains two buttons so that the client can cancel out instead of proceeding. It also shows how to hide the dialog before executing other code. We are just opening a fresh page with a localized "Process aborted" message:

</div> 
<div dojoType="dijit.Dialog" id="YesNoDialog" title="Options:">
  <table>
    <tr><td>
        <label id="message">
            <script type="text/javascript">
                document.writeln(nlsStrings['form_is_invalid']);
            </script>
        </label></td><td></td></tr>
    <tr>
      <td colspan="2" style="text-align:center;">
        <button dojoType="dijit.form.Button" type="button">
            <script type="dojo/method" event="postCreate">
                var label = dojo.i18n.getLocalization("Dijit", "common", dojo.local).buttonOk;
                this.set("label", label);
            </script>
            <script type="dojo/method" event="onClick" args="evt">
                dijit.byId("YesNoDialog").hide();
            </script>
        </button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button dojoType="dijit.form.Button" type="button">
             <script type="dojo/method" event="postCreate">
                label = dojo.i18n.getLocalization("Dijit", "common", dojo.local).buttonCancel;
                this.set("label", label);
            </script>
            <script type="dojo/method" event="onClick" args="evt">
                dijit.byId("YesNoDialog").hide();
                var showDoc = 'document.open();'
                            + 'document.writeln("<h2>'+nlsStrings['process_aborted']+'</h2>");'
                            + 'document.close();';
                eval(showDoc);
            </script>
        </button>
      </td>
    </tr>
  </table>
</div>

OnSubmit() Form Validation

As alluded to above, Dojo dialogs are not really modal windows, so they do not prevent subsequent code from executing. That requires extra care if you don't want the script to proceed before the user has had the chance to respond to the dialog. One way to prevent that from happening is to move the onSubmit() form validation into the submit buttons onClick() event. That way, we can call the form.validate() method to perform validation before submitting it. Form.validate() returns true if the form passes validation and false otherwise. We then display the appropriate dialog based on the results:

You'll have to load the nlsStrings array before the addOnLoad() event. Otherwise, the localized value for the "process_aborted" message will be undefined when the string substitution occurs:

Here is a screenshot of our localized YesNoDialog:

Figure 1: Localized YesNoDialog

Going Forward

You might notice that there's a lot of forEach() loops in the addOnLoad() event. I kept every element type separate in order to show how to set each one. It may be more economical to simply loop through all the controls and set them based on their type and/or class. I'll leave that up to you to implement (see the Dijit Registry). You can use the files for the project in this article as a jumping off point.

The next article will describe how to create localized widgets programmatically.

References

Have a suggestion for an article topic? Do you have a product or service that you'd like reviewed? Email it to Rob .

resides in Ottawa, Canada, and is the founder of GravelleConsulting.com. Rob has built systems for Intelligence-related organizations such as Canada Border Services, CSIS as well as for numerous commercial businesses. Rob to receive a free estimate on your software project. Should you hire Rob and his firm, you'll receive 15% off for mentioning that you heard about it here!

In his spare time, Rob has become an accomplished guitar player, and has released several CDs. His former band, Ivory Knight, was rated as one Canada's top hard rock and metal groups by Brave Words magazine (issue #92).

Rob uses and recommends MochaHost, which provides Web hosting at $3.10 per month, 2 lifetime free domains, and 6 months free!

Original: November 16, 2010

[prev]