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

Archive for the ‘dojo.image’ Category

Cool Portlets added to Dojo!

Posted by Shane O'Sullivan on June 1, 2009

Last week I put the finishing touches my Portlets for the Dojo Ajax Toolkit.  You can see them now on the test page at (it can take a while to load since it loads a hell of a lot of widgets and the code is not optimized with a build).

To see a description of what they can do, see my original post announcing them at

As a brief description, Portlets are widgets that represent individual applications used in a web portal.  They can be rearranged by dragging and dropping them around the page, and can often be customised with a number of settings.

The Dojo Portlets, in the dojox.widget project, support some useful features like:

  • Customisable settings widgets, for setting user defined options.
  • Loading Atom and RSS feeds to display as a list

and a good bit more.  See my previous post for a full description, or check out the test page.

Below you can see the Portlets using the blue Soria theme from Dojo.  There will probably be some small changes to the look and feel before v1.4 is released, but nothing major.  Note the different types of Portlets, from the Atom & RSS feed portlets on the left that can show more detail using tooltips or expandable secrions, to portlets containing generic widgets like a slideshow on the right.

Have fun!


Posted in Ajax, Atom,, dojo.image, dojox, dojox.image, Javascript, open source, tab | Tagged: | 16 Comments »

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

Posted in Ajax, demo, Demo Engine, dijit, django, Dojo, dojo.charting,, dojo.event, dojo.image, dojo.query, dojox,, dojox.image, Image Gallery, Javascript, json, open source, Technical | 16 Comments »

Image Gallery, Slideshow, and Flickr data source for Dojo 0.9

Posted by Shane O'Sullivan on September 4, 2007

In a previous post (see here) I spoke about how I’d written an Image Gallery widget that worked with Dojo Ajax Toolkit version 0.4.2 and 0.4.3. I contacted the good folks at Dojo about updating it for the latest release, 0.9, and adding it to the toolkit.

They were very receptive to the idea, with a few suggestions. Firstly, rather than having its own method of storing information, it should run off the API, and secondly, it should go into the newly created dojox.image project.

Both of these suggestions were perfectly reasonable, so, cut to a few weeks later and I’ve finished my first pass at converting over the code from 0.4.3 to 0.9. As the Dojo APIs have changed drastically recently, this was no simple matter, but thats the subject of another blog post.

The code is not finished (or even checked in) yet, but you can see some examples of it running from test pages. There are two separate widgets:

  • dojox.image.SlideShow – a simple widget that runs a slide show of images, with urls loaded from a store.
  • dojox.image.ImageGallery – this wraps the SlideShow widget, adding thumbnail views. This is also loaded from a store.

Finally, I’ve implemented a store that reads from the Flickr REST APIs, to pull down lists of photos. This store is more complex than the existing Flickr store, as it does caching of results, as well as going against a much more flexible API, meaning that expanding its capabilities later is possible.

Whether or not this goes into dojox or not is still undecided. However, you can see the widgets running using this data store.

See the test files at for examples of this working.

Note that this is NOT the final code. It may still be buggy, may look different in the future (it’s pretty basic now), and the code will be cleaned up. However, if you have any suggestions, please feel free to leave comments on this post.

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

Posted in Ajax, dijit, Dojo, dojo.image, dojox, Image Gallery, Javascript, open source, Technical | 1 Comment »

%d bloggers like this: