The YUI Widgets
If you want to build a rich web application, with full support for Ajax and other Web 2.0 buzzwords, use the Dojo Toolkit. I’ve been so happy with it that I haven’t really looked at any other JavaScript frameworks in a while. But recently I developed a web application, and my wife took it over and had one of her people redo the user interface. They used the Yahoo User Interface library, and I was impressed.
I confess I haven’t looked too carefully at YUI, but I did enough to get a quick feel for it. It offers a full complement of HTML widgets, including a sortable table, a tree, and nice menus.
After seeing what my wife’s team did with YUI, I decided to give it a shot on my home page. The first thing I did was to replace my custom navigation bar with a more traditional menubar. This gave me the freedom to rethink some of my navigation hierarchy. I also used the YUI tab widget to organize my Help Wanted! page.
Overall, the experience was painless. I ran into two difficulties. The first was that I loaded the YUI widgets directly from Yahoo! This seemed like a good idea, until I looked at my laptop’s local copy of my web page from a site with no internet connection. So I copied the files over to my laptop, but that did not copy all the necessary assets, i.e., background images. To get around all this, I decided to download a full copy of YUI onto my home page. That’s overkill, but then again, disks are cheap.
The second problem is more serious. Skinning the YUI widgets is non-trivial. After some digging, I was able to change the foreground color of the menubar. But that leaves the background image that is used when a menu is active. I could replace that image, but I would have to rebuild a new image gradient. I ran into the same problem with the tab widget. Changing the foreground and background colors for it turned out to be a lot more difficult. And here again was the dreaded image gradient used as a background.
It turns out that the image gradient for the menubar fit my color scheme reasonably well. Not so for the tab widget! I ended up replacing the tab widget CSS to use a solid background instead of a gradient, and that worked.
But I don’t understand is why this is so hard. Wouldn’t it be a simple matter to ask, “What are your preferred background, foreground, and highlight colors?” and use that information to generate the gradients dynamically? That should be pretty easy. Then skinning YUI would be relatively straightforward, at least in many cases.
I wish programmers would remember this principle. If you want other programmers to use your stuff, make it easy to customize it. Your users (i.e., other programmers) should not have to work as hard as you did to use your framework!
Having said that, however, kudos to the Yahoo! folks for building a great UI framework for web applications. This is a great solution, and everybody that develops web applications should at least take a look at it. I’m glad I did.
Leave a Reply
You must be logged in to post a comment.