dojo 1.7.1 AMD Page Example

This is a very simple example of how you can implement a dojo page with AMD. The intended architecture is that the HTML would be used for all pages and the page content and behavior would be modified by the javascript. With that in mind, the ‘page’ javascript is in js/page/main.js. The javascript file name can be set by passing the name of the page into the script.

Be ready to think differently, because this is a new way to build pages.

There’s a significant reduction in the number of requests required to render the page, only those files which are required are loaded. To see the difference, comment out the async:true and use the FireBug Net tab to see the number of files loaded.

Excellent References

It’s well worth reading these references carefully.

http://dojotoolkit.org/blog/learn-more-about-amd
http://www.slideshare.net/jthomas/moving-to-dojo-17-and-the-path-to-20
http://dojotoolkit.org/documentation/tutorials/1.7/recipes/app_controller
http://dojotoolkit.org/documentation/tutorials/1.7/declare
http://dojotoolkit.org/documentation/tutorials/1.7/modules/

HTML

The HTML code presents a button, and the javascript adds an onClick handler to it. Use FireBug’s Console to view the output.

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<META http-equiv="Content-Style-Type" content="text/css">
<title>dojo AMD</title>
<style type="text/css">
<!--
button
{
border:1px solid #ccc;
background-color:#eee;
font-size:0.7em;
padding:3px;
}
-->
</style>
</head>
<body>
<h1>dojo AMD page</h1>
<button id="myButton">my.Button!</button>
<script type="text/javascript"> 
//<!--
var djConfig = {
    parseOnLoad:true,
        isDebug:true,
        locale:"en_US",
        async:true,
    baseUrl: "js",
    tlmSiblingOfDojo: false,
    packages: [
        { name: "dojo", location: "../dojo/dojo" },
        { name: "dijit", location: "../dojo/dijit" },
        { name: "dojox", location: "../dojo/dojox" },
        { name: "app", location: "page", main: "main" },
    ]
};
//-->
</script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" type="text/javascript"></script> 
<script type="text/javascript"> 
//<!--
require(["app","dojo/domReady!"],function(app){app.init();});
//-->
</script>
</body>
</html>

js/page/main.js

The define is defining an anonymous module that requires dojo/dom and executes after dojo/domReady. It creates a module with one function - init. app.init() is called from the HTML. Note that the name app.init is file independent, so all the pages can have an init modules and the HTML can call app.init() regardless of which page is being initialized.

define(["dojo/on", "dojo/domReady!"],
        function(on){

                var filename = "js/page/main.js";

                on(document.getElementById("myButton"),"click",function(evt) {
                                console.log(filename+" click on myButton");
                };


                return {
                        init: function() {
                                console.log(filename+" init");
                        }
                };
});

This is just the tip of the iceberg. Explore. Enjoy.

For production code, be sure to use a build.