SOS

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

Archive for the ‘dojox.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 http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/widget/tests/test_PortletInGridContainer.html (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 http://shaneosullivan.wordpress.com/2009/03/11/cool-portlets-in-dojo

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!

Portlets

Posted in Ajax, Atom, dojo.data, 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 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.

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 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

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

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 http://www.skynet.ie/~sos/js/demo/dojo/dojoc/demos/featureexplorer.html .

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

Posted in Ajax, demo, dijit, documentation, Dojo, dojox.image, Javascript, json, open source | 6 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 | 78 Comments »

Querying Flickr with Dojo!

Posted by Shane O'Sullivan on September 22, 2007

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:

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

Posted in Ajax, Dojo, dojo.data, dojox.data, dojox.image, Flickr, Image Gallery, Javascript, json, open source, Technical | 3 Comments »

Specifying the callback function with the Flickr JSON APIs

Posted by Shane O'Sullivan on September 13, 2007

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&amp;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

Posted in Ajax, Dojo, dojox, dojox.data, dojox.image, Flickr, Image Gallery, Javascript, open source, Technical | 5 Comments »

 
Follow

Get every new post delivered to your Inbox.

Join 533 other followers

%d bloggers like this: