Monday, March 14th, 2005

Handling usability concerns such as the back button, and bookmarking

Category: Ajax, Usability

One of the issues with offering Rich Internet Applications on the web, is that many technologies ignore the browser.

You can have a great UI, but what if you user has gone through and filled out a large form, and then hits on the back button? Will they get taken out of the application and be scrambling to work their way back?

Also, what about the issue of not being able to bookmark the application? As Alex of the Dojo toolkit says:

“Save-as” on the web is book-marking, and usable applications recognize this (even if they don’t have great solutions for it today). Regardless of what serialization mechanism is in use, being able to represent the state of the application in a URL (or a marker for serialized state) is a must. This is a hard problem to be sure, and none of the currently available tools provide simple answers.

Dojo Toolkit Abstraction

There are a lot of XMLHttpRequest (XHR) abstractions out there, and the Dojo toolkit creators have just released a new one which takes into consideration, the usability issues above. This isn’t just about abstracting above XHR.open(..) and send().

The latest addition to the toolkit is dojo.io.bind(). This abstraction allows you to configure the usage of your XHR, in one simple way.

dojo.io.bind() example

Let’s look at a simple example. We will create a page which has a <div> with some content within. When we click on the given button, dojo.io.bind() will go ahead, speak XHR to the server, and will update the div with the given info.

What is a little different about this example, compared to the normal XHR sample, is that you will see the URL change each time, and the back and forward buttons will kinda work. (NOTE: This is a new release, and the kinks aren’t all worked out on some of the features)

JavaScript

Here we pass in JavaScript object/associate array notation into the bind() operation:

function divChange() {
        var divToChange = document.getElementById("divToChange");
        var lastContent;

        dojo.io.bind({
                url: "/samples/dojoSampleText.txt",
                load: function(type, data, evt){
                        divToChange.innerHTML = data;
                },
                error: function(type, error){ alert(error) },
                backButton: function() {
                        lastContent = divToChange.firstChild.nodeValue;
                        divToChange.innerHTML = 'before change.';
                },
                forwardButton: function(){
                        divToChange.innerHTML = lastContent;
                },
                changeURL: true,
                mimetype: "text/plain"
        });
}

You will notice that you are basically setting up some parameters, many of which take callbacks.

  • url: Point to the server side URL. You have to follow the XHR rules of getting content back from your domain. If you require something else you need to apply for priviledges in the JavaScript code.
  • load: Callback for when the XHR is loaded.
  • error: If an error occurs, you may get it here. There are a few that get past it though (e.g. the priviledge error), so make sure you debug with your JavaScript console on!
  • backButton / forwardButton: Handle the browser functions.
  • changeURL: Whether to tweak the URL. True means that an id is created, or you can put in the string of your choice. Here you can handle bookmarking.
  • mimetype: If you change from “text/plain” (as shown) to “text/javascript”, then the framework will automatically eval() the JavaScript file and you will have a different callback function: function(type, evaldObj){ /* do something */ }.
  • transport: bind() will try to use the best transport possible (XHR or iframes or …) by default. However, you can enforce one method here. E.g. XMLHTTPTransport.
  • formNode: This allows for the support of form submission (e.g. set to document.getElementById(“formToSubmit”))

The simple HTML

Nothing to see here….

<p>
Click on the Change Div button to change the text, and hook up the forward and back buttons.
</p>

<div id="divToChange" style="border: 1px solid black; padding: 5px; background-color: #EEE; margin: 5px;">
before change.
</div>

<input type="button" onClick="divChange()" name="divButton" value="Change Div"/>

In conclusion

It is great to see abstractions like this jumping up, so we don’t have to write it ourselves. The next level is having the web framework groups write code that runs on top of this kind of abstraction.

Kudos to the Dojo Toolkit team. Read more:

Posted by Dion Almaer at 8:19 am
Comment here

+++++
15.5 rating from 8 votes

Comments Here »

Comments feed

Leave a comment

You must be logged in to post a comment.