AJAX Design Patterns
WidgetBucks - Trend Watch - WidgetBucks.com
By now the entire World has heard about AJAX, even those who don't care about Web-Development have seen the potential of this new technology. Everybody is tired of endless introductions on how cool AJAX is and those endless lists of good examples like Google Suggest, GMail and alike, so I decided to cut a long story short and jump right into the real tutorial.
Is this tutorial any different from the others? Well yes and no, it is different in being a tutorial on how to design and build a complete site and not just some fancy little details like how to turn caching in AJAX off or how to create a fancy widget. To keep the tutorial readable, and to avoid having to implement low level functionality, I'm using the dojo toolkit, I tried prototype too and really enjoyed working with being a really nice and easy to use Library, but dojo provides much more functionality bundled with it. For both frameworks one thing is true: documentation is scarse, and I spent alot time debugging and reading posts on the newsgroups.
For debugging I suggest using Firefox Venkman and the really nice Firebug extension, which make AJAX a lot easier to understand, especially FireBug's "Log each Request" Feature.
In this tutorial we will try to design a community portal as it has a wide range of different components that give a good overview of what is archievable with AJAX, also it should provide you with the basic tools that will help you in more complex applications.
What we want
As developers we need to know where we want to go, before starting right away. The requirements analysis is not part of this tutorial so I'll just write down the basic functionality for our Portal:- Pages: Load and show simple HTML Formatted content.
- User: we want to be a community so the possibility for users to register themselfs, create a Profile and communicate with others is fundamental.
- Messages: some sort of messaging center is nice too, and not too difficult to implement, it allows private communication between the users.
- Forum: talking about communications, what could be better than a Forum to let the Users talk about whatever they want?
The Layout
Although the focus should be on the development of the functionality, the layout is still as important as the application itself. It gets even more important because the application can be good but without an interface that is functional it is useless. We'll use a layout that is easy yet functional:- The content area.
- A sidebar for context related options.
- The main menu (basically this just selects between modules).
- The title, nothing fancy here
- A list with the online users.
Modules
Basically with AJAx we step away from the classic one page-at-a-time view of doing things, and we have to start talking about a more Event Driven architecture, or MVC-Model if you prefer.We'll define an API that abstracts from the actual page so that we can then create modules that do more complex tasks.
To get back to this tutorial we will have several small modules that represent parts on the site, along with real modules we will have some virtual modules that take care of some functionality, but more on this later. Modules in this tutorial include:
- Page: this will be the first module we will be implementing, it allows to simply display the contents of a file in the contents area of the site, it does nothing fancy.
- User: this module is used for several different tasks:
- Register: register a new User
- Login
- Profile: show the profile of a User
- Online: once we have users we can easily implement a component that allows us to show which users are online, and with AJAX this is possible almost in realtime. It is a nice effect and very easy to implement.
- Forum: what would a community site be without a Forum?
The implementation
We will encapsulate all of our functionality in JavaScript variables, this is similar to static classes in Java and makes it possible to have some sort of clean namespace division between the modules. First of all we will have to create the engine. The engine is the part that handles loading of all the other modules and gives them abstract ways to interact with the page. The idea behind this is that the page interface (layout, stylesheet, ...) and Engine build an abstraction layer so that it is easier to implement the functionality easier, without having to bother about representational issues. In other words we build an API.The first and morst important thing the engine has to do is initialize everything.
var Engine = {
bootstrap: function(){
this.setStatus("Loading...");
dojo.require("dojo.io.*");
dojo.hostenv.writeIncludes();
if((""+document.location).indexOf('#') < 0){
Engine.loadPage("#Page/Welcome");
}else{
Engine.loadPage("" + document.location);
}
},
<body onload="Engine.bootstrap()"></body>
loadedModules: new Array(),
modules: new Array(),
loadModule: function(module){
if(Engine.loadedModules[module])
return;
dojo.io.bind({
url: "javascript/" + module + ".js",
sync: true,
error: function(type, evaldObj){Engine.showError("Error while loading module.");},
load: function(type, data, evt){
eval(data);
Engine.modules[module].execute(uri);
}
});
},
Now we move on to the real magic: loadPage(). It will get a URI as input and it will then load the correct module and pass control to the module, which will then take care of the rest:
uri: "/",
loadPage: function(url){
Engine.setStatus("Loading...");
if(!url)
url = "" + document.location;
var hashIndex = url.indexOf('#');
if(hashIndex < 0 || hashIndex <= url.length-2)
return Engine.hideStatus;
uri = url.substring(hashIndex + 1);
var moduleLength;
if(uri.indexOf('/') > 0)
moduleLength = uri.indexOf('/');
else
moduleLength = uri.length;
var module = uri.substring(0,moduleLength);
uri = uri.substring(uri.indexOf('/'));
if(Engine.loadedModules[module] && ! dojo.lang.isUndefined(Engine.modules[module])){
Engine.modules[module].execute(uri);
}else{
Engine.loadModule(module);
}
},
The URL is interpreted in the following way:
- Everything in front of the '#' is discarded as it is only the location of the application.
- The part between the '#' and the first '/' is the module name which will be loaded if it isn't yet.
- Everything from the '/' to the end of the URL is the argument that is passed to the Module's execute() function (see the Page module below as an example).
All that is left now to do is implementing some helper functions that will later be used by the modules:
setStatus: function(message){
if($('status') != null){
$('status').parentNode.removeChild($('status'));
}
var body = document.getElementsByTagName("body")[0];
var div = document.createElement("div");
div.style.position = "absolute";
div.style.top = "50%";
div.style.left = "50%";
div.style.width = "200px";
div.style.margin = "-12px 0 0 -100px";
div.style.border = "0px";
div.style.padding = "20px";
div.style.opacity = "0.85";
div.style.backgroundColor = "#353555";
div.style.border = "1px solid #CFCFFF";
div.style.color = "#CFCFFF";
div.style.fontSize = "25px";
div.style.textAlign = "center";
div.id = 'status';
body.appendChild(div);
div.innerHTML = message;
},
hideStatus: function(){
Engine.opacityDown($('status'));
},
opacityDown: function(theElement){
if(theElement == null)
return;
var opacity = parseFloat(theElement.style.opacity);
if (opacity < 0.08){
theElement.parentNode.removeChild(theElement);
}else{
opacity -= 0.07;
theElement.style.opacity = opacity;
setTimeout(function(){Engine.opacityDown(theElement);}, 50);
}
return true;
},
setContent: function(content){
$('content').innerHTML = content;
},
showError: function(message){
Engine.setStatus(message);
setTimeout("Engine.hideStatus()",10000);
}
}
The first module
Now we'll move on to implement our first real module. It's task is to load an external resource (an HTML page in this specific case) asynchronously and then display it in the content area.var Page = {
init: function(){
Engine.modules["Page"] = Page;
Engine.loadedModules["Page"] = true;
},
execute: function(uri){
try{
dojo.io.bind({
url: "resources" + uri + ".php",
sync: false,
error: function(type, evaldObj){
Engine.showError("Error while loading Content.");},
load: function(type, data, evt){
Engine.setContent(data);
Engine.hideStatus();
});
}catch(e){
alert(e);
}
}
}
Page.init();
But you can already see that we can create really complex modules too as will be shown in a later part of this tutorial when we'll create a Forum as a Module.
The source of the Page module can be found here.
Putting it all together
You can take a look at the running version of this application or download the entire source code and analyse it. I hope this tutorial was usefull and helped you understand how to design your application. See you all in the next part discussing an Online display.114 Responses to “AJAX Design Patterns”
Leave a Reply
Darren Straight’s Blog on February 6th, 2006
阳春é¢çš„å¦ä¹ 笔记 »Blog Archive » AJAX Design Patterns on February 6th, 2006
jDavid.net “@” gmail.com on February 7th, 2006
Thomas Winston Thorpe » Blog Archive » links for 2006-02-07 on February 7th, 2006
DoNews Time » Blog Archive » Fading Roses & Raging Viruses on February 7th, 2006
A practical AJAX tutorial — My Stuff Archive on February 7th, 2006
Ryan Sholin's J-School Blog on February 7th, 2006
AJAXé“ » 最新AJAX教程：AJAX Design Pattern, 使用GMailæ¥åšä¾‹å on February 7th, 2006
Whole Ball o’ Wax » Today’s del.icio.us bookmarks on February 7th, 2006
ç™¾æ— ç¦å¿Œ » Blog Archive » links for 2006-02-07 on February 7th, 2006
Bohr’s Blog » links for 2006-02-07 on February 7th, 2006
Ronald Yau » Blog Archive » AJAX Design Patterns on February 7th, 2006
Internation 1.0 » AJAX … on February 8th, 2006
Ajax Lessons » Blog Archive » AJAX Design Patterns on February 11th, 2006
Tiziano ’s Blog » AJAX Design Patterns on February 13th, 2006
Ajaxå¦ä¹ 笔记 »Blog Archive » All about Ajax…. on February 16th, 2006
jiangws » Blog Archive » AJAX Design Patterns on March 16th, 2006
Ajaxian » Ajax Tutorial Round-up on March 17th, 2006
Ilija Studen on March 18th, 2006
Snyke on March 18th, 2006
You’d have to duplicate the AJAX detection for every URL…
Ilija Studen on March 18th, 2006
Edit this document
If JS is enabled Engine will execute event (pass whatever params you want) and return false. If not we are using the good old application to handle the request with refresh.
Or I'm missing something important here
nxmxbbd on March 18th, 2006
Ajax 网摘åŠæ•™ç¨‹…
Iago Blog » Tutoriales Ajax on March 18th, 2006
Ilija Studen on March 18th, 2006
With the method I’m suggesting you can’t replicate the page if your coming with bookmarked link, but it works really well because routing of such request is easier and it works without JS enabled.
Snyke on March 18th, 2006
Thank you for pointing me out this option
Ritesh Jariwala - (Actkid) Rich Internet Applications (Flash, Flashcom, PHP, MySQL, AMFPHP, Remoting, ColdFusion, Flex) Developer’s Blog : 30 Ajax Tutorials on March 19th, 2006
Wordpress » Blog Archive » Ajax Tutorial Round-up on March 19th, 2006
Art and Technology » on March 20th, 2006
Roger on March 28th, 2006
Jeff on March 29th, 2006
There are quite a few AJAX demos and examples on the web right now. While these are invaluable to learning AJAX, some people need a bit more information than just a raw piece of code. In todays environment there are many ways to learn AJAX including, b…
ScriptSe on April 8th, 2006
Anonymous on April 8th, 2006
In this tutorial we will try to design a community portal as it has a wide range of different components that give a good overview of what is archievable with AJAX, also it should provide you with the basic tools that will help you in more complex appl…
Chrono Tron - 100% » Blog Archive » AJAX, Get Started, Resources & Tutorials on April 11th, 2006
Saahil Chopra » Blog Archive » Ajax For Beginners on April 12th, 2006
CodeRecipe Official Blog » Blog Archive » Ajax round up — Top 30 on April 30th, 2006
JanuMedia » 30 Links to AJAX Tutorials on May 16th, 2006
ngsld on May 28th, 2006
sdfsdfx on June 11th, 2006
sdfsdfx on June 11th, 2006
sdfsdfx on June 11th, 2006
sdgfsdge on June 11th, 2006
sdfsdfw on June 11th, 2006
å—¨,,,干嘛è¦è¿™æ ·çš„哦,,,æ°”æ»äº†,
sdfsdfx on June 11th, 2006
COLD CASE » Blog Archive » AJAX Design Patterns on June 14th, 2006
The Art Of Mind :: AJAX, Get Started, Resources & Tutorials :: June :: 2006 on June 22nd, 2006
Fading Roses & Raging Viruses » Site design using Prototype on July 4th, 2006
Sammy on July 14th, 2006
As I am a newbie, what tools to be used for Ajax development?
worzelhund on July 20th, 2006
Buuuut, Whats about URL Parameters for php scripts i.e.?
worzelhund on July 20th, 2006
Programming » AJAX Design Patterns on August 23rd, 2006