Hello World - With & Without Dojo

The inset below has two buttons. Clicking on the first button shows the phrase "Hello World" in a standard JavaScript alert box. The second button is a Dojo button. Depending on the host browser and operating system its appearance will differ from that of the first one. However it will always have the same appearance - irrespective of browser and/or OS. Clicking on this button displays a dialog box with a look and feel that is far less incongruous than a simple JavaScript alert.

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">
↑Dojo renders well even in the absence of a DOCTYPE declaration. However, doing so is not advisable. All the examples presented here use the strict HTML DOCTYPE
<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/dojo/resources/dojo.css";
      body,html{height:100%;width:100%};
  </style>

↑It is best to link to Dojo .js and .css files located on AOL's Content Delivery Network. Using the AOL CDN confers many benefits - improved scalability, faster downloads... . However, in order to facilitate resolution of downstream issues (e.g. cross-site scripting, the use of a different version of Dojo or the need to make significant changes to the Dojo source code) it is advisable to provide the http://o.aolcdn.com/dojo/x.x.x/ dynamically via an SSI include directive.

dojo.css provides basic styling needed to ensure that Dojo renders webpages in a readable, albeit unpretty, way. tundra.css is a Dojo theme - i.e. a CSS specification for the look & feel of Dojo widgets. Dojo ships with other themes such as soria, nihilo etc. The body,html line is only required in order to properly center Dojo layouts using margin:auto.

•   <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js" djConfig="parseOnLoad:true">
    </script>

↑This is where the core Dojo code is loaded. This is the very heart of Dojo - the stuff that provides reliable browser detection, unified event handling, object oriented programming, debugging capabilities and more. djConfig determines the behavior of Dojo once it is up and running.

At the very least Dojo should be configured to to parse the HTML markup at startup. This replaces HTML elements defined in the original markup with Dojo widgets - graphical controls with a modern, browser-independent look & feel along with a streamlined event system to handle user interactions. It should be noted that parsing is only necessary to correctly interpret declarative Dojo - i.e. Dojo widgets defined via HTML markup, as done here. User interfaces can be defined programmatically and often have to be modified programmatically in response to user interaction. The parser plays no role there.

The <script> tag here has been assigned the attribute parseOnLoad which does not form part of the strict HTML DOCTYPE specification. This is sufficient to cause the W3C HTML code validator to flag an error. Should this matter? Not in the real world! Browsers - user-agents in W3C speak - are designed to be fault tolerant. Since the browser does not understand parseOnLoad it will simply ignore that attribute and continue.

Is parseOnLoad:true indispensible? Even without it one can get Dojo to parse HTML markup by calling the parser.parse method.

•   <script type="text/javascript">
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Dialog");
      dojo.require("dojo.parser");
    </script>

↑ Broadly speaking, the Dojo distribution consists of .js and .css files located in three subdirectories under the Dojo root directory, dojoroot

  • dojo - the directory containing core Dojo source code & resources.
  • dijit - the directory containing Dojo widgets, i.e. visual controls, code & resources.
  • dojox - the directory containing extensions to Dojo and experimental Dojo modules.

The only bit of Dojo that is loaded directly - i.e. via a <script> tag is dojo.xd.js. Everything else is loaded using a require("a.b.c") statement. As a general rule a.b.c refers to c.js located in the directory dojoroot.a.b. Using dojo.require ensures that modules are not loaded twice. By default it also performs checks to ensure that the object a.b.c is in fact defined in the module in question.

HTML markup that uses Dijit widgets will generally be parsed correctly with parseOnLoad:true even in the absence of an explicit dojo.require("dojo.parser") statement. However, including this code does not impose any overheads - either on speed or on bandwidth - and can avoid grief on the rare occasion when an explicit declaration is required.

  <script type="text/javascript">
      function vanillaHW(){
        alert("Hello World!"); 
      }
    <title>Hello World - with & without Dojo</title>
    </head>
•   <body class="tundra" style="padding:3px">
Assigning class="tundra" to the body element causes all Dojo widgets to be styled using tundra.css. One can, of course, use a different Dojo theme - for example, soria & nihilo which form part of the Dojo distribution. The padding:3px setting is not strictly necessary. However, in its absence the body contents are liable to appear uncomfortably close to the edges of the document.
       <button onclick="vanillaHW()">Hello World - no Dojo</button><br>
•      <button dojoType="dijit.form.Button" id="btn">Hello World - Dojo
          <script type="dojo/method" event="onClick">
             function dojoHW(){dijit.byId("dlg").show()};
             dojoHW();
            </script>
       </button>
       <div dojoType="dijit.Dialog" id"dlg" title="Dojo Dialogs">
         <label>Hello World</label>
         <button> dojoType="dijit.form.Button" type="submit">OK</button>
       </div>

The HTML button tag is used here but provide the non-standard attribute dojoType. When the Dojo parser examines the HTML source it converts all HTML elements bearing this attribute into the corresponding Dojo widget. A Dojo dialog is defined as an HTML div element with the custom attribute dojoType="dijit.Dialog. It is not visible until the viewer clicks on the Hello World - Dojo button.

When the user does click on that button the Dojo dialog should display. In "normal" HTML code one would simply assign an onclick event handler as an attribute of the button tag. This can still be done with Dojo widgets but the use of an embedded <script> tag with the custom type dojo/method is in general better since it ensures that the JavaScript this keyword actually refers to the widget - in this case the button - that triggered the event. Not important in the present instance but very useful when coding multiple events for more complex controls. The use of the custom type="dojo/method" attribute enables us to place the event code where it is most relevant - inside the body of the button tag. Browsers don't understand the type="dojo/method" attribute so they make no attempt to run the script as they would have done had the attribute been set to "text/javascript".

There are three points here that merit further comment

  • dijit.byId is similar to document.getElementById except that it returns an instance of a Dojo widget - and consequently, all its attributes & methods - rather than an HTML DOM node.
  • Dojo pulls in the code required for the button and dialog widgets thanks to the fact that it was instructed to do so via the dojo.require statements above.
  • Note that the event assigned to the button widget above is onClick not onclick.
    <body>
<html>

This simple example demonstrates Dojo in action. Needless to say, what it does is very trivial. Progressive refinements are discussed next.

Download
▼ Jump To...

◄ ►
Colophon