Dojo Hello World - Multilingual

The inset below shows a modified version of the "Hello World" Dojo example discussed in the previous article. Make a language selection and then click on the "Hello World - Multilingual" button to see the correct greeting dialog.

Dashed yellow lines are used to separate the source code displayed below into blocks. Code blocks starting with a bullet -  •  - have additional information that can be viewed when the mouse hovers over the block.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
•  <style type="text/css">
      @import src="http://o.aolcdn.com/dojo/1.1.1/dijit/themes/tundra/tundra.css";
      @import src="http://o.aolcdn.com/dojo/1.1.1/dijit/themes/soria/soria.css";
      @import src=""http://o.aolcdn.com/dojo/1.1.1/dojo/resources/dojo.css";
      body,html{height:100%;width:100%};
  </style>

↑Dojo makes it very easy to selectively alter the look & feel of widgets. In this example the button widget looks different. This is because it uses CSS styling defined in the soria theme. Needless to say, for this to work the theme must be imported into the document.

    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js" djConfig="parseOnLoad:true">
    </script>
•   <script type="text/javascript">
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Dialog");
      dojo.require("dojo.parser");
      dojo.require("dijit.form.ComboBox");
    </script>

↑A new dojo.require statement is added here to ensure that code for the ComboBox widget is available for use. Module names in Dojo follow an easy to remember naming convention.

    <title>Hello World - Dojo Multilingual</title>
    </head>
    <body class="tundra" style="padding:3px">
•      <select dojoType="dijit.form.ComboBox" id="lang" value="English" ignoreCase="false">
          <option value="English" selected="selected">English</option>
          <option value="French">English</option>
          <option value="German">English</option>
       </select>
A Dijit combobox is used to present the user with a choice of language options in order to display multilingual Hello World messages. Despite the similarity, a Dijit combobox is more than an HTML <select>..</select> block. In fact, not the best of choices for the purposes of the present example since its contents can be edited.
•     <button class="soria" dojoType="dijit.form.Button" id="btn">Hello World - Multilingual
        <script type="dojo/method" event="onClick">
           function showDlg(){
             var d="dlg" + dijit.byId("lang").getValue().charAt(0);
             dijit.byId(d).show()};
           showDlg();
        </script>
     </button>
↑This example uses three Dijit dialogs - one for each language. The dialog id attributes are set to dlgX where X is one of E, F or G. In this code the Dijit combobox widget method getValue is used - after first having located the combobox using dijit.byId - to build the id attribute string for the dialog to be displayed.
• <div dojoType="dijit.Dialog" id="dlgE" title="Dojo Dialogs">
         <label>Hello World</label>
         <button> dojoType="dijit.form.Button" type="submit">OK</button>
       </div>
↑Code for similar dialogs in French and German is not shown here but is available in the sourcecode downloadable from the link below.
    <body>
<html>

Three dialogs - one for each language? Not a very bright idea! It would be more logical to provide one dialog which gets customized on demand using data downloaded from the server. This is discussed next.

Download
▼ Jump To...

◄ ►
Colophon