Code hugging: Dojo - part 2 (non-module)

In order to integrate HTML with dojo, a few changes are needed.

Here's the HTML, I've highlighted what's different:

<!DOCTYPE html>
<html>
<head>
    <title>Hello Dojo</title>
    <LINK href="css/hello.css" rel="stylesheet" type="text/css">
    
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js" dojoConfig="isDebug: true, parseOnLoad: false, async: true"></script>
    <script src="js/HelloDojo.js"></script>
</head>
<body>
    <h3>Hello Dojo</h3>
      <div class="formSurround">
       <label for="myText">Enter your name here</label>
       <input id="myText" class="text" type="text">
       <button id="submitButton" class="button" >Submit Form</button>
     </div>
     <div id="response" class="respText"></div>
</body>
</html>

First I've added a link to the 1.9.1 level of dojo. This isn't best practice, but it makes life a lot easier to begin with and it should "just work".

Then I've added a link to a javascript file, HelloDojo.js, you'll find the contents below.

And finally, the <form> tag has gone, so I've added a class of "formSurround" which I can use to set CSS characteristics.

Here's the dojo code, which you should save in js/HelloDojo.js

require([
   "dojo/on",
   "dojo/dom",

   // Needed so that on isn't called too soon
   "dojo/domReady!"
   ],

   function(on, dom) {

     myButton = dom.byId("submitButton");

   on(myButton, "click", function(evt){
         /* Don't submit the form!! */
         evt.preventDefault();
         evt.stopPropagation();

         var myInput = dom.byId("myText");
         var response = dom.byId("response");
         var helloStr = "Hello ";

         response.innerHTML = helloStr + myInput.value;
     });

});

The first part of the file is the require sections, this loads the entities we need from the dojo libraries. In this case, we've got explicit calls to:

Dojo on listens for events - in this case, someone clicking a mouse
Dojo dom gives a handle onto the dom, it's used to look up entities on the page
Dojo domReady is a critical dependency to make sure the page content is loaded in the right order

I've included references for on and dom, but it's a sign of how fast dojo is moving that once you get into the world of modules, you won't use them again. However, a lot of the code snippets around on the web predate modules and still rely on older dojo style, so it's useful to understand how they work and even more important to understand how things don't work if you get them wrong.

Without domReady, on is called before myButton has been created, and so although the page looks normal, nothing will happen when you click "submit". If you load up an error console, you'll see an error like this:
Uncaught TypeError: Cannot read property 'on' of null

The error looks slightly different depending on which browser you're using, there's a good list of the symptoms for this and several other dojo errors in Debugging dojo

The CSS has changed slightly from the previous version:

body {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
}

h3 {
    margin-left: 130px;
}

.formSurround {
    margin-left: 20px;
    width: 320px;
    background-color: #e0e0e0;
    height: 85px;
    padding-left: 15px;
    padding-right: 15px;
}

div {
    padding-top: 10px;
}

.button {
    margin-top: 20px;
    float: right;
    font-size: 17px;
    border-radius: 4px;
}

.text {
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
}

.respText {
    color: blue;
    margin-left: 20px;
    margin-top: 10px;
}

The most important change is that now we've lost the form object, we need to find something explicit to hang the formatting off. That something is the formSurround class.

Now that we're in dojo, the button formatting has changed, so I've reinstated a border radius.

Now that we're in HTML 5 territory, I can use some of the new CSS 3 wonderfulness, so I've added a box shadow to the text box: mostly just because I can!

And finally, we've got a new response entity on the page, I've formatted it with respText to make things a little prettier.

The final result looks similar to the previous HTML:

... with the added bonus that you should see a result when you click "Submit Form"

I've loaded this code into JsFiddle

Code hugging

Tuesday, 17 September 2013

Dojo - part 2 (non-module)

No comments:

Post a Comment