Use Dojo Toolkit to add internationalization and localization capabilities to Web applications

Brief introduction

Dojo Toolkit is a powerful JavaScript library that enables WEB developers to create rich Internet applications (Rich Internet applications, RIA) with minimal development time and effort, using object-oriented widget widgets. This library contains 4 packages, namely Dojo (CORE), Dijit (UI framework), Dojox (Dojo extension), and util. You can use the functionality provided by the toolkit as is, or you can extend the toolkit and create your own widget. The features provided in the toolkit include DOM operations, using AJAX development, events, data storage, and so on.

The Dijit (Dojo Widget) package is Dojo's own UI library, containing a set of dojo classes that enable you to create a rich and powerful Cross-platform Web 2.0 interface with minimal effort. These Dojo widget or Dijit are supported by easy to operate topics. For example, the Dijit in this package includes buttons, text fields, editors, progress bars, and so on.

One of the advantages of Dojo is its support for internationalization and localization, which is designed to make this functionality a standard feature through dojo/i18n, dojo/i18n actually provides two different features:

Resource bundle, which contains a translated resource pool to be used on the interface.

A set of built-in features for formatting numbers, currencies, dates, and so on, based on Unicode Cldr, for a specified region.

You'll also see an example of a localized identification date and learn how to create custom widgets and other basic features that Dojo provides. With the Dojo Toolkit, you can ensure that content is decoupled from development analysis and that it is simple to manage the current content. Also, adding a new locale does not require any code changes.

This article explores the internationalization features offered in Dojo by developing a simple marketing web page for a fictitious company, the Coffee House. The website will be available in two languages: American English and French. After you've learned this article, you'll learn how to build a Web page that can be easily localized using Dojo Toolkit.

What is a resource bundle?

A resource bundle contains objects that represent a specific region. For example, if your application requires a locale-specific resource, such as a string, the application loads it from the appropriate resource bundle corresponding to the specified region. All locale-specific resources are isolated from the resource bundle to ensure that code development is decoupled from content management and localization efforts.

Build the Coffee House website

Figure 1 shows the sample Web site that you will create in this article, followed by a description of the page element.

Figure 1. Website design

The link in the upper right corner

To define the preferred language, users will see two links to U.S. English (en-us) and French (FR) in the upper-right corner. Clicking on either link sets the area of Dojo (adds a new parameter to the URL to indicate the current region) and reloads the entire page with the parameters in the URL that represent the selected region. You can use this technique to help Dojo identify the current locale to load pages with the selected language.

Main part

This section will contain content (text, images, links, and so on), very similar to a container containing all the pages of a Web site. The page will be loaded asynchronously. The 3 buttons displayed help users navigate between different pages of the site. You can modify these buttons to create your favorite navigation menu. When you click a different button, the widget asynchronously loads the corresponding HTML page. In this case, these buttons take the user to a different page that presents information about the different products of the Coffee House (coffee, tea and juice).