Dojo Hello World - Smarter Multilingual

The inset below shows a smarter version of the multilingual "Hello World" Dojo example discussed in the previous article. Instead of using separate dialog markup for each language, it uses just the one dialog markup. Before displaying the dialog to the viewer its contents are updated from server data for the language selected by the viewer.

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>
    <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");
      
      function showDlg(){dijit.byId("dlg").show()}
      
      function haveGreetData(response,ioArgs){
        eval(response);
        showDlg()}
        
      function xhrError(response,ioArgs){console.error("HTTP Error:",ioArgs.xhr.status}  
      
      function fetchGreetData(lang){
      dojo.xhrGet({url:lang, handleAs:"text", timeout:5000, load:haveGreetData, error:xhrError})}
    </script>

↑ fetchGreetData, called when the viewer clicks on the Hello World - Multilingual button, fetches the data required to populate the dialog box controls with the appropriate language from the server. xhrGet is a Dojo wrapper for XMLHttpRequest that is guaranteed to work in all recent versions of Internet Explorer, Firefox and Safari.

The data that are returned bear the form

   dojobyId("greet").innerHTML="Hello World";
   dijit.byId("ok").setLabel("Close");

The JavaScript eval function is used on these data to update the dialog text. dojo.byId - the browser-independent Dojo wrapper for document.getElementById - is used to access the label which is a standard HTML DOM element. However, the button inside the dialog box is a Dojo widget. In order to modify its contents by calling the setLabel method of the widget it is necessary to get a handle to the widget - a JavaScript object - as opposed to an HTML DOM node. dijit.byId is used for this purpose.

    <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>
•     <button class="soria" dojoType="dijit.form.Button" id="btn">Hello World - Multilingual
        <script type="dojo/method" event="onClick">
           var d="dlgdata' + dijit.byId("lang").getValue().charAt(0)  + ".txt";
           fetchGreetData(d);
        </script>
      </button>
↑The current language selection is used to build the name of the appropriate greeting data file to fetch from the server and passed on to fetchGreetData.
• <div dojoType="dijit.Dialog" id="dlgE" title="Dojo Dialogs">
         <label id="greet">Hello World</label>
         <button id="ok"> dojoType="dijit.form.Button" type="submit">OK</button>
       </div>
↑id attribute assignments are required for the label & button controls so they can be accessed for modification via code in the downloaded greeting data files.
    <body>
<html>

Using one single dialog and customizing it as required is all very well but the fact remains that this dialog is being provided as part of the original HTML markup. This is neither feasible nor advisable when building a complex application that requires customization in response to user interaction. Luckily, this is easily done in Dojo by building/modifying the user interface programmatically. This is discussed next.

Download
▼ Jump To...

◄ ►
Colophon