Download, Install, and Use dojo.E Markup

dojo.E is built on top of the Dojo Toolkit. You can learn more about Dojo at: www.dojotoolkit.org. Also, see the Dojo Toolkit getting started document which walks developers through using Dojo for the first time. The instructions below build on Dojo's getting started document, focusing on topics required for adding dojo.E.

Download

You have two options to getting Dojo 1.2/1.3 and dojo.E working together.

1.) Download the dojo.E bundle archive, which includes Dojo 1.3. Go to the download page.

2a.) Download Dojo 1.3 archive at www.dojotoolkit.org

2b.) Download dojo.E required files: dojoe.js and dojoe.js.uncompressed.js.

Install

1.) Make sure your Dojo installation works by running a Dojo sample or test file.
http://localhost//js/dojo-release-1.3.0/dijit/tests/test_ColorPalette.html is a test file for the color palette.

If the Dojo install is working correctly, the color should look as it appears in the following:

2.) Create dojoe folder in Dojo's src folder alongside dojo, dijit and dojox. After you create dojoe folder in src, you should see dojo, dijit, dojox and dojoe folders.

3.) Copy the dojoe.uncompressed.js and dojoe.js files into the dojoe folder.
You use dojoe.uncompressed.js to develop and debug dojo.E, and markup.js
to deploy your application with the smallest possible download size.

Run

1.) Create Hello, world! HTML file by copy/pasting the code below.

2.) Run this file in Firefox 3, IE, or Safari.

 
<!DOCTYPE HTML PUBLIC   "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
         <!-- load the dojo toolkit base -->
         <script type="text/javascript"
            src="js/dojo-release-1.3.0/dojo/dojo.js"
            djConfig="parseOnLoad:true, isDebug:true"></script>
         <script type="text/javascript"
            src="js/dojo-release-1.3.0/dojoe/dojoe.js"></script>
         <script type="text/javascript">
             /* our JavaScript will go here */
            dojo.require("dijit.form.Button");
         </script>
         <style type="text/css">
            /* our CSS can go here */ 
         </style>
    </head>
    <body>
	<!-- this is a Typical WebPage starting point ... -->
	<h1 id="testHeading">My First application using dojo.E</h1>
	<script type="text/xml" dojoType="dojoe.XmlScript"> 
             <ui> 
                   <dijit.form.Button label="Hello, World!"
                   onclick="alert('It works!')"/> 
             </ui>
         </script>
    </body>
</html>

Note: Double check the above src paths to be sure they conform with your directory structure.

Specific to dojo.E

You must include a script tag to reference the dojoe.js file and a dojo.require() function call for all widgets that you add to your application. Also, place a script tag with a type="text/xml" and dojoType="dojoe.XmlScript" in your application file.

 
<script type="text/javascript" 
        src="js/dojo-release-1.3.0/dojoe/dojoe.js"></script>
 
...
 
<script type="text/xml" dojoType="dojoe.XmlScript">   
   <ui>   
        <dijit.form.Button label="Hello, World!" 
           onclick="alert('It works!')"/>   
    </ui>   
</script>

Run the application

Can't forget the best part of the process, actually seeing the application running. What you should see if everything worked correctly is a properly styled dojo button in your web browser.

Helpful Tip

Make sure that standard Dojo library is included before dojo.E and the parseOnLoad option in Dojo is set to true.