Dojo Ajax Demo Engine released

A great new demo engine has just been released for the Dojo Toolkit. Check it out at http://dojocampus.org/explorer/. 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.

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 http://ajaxian.com/archives/dojo-mini-and-the-feature-explorer for the Ajaxian post.
Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt

Introducing the new Dojo Image Widgets

In previous posts (here for the Dojo 0.4.3 version, here and here), I wrote how I wrote an image gallery for version 0.4.3 of the Dojo Ajax Toolkit, and how I was translating it for the latest version of the toolkit, version 1.0.

Well, that work is now, finally, complete, and I have to say, I’m pretty damn happy with the results. The code is now part of the dojox.image project (dojox is the Dojo extensions project, for cool new code that may in the future make it into the core code base if enough people like/want it).

If you’d like to just see the gallery in action, have a look at the Photos page on my personal website, or see the links at the bottom of the post, otherwise, read on!

Update: changes have been made to the widgets since this post was written, resulting in some badly aligned images. This will be fixed in the next few days. (Oct 25th 2007)

Update: issue above has been fixed (Oct 29th 2007)

All For One….

The gallery is composed of three widgets:

• dojox.image.ThumbnailPicker - a widget to list many small images in either a horizontal or vertical orientation, scroll through them, and attach click events that other widgets can listen to
• dojox.image.SlideShow - a widget that displays one image at a time, and can run a slideshow, changing the images every ‘x’ seconds.
• dojox.image.Gallery - A wrapper around the ThumbnailPicker, and SlideShow widgets.

Both the ThumbnailPicker and Slideshow widgets can also be used on their own, and have no dependencies on each other.

Dojo Data Is Too Cool for School

One of the coolest features of all of these widgets is that they all feed off image data provided by the dojo.data API. What this basically means is that each widget can display images from any source, with no modification whatsoever. You simply pass it a Dojo data store, and is shows the pictures. Some of the data stores currently in the Dojo toolkit include:

• dojo.data.ItemFileReadStore - pull in simple JSON data in an array. You could use this if you simply have a directory of images on your own web server you would like to display
• dojox.data.FlickrRestStore (demo) - query the Flickr photo sharing website for images. This is all done on the browser, with no need for any server-side redirects. This is another of my additions to the Dojo toolkit - I love Flickr, feel free to check out my photo stream here. I previously wrote another blog post on this data store here.
• dojox.data.PicasaStore (demo) - query Google’s Picasa image sharing website for images. As with the Flickr data store, this is done on the browser, with no need for server side support.

and many more….. You can also write your own data store if you so desire, but the ones included in the toolkit should cover almost everything you might need.

Gimme, Gimme, Gimme!

So, how can I get this, you ask! Well, you can:

• Have a look at the test pages for the widgets:
  • Test page for ThumbnailPicker
  • Test page for SlideShow
  • Test page for Gallery
  • Demo page for dojox.data.FlickrRestStore
  • The Gallery on my personal website - example of using the widget hosted on your own server
  • The Gallery on another website - example of using the widget hosted on AOL’s cross domain CDN network.
  • Demo page for all DojoX Image widgets
• Read the documentation (I know!! Documentation… in Dojo!!)
  • Doc page for ThumbnailPicker
  • Doc page for SlideShow
  • Doc page for Gallery
  • Doc page for dojox.data.FlickrRestStore
• Download the latest nightly archive from Dojo.
• Check out the code from the Subversion repository.
• Wait for Dojo 1.0 to come out (end of Oct 2007) and download the full release from the main Dojo website.

Update: Dojo 1.0 is now released. Get it at http://www.dojotoolkit.org/downloads
As always, any and all feedback is welcome. Also, a big thanks to Peter Higgins, owner of the dojox.image project, and Jared Jurkiewicz, owner of the dojo.data project, for all their helpful ideas, and for reviewing/committing my code to the Dojo project.
Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt

Querying Flickr with Dojo!

I’ve recently submitted a new data store for the Dojo Ajax Toolkit that makes it very simple to query Flickr for your and other peoples images. For those not familiar with Flickr, it is a photo sharing website, one of the most popular on the net. However, what makes it quite special is the comprehensive public APIs that it exposes.

While these APIs are extremely useful, however, they are also very complex, with a steep learning curve before you can even get started. In steps Dojo and their new Data API specification, whose stated aim is to have a single unified interface to all data sources, so that users of a data store won’t have to care if they’re reading from a database, from a XML or JSON file, or from some remote service like Flickr.

So, long story short, I’ve written an implementation of the Dojo Data APIs to query data from Flickr. It is part of the DojoX project, and is called dojox.data.FlickrRestStore. It provides quite a few methods of querying for photos:

• By one or more tags, matchine any or all of them
• By user id
• By set id
• Full text search
• Sorting on date taken, date published or ‘interestingness’

FlickrRestStore also performs caching of image data, so if you request the data twice it won’t make a second remote request.

The store is also designed to be accessed by multiple clients simultaneously. If two clients request the same data, only one request is made, with both clients being notified of the identical results.

Examples

I’ve put a fairly comprehensive set of examples in the Dojo book at http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo
/using-dojo-data/available-stores/flickr-rest-s#examples .

You can see a Demo of it running at http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/data/demos/demo_FlickrRestStore.html .

The unit tests cover quite a few cases also, and you can see them at http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/data/tests/stores/FlickrRestStore.js

To get the code, you can:

• Check out the latest copy of the Dojo toolkit, see the instructions here.
• Grab the entire nightly build from http://archive.dojotoolkit.org/nightly/
• Wait for release 1.0!

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

Specifying the callback function with the Flickr JSON APIs

Flickr is a photo sharing website that has a very flexible set of APIs that other applications and websites can use to access the photos it stores. This post shows you how to specify a callback function that Flickr can call to pass your web application information on photos it stores.

Quite a while ago I looked into the Flickr APIs for a website I was writing. Looking at the service that returns photo data in JSON (Javascript Object Notation), I noticed that it did so by calling a predefined function, jsonFlickrApi, passing in the data to that function. This seemed to be an obvious weak spot, since if more than one widget on a page were accessing the Flickr REST services, they would clash with each other, possibly receiving each others data. Obviously not a good thing.

Cut to today. I’ve been working on a JavaScript data store that operates against the Flickr REST services for the Dojo Ajax Toolkit, and had another look at the Flickr APIs. Now, whether I missed it before (doubtful, as I looked specifically for it), or the fine Flickr folk have listened to complaints (very likely), but there is now a parameter that can be passed to the Flickr API that specifies the callback function to use when the data is retrieved from Flickr.

All you have to do is pass a parameter jsoncallback to Flickr, with the name of the function you want to be called with the data, and thats it.

E.g. if I had a function:

function myCallbackFunction(data) {

alert(”I received ” + data.photos.photo.length +” photos”);

}

I could then specify a <script> element in my HTML page to retrieve the data in a cross site manner (since you can’t make cross site XmlHttpRequest calls), like so:

<SCRIPT type=”text/javascript” src=”http://www.flickr.com/services/rest/?format=json&jsoncallback=myCallbackFunction
&method=flickr.people.getPublicPhotos
&api_key=8c6803164dbc395fb7131c9d54843627
&user_id=44153025%40N00&per_page=1″>

</SCRIPT>

Note the jsoncallback parameter in the src attribute. This results in JavaScript similar to:

myCallbackFunction({”photos”:{”page”:1, “pages”:489, “perpage”:1, “total”:”489″, “photo”:[{"id":"1352049918", "owner":"44153025@N00", "secret":"5636009306", "server":"1111", "farm":2, "title":"The Liffey Panorama", "ispublic":1, "isfriend":0, "isfamily":0}]}, “stat”:”ok”});

being called.

Thanks Flickr! Nice to see them listening, and continually improving. This will make web applications built on Flickr much more robust, without the need of ridiculous hackery to get around unnecessarily difficult APIs. See http://www.flickr.com/services/api/response.json.html for the offical info on JSON responses.

Keep an eye out for my dojox.data.FlickrRestStore being release some day soon!!
Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt

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

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 dojo.data 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 dojo.data store.
• dojox.image.ImageGallery - this wraps the SlideShow widget, adding thumbnail views. This is also loaded from a dojo.data store.

Finally, I’ve implemented a dojo.data 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 http://www.skynet.ie/~sos/js2/dojox/image/tests 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

Flickr and Dojo Image Gallery

I have created an Image Gallery widget built on Dojo 0.4.3 that integrates nicely with Flickr. The widget it written entirely using JavaScript and CSS as a standalone Dojo widget, and is released under the same open source license as Dojo, the Academic Free License.

For more information, including the code and examples, see http://www.skynet.ie/~sos/ajax/imagegallery.php.

Some of the features of the widget include:

• Pages of thumbnails.
• Intelligent pre-loading of images so the images you are looking at are loaded first.
• Fade effects for transitioning of images
• Populated using JSON data - any JSON data, not just Flickr.
• Flickr integration - remotely load your Flickr images.
• Paging through a Flickr collection.
• Slideshow

The widget can be instantiated from both HTML markup and programmatically in JavaScript.

To view your own Flickr pictures on the widget, without installing it on your own site, go to http://www.skynet.ie/~sos/ajax/yourpics.php .

There is a discussion thread in the Flickr API group at http://www.flickr.com/groups/api/discuss/72157600624623643.

So, why create this widget? Well, firstly I wanted a JavaScript image gallery that would list thumbnails and allow me to page through Flickr photos. Also, a slide show would have been nice. I was surprised to discover that I couldn’t find one that I liked in the twenty or so minutes I spent looking for one. I found a handy Flash based one, but I wanted a HTML and JavaScript only widget. So I grabbed Dojo 0.4.3 (my JavaScript library of choice right now) and wrote one.

Here is a screen shot:

The widget has all the features that I personally require at the moment, but will probably evolve as I think of new things to add. If you have any suggestions/bug reports, please comment on this post.

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