Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Create a Dojo-Powered WordPress Website View

By David Walsh on September 21, 2010

Yesterday I showed you WordPress' awesome JSON plugin named JSON API. Now that I can get my blog posts in JSON format, it's time to create an awesome AJAX'ed web app with that data. I've chosen to use the power of Dojo and Dijit to create a stylish, AJAX-powered web app which provides intelligent views of all of my blog posts. You wont want to miss this post!

View Demo

The HTML

There's very little HTML (initially) to get the app going; simply create a container DIV with explicit size dimensions which will act as a application "holder":

<body class="claro">
	<!-- will set the eventual dimensions for the tab container -->
	<div style="width:900px;height:1000px" id="appbase"></div>
</body>

These size dimensions will allow use to use height and width settings of 100% for our inner widgets. Note that I'm showing you the BODY tag -- I'll be using the claro theme for my page.

The CSS

There's no app-specific CSS required. You do, however, need to pull in the CSS file for the desired theme.

/* bring in the claro theme */
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css";

As I mentioned above, I'm using the new claro theme.

The Dojo JavaScript

There's a good amount of JavaScript required to make this awesome layout work so I've broken it down by task.

Requiring Dijit Classes

As always, requiring Dojo and the classes we will use on the page will always be the first step.

/* require necessary classes */
dojo.require('dijit.layout.AccordionContainer');
dojo.require('dijit.layout.AccordionPane');
dojo.require('dijit.layout.TabContainer');
dojo.require('dijit.layout.ContentPane');
dojo.require('dijit.layout.BorderContainer');
dojo.require('dijit.form.Button');
dojo.require('dojo.behavior');

/* when all classes have loaded... */
dojo.ready(function() {
	
	// subsequent code goes here
	
});

Try keeping your dependencies down -- less classes to load means faster application performance.

Building the Layout

The first step is to build the layout. I'm going to create a two column layout, encompassed by a BorderContainer, in which the left side will provide categories and articles via an AccordionContainer layout. The right side will feature a TabContainer layout with a separate tab opening for every article requested.

/* generate the layout */

// settings
var appbase = dojo.byId('appbase');

// create the layout container
var container = new dijit.layout.BorderContainer({
	design: 'sidebar',
	gutters: true
},dojo.create('div',{ style:'height:100%;width:100%;' },appbase));

// create the left sidebar
var accordionContainer = new dijit.layout.AccordionContainer({
	splitter: true,
	region: 'leading'
},dojo.create('div',{ style:'height:100%;width:30%;' },container.domNode));
container.addChild(accordionContainer);

// create the right content pane
var tabContainer = new dijit.layout.TabContainer({
	tabPosition: 'top',
	region: 'center'
},dojo.create('div',{ style:'height:100%;width:70%;' },container.domNode));
container.addChild(tabContainer);

// add an initial tab to the tabContainer
tabContainer.addChild(new dijit.layout.ContentPane({
	title: 'Welcome!',
	content: 'Click on any of the posts you see on the left side of the page.  All post previews will display here!'
},dojo.create('div',{},tabContainer.domNode)));

// start the layout up!
container.startup();

A persistent "welcome" tab is added just so there is always a tab open.

JSON Content Loading - Categories & Posts

Loading the category list is the first order of business. When the JSON list of categories is returned, a new AccordionPane is added to the Accordion for every category returned:

// create a var to store currently displayed posts
var displayedPosts = [];

// load json topics 
dojo.xhrGet({
	url: '/',
	handleAs: 'json',
	content: {
		json: 'get_category_index'
	}
}).then(function(response) {
	// for every topic...
	dojo.forEach(response.categories,function(category,i) {
		// create a new accordion item
		var pane = new dijit.layout.AccordionPane({
			title: category.title + '(' + category.post_count + ')'
		},dojo.create('div',{ innerHTML: 'Loading ' + category.title + ' posts...' },accordionContainer.domNode));
		accordionContainer.addChild(pane);

After the AccordionPane is within the Accordion, the next step is adding an onShow event to the AccordionPane which will load posts within the given category when the category receives focus:

// when this pane becomes selected...
var beenSelected = false;
dojo.connect(pane,'onShow',function() {
	// if not selected yet...
	if(!beenSelected) {
		beenSelected = true;
		// get posts for this category;  limit 100
		dojo.xhrGet({
			url: '/',
			handleAs: 'json',
			content: {
				json: 'get_category_posts',
				slug: category.slug,
				count: 100
			}
		}).then(function(postsResponse) {
			// empty content for the pane (removes loading message)
			pane.set('content','');
			// make content!

When the posts are loaded, a list of links is added to the AccordionPane:

// make content!
var ul = dojo.create('ul',{},pane.domNode);
dojo.forEach(postsResponse.posts,function(post) {
	//create list items and links
	var li = dojo.create('li',{},ul),
		a = dojo.create('a',{
		href: '/' + post.slug,
		innerHTML: post.title
	},li);

With every link we create, it's necessary to add a click event which stops the user from leaving the page and generates a tab within the right TabContainer widget:

// when the link is clicked, create a new tab pane and "select" it
dojo.connect(a,'onclick',function(e) {
	// stop propagation
	dojo.stopEvent(e);
	// if this post isn't already open, create it...
	if(!displayedPosts[post.slug]) {
		//add a new tab content pane
		displayedPosts[post.slug] = new dijit.layout.ContentPane({
			title: post.title,
			content: '<h1>' + post.title + '</h1>' + post.content,
			closable: true
		});
		// add and select this tab
		tabContainer.addChild(displayedPosts[post.slug]);

The next step is turning the "Continue Reading" and "Discussion" links into Dijit Button instances:

// make links into buttons
dojo.behavior.add({
	'.conred,.concom,.demo': function(node) {
		var button = new dijit.form.Button({},node);
		dojo.connect(button,'onClick',function() {
			window.location = node.href;
		});
	}
});
dojo.behavior.apply();
//when this tab is closed, remove it from the opened list
dojo.connect(displayedPosts[post.slug],'onClose',function() {
	displayedPosts[post.slug] = false;
	return true;
});

To finish things off, we direct the first AccordionPane to show (and thus load posts) and then direct the Accordion to start up:

								}
								// select the tab!
								tabContainer.selectChild(displayedPosts[post.slug]);
							});
						});
					});
				}
			});
			//if this is the *first* pane, load the content
			if(i == 0) pane.onShow();
		});
	});
	// start up the accordion!
	accordionContainer.startup();
});

The code itself should be fairly self explanatory; my comments should be of help.

The Complete JavaScript

Here's the complete JavaScript source:

/* require necessary classes */
dojo.require('dijit.layout.AccordionContainer');
dojo.require('dijit.layout.AccordionPane');
dojo.require('dijit.layout.TabContainer');
dojo.require('dijit.layout.ContentPane');
dojo.require('dijit.layout.BorderContainer');
dojo.require('dijit.form.Button');
dojo.require('dojo.behavior');

/* when all classes have loaded... */
dojo.ready(function() {
	
	/* generate the layout */
	
	// settings
	var appbase = dojo.byId('appbase');
	
	// create the layout container
	var container = new dijit.layout.BorderContainer({
		design: 'sidebar',
		gutters: true
	},dojo.create('div',{ style:'height:100%;width:100%;' },appbase));
	
	// create the left sidebar
	var accordionContainer = new dijit.layout.AccordionContainer({
		splitter: true,
		region: 'leading'
	},dojo.create('div',{ style:'height:100%;width:30%;' },container.domNode));
	container.addChild(accordionContainer);
	
	// create the right content pane
	var tabContainer = new dijit.layout.TabContainer({
		tabPosition: 'top',
		region: 'center'
	},dojo.create('div',{ style:'height:100%;width:70%;' },container.domNode));
	container.addChild(tabContainer);
	
	// add an initial tab to the tabContainer
	tabContainer.addChild(new dijit.layout.ContentPane({
		title: 'Welcome!',
		content: 'Click on any of the posts you see on the left side of the page.  All post previews will display here!'
	},dojo.create('div',{},tabContainer.domNode)));
	
	// start the layout up!
	container.startup();
	
	// create a var to store currently displayed posts
	var displayedPosts = [];
	
	// load json topics 
	dojo.xhrGet({
		url: '/',
		handleAs: 'json',
		content: {
			json: 'get_category_index'
		}
	}).then(function(response) {
		// for every topic...
		dojo.forEach(response.categories,function(category,i) {
			// create a new accordion item
			var pane = new dijit.layout.AccordionPane({
				title: category.title + '(' + category.post_count + ')'
			},dojo.create('div',{ innerHTML: 'Loading ' + category.title + ' posts...' },accordionContainer.domNode));
			accordionContainer.addChild(pane);
			// when this pane becomes selected...
			var beenSelected = false;
			dojo.connect(pane,'onShow',function() {
				// if not selected yet...
				if(!beenSelected) {
					beenSelected = true;
					// get posts for this category;  limit 100
					dojo.xhrGet({
						url: '/',
						handleAs: 'json',
						content: {
							json: 'get_category_posts',
							slug: category.slug,
							count: 100
						}
					}).then(function(postsResponse) {
						// empty content for the pane (removes loading message)
						pane.set('content','');
						// make content!
						var ul = dojo.create('ul',{},pane.domNode);
						dojo.forEach(postsResponse.posts,function(post) {
							//create list items and links
							var li = dojo.create('li',{},ul),
								a = dojo.create('a',{
								href: '/' + post.slug,
								innerHTML: post.title
							},li);
							// when the link is clicked, create a new tab pane and "select" it
							dojo.connect(a,'onclick',function(e) {
								// stop propagation
								dojo.stopEvent(e);
								// if this post isn't already open, create it...
								if(!displayedPosts[post.slug]) {
									//add a new tab content pane
									displayedPosts[post.slug] = new dijit.layout.ContentPane({
										title: post.title,
										content: '<h1>' + post.title + '</h1>' + post.content,
										closable: true
									});
									// add and select this tab
									tabContainer.addChild(displayedPosts[post.slug]);
									// make links into buttons
									dojo.behavior.add({
										'.conred,.concom,.demo': function(node) {
											var button = new dijit.form.Button({},node);
											dojo.connect(button,'onClick',function() {
												window.location = node.href;
											});
										}
									});
									dojo.behavior.apply();
									//when this tab is closed, remove it from the opened list
									dojo.connect(displayedPosts[post.slug],'onClose',function() {
										displayedPosts[post.slug] = false;
										return true;
									});
								}
								// select the tab!
								tabContainer.selectChild(displayedPosts[post.slug]);
							});
						});
					});
				}
			});
			//if this is the *first* pane, load the content
			if(i == 0) pane.onShow();
		});
	});
	// start up the accordion!
	accordionContainer.startup();
});

It may look like there's a lot of JavaScript but don't get intimidated by it; when you break down each code block, it should all make sense.

Room For Improvement

I've chosen to simply load posts and their previews. You could easily load the complete posts with comments and all! JSON API provides you more than enough methods to create a complete blog layout with JSON and whichever JavaScript toolkit you'd like.

If I were looking to port this code to other sites or simply want to keep adding to the class, I would make this code into a custom Dijit widget. I may do that in the future to show you how it's done.

View Demo

There you have it! The amount of existing code provided to you by Dojo, paired with its intelligent design and awesome Dijit architecture, makes creating advanced layouts quick, easy, and accessible. I especially like how easy dealing with JSON and callbacks is with Dojo promises. Have any suggestions for this layout? Share them!

Recent Features

By David WalshJuly 28, 2011
Animating CSS3 Transforms with MooTools Fx
I recently posted an awesome (if I may say so myself) CSS3 / MooTools tutorials called Create a Photo Stack Effect with Pure CSS Animations or MooTools. The post presented two ways, a pure CSS method or MooTools-powered class, to duplicate Google+'s elegant photo stack...
By Landon SchroppApril 14, 2014
Write Better JavaScript with Promises
You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

By David WalshMarch 5, 2008
DWRequest: MooTools 1.2 AJAX Listener & Message Display
Though MooTools 1.2 is in its second beta stage, its basic syntax and theory changes have been hashed out. The JavaScript library continues to improve and become more flexible. Fellow DZone Zone Leader Boyan Kostadinov wrote a very useful article detailing how you can add a...
By Dr. Tom TrenkaAugust 6, 2013
Resize an Image Using Canvas, Drag and Drop and the File API
Recently I was asked to create a user interface that allows someone to upload an image to a server (among other things) so that it could be used in the various web sites my company provides to its clients. Normally this would be an easy task—create a...

Discussion

Ben Hockey
i’ve been following your dojo posts here and at sitepen – thanks for all the dojo love.

one small correction… your sample css code only needs to be the first import. claro.css imports all the others already (see http://bugs.dojotoolkit.org/browser/tags/release-1.5.0/dijit/themes/claro/claro.css). you probably already knew this since your demo page looks like it has this fixed.

David Walsh
Ugh, you’re right; my bad. Updated.

weston deboer
sick!

I have been playing with json and wordpress lately also, but nothing like this.
rajkamal
hi David,

i was trying to do the dojo word press experiment. Took me 2 days to follow it. I got that almost every thing right.

things i liked in this are:

>>variable “beenSelected” nicely got closed forming closure.
>>variable “displayedPosts” was declared as Array, but later in code it was used as an assosiative array. i didn’t know this one till now.

Thanks for this. keep posting more things on dojo with all key JavaScript features highlighted.
Steve Ponessa
I realize that the discussion on this post seemed to end last year however I just recently found this site.

I wish Firefox was the only browser that I have to support however I also have to support IE 7, which seems to have problems with the sizing so the demo shows a single line.

I have tried setting the height and width in a CSS, but can’t get the demo to display.
puah
can u pls provide the full code? i did copy ur demo code, but cant work much, cant load the accordion menu with others, i really like this feature .thx
Alex
Hi David,

Nice one! Really useful.
I was wondering… can you please share the json file?
Seen here… dojo.xhrGet({ url: '/', handleAs: 'json', content: { json: 'get_category_index' }
the url for the file, but i couldn’t find it..
Really appreciate if you could share.

Thank you in advance,

All the best!
Alex