Bitstructures — Hello Dijit Ajax World

Hello Dijit Ajax World

November 23, 2007
Tags: ajax

Getting and deploying Dojo

You have 2 choices here:

1. Download Dojo and serve it up yourself

Download Dojo, unpack the distribution and then serve it up with your web server. If you wanted to use Dojo from a page served up beside the Dojo distribution you could use something like this:

<script type="text/javascript"
src="dojo-release-1.0.0/dojo/dojo.js"></script>

2. Use Dojo from the AOL CDN (Content Delivery Network)

AOL provides Dojo for public use on their Content Delivery Network. With this option you don't have to download Dojo at all (but you're going to need an internet connection of course to test your pages!) You would use Dojo with something like this:

<script type="text/javascript"
src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"></script>

Hello Dijit Ajax World

hi.html

<html>
  <head>
    <title>Hello Dojo AJAX</title>
    <!-- load the Tundra theme from the AOL CDN -->
    <link rel="stylesheet" type="text/css"
      href="http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css">
    <!-- load Dojo from the AOL CDN:
      we set parseOnLoad true in djConfig so that we can
      specify Dijit widgets declaratively with dojotype
      (see the button below) -->
    <script type="text/javascript"
      src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
      djConfig="parseOnLoad: true"></script>
    <script type="text/javascript">
      // use the Dojo dependency mechanism to pull in the
      // code for the parser and the Dijit Button
      dojo.require("dojo.parser");
      dojo.require("dijit.form.Button");
      // our button click handler:
      // sends an HTTP GET request to message.php
      // and alerts the response
      function click() {
        dojo.xhrGet({
          url: "message.php",
          handleAs: "text",
          load: function(response){
            alert(response);
          },
          content: {name: dojo.byId("name").value}
        });
      }
    </script>
  </head>

  <!-- use the Tundra theme -->
  <body class="tundra">
    <label for="name">Please enter your name:</label>
    <input type="text" id="name">
    <br>
    <!-- a Dijit button that calls our click() handler -->
    <button dojoType="dijit.form.Button"
    onClick="click()">Hi there</button>
  </body>
</html>

message.php

<?php
header("Content-type: text/plain");
$name = $_GET['name'];
echo "Howdy $name";
?>

Here's the page in action.

Using Dijit widgets

There are 2 strategies for creating Dijit widgets, declarative and programmatic. In the declarative strategy widgets are declared in markup. We put a placeholder element into our document and specify the type of the widget and any parameters or event handlers using HTML attributes. The button widget was created declaratively in hi.html above. It used a dojotype attribute to specify its type, dijit.form.Button, and an onClick attribute to specify an event handler. For another example, here's how we might declare a ProgressBar:

<div dojotype="dijit.ProgressBar" progress="0" maximum="50"></div>

At page load time a parser reads through the document processing elements with dojotype attributes. For widgets, this typically means replacing the element with elements to build the widget. For example, the above ProgressBar placeholder div would be replaced with elements for the bar container, the bar at its current progress width, and a label for the bar. To see a ProgressBar in action have a look at the ProgressBar test page.

In the programmatic strategy we create the widget instance ourselves. We can still use a placeholder element but this time we don't specify the widget type or any other attributes:

<div id="bar"></div>

Then at some point, we can construct a widget in code:

var bar = new dijit.ProgressBar({progress: 0, maximum: 50}, "bar");

This call will create the widget and modify the document, replacing the placeholder div with the elements for the widget. When we create widgets programmatically we specify widget properties by passing an object to the widget constructor, rather than with HTML attributes. The use of a placeholder element is optional and we can construct a widget without one. In this case elements are built but they won't be located in the document. You can insert the elements for the widget into the document later by using the widget's domNode property (for example, foo.appendChild(bar.domNode)). Here are some reasons why you might want to use the programmatic strategy:

widget creation is under your control, this is important when developing in an unobtrusive or progressive enhancement manner
it is unnecessary to add attributes to HTML
the parser is not needed (less code to load and less code to run at page load)

Programming with Dojo

Dojo provides a rich set of programming supports, including functions for managing events, DOM querying and manipulation, animations, and JavaScript language utilities. Here's a couple to get you started:

dojo.addOnLoad: registers code to run whenever the page has been loaded
dijit.byId: retrieves the widget object for an element

If we created a widget:

<div id="bar" dojotype="dijit.ProgressBar"></div>

we could access it programmatically, say to change the progress value, with:

dijit.byId("bar").update({progress: 10});

Hello Dijit Ajax World

Getting and deploying Dojo

1. Download Dojo and serve it up yourself

2. Use Dojo from the AOL CDN (Content Delivery Network)

Hello Dijit Ajax World

hi.html

message.php

Using Dijit widgets

Programming with Dojo

Further reading

About me

Starting points

Colophon