As mentioned in the last weekly blog post, Fabian, Jonathan, Alex and I attended the JSConf in Berlin. As always after such good conferences, we came back with a lot of new ideas and a bunch of technologies to test.

One of the most impressive talks was held by Tom Hughes-Croucher on End to End Javascript. A big part of the presentation was an introduction to YQL, the Yahoo! Query Language. Yahoo! describes YQL as, "[...] an expressive SQL-like language that lets you query, filter, and join data across Web services". One important thing is that the data can be accessed via JSONP, which is easy to handle in JavaScript.

The plan was set up: build a qooxdoo data binding store for YQL. But the only available store was a JSON store, which fetches data via XHR and not via a script tag like it is used for JSONP. Former experiments with JSONP like the twitter demo and the flicker demo were good resources for getting a general JSONP store. On top of that new store, it was quite easy to create a store for YQL!

Here is an example reading a feed and showing the feed titles in a qooxdoo list.

var query = "select * from feed where url='http://feeds.feedburner.com/qooxdoo/news/content'";
 
var store = new qx.data.store.Yql(query);
var list = new qx.ui.form.List();
list.setWidth(250);
this.getRoot().add(list);
 
var controller = new qx.data.controller.List(null, list, "title");
store.bind("model.query.results.item", controller, "model");

Those few lines of code is all one needs to access YQL. And reading feeds is just the beginning. Take a look at the next code snippet, which is slightly different but shows all my recent tweets in the list.

var query = "select * from twitter.user.timeline where id = 'wittemann'";
 
var store = new qx.data.store.Yql(query);
var list = new qx.ui.form.List();
list.setWidth(250);
this.getRoot().add(list);
 
var controller = new qx.data.controller.List(null, list, "title");
store.bind("model.query.results.entry", controller, "model");

We just changed the query and a bit of the binding code and thats it: we have completely different content in our list. The last example shows the top music artists.

var query = "select name from music.artist.popular";
 
var store = new qx.data.store.Yql(query);
var list = new qx.ui.form.List();
list.setWidth(250);
this.getRoot().add(list);
 
var controller = new qx.data.controller.List(null, list, "name");
store.bind("model.query.results.Artist", controller, "model");

Again, we changed the query and some details on the bindings which configure the way the received data is accessed - and that's it!

If you want to give it a try, check out the code in the current qooxdoo trunk. But be sure to test your queries beforehand with the YQL console to get it working, or to get an overview of all available YQL tables.