Shane O'Sullivan's technical blog… really ties the room together

A new Demo engine for Dojo

Posted by Shane O'Sullivan on December 4, 2007

A couple of weeks ago I saw a cool demo framework for an Ajax toolkit just released as open source. It’s a very slick implementation, with a tree listing all the various demos, and a tabbed area showing the implementation, and the widget in practice.

So, I think to myself, this is exactly what the Dojo Ajax Toolkit is missing! Cut to today, and I’ve put the first rough cut at the demo framework on the web for people’s perusal. Check it out at .

Note: I have written a follow up post here.

Some of the features include:

  • Tree navigation for the demos. Demos can be nested as deep as required.
  • View tab. This shows the widgets in action.
  • HTML tab. This shows how to instantiate the widget using HTML markup.
  • JS tab. This shows how to instantiate the widget using JavaScript code.
  • Links tab. This shows various hyperlinks to alternate content for that demo, e.g. the Dojo Book.
  • Demo description. Gives a text description of the demo.
  • Theme selector. This allows you to change from one CSS theme to another
  • Ability to link to standalone demos that open in a new page. This is useful for large demos that show the integration of many widgets together, and may not fit well within the demo framework itself. See the Dijit/Mail demo for an example of this.
  • A build system that takes a very simple naming scheme for the demos, and creates a JSON data store that the framework runs off of. So, whenever a user adds a new demo, they simply have to re-run the build step, and that’s it! No need for a server side script, so you can run this right off your hard drive.

This is still very much beta code, and there are a couple of errors floating around, but those will of course be hunted down. There are also some Internet Explorer issues that I’ll get to soon, so try this in Firefox for now (update Dec 05 2007 – most of these have been solved, with one or two small bugs remaining). I’m in discussions to get this into the Dojo toolkit, so that the community at large can start adding in demos. I’ve put in quite a few already, but it’s so easy to do that this could become a huge resource for the Dojo community.

If you have any suggestions, please let me know.

Demo Framework
Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt

6 Responses to “A new Demo engine for Dojo”

  1. […] e so com a ajuda da comunidade o sistema pode andar para a frente. Para mais informações visita o blog oficial. Partilha: These icons link to social bookmarking sites where readers can share and […]

  2. […] Ubuntu Edgy on a Thinkpad X41 TabletUpgrading Ubuntu Feisty Fawn (7.04) to Gutsy Gibbon (7.10)A new Demo engine for DojoUbuntu on Thinkpad X41 – Installing the Beryl Window ManagerIntroducing the new Dojo Image […]

  3. […] watch out for dojo passing on the right … Shane O’Sullivan posted, already in december last year about the dojo demo engine. A great step forward and a way to […]

  4. Jeff said

    Hi Shane,

    Very nice.
    Got a question on the dojox.layout.ScrollPane. I applied it in my dijit.layout.SplitContainer. The tree is being scrolled as I move the mouse but it won’t scroll to the bottom of the tree. In another word some of the bottom tree nodes are not scrolling into view. Any idea why that is?


  5. Hi Jeff

    This is probably something to do with the height of the tree’s container not being set correctly. You should send a message to the dojo-interest mail list about this, and mention Peter Higgins in it, he’s the author of the widget


  6. dojo said


    […]A new Demo engine for Dojo « SOS[…]…

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: