Tuesday, September 5th, 2006
YUI Ajax Feed Reader
Category: Examples
, Ext, Yahoo!
Jack Slocum has written a sample application using the new Grid Component from the Yahoo! UI library:
The JS documentation for the new Grid component contains alot of classes and alot of inherited methods. For someone who is not very advanced with object-oriented development, it may seem complex or difficult to trace the various inherited methods through the class hierachy. It may also seem like the Grid is difficult to use. While most of the classes in the YAHOO.ext.grid package are designed to be plug and play, extended and customized, it still very easy to simply plug the grid into a webapp with a minimal amount of code.
Jack goes on to show you the feed reader code step by step:
-
-
// setup a data model
-
var schema = {
-
tagName: 'item',
-
id: 'use-index',
-
fields: ['title', 'pubDate']
-
};
-
this.dataModel = new YAHOO.ext.grid.XMLDataModel(schema);
-
this.dataModel.addPreprocessor(1, parseDate); // add preprocessor to col 1 to parse dates
-
this.dataModel.onLoad.subscribe(this.onLoad.createDelegate(this));
-
this.dataModel.onLoadException.subscribe(this.showError.createDelegate(this));
-
this.dataModel.setDefaultSort(colModel, 1, 'ASC');
-
-
// create the grid
-
this.selModel = new YAHOO.ext.grid.SingleSelectionModel();
-
this.selModel.onRowSelect.subscribe(this.showPost, this, true);
-
this.grid = new YAHOO.ext.grid.Grid('feed-grid', this.dataModel, colModel, this.selModel);
-
this.grid.render();
-
For an example, it looks really clean and nice too.
To avoid any potential confusion, I’d like to point out that the Grid component he is using is not an official part of the YUI - it’s an extension component that he himself has created.
Jack Slocum rocks. His blog is awesome, just keep an eye on it!
Interesting idea. I am not able to scroll any further than the light blue line below the header with my mouse wheel though, which is quite annoying. I’m on Firefox 1.0.7 and xp pro, maybe 1.5 behaves better.
It also looks very tempting to use with javascript disabled, but does nothing (rightly so), but it shouldn’t be displayed at all then. Also the site navigation is non-existent (at least I can’t find it) without javascript.
The grid component from Yahoo! UI library really makes it very simple to develop applications that otherwise require technical expertise in the specific domain. The component that Jack extended from YUI is a very useful example of that.