Localizing Declaratively Created Dojo Widgets [con't]
The same procedure as described on the previous page can be followed to set the Select Options text.
value is used as the language key and the
text property is accessed
directly to set the display text:
When setting button text, remember that Dojo relies on the
and not the
value, as you might expect. The code below replaces the
contents with that of the localized array element of the same name:
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.
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
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
that you could place within a regular <DIV> tag, but keep in mind that
once initialized, the dialog contents are exposed via the
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
event. It fires after widgitizing occurs, so we have to
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:
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
form validation into the submit buttons
onClick() event. That way, we can call
form.validate() method to perform validation before submitting it.
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
when the string substitution occurs:
Here is a screenshot of our localized YesNoDialog:
You might notice that there's a lot of
forEach() loops in the
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
The next article will describe how to create localized widgets programmatically.
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