gwt-yui-ext update #2

I have made an important update to the gwt-yui-ext library. The grid control wasn’t much use if you couldn’t click on it and select items for editing etc so I have implemented the GridEventManager and GridEventListener classes. These will let you listen for clicks, double clicks etc and response by defining your own functions sub-classed from the GridEventListener.


GridEventListener rowListener = new TestGridEventListener();
rowListener, grid.getGrid());

The onRowClick function in the class TestGridEventListener will get called when the use clicks on a row.

I have to make some changed to the example to extract the row data when the row is selected or double-clicked to show this off. The example at the moment merely shows a window alert with the contents of the first column.

The important point about this is now I can move the component parts of the gTraffic site into the yui-ext framework which will show this off better than the sample app ever could.

Roadworks and VMS

I am still trying to get the Roadworks and VMS (Variable Message Signs) feeds working again but I am having problems getting the authentication to work properly (I have username and password access to secured data).

Please bear with me for the moment. Currently the data displayed for these map layers is woefully out of date. I know from the webstats that these are not really looked at that often but _somebody_ must be interested in them so I will do my best to try and get these going again.

At some point I would like to come back and redo the application layout. I am open to suggestions so mail me at arutherford if you have a suggestion.

gwt-yui-ext – update #1

Some minor updates:

– Added default column sorting types for grid.
– Added ability to define custom formatting for columns.


gwt-yui-ext is my (partial) wrapper around (some) of the yui-ext components. The yui-ext library is built upon the YUI library by Yahoo which is a javascript library of routines for page layout and animation (among other things). Jack Slocum has taken this and developed an amazing set of controls including a layout with sliding panels and a blinding grid control which could take on any commercial library. So… I like his controls and I thought was it possible to wrap them in a way that GWT could use them? Well the answer is yes but now I am not so sure it was really worth the bother. On reflection I don’t think this is _entirely_ what Google had in mind for their JSNI mechanism. I suspect they were hoping that people would write cool controls like this in GWT. Well it aint happened yet so I suppose some of the gwt-yui-ext will suffice in the meantime.

I started off on this with the BorderLayout control and fairly quickly got something to work. A lot of debugging later I realised that basing the control upon a ‘ComplexPanel’ would do a lot of the things that I was having to reproduce in my code. One rewite later and it seem to be sortof complete with a few funnies hanging around:

– The right panel doesn’t seem to force a resize of the central panel unlike the left??
– Grabbing the split-panel resize bar is a bit hit and miss??

I was going to publish this then I had the thought ‘who actually wants this layout’. I can’t see it anywhere other than Jacks blog, where it integrates well, but I was still having a kind of ‘what’s the point’ feeling.

Enter the ‘grid’ control. Everyone loves a data grid. The yui-ext grid is a cracker with lots of functionality and looks the business.

So, I have made a start on this. The sorting function for the columns is the last piece of the jigsaw but I have held back to have a think about how to do this in a way that can hook into GWT and let people write their own.

Here is the demo. Either it’s good idea or a bad one. Developers please mail me at

Also, if you are interested in getting involved in implementing a particular feature then mail me.

GWT:Simile Timeline HOWTO

If you look up to the right under the ‘pages’ section you will find a link to a HOWTO page for the GWT Timeline which details all the information you should need to get up and running with the GWT Simile Timeline widget. Any feedback on this is welcome. I think I have covered (almost) all of the questions I have been asked about the widget so have a look.

For an instant idea of the GWT Simile Timeline click in the this link here Timeline Test

There is an existing issue about loading the timeline from a XML string but I have yet to find out how to do this. I _thought_ it was simple but it turns out it is not that easy! If anyone resolves this then mail me and you will be credited in the code. I want to know…


I have been working on a GWT Wrapper API for Jack Slocum’s javascript GUI component library yui-ext. In Jack own words this is a ‘library of reusable JavaScript widgets and classes that extend the Yahoo! UI Library’.

Sidu Ponnappa has an example of yui integration here but his drag and drop example doesn’t look like the sort of thing I would use (yet) and also layout managers are the major thing that drove me to start using GWT in the first place.

So, I have been casting an envious eye over Jacks particular layout manager for quite a while now and after the Simile Timeline GWT Wrapper I have started to get an eye for what can be wrapped easily and what can’t.

There is a lot to yui-ext but it’s usage can be boiled down to the examples on the documentation page which means that is my main target. So far it’s just the BorderLayout stuff and the theme setting but it’s getting there.

Here are some screenshots. I see my home town of Milngavie appears to be hemmed in by golf clubs.

Map tab


Map tab

You can zoom in using IE ctrl+/- or in Firefox right click and choose ‘View Image’.

I am hesitant to create a Google Code project as I am unsure (a) what Jack will make of this and (b) I don’t want to starting having to field questions about yui-ext when I am far from an expert (hey at least I’m honest).

I could have just published the layout manager as it was on the first cut but I went on to insert some real controls into the central panel (Google Map and GWT Simile Timeline). Quite a lot of redesign later (ComplexPanel based now) and I am struggling with the thorny issue of getting the controls to resize correctly into the central panel.

I don’t know when this will be ready for the big-time but I thought I’d point out that I am working on it anyway.

Roadworks and VMS

My web stats indicate not many people actually look at the VMS signs data layer which is probably just as well as there is an issue with the XML feed. The roadworks is not up to date either but this is less of an issue as they are mostly long running types of events which are unlikely to have changed much from 1 Dec when feeds went down.

I am working on this. v2.1 Online

I have finally integrated the GWT Simile timeline into the site. Clicking on a traffic region will cause the timeline tab to appear. The items on the tab are hooked into the map markers so that clicking on the severity icon from the timeline bubble will flip to the map tab and highlight the appropriate marker.

Basically you are now able to browse the traffic incidents both geographically and temporally which I think is a first for a road traffic site and may well be a first on the web as a whole.

I have changed the layout of the help tabs as well. Looks a bit better now.

GWT Timeline 1.1

I have fixed the issue with the timeline not drawing into the contained DIV. It turns out you have to set the view width of the DIV _before_ you attempt to create it. The example app source has been updated but the live version has not been updated as yet. There is an existing issue with viewing the control in Firefox/Mozilla browsers which is still outstanding.

Basically the client window size, as reported by the browser, is different whether depending on which tab you are on when you resize the browser window. From what I can see this is a known problem but it is only an issue if, like me, you are trying to get the component views to fit the available window.

I have not ported the new timeline over to the gTraffic site yet as I want to resolve this stuff first.

If you download the source for the timeline now you will get the ‘fixed’ version. Sorry to say this is still in a state of flux and you can expect more changes for now until I resolve this.

GWT Simile Timeline Wrapper v1.0

To view demo application using GWT Simile Timeline wrapper go here.

This a GWT wrapper around the Simile Timeline javascript control. This will let you write timelines in java like this.

If you use the GWT code I would be interested in hearing from you. There are a couple of issues to note:

– The timeline control draws itself into a DIV generated by the widget. There seems to be an issue around at which point the DIV is attached to the actual document DOM. The exact details of what is going on here are a little unclear to me but I spent a lot of time trying to get to the bottom of this without much success. If you follow the way that the example app does things you will be okay. Attempting to call any of the timeline api functions before the DIV has been attached to the DOM will result in a failure.

– There are layout issues with the example where it doesn’t quite fit the page under Firefox. This is exactly the sort of thing that I have spent hours in the past sweating over. It will get fixed but it’s not the end of the world. The reason all the resizing code is in there is to handle maintaining the timeline view when the the help tab is selected. Gimme a break this is only version 1.0

The full source code for wrapper and example app is available here.

← Previous PageNext Page →