SOS

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

Archive for the ‘cross domain’ Category

Using AOL hosted Dojo with your custom code

Posted by Shane O'Sullivan on January 22, 2008

The Dojo Ajax Toolkit is kindly hosted by AOL for the consumption of anyone at all. This has the advantage of

  • Reducing the load on your own server
  • Speeding up the delivery, as a Content Delivery Network (CDN) is used to ensure that the server is as close as possible to the client, and
  • The more people who use this the better, as the same Dojo files will be cached when users move from site to site, as they’ll all be downloading the AOL hosted files.
  • Gzip compression as standard, so the files are as small as possible

Additionally, since release 0.9 onwards, the main Dojo JavaScript file, dojo.js, is always exactly the same, whereas in previous released it changed for every developer who built it.

However, the problem comes in where you want to use your own custom code with the hosted Dojo code. This is because the hosted code uses Dojo’s loading system to dynamically load the resources needed on the page, and this will read the files from AOL, not your server (as you would expect – it knows nothing about your server). If you want to build custom layers to improve performance, the remotely hosted Dojo will not be able to find them.

So, the solution I generally tend to use is to put the AOL dojo.js on every page, and tell Dojo to load any other required files from my own server. To do this, set the baseUrl parameter on the djConfig attribute for the JavaScript file to the folder where Dojo is stored on your server. E.g.

<script type=”text/javascript” src=”http://o.aolcdn.com/dojo/1.0.2/dojo/dojo.js&#8221; djConfig=”{baseUrl:’/js/dojo/’}”></script>

Notice here that the file I load is dojo.js, the normal version, not dojo.xd.js, which is the cross domain version capable of loading files from AOL.

After doing this, you can then include whatever custom built layers you like onto an particular page.  For example, if you have a layer built for the dojox.image.Gallery widget called  /js/dojo/dojox/image/Gallery-layer.js, you can load it either dynamically:

<script type=”text/javascript”>dojo.require(“dojox.image.Gallery-layer.js”);</script>

or include it via a script tag:

<script type=”text/javascript” src=”js/dojo/dojox/image/Gallery-layer.js”></script>

and it should work just as if you were using Dojo from your own server. Only of course you are not – AOL is serving up that file, and in many cases users will already have cached that file, speeding up your site quite nicely.

Another approach is to create a custom namespace, register it with Dojo, and put all your layers in there…. but that’s for another post :-)
Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt

Posted in Ajax, aol, cross domain, Dojo, Javascript, open source, Technical | 2 Comments »

Introducing the new Dojo Image Widgets

Posted by Shane O'Sullivan on October 13, 2007

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:

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

Posted in Ajax, aol, cross domain, dijit, Dojo, dojo.data, dojox, dojox.data, dojox.image, Flickr, Image Gallery, Javascript, json, open source, Technical | 77 Comments »

 
Follow

Get every new post delivered to your Inbox.

Join 533 other followers

%d bloggers like this: