Month: March 2009

Nice column move and resize effects added to Dojo Grid

The Dojo Grid is a very cool widget, with many handy features.  However, one thing it definitely lacked was an attractive way of moving and resizing columns.  When resizing columns, the size of the header would change as you dragged it, and when the mouse button was let go, the column width would snap to the same size.  This gave the impression that the widget was slow, when it was not.

I submitted a patch a while ago (too late to make it into v1.3) to instead show a vertical line the same height as the grid which moves as you resize the column, with the header and body columns being resized at the same time.  This has been now been committed to the Dojo source (and will be available in the Dojo nightly code drops from tonight, March 31st 2009).

When moving columns, it was difficult to tell where the new column would be placed, as there was not much in the way of indication.  The patch I submitted places an arrow above and below the point of insertion, making it easy to see where the column in going.

The video below shows these changes in the Tundra CSS theme, and you can see it in any of the Grid test files, e.g. http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/grid/tests/test_data_grid.html

Cool Portlets in Dojo

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.