It’s simple enough to use this on your own code. Use the same HTML layout, and include the JavaScript plugin code on your page to use the plugin.

They are going to offer two of them in San Jose for a first round, we’ll see what happens after that. They’re $2500 a pop but it sounds like they will be covering a lot of great content!

this.inherited(arguments);

… from within any of your methods in a class that extends another and have it call the super class instance of that method in the same way you would call super() in a Java class to call the super class’ method.

This past week I was on a couple of new classes, one super class and another class that extends that super class. I called this.inherited() within my constructor of the class to call the super constructor. I was noticing something strange in Firebug though—my super class’ constructor was getting called twice even though I was only calling it once. I reproduced this in JSFiddle as you can see below:

If you had FireBug (or JavaScript console in WebKit) open you would have seen that the super constructor was getting called twice. After pinging #dojo on irc at irc.freenode.net about the issue, @phiggins reminded me that when you instantiate classes that extend other classes, the constructor method automatically calls the super on its own. So if you call it again, it will be called twice. You can read about the default constructor chaining that dojo.declare gives you on the Reference Guide.

To summarize, only use this.inherited() within non-constructor methods in your classes. I recall running into this issue once before so I thought I blog about it for my own personal reference and for that of others.

Dojo.byId() is simply a replacement for the native document.getElementById(). Dijit.byId() on the other hand is a utility method that you use to get a reference to an instance of a dijit widget on the page. This means that you won’t be getting a reference to a DOM node like you do with dojo.byId() but rather an instance of a dijit widget class along with access to all of its methods and properties.

$arr = array();
$arr[] = "foo";
$arr[] = "bar";
$arr[] = "baz";

To have PHP output this as a JSON string, simply use json_encode($arr) as below:

$arr = array();
$arr[] = "foo";
$arr[] = "bar";
$arr[] = "baz";
 
echo json_encode($arr)

Check out the output of the above code. As you can see it returns a basic JSON array with the values in it:

["foo","bar","baz"]

If you wanted to return a JSON object, you could use PHP arrays as well. PHP arrays allow you to use Strings as the index. In many languages, this is known as an associative array and it looks like the code below:

$arr = array(
  "foo" => "bar",
  "baz" => "true",
  "thinger" => "thing"
);

To put this to practice, say you are returning a simple saved shopping cart to your user, your data might look as follows:

<?php
$arr = array(
  "cartId" => 456186,
  "lastModified" => "Tue, 19 Jan 2010 03:14:07 GMT",
  "items" => array(
    15642,
    45616,
    54984,
    45751
  )
);
 
echo json_encode($arr);
?>

Here we have a cartId, the date it was lastModified, and an array of itemIds. Obviously if you were returning this to the frontend, you would probably want the items to be more descriptive so you don’t have to make separate calls for each id to get the product info. This is just a demo so it will serve our purposes just fine.

Check out the output of the above code snippet.

Below is what it looks like as well:

{
    "cartId": 456186,
    "lastModified": "Tue, 19 Jan 2010 03:14:07 GMT",
    "items": [15642, 45616, 54984, 45751]
}

You can see that PHP gave us a JSON object at the highest level (denoted by the beginning and ending curly braces). Each property of the object was the associative array properties that we defined in the PHP code. Finally, you’ll notice that since we provided an array of ids for items, PHP returned a JSON array with the ids.

Hopefully you can see the value in this. By providing a native JavaScript format of data to our frontend functions, you’ll have a much easier time working with this data when you use any of the Dojo XHR functions such as dojo.xhrGet().

Even though the two phones are separate entities in their own right, they are small pieces of functionality in the scope of the whole phone system that reaches the ends of the Earth. On a much smaller scale you want to do that with your application—break it up into smaller chunks of functionality.

This very concept can be applied to modules that you have on your webpages. Modules or more specifically Widgets, can and should be single independent pieces of functionality on a given page. However, lets say you want one module to interact with another, without breaking the cardinal rule of coupling them together? The answer is to use Dojo’s very powerful yet extremely easy-to-use topic system (aka publish/subscribe).

The dojo.publish() method allows you to build in a simple way for your widget to broadcast a message, which can contain objects of data, that anybody who is listening for that message will receive. The dojo.subscribe() message allows you to setup listeners for that message. It works very much like event listeners when you listen for DOM events such as clicks of a button. Only, instead of the DOM announcing an event, you are announcing your own custom event that something occurred.

How does this all work exactly? Well, let’s first take a look at a demo. It’s pretty simple to play with, just type a message in the textbox and click “Send Message”. You’ll notice your message show up on the right with a timestamp. You can also add more message displays by clicking the button “Add Message Display”. You can add as many of these as you want and every one of them will receive the message that you type. Furthermore, any message display box that you have checked the box “Allow Images”, you will be able to click the “Send Image” button and an image will show up in the appropriate display boxes.

This is a lot easier than it appears. Let’s break down what the magic is. You can think of the interaction between publish and subscribe kind of like watching TV. If you want to watch a TV show, you tune into, say, Channel 7 and you will see the broadcast. dojo.subscribe() works kind of the same way. You give it a topic to listen to as a String, then provide it a function that you want to execute when it receives data on that channel:

dojo.subscribe("com.hayes.demo.topics.SendMessage", this, this.onSendMessage);

Like I said, the first argument which is the topic you want to listen to is a string. It can be any string you want. The examples in the Dojo docs use a folder path notation (e.g. com/hayes/demo/topics/SendMessage), but I prefer the dot-notation since it is widely recognized. The second argument that I provide is the scope of which the callback function should be run in, and the third argument is the reference to the function (which could also have been provided as a string “onSendMessage”).

To broadcast a message on that same channel you simply use dojo.publish():

dojo.publish("com.hayes.demo.topics.SendMessage", [{
   message: this.msgNode.get("value")
}]);

Here I use the same string that I used in dojo.subscribe, and my second argument is the data I want to send along. Note that here whatever data you send, has to be inside the first element of an array (of course its easiest to simply wrap your data in a set of square brackets). In the case above, I’m sending a simple plain object with a property labeled as “message” with a value of the text that was inputted in the textbox. Any other module on the page you want to receive this same data, you simply use dojo.subscribe() as above and every time a message is sent, all those functions will receive it. That’s why when you click “Add Message Display” they all receive the same message that the Control Panel sends. Every time those modules they get created, they are subscribed to the “com.hayes.demo.topics.SendMessage” topic.

This very same methodology is applied with the checkboxes in incrementing the count on the control panel, as well as sending the images. The difference here is that by default, these modules are not subscribed to the “com.hayes.demo.topics.SendImage” topic so if you try to send an image, it doesn’t get sent. However, once you tick the checkbox to allow images, the module will begin to receive the images (which in this case is simply a url for the MessageDisplay box to show in an img tag) that are sent.

Download the source of the demo: tar.gz | zip

Using JSON as a data format is another one I can strongly relate to, especially with his mention of using arrays and delimited strings in the past. Today, there will not be a project that goes by where I need data brought in and I will always choose JSON if it’s available due to its native support in modern day JavaScript.

I personally am always looking for ways to make my JavaScript run faster. As developers, we so often get caught up in the moment of getting something to work and simply implement a solution in a way that just came natural and was easy, we don’t go back to see if we can make it more efficient—especially in terms of browser memory usage. There have been many times I’ve seen a simple for loop accessing data in a way that is calling another method to fetch the data, instead of caching the data once and accessing the local cache. Christian brought up another way to make your page more efficient in terms of events that I had not thought of. His example perfectly illustrates a situation in which you want to listen for the click event on a set of list items inside an unordered list. Instead of looping through each list item and adding an event handler, you can simply add an event handler to the parent of this list (the ul). From here you can determine which li was clicked. This assuming that you understand that events in the DOM roll up from the bottom when an event occurs. This means that if you click an li,if that click is not handled on the li, it will roll up to the ul and so forth.

Finally the last few points on anonymous functions with the module pattern, configuration, interacting with the back end, and browser specific code, I cannot stress enough to read and understand these the best you can. These four points that he clearly makes are utterly important in ensuring you are an efficient JavaScript developer. This will set you apart from being a good JavaScript dev, to an excellent JavaScript dev—proving you know how the language works and how to best control it and use it as it should be used.

I highly respect Christian’s articles and his advice and I recommend you head his comments where you see fit. You can read the full article on Smashing Magazine below:

http://bit.ly/amJ8sj

Flickr is a great example of a company that offers it’s web services in a JSON-P format. For instance, a few lines of their interestingness feed looks like:

jsonFlickrApi({
   "photos":{
      "page":1,
      "pages":5,
      "perpage":100,
      "total":500,
      "photo":[
         {
            "id":"4325811507",
            "owner":"75345140@N00",
            "secret":"9d963f8778",
            "server":"2702",
            "farm":3,
            "title":"Apple iMaxiPad (development name iAnvil)",
            "ispublic":1,
            "isfriend":0,
            "isfamily":0
         },
         {
            "id":"4325354439",
            "owner":"34991336@N00",
            "secret":"4803bbeb7a",
            "server":"2767",
            "farm":3,
            "title":"San Francisco's Faces Teaser",
            "ispublic":1,
            "isfriend":0,
            "isfamily":0
         }
...)

Notice at the beginning of the statement it begins with jsonFlickrApi(...) which looks just like a function call right? That’s because it is. In order for it to work though, we need to define that function in our page first so that when this code loads, it can call the function and pass in the data. Start off by creating a function on your page with the same name of the function that your service will call (known as the callback) and give it an argument that the data will be passed in as. Immediately after it, put a script tag that loads your external data. I’ll use the interestingness feed from Flickr.

<script type="text/javascript">
var jsonFlickrApi = function(data) {
}
</script>
<script src="http://api.flickr.com/services/rest/?method=flickr.interestingness.getList&format=json&api_key=9debd0de9deea0e59b4b8ae22a69078a"></script>

At this point, if you were to load your page, nothing would actually happen since the function doesn’t do anything once it’s called. If you’ve gotten this far without JavaScript warnings from your browser or Firebug, then you are in good shape. Let’s flesh out the jsonFlickrApi function with actual logic to work with the data that gets passed to our function. All we want to do is create a variable that will hold the contents of our data, in this case it will be the photo information that Flickr returns. Create a global variable that will hold the data, then assign it the data once the function is called:

var photoData = null;
var jsonFlickrApi = function(data) {
    photoData = data.photos.photo; // the array of photo information objects that Flickr passes back
}

Running the script now would load the array of photo information into our global variable called photoData. Once this is loaded we can actually play with the data by displaying the photos on our page. This entails adding an element on the page that will hold our image elements and looping through the photos that were returned and placing them in the page. This final product will look like the code below

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
 
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>interestingness</title>
	<style type="text/css">
	#imgs img {
	  display: block;
	}
	</style>
	<script src="http://o.aolcdn.com/dojo/1.4/dojo/dojo.xd.js"></script>
 
	<script type="text/javascript">
    var photoData = null;
  	var jsonFlickrApi = function(data) {
  	  photoData = data.photos.photo;
  	}
  	dojo.ready(function(){ 
  	  var imgsBody = dojo.byId('imgs');
  	  dojo.forEach(photoData, function(photo){
  	    dojo.place(dojo.create("img", {src: "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + ".jpg"}), imgsBody);
  	  });
  	});
	</script>
	<script src="http://api.flickr.com/services/rest/?method=flickr.interestingness.getList&format=json&api_key=9debd0de9deea0e59b4b8ae22a69078a"></script>
</head>
<body>
<div id="imgs"></div>
</body>
</html>

View a working example of the above code

The aforementioned explanation is how you could make a JSON-P call from any JavaScript toolkit (substituting the appropriate API calls where necessary). However, Dojo has built in functionality to make this a bit easier for the developer. The function to look at is dojo.io.script.get(). This allows us to provide a JSONP url, a callback name to use to pass a callback function name, and define a load function that will be used when the script has loaded successfully. An example of this is below:

    dojo.require("dojo.io.script");
    dojo.ready(function() {
      dojo.io.script.get({
       url: "http://api.flickr.com/services/rest/?method=flickr.interestingness.getList&format=json&api_key=9debd0de9deea0e59b4b8ae22a69078a",
       callbackParamName: "jsoncallback",
       load: function(data) {
         var imgsBody = dojo.byId("imgs");
         var photos = data.photos.photo; // array of photo info
         dojo.forEach(photos, function(photo){
     	     dojo.place(dojo.create("img", {src: "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + ".jpg"}), imgsBody);
     	   });
       }
      });
    });

We start out by importing the dojo.io.script package for use on our page. Then we add a handler for when the page is done loading using dojo.ready (which is simply a proxy function for dojo.addOnLoad). From there we make a dojo.io.script.get() call, passing in an object of properties and values that define our XHR call. You’ll notice that the Flickr URL is now defined in this list instead of a separate <script> tag. This is the beauty of this function as it allows us to keep our code cleaner and provide the functionality through JavaScript only. In the background, however, Dojo is handling the dynamic creation of the script tag similar to what we used in the first part of this demo.

The actual functionality for this execution didn’t change and when you run the demo for the code above, you’ll notice nothing different except for the underlying logic.

Source Code for Getting StartED with Dojo

Note, there is no source code in Chapter 3 and therefore you will not see a “ch03″ folder in the zip file that you download.

For starters, we need a simple HTML form that we are going to send. Construct this as you normally would with an id, action, and method values. In my example, I’ve created a basic contact form:

<h1>Contact Form</h1>
 
<form id="contact" action="contactFormAction.php" method="POST">
  <dl>
    <dt><label for="txtFirstName">First Name:</label></dt>
    <dd><input id="txtFirstName" name="firstName" type="text" /></dd>
 
    <dt><label for="txtLastName">Last Name:</label></dt>
    <dd><input id="txtLastName" name="lastName" type="text" /></dd>
 
    <dt><label for="txtEmail">Email Address:</label></dt>
    <dd><input id="txtEmail" name="email" type="text" /></dd>
 
    <dt><label for="txtComments">Comments / Suggestions</label></dt>
    <dd><textarea id="txtComments" name="comments"></textarea></dd>
  </dl>
  <input id="submit" type="submit" value="Submit Form">
</form>

As you can see, I have my contact form posting to a PHP script called contactFormAction.php. This is a very basic script that doesn’t actually email in our demo. It simply will read one of the values that is posted from the form, firstName, and display that along with a message encoded in a JSON string.

The contents of my contactFormAction.php file is:

<?php
  // Logic to send an email would go here
  // for now we are just going to send back a simple
  // JSON response to show a successful submission
  echo '{"success":"true","message":"Message sent successfully to ' . $_POST["firstName"] . '."}';
?>

Note, that in order for something to be considered as a proper JSON string, it needs to have all the properties and values in quotes.

At this point, if you were to setup these two pages and your webserver and submitted the form, everything would work as expected. The only difference is that when you posted the form, the browser would direct you to the PHP script to show it’s output. The whole idea with this exercise however is to submit this form without leaving the page and notifying the user that it was successful. This is very simple with Dojo’s xhrPost() function.

We need to first pull the Dojo toolkit library into our page by simply putting the following in the HEAD of our HTML page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js"></script>

Once we have that included we can write the following JavaScript between a script block in our HEAD as well:

dojo.addOnLoad(function(event){
  dojo.connect(dojo.byId('submit'), 'onclick', function(event){
    dojo.stopEvent(event);
    dojo.xhrPost({
      form: 'contact',
      handleAs: 'json',
      load: function(data) {
        console.log(data);
        var success = data.success;
        var msg = data.message;
        if(success) {
          dojo.byId('responseMsg').innerHTML = msg;
        }
      },
      error: function(error) {
        console.log(error);
      }
    }) // xhrPost()
  }); // connect()
}); // addOnLoad()

This series of anonymous functions first creates a listener for when the page has completed loading (addOnLoad()), then sets up an event listener to listen for the onclick event from the submit button (dojo.connect()). Inside that event listener function we first stop the click event from proceeding with it’s default actions (i.e. submitting the form in a traditional manner), and we proceed with the xhrPost() function.

Dojo’s xhrPost() allows you to simply provide the id of a form element for it to determine where to post the form’s contents to. This is convenient because if you want the form to be able to be submitted even if the user didn’t have JavaScript support in their browser (such as some mobile devices), they still could. If they do have JavaScript support, then the xhrPost() function will send the Ajax request to the URL in the action attribute of the form. The handleAs property tells xhrPost what type of data will be returned from the script you are posting to. In my case, I created the PHP script to return a JSON string. Upon successful posting to that script, it will return a JSON string, and xhrPost will parse the string and turn it into a JavaScript object automatically and send it to our load function. The load function simply receives a single attribute which I called data. This is what our response will be sent back in. In my load function I first log to the Firebug console the value of data, then I determine if success was true and if it is I display the included message to the element with the id of “responseMsg”. I added this element inside a fieldset block below the form:

<fieldset>
  <legend>Response from server</legend>
  <p id="responseMsg"></p>
</fieldset>

That’s the basis of it, very easy and straightforward. Check out an online demo of this simple Ajax contact form.