dojox Calendar updated

Today I checked in some bug fixes and performance enhancements for the dojox.widget.Calendar widget.  If you’re currently using version 1.3 or later, I strongly suggest you grab it, as it addresses an annoying bug with displaying the wrong selected date.

You can either check out the file from source control, or grab it from here – http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/widget/Calendar.js any time from Sunday June 14th.

dojo.beer() in Dublin June 6th

Just a quick reminder, the dojo.beer() event in Dublin, Ireland is on tomorrow, June 6th.  See my previous post at http://shaneosullivan.wordpress.com/2009/05/20/dojo-beer-event-in-dublin-june-6th for full details.  Should be fun!

Cool Portlets added to Dojo!

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!

Code style checker for Dojo

I’ve added a code style tool to the Dojo Util project that developers can use to ensure that their code is following the syle guidelines published here -http://www.dojotoolkit.org/developer/StyleGuide .

You can see the current report, as of May 23rd 2009 at http://skynet.ie/~sos/misc/dojoCheckstyle/util/checkstyle/checkstyleReport.html

It can be very difficult to police your own code for tabs and spaces, and developers have much better things to be doing with their time than visually scanning over their code making sure that it is formatted correctly.

This tool identifies style guide violations, and gives developers a HTML file that displays them, and automatically fixes many of the common mistakes for you.  (This works best in Firefox right now, so you that if you have it)

The style checker is primarily aimed at Dojo contributors, but can also be used by normal users of the toolkit.  To override the standard folders that are examined, you can simply set the ‘dir‘ parameter relative to the Dojo base folder, and a checkstyle report will be generated for you custom code.

To see how to use the tool, get the latest vode from svn, the go to util/checkstyle and type

checkstyle.bat help

To run the checkstyle tool on the entire Dojo tree, simply type

checkstyle.bat

then open the checkstyleReport.html file, which you can see below.

If you want to be able to save files from the web interface, you’ll have to renamve the file checkstyle.php.rename.html to checkstyle.php, then click the Save or Save All buttons in the UI.

There is a ticket to track all checkstyle fixes at http://bugs.dojotoolkit.org/ticket/7390 , so can developers please reference this when checking in style fixes?

dojo.beer() event in Dublin, June 6th

Announcing the dojo.beer event in Dublin on June 6th, in the Ginger Man on Fenian St.

dojo.beer events have been running all over the world for over a year now, where developers and users of the Dojo Ajax Toolkit meet up, usually with a presentation or two from Dojo committers, and always with lots of beer/wine/whiskey/Coke (for the designated driver) depending on the locale.

We’re very lucky to have Dylan Schiemann,the co-founder of Dojo and CEO of SitePen, presenting on all things Dojo/Ajax/Web2.0.  I’ll also be doing a presentation on some of the cooler things you can do with Dojo, and I might even show you how to do them!

So, if you’re interested in the Dojo toolkit, or Ajax/Web 2.0 technologies in general, come along and knock back some beers with us.  The event details are:

When: 5pm Saturday June 6th

Where: Upstairs (private bar) in the Ginger Man pub on Fenian St. Click here for a map.

What: Two very interesting and informative presentations from Dylan Schiemann (Dojo co-founder) and Shane O’Sullivan (Dojo committer).  And beer.

Duration: between 1 and 2 hours, but we’ll be hanging around for beers long after the official event is finished, so stay as long as you like!

Cost: Free!  As with all things Open Source, the event is free entry, but you can buy me a pint if you like .

Contact: You can just turn up, or add yourself to the event on Facebook at http://www.facebook.com/event.php?eid=78088992918 . Or email me at shaneosullivan1 at gmail dot com

EasyCheckboxes: dojo.query and Greasemonkey

I’ve written a useful script for Firefox and Greasemonkey called EasyCheckboxes.  It makes it more convenient to work with multiple checkboxes on a page, enabling you to select, deselect or toggle groups of checkboxes. It will also work with all web pages.

See the video below for more info, or you can install it right now by clicking here, or by visiting the script homepage at http://chofter.com/apps/?n=easycheckboxes

Context Aware Selections

One of the most useful features of EasyCheckboxes is that it is context aware.  It figures out what checkboxes are related to the one you chose, and only changes the state of those. This is useful if you have multiple columns of checkboxes, and you only want to check all inputs in one column.

Of course you can also change the values of all checkboxes on the page.

Using Dojo’s query engine, Acme, in Greasemonkey

If you’re not interested in the techie details, you can stop reading now.

Since version 1.3 of the Dojo Ajax Toolkit, it provides a standalone DOM query engine called Acme.  I compressed this down to a single line of code, and inserted it in my GreaseMonkey script.   I previously tried using the Sizzle query engine, but it had too many issues with Greasemonkey, the main being that it sometimes crashed the browser.

Using it is very simple.  Simply call:

acme.query(”.someClass”, unsafeWindow.document);

And it returns an array of the matching nodes.

Using dojo.query & Greasemonkey to skip welcome screens

I posted a couple of weeks ago on how I used the Sizzle CSS selector engine in a Greasemonkey script to skip annoying “Welcome Screens”, see it here, or check out the very handy script here.  However, there were a couple of issues with using Sizzle:

• It had to be inserted in the main page’s JavaScript context, otherwise it would not work.  This is obviously bad as it takes it out of the Greasemonkey sandbox, and potentially could break functionality on the page in question.
• On some pages it crashed the browser.  Not good.

So, I’ve replaced it with the Dojo standalone library, Acme.  Some advantages it has over Sizzle:

• It’s arguably faster
• It doesn’t have to be put outside the Greasemonkey sandbox, so no interfering with the page code.
• It doesn’t crash the browser

You can get the uncompressed version of Acme here – http://archive.dojotoolkit.org/nightly/checkout/dojo/_base/query.js

If you want a compressed version, that works independantly of Dojo, you can compress that file to a single line using the YUI compressor at http://www.refresh-sf.com/yui/

Skip Welcome Screens With Greasemonkey

A feature of some websites that really annoys me are so called “Welcome Screens”, otherwise known as full page advertisements that you have to click through to see the real page. (e.g. Forbes.com).  This apparently annoys plenty of other people too, so I decided to write a simple GreaseMonkey script that will automatically get past the majority of these pages.

It is called “SkipWelcomeScreen”, funnily enough, and you can install it on Firefox 3 from it’s homepage at http://chofter.com/apps/?n=skipwelcomescreen

If you’re not interested in technical details, you can stop reading now.

Using Sizzle with Greasemonkey

To very quickly search the page for anchor tags, I used John Resigs very cool standalone query selector engine, Sizzle.  However, it had to be modified very slightly to work in GreaseMonkey.

At the end of the Sizzle.js file, there is the line:

window.Sizzle = Sizzle;

which had to be changed to

unsafeWindow.Sizzle = Sizzle;

due to GreaseMonkey’s use of a sandbox.

Also, when calling Sizzle, it wasn’t possible to call it directly, like:

Sizzle("a");

instead it has to be called using the unsafeWindow parameter:

unsafeWindow.Sizzle("a");

Otherwise, it works perfectly, and is blisteringly fast.

SOS the Dojo Committer

A quick note to say that yesterday Pete Higgins (Dojo Ajax toolkit lead) asked me to be a committer on the project, and I very happily accepted.

Not much will change really, I continue to own the components I’ve already committed to Dojo, such as the image widgets, calendar, numerous data stores etc.  However, it enables me to participate in more of the conversations that drive the focus of the project, and should make the whole development process a bit smoother without me having to nag people continuously to check in my patches.

Congrats also to the other two new committers, Nicola Rizzo and the other whose name escapes me right now

Dojo TabContainer: beating the wrap

One of the features of the Dojo Ajax Toolkit’s TabContainer that always bugged me was that, once there were too many tabs to fit horizontally in the widget, they’d wrap around, like you can see in the picture below.

Wrapping Tabs

It would have been far nicer for them to not wrap, and instead smoothly scroll, using either a menu to select them (like Firefox), or providing buttons to make the list of tabs slide right and left.

So, after much work, I’m just about finished upgrading the TabContainer with two new TabControllers:

• dijit.layout.TabController – the default widget, which places a single button to the right of the tabs, and shows a menu when you click it.  This is very similar to how many browsers deal with tabs.
• dijit.layout.SlidingTabController – an optional widget, which places a button to left and right of the tabs, and slides the list left and right.

The video below shows the two widgets in action.

The upgrade is almost complete, and should hopefully make it into the upcoming 1.3.1 release of Dojo.

Update: the changes could not be put into 1.3.1, as that was only for bug fixes. It will be in 1.4 instead</b