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

Dojo Ajax Demo Engine released

Posted by Shane O'Sullivan on April 3, 2008

A great new demo engine has just been released for the Dojo Toolkit. Check it out at It is based on the initial attempt at a demo engine I wrote a few months ago, but has since been updated with new demos, and made infinitely more sexy by css/theme master Nikolai Onken.

Dojo Demo Engine

The features include:

  • Demos for all three Dojo projects – Dojo (the base toolkit), Dijit (widgets) and DojoX (all that is newest and coolest) .
  • Source views for all demos. Not only do we show what Dojo can do, we show you how to do it! The source views also benefit from the very cool dojox.highlight project, which provides client side syntax highlighting.
  • Addressability – you can link directly to a demo, as I did with the dojox.highlight link above.
  • Search feature – a combo box that you can use to quickly find a demo on any subject. For example, type “image” into the box, and you’ll be shown a list of all demos to do with displaying images, such as dojox.image.Gallery, dojox.image.SlideShow etc.
  • Cool animated menus – totally aesthetic I know, but a very pretty addition by Peter Higgins. The menus separate the three projects, providing easier, clearer navigation.
  • Link hierarchies – each set of demos can have links attached to it, for example to extra tutorials or documentation. If you click a parent of that demo, you are shown all links of all children of that section. For example, click on the DojoX link on the top of the page, and you’ll be presented with a list of all links to all DojoX projects.
  • Browser Back Button management. Using the dojo.back package, you can navigate back and forward through the application using the browser’s back and forward buttons.

The demo engine is hosted on the extremely cool Dojo Campus website, which is a new learning resource for all things Dojo. It contains videos, tutorials and much more.

This version of the demo engine has many many examples in it. However, it is only the beginning, and there is a lot of room to add more content. The next step is to open the development process for community submissions of all the cool things people have done with Dojo. We will be making available the demo engine on Subversion, and writing development and submission processes to make it as easy as possible for people to contribute.

This is gonna be big!

Update: see for the Ajaxian post.
Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt

16 Responses to “Dojo Ajax Demo Engine released”

  1. Could you please make sure that the dojox.gfx and other pages are referenced correctly. I had some small issues loading some things.


  2. j ross said

    Unfortunately the one demo I tried on this site (drag and drop -> movable) just doesn’t work in IE(7). Same problem I had with examples on the site. Doesn’t inspire much confidence in the toolkit. I would think a quick test that something works in the two major browsers out there would be in order before publishing a demo.

  3. Peter, J,

    thanks for your replies! Somehow a little error sneaked itself into the upload progress of the explorer.
    The above issues are fixed now and DnD and the links are working.
    J, I checked the site and Dnd in IE7, it works fine for me, if the error persists it is best to file a bug report at
    Thx for finding the error,

  4. This is a FANTASTIC demo that shows off Dojo’s capabilities. In the 15 minutes of playing with these demos, I’ve managed to grasp a much better understanding of all the lesser-used dojox widgets.

    Thanks for sharing!

  5. Laurence, thanks a lot. Hopefully many more people will have the same reaction. As we go along, we will be adding more and more demos, which as you say, will shed some light on the cool, but lesser known, parts of the framework.


    • toledano said

      Many thanks for this complete and superb “Dojo Ajax Demo Engine”.

      I’m an old (54y) IT project manager (on IBM COBOL/Assembler/VBNET in banking env). To learn by exemple Ajax/Dojo and others (Ext), I’ve bought some books on them.

      I try to have a local copy of Dojo Ajax Demo Engine, but this copy (runing Dojo v1.5-latest engine) seems give some errors :
      explorer/layer.js : dojo.provide(“explorer.layer”); (Dojo not defined)
      featureexplorer.js : dojo.addOnLoad(function() (Dojo not defined)

      Should be problem with dojo path or layer.js and featureexplorer.js locations.

      Name1/Name2/Index.html (refers to
      ../../dojotoolkit/… or
      ../../css/layout and extra stylesheet or
      specific ../../dojotoolkit/explorer/layer.js or ./featureexplorer/featureexplorer.js


      Have you some ideas or could you post a zip file?

  6. […] Or even how to use advanced features, like Django templates and SVG charting? Then take a look!read more | digg story Share and Enjoy: These icons link to social bookmarking sites where readers can […]

  7. […] Posts Dojo Ajax Demo Engine releasedSexy new Calendar widget for DojoIntroducing the new Dojo Image WidgetsNavigating in an IE Modal […]

  8. […] Posts Sexy new Calendar widget for DojoNavigating in an IE Modal DialogDojo Ajax Demo Engine releasedUsing AOL hosted Dojo with your custom codeWriting a Django Template Widget With Dojo Data […]

  9. boozedog said

    Hi Shane, love the dojo feature explorer! I’m new to dojo and trying to figure out how the Flickr Viewer works, but I’m not able to get it working using the HTML in the feature explorer HTML window. The HTML seems to be incomplete.

    I’m wondering if it’d be possible to see a standalone page with the running demo inside?

    Or maybe get the full source for the entire feature explorer site? 🙂

  10. Hi Boozedog,

    Thanks! See the Links tag at , it has links to standalone examples.

    All the examples in the feature explorer are snippets – they do not include the or tags. Also, they hard code in the paths to some resources, such as css and JavaScript files, that you would have to change to point to the resources on your own system in order for a direct copy/paste to work.



  11. […] X41 – Installing the Beryl Window ManagerTemporary solution for using Huawei modems in WindowsDojo Ajax Demo Engine releasedGetting the selected ID from a Dojo […]

  12. […] or extend widgets? Or even how to use advanced features, like Django templates and SVG charting? T presents Birkenstock, Footprints, Birkis, Papillio, Betula …Microfiber is a completely […]

  13. toledano said

    The local demo run correctly with Dojo latest 1.5 unless dropdown using JSON data.js file.

    In place of one line dropdown with input text and down arrow, the local result is on three lines with
    First line : Yellow icon exclamation point and down arrow at right end
    Second line : ‘X’ character
    Third line : input text (filled with correct menu text after using down arrow

    May be original source code is wrong to generate the appropriate definitve code at run time?

    Dojo Feature Explorer


    popup: this._popupWidget,
    around: this.domNode,
    parent: this,
    orient:{‘BR’:’TR’, ‘TL’:’BL’}

    Dojo Feature Explorer




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: