Dojo Hello World - On Demand

In the examples thus far the Hello World dialog was created declaratively. This is Dojo speak for saying that the dialog code was present in the original HTML markup when the page was loaded. In such a trivial example this works fine. However, any real world Dojo application would require multiple modifications to the user interface in response to user interactions and/or the display of one or more of several modal dialogs. Under those circumstances handling every eventuality declaratively in HTML markup is no longer practical - if for no other reason, at least because the process of subjecting the markup to Dojo parsing would significantly slow down page rendering. A better approach is to generate user interface elements via JavaScript code as and when they are required and dispose of them when they go out of context.

This way of generating and managing Dojo user interfaces is, not unreasonably, called programmatic. The source code for a programmatic Hello World Dojo dialog is shown below.

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/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");
      
      function removeThis(){this.destroyRecursive()}
    </script>

↑By default Dojo dialogs are simply hidden when the user clicks on the close box or the OK button. In a large application there is little to be gained by burdening the browser with such hidden Dojo widgets. removeThis deals with this by destroying the dialog. Note the use of the JavaScript this keyword here. It is only thanks to the context management provided by Dojo that this.destroy() has the desired effect.

•    <script type="text/javascript">
        function showDlg(){
          var d=new dijit.Dialog({id:"dlg", title:"Dojo Dialogs", href:"dlgdata.txt", onExecute:removeThis, onCancel:removeThis});
          d.show()}
    </script>

↑showDlg creates the Hello World dialog on demand. The dialog attributes are passed to its constructor as a parameters object. In this example, in addition to the more obvious parameters, we provide handlers to completely discard the dialog widget once the user is done with it. The contents of dlgdata.txt are shown below

<label>Hello World</span>
<button dojoType"dijit.form.Button" type="submit">OK</button>

Modifying this code to provide a multilingual Hello World dialog as in the previous example is a relatively simple matter.

Programmatic Dojo examples usually provide a second argument to the widget constructor. This is the id of an existing HTML DOM node that is wasted/sacrificed. If a node with the id in question exists, the Dojo parser will replace it with the new Dojo widget. This approach has a certain, limited, utility in simple applications.

    <title>Hello World - On Demand</title>
    </head>
    <body class="tundra" style="padding:3px">
•     <button dojoType="dijit.form.Button" id="btn">Hello World - On Demand
        <script type="dojo/method" event="onClick">
           showDlg()
        </script>
      </button>
↑With the dialog being created programmatically, the actual HTML markup becomes quite trivial.
    <body>
<html>
Download
▼ Jump To...

◄ ►
Colophon