Massive TabContainer upgrade added to Dojo

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

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 https://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!

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

Adding a ToolTip to a Dojo Tab Container

Using the Dojo Tooltip widget with the TabContainer is not as simple as one would like. It would be nice if it were possible to simply identify the Tab button by ID and add a Tooltip to it’s domNode element, which is the base DOM node that this widget is associated with. However, this does not work as the positioning of the Tab button plays havoc with the tooltip.

E.g.

<span dojoType=”dojo:tooltip” caption=”My Tooltip” id=”myTooltip”/>
<div widgetId=”myTab” dojoType=”dojo:ContentPane” label=”Info”> ….

var myTabDiv = dojo.byId(“myTooltip”);

var node =dojo.widget.byId(“myTab”).domNode;
dojo.widget.createWidget(“dojo:tooltip”,{connectId: node},myTabDiv);

The code above does not work, unfortunately. The fix is to create the Tooltip on a Span element inside the Tab button control. This will result in the Tooltip appearing correctly when you mouse over the text on the button.

E.g.

var myTabDiv = dojo.byId(“myTooltip”);
var widget = dojo.widget.byId(“myTab”);
var node = dojo.dom.firstElement(widget.controlButton.innerDiv,”span”);
dojo.widget.createWidget(
“dojo:tooltip”,
{connectId: node},myTabDiv);