Adding Dojo

> > >

While the purpose of this tutorial is not to get into the details of how Dojo works (there are a lot of great resources that already cover that), we will spend a few minutes going over how to get your pages to work with Dojo, since it's an important part of getting dojo.E to work. If you are interested in learning in more detail how Dojo works, we recommend that you read the very good Quick Start Guide by Sitepen or the Dojo Book.

The first thing that you should do to get Dojo to work in your pages is to load the dojo.js file in your page. This file provides all the basic infrastructure that Dojo needs in order to work and also provides the ability to load dynamically any other JavaScript file required by your page. We also need to setup some configuration options to get Dojo to work the way we need. Specifically, we need to tell Dojo to parse the page and instantiate any Dojo objects defined declaratively in the HTML tags. There are many other configuration options, for example, for development purposes you can set the attribute isDebug to true, to get additional information on the code execution.

So assuming that your Dojo installation is in a js directory just below your current page, we could create the following Dojo enabled HTML page that instantiates a dijit form button:

 
"http://www.w3.org/TR/html4/strict.dtd">
 
<script type="text/javascript" src="js/dojo/dojo/dojo.js"
            djConfig="isDebug: true, parseOnLoad: true"></script>
            <script type="text/javascript">
            dojo.require("dijit.form.Button");
    </script>
<h1 class="testTitle">Test Dojo: Simple Button</h1>
 
<button onclick="alert('Dojo seems to work!');" 
     dojotype="dijit.form.Button">Test me</button>