Dojo – Write your own Dojo module

I am learning Dojo by following the tutorials @ the Dojo official website. You can find all the tutorials @ the Dojo Documentation page.

In the first tutorial, it guides you to load the Dojo library from the CDN and add write your custom module. Normally, the module code should be placed relative to the dojo.js directory. But if we load the dojo.js from CDN, where should we put the our own code?

In that case, we have to configure the Dojo settings before we load the dojo.js. Here is an example.

1. Create the following files under your webroot folder.

  • <webroot>/dojo-tutorial-1/index.html
  • <webroot>/dojo-tutorial-1/eureka/myModule.js


 
<webroot>/dojo-tutorial-1/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
    
    <!-- Configure Dojo first -->
    <script>
      dojoConfig = {
        has: {
          "dojo-firebug": true,
          "dojo-debug-messages": true
        },
        // Don't attempt to parse the page for widgets
        parseOnLoad: false,
        packages: [
          // Any references to a "eureka" resource should load modules locally, *not* from CDN
          {
            name: "eureka",
            location: "/dojo-tutorial-1/eureka" // Needs a preceding "/" 
          }
        ],
        // Timeout after 10 seconds
        waitSeconds: 10,
        aliases: [
          // Instead of having to type "dojo/domReady!", we just want "ready!" instead
          ["ready", "dojo/domReady"]
        ],
        // Get "fresh" resources
        cacheBust: true
      };
    </script>
    
    <!-- Load Dojo -->
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"
      data-dojo-config="async: true">
    </script>
    
    <!-- Run the code below when dom is ready -->
    <script>
      // Require the module we created
      require(["eureka/myModule", "ready!"], function(myModule) {
        // Set new text
        myModule.updateText("greeting", "Hello Dojo!");
        // Restore text to original
        setTimeout(function() { myModule.restoreText("greeting"); }, 3000);
      });
    </script>
  </head>
  <body>
    <h1 id="greeting">Hello</h1>
  </body>
</html>

 

<webroot>/dojo-tutorial-1/eureka/myModule.js

// Create a custom module that returns an object with a few methods
define(["dojo/dom"], function(dom) {
 
    // Store the original text before changing it
    var originalText = "";
    var node;
 
    // Return the module's return value
    return {
        updateText: function(id, message) {
            node = dom.byId(id);
            originalText = node.innerHTML;
            node.innerHTML = message;
        },
        restoreText: function(id) {
            node.innerHTML = originalText;
        }
    };
});

 

The above demo which substitute the h1 Hello with Hello Dojo! and then restore it after 3 seconds. If you still have problem when trying this demo, open the Chrome console and you should be able to find the errors.

Done =)

Reference:

2 thoughts on “Dojo – Write your own Dojo module”

  1. Lots of topic to write about Javascript-related things.
    1) Debugging is always a challenging task in Javascript because of its dynamic type nature.
    2) The most popular topic would now be HTML5. How could it work with DOJO seamlessly?

    Just 2 suggestions for your next topic.

    Like

    1. 1) Debugging is always a challenging task in Javascript because of its dynamic type nature.
      The Chrome/Firebug console could help a lot when debugging javascript. These are the tools i always use. =P

      2) The most popular topic would now be HTML5. How could it work with DOJO seamlessly?
      Haven’t tried that before. but there are some posts about DOJO and HTM5 when searching in Google. Seems it is quite promising.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.