GWT & YUI integration

Google Web Toolkit (GWT) provides a lot of useful widgets, which covers a lot of needs. But, unfortunately, it does not provide widgets for charts. Thus in this post I’d describe integration GWT application with Yahoo UI (YUI) Charts.

Note I’ll build my sample around Yahoo UI sample (http://developer.yahoo.com/yui/charts/).

Getting started

To use YUI Controls we need to include Yahoo JavaScript libraries into application’s html page:

It will be better to place them into the end of main html before ending of body-tag – it allows browser to load these libraries when main application was loaded.

Then let’s create own widget, which will be responsible for showing YUI Chart. It may be simple Panel, which contains one div with predefined id:

As you can see this widget is invisible by default – we’ll make it visible during handling data.

DataSource

Now let’s prepare data for chart.

YUI Controls requires DataSource, which structures data. In his turn it requires JavaScript array like:

For building such array we may use standard GWT JSNI mechanism.

First, lets create class for representing object from this array:

Unfortunately, we can not use this object in GWT services. Thus we need convert objects, which was received from server, into this JavaScript object. So we add convert-method into our ChartPanel class:

Link GWT and YUI

To link YUI and GWT let’s create draw method in ChartPanel. It will be native method:

Finally, we need to call this method. The best place is onSuccess method of callback class, which handles server response with chart data:

As you can see in this method we also make visible ChartPanel.

Conclusion

So as you can see you may use YUI controls (not only Charts) into GWT applications without any problem. Together (GWT and YUI) allows to build complex modern cool web application.