Explore Alternate Paths More Easily

The CGI

#!/usr/bin/env python

import simplejson # download from the python cheeseshop
import sys, os, cgi, cgitb; cgitb.enable()

funcs = simplejson.load(open("funcnames.json"))
query = cgi.FieldStorage().getfirst("q", "")
result = [ key for key in funcs if key.startswith(query) ]
result.sort()
print """Content-Type: text/html\n\n"""
print simplejson.dumps(result)

Really! That's the whole thing!

The Client Side

var timer = null;
var lastq = null;
function startLiveSearch(query){
	if(timer){ clearTimeout(timer); }
	if(query == lastq){ return; }
	lastq = query;
	timer = setTimeout(function(){
		dojo.byId("status").innerHTML = "searching...";
		dojo.io.bind( {
			url: "funcnames.cgi",
			content: { q: query },
			type: "text/json",
			load: function(type, data, obj){
				dojo.byId("results").innerHTML = data.join("<br />");
				dojo.byId("status").innerHTML = "";
			}
		} );
	}, 200);
}

Clients That Can Save State Can Help You Roll It Back Faster

Give users tools for fixing their own "mistakes"
Hard to distinguish errors from exploration
Special case of "undo"
Back button is most used interface element in browsers
Can't "hook into" the back button
Ajax forces the issue!

It's Possible To "Hook In" To The Back Button

But Not Everywhere

And Not Easily

Libraries To The Rescue!

dojo.io.bind(), dojo.undo.browser
Brad Neuberg's "Really Simple History"

parent

children

Dojo Configuration

djConfig = { preventBackButtonFix: false, };

Initial State

dojo.require("dojo.io.*");
dojo.require("dojo.undo.browser");
// initialize the "backstop" state to no-op's
// you could extend these to add "are you sure you want to go back"-style messages
dojo.undo.browser.setInitialState({ 
	back: function(){}, 
	forward: function(){}
});

Adding New State

function selectFuncItem(value, skipBack){
	var bindArgs = {
		url: "funcnames.cgi", 
		content: { q: value }, 
		mimetype: "text/json",
		load: function(t, data){ populateOptionList("childList", data); },
	};
	var tmp = ""+lastSelectedValue;
	if(!skipBack){
		bindArgs.changeUrl = true; // create a new bookmarkable hash
		bindArgs.backButton = function(){ // respond to the back-button click
			if(tmp == ""){
				var cl = dojo.byId("childList");
				while(cl.firstChild){ cl.removeChild(cl.firstChild); }
			}else{
				selectFuncItem(tmp, true);
			}
		};
	}
	dojo.io.bind(bindArgs);
	lastSelectedValue = value;
}

Clearly show "where" users are in data or process
Smoothly transition states
Help speed decisions and actions

Pulling in all the data up front can be too expensive
Hierarchy can be navigation for many forms of data

The CGI

#!/usr/bin/env python

from lxml import etree
import simplejson, sys, os, cgi, cgitb; cgitb.enable()

nidStr = "{http://www.hyperscope.org/hyperscope/opml/public/2006/05/09}nid"
augEtree = etree.parse(open("augmentinghumanintellect.opml"))
query = cgi.FieldStorage().getfirst("q", "")

if len(query):
	nodes = [ child for child in augEtree.xpath("//outline") if child.attrib[nidStr] == query ]
else:
	nodes = augEtree.xpath("//body/outline")

result = []
for node in nodes:
	result.append({
		"text": node.attrib["text"], 
		"id": node.attrib[nidStr],
		"children": [ child.attrib[nidStr] for child in node ]
	})

print """Content-Type: text/html\n\n"""
print simplejson.dumps(result)

The Client Side

var chunks = {};
function getChunks(parent, pid){
	var cids = (chunks[pid] ? chunks[pid].children : [""]);
	dojo.lang.forEach(cids, function(cid){ getChild(parent, cid); });
}

function getChild(parent, cid){
	dojo.io.bind({
		url: "augment.cgi",
		content: { q: cid||"" },
		mimetype: "text/json",
		load: function(t, data){
			dojo.lang.forEach(data, function(item){
				if(chunks[item.id]){ return; }
				chunks[item.id] = item;
				var ctr = document.createElement("div");
				ctr.style.paddingLeft = "20px";
				parent.appendChild(ctr);
				ctr.innerHTML = "<p onclick='getChunks(this, \""+item.id+"\");'>"+item.text+"</p>";
			});
		}
	});
}

Ajax starts off worse!
Replacing accepted transition mechanims
Draw attention to new changes, ease transitions
"What happens when I start mashing buttons?"

Fades
Grow/Shrink
Wipe-in/Wipe-out
In-progress indication

dojo.require("dojo.lfx.*");
dojo.require("dojo.lfx.extras");

function getAndFade(node, url){
	node = dojo.byId(node);
	dojo.io.bind({
		url: url,
		load: function(type, data, obj){
			var fadeAnim  = dojo.lfx.fadeOut(node, 500);
			fo.connect("onEnd", function(){ node.innerHTML = data; });
			dojo.lfx.chain(
				fadeAnim, dojo.lfx.fadeIn(node, 500)
			).play(100); // simulate a little lag
		}
	});
}

"By "augmenting human intellect" we mean increasing the capability of a man to approach a complex problem situation, to gain comprehension to suit his particular needs, and to derive solutions to problems. Increased capability in this respect is taken to mean a mixture of the following: more-rapid comprehension, better comprehension, the possibility of gaining a useful degree of comprehension in a situation that previously was too complex, speedier solutions, better solutions, and the possibility of finding solutions to problems that before seemed insoluble. And by "complex situations" we include the professional problems of diplomats, executives, social scientists, life scientists, physical scientists, attorneys, designers--whether the problem situation exists for twenty minutes or twenty years. We do not speak of isolated clever tricks that help in particular situations. We refer to a way of life in an integrated domain where hunches, cut-and-try, intangibles, and the human "feel for a situation" usefully co-exist with powerful concepts, streamlined terminology and notation, sophisticated methods, and high-powered electronic aids."

Alex Russell

ISOC-IL Ajax Tutorial

Explore Alternate Paths More Easily

The CGI

Really! That's the whole thing!

The Client Side

Clients That Can Save State Can Help You Roll It Back Faster

It's Possible To "Hook In" To The Back Button

But Not Everywhere

And Not Easily

Libraries To The Rescue!

Dojo Configuration

Initial State

Adding New State

The CGI

The Client Side

"Toaster" Notifications