Fun with YUI, AJAX based web GUI widgets

Yahoo! UI Library (YUI) “is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX.” This past week or two, I started playing with YUI components such as DataTable and TabView. Beyond these two, I also played with ColumNav.

TabView’s documentation appears missing something. If I follow the instructions in the documentation, I couldn’t get my tabs to work. I only able to create a working TabView when I studied the examples. So, don’t pull your hair out on the documentation and go directly to the examples. Looking at the source won’t cut it. You should save the HTML using your browser, which will pull in all the .js and .css for you.

DataTable appears good, but not 100% too. If you have a large data set, the pagination feature will show very long list of pages, which makes the widget less pleasing to the eyes. I wish the pagination feature has an option to abbreviate the listing by introducing “…” to keep page listing within a single line. Beyond that, I do like the ability to fix the height to a certain size and use scrollbar to scroll through content. One of the example showed rows in alternating colors. I would like to replicate that and haven’t have the time looking into it. Let me know if you can spot the exact code to do that.

ColumNav is essentially a replication of iPod’s navigation interface. This is cool if you can organize your information in trees without cycles and if you only need to display information at the leaf node. I even tried to add an event listener in an attempt to capture click events on non-leaf nodes. For some reason, I only get a click event when an user click on the leaf node. If you can capture non-leaf click events, let me know.

All in all, these ready-to-use AJAX based web GUI components can help speed up your AJAX development. At the same time, you may have to work within the framework that each component was designed for. Sometimes you might even have to live with bugs in some of these components. For example, ColumNav might not play very nicely with other DIV layer objects. Specifically, the scroll bar might show through a DIV layer that supposed to be covered by that DIV layer, which is an undesirable side effect. Beyond that, you might want to watch out the amount of traffic generated by these widgets to your server. A page filled with a few of these components can quickly add up both download size (with all that .js, and .css files) and number of connections to the server.

Advertisements

2 thoughts on “Fun with YUI, AJAX based web GUI widgets

  1. Hi,

    Thanks for playing with YUI – I’m glad it’s working out well for you so far.

    YUI’s DataTable widget sets a class on the TR of the generated table that indicates whether the row is odd or even. The class is there, so to get the stripes you just need to add a background color (or other presentation) to the rows:

    Here’s what it sets:
    tr.yui-dt-odd
    tr.yui-dt-even

    Hope that helps,
    Thanks,
    Nate

    Nate Koechley
    YUI Team, Yahoo!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s