SOS

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

Archive for the ‘widget’ Category

Massive TabContainer upgrade added to Dojo

Posted by Shane O'Sullivan on August 11, 2009

I previously wrote about work I was doing on the Dojo Ajax Toolkit‘s TabContainer widget.  This work prevents the tab buttons from wrapping around when they are wider than the available space, and instead allows you to use either a drop down menu to select the tab (like Firefox/IE7), or to use left and right slider buttons to “slide” the buttons.

Well, thanks to some great collaboration with Dijit master Bill and a Dojo contributer called alle, the work has now been committed to the code base.  It should be available to view HERE from Aug 12th 2009 onwards, and will be in v1.4 when it is released.

If you can’t wait for it, you can either download a copy of the nightly code base from http://archive.dojotoolkit.org/nightly after Aug 12th, or checkout the code yourself from Subversion right now.  Note that code in between releases is not guaranteed to be stable, as many features may be in the middle of upgrades.

There are a couple of issues remaining to be worked on, such as improved right-to-left support, but for people who have been clamouring for this to make it into the code base, you can grab this now, and get the upgraded, more stable widget in v1.4

Posted in Ajax, dijit, Dojo, Javascript, open source, tab, widget | 11 Comments »

Cool Portlets in Dojo

Posted by Shane O'Sullivan on March 11, 2009

I’ve been working on writing Portlets for the Dojo Ajax Toolkit for a while now, and they’re almost ready.

You can see a demo of it at http://www.skynet.ie/~sos/misc/dojo/dojox/widget/tests/test_PortletInGridContainer.html?theme=soria

A Portlet is similar to a dijit.TitlePane, in that it has a title bar, a content area, and is collapsible.  However, it should also have the option of being configurable, perhaps using a dialog box or an expandable area.  A nice example is the BBC website at http://bbc.co.uk, or the Google Portal http://www.google.com/ig.

Portlets are generally presented in a draggable grid, and a very cool new addition to Dojo is the dojox.layout.GridContainer, which provides this framework.

A number of types of Portlets and Setting widgets will be provided, hopefully in v1.4 (1.3 is in final beta, so this is too late for that).

  • dojox.widget.Portlet – this is the basic Portlet, which provides a close button, a collapse button, and a settings button.  All of these are optional.
  • dojox.widget.FeedPortlet – this Portlet loads an external Atom or RSS feed and displays it as a list.  Hovering over an item shows a dijit.Tooltip with a summary of the news story.
  • dojox.widget.ExpandableFeedPortlet – similar to FeedPortlet, but instead of using tooltips, a toggle icon is used to show more or less of a news story.
  • dojox.widget.PortletSettings – a widget that can be placed inside a Portlet to provide customizable settings for that widget.
  • dojox.widget.PortletDialogSettings – like PortletSettings, but the configuration options are displayed in a dijit.Dialog.
  • dojox.widget.PortletFeedSettings – provides one or more URLs to Atom or RSS feeds for a FeedPortlet to load.

These widgets offer pretty large set of functionality, which should be sufficient for the majority of peoples needs.  However, this is still in active development, and if you have any ideas for cool additions or changes I could make, please let me know.

Posted in Ajax, Atom, Calendar, chart, charting, Date Picker, demo, dijit, Dojo, dojo.charting, dojo.data, dojox, open source, widget | 72 Comments »

Dojo & GreaseMonkey == DaftMonkey

Posted by Shane O'Sullivan on January 26, 2009

Given that I’m looking for a new apartment, and I live in Ireland, I use the property search website Daft.ie.  Everyone does.  However I wasn’t very happy with how slow it is to scan through the many results that match my meagre budget.  I realised that it could be readily fixed with GreaseMonkey, using the Dojo Ajax Toolkit to make life easier when it comes to parsing the page, adding effects etc.

The result is DaftMonkey.

I wasn’t even sure if Dojo could be used from within a GreaseMonkey script, as it sandboxes away the custom script code.  However, with a little hackery it was (more or less) possible.  The steps I took were:

  1. Set up the djConfig parameter in the host window to tell Dojo that the page had already loaded, using unsafeWindow.djConfig = {afterOnLoad: true};. unsafeWindow is what GreaseMonkey calls the normal, non-sandboxed window.
  2. Added the <script> tag for dojo.js to the head of the document.  In this case I used the dojo.js.file hosted on AOL’s CDN servers – see http://dev.aol.com/dojo .
  3. Now you have to wait for Dojo to load.  This can be done with a simple setInterval function call, checking if unsafeWindow.dojo exists or not.  (Update: thanks a comment from James, this has been changed to use the djConfig.addOnLoad function)
  4. Once Dojo is loaded, you can call a function kicking off whatever it is that you  script is supposed to do.  In this case, I wanted to add a bunch of DOM nodes to the page (which you can do without Dojo), and add some cool effects, so I also included the dojo.fx bundle.
  5. Copy the dojo variable back into the sandbox window using var dojo = unsafeWindow.dojo, otherwise you’ll have to refer to it as unsafeWindow.dojo all the time.

Screen Scraping With dojo.query

A lot of the features of DaftMonkey rely on asynchronously fetching remote HTML pages and scraping the required data from them.  The approach I used for this was:

  1. Perform a remote request using GreaseMonkey’s native Ajax function GM_xmlhttpRequest.  This works more or less the same as dojo.xhrGet, and I saw no reason to not use it.
  2. When the text is returned, create a DIV, and absolutely position it far to the left.  Fix it’s size to just one pixel so it doesn’t mess with the scroll bars.
  3. Set the innerHTML of the DIV to the text you have retrieved.  Congratulations, you can now use dojo.query to find whatever nodes you need.  e.g. to find all images inside anchor tags, use dojo.query(“a img”, tempDiv).  Note the second parameter, this tells Dojo to only search inside the temporary DIV we created, and not the whole document.

Some other site-specific things were required as part of the screen scraping process.  Many of the sites had iframes included, and as soon as you add those to the temporary DIV, they start loading another page.  This was a nasty performance hit, so I had to remove them from the HTML string before setting the innerHTML of the temporary DIV.

Problems

One problem I found is that calling dojo.declare didn’t work from inside a GreaseMonkey script.  I don’t know why.  Therefore widgets had to be defined the old fashioned way.

A second problem was more related to the website I was writing the script for, Daft.ie.  The entire site is programmed using TABLES!  Seriously, there’s barely one or two DIVs on the page, with practically no CSS either.  This makes it quite difficult and brittle to screen scrape using dojo.query, as there’s really no classes to match.  Still it was possible, but could break relatively easily if the site layout is changed.

Get the Source

You can get the entire source for the script at http://userscripts.org/scripts/show/41105 .

To read a bit more about DaftMonkey, I’ve put up a page about it at http://www.chofter.com/apps?n=daftmonkey .

Posted in Ajax, Dojo, dojo.query, greasemonkey, Javascript, open source, search, widget | 8 Comments »

Great Dojo Widget tutorial

Posted by Shane O'Sullivan on April 22, 2008

Pete Higgins has posted a great tutorial on how to write a Dojo widget, taking as an example his recent addition, FisheyeLite.  Check it out at http://dojocampus.org/content/?p=100

Posted in Ajax, dijit, Dojo, dojox, Javascript, open source, widget | 2 Comments »

Dojo 1.1 is cooked and ready to eat!

Posted by Shane O'Sullivan on March 28, 2008

The latest and greatest release of the Dojo Ajax Toolkit has just hit the presses, and she’s looking good. As Alex mentioned, the number of cool features in Dojo can be difficult to keep up with, so I’ll just list some of the things I’ve either written for Dojo, helped along, or just been damn impressed by in this release:

Dojo Datastores

The number of useful data stores for Dojo just keeps growing and growing, under the watchful eye of Jared. For release 1.1, I submitted a data store to read Atom XML documents, dojox.data.AtomReadStore. See more about this at https://shaneosullivan.wordpress.com/2008/02/20/new-atom-data-store-for-dojo/.

FisheyeLite

Peter Higgins submitted an amazingly simple, but oh-so-cool widget called dojox.widget.FisheyeLite. Rather than act like a ‘true’ Fisheye widget, which would generally only work on images (á la OS X), this widget can apply cool Fisheye-like behaviors to just about anything – text, divs, spans, you name it. Check out the test page for some cool examples, or see my personal website for an example of how I used it to spruce up my site menu.

Django Template Languate – dojox.dtl

The Django Template Language is an amazingly powerful templating language, with which you can turn your JavaScript data into HTML. While this was originally designed to be a server side templating solution, Neil Roberts has done a brilliant job of converting it over to work in the browser. While I though I’d had an original idea when I pitched the idea to him that it’d be cool to integrate Dojo data stores directly into DTL, Alex already had the whole thing implemented and about to check it in. Typical :-) I’ve written up a tutorial on how to integrate DTL with Dojo data stores, specifically the AtomReadStore I wrote, at https://shaneosullivan.wordpress.com/2008/03/03/writing-a-django-template-widget-with-dojo-data-stores/.

Functional Programming

This enables you perform many operations on data using just a single function call. Once of the cool things it provides is the ability to specify a function as a simple string, drastically reducing the complexity and size of your own code. Eugene Lazutkin wrote a great blog post about this, which is well worth a read. I wrote a follow up post, as a quick reference to some of the cool things you can do with this feature. Some of this was available in 1.0, but I’ve just discovered it, so here you go!

Dojo Campus

Peter Higgins, Nikolai Onken and myself have been working on a new learning resource for Dojo developers, called Dojo Campus. It provides a lot of learning materials, including videos, tutorials for beginners and more advanced programmers, and much more. We also have a still-under-wraps-but-soon-to-be-release demo engine that has loads of easy to use runtime examples of things to make and do with Dojo. I blogged about a very early version of it at https://shaneosullivan.wordpress.com/2008/01/07/dojo-demo-engine-update/, but it’s come a long way since then. Keep you eyes peeled for it’s release. Any day now…..

And finally….

A very sexy Calendar widget I’ve written got submitted just a bit too late to make in into 1.1 (read: the day before release), but will be in the nightlies soon, and will make it into 1.2. See the blog post about it at https://shaneosullivan.wordpress.com/2008/03/24/sexy-new-calendar-widget-for-dojo/.

This is nowhere near a comprehensive list of course, just the bits I’ve been fiddling with over the last few months:

  • See Dylan’s post for some more info.
  • Get the release notes here.
  • See the Ajaxian post here.
  • See Alex Russell’s (Dojo project lead) post here.

So go forth and explore, it’s good healthy nerd-fun! Share this post:
digg it|kick it|Email it|bookmark it|reddit|liveIt

Posted in Ajax, Alex Russell, Atom, Date Picker, demo, Demo Engine, django, Dojo, dojo.data, dojox.data, Javascript, json, open source, Technical, widget | Leave a Comment »

 
Follow

Get every new post delivered to your Inbox.

Join 535 other followers

%d bloggers like this: