Tempting YUI Widgets

The more I learn about Yahoo! UI Library ("YUI") the more I like what I see. Having used Prototype for a while now I've grown to like it, but can't help feeling I'm missing out on lots of goodies offered by YUI.

The thing that first put me off YUI was its size. It's seems bloated. Having said that I've read that you can have it download only the necessary parts, depending on what you're doing. When what you're doing is a small website I'd expect Prototype to be the choice. If it's a full-blown web application I'd expect YUI to be a better choice. I could be wrong of course.

To find out, I plan to use YUI in a couple of places and see how I get on. Tempting me in to doing this are the myriad of widgets built on and around YUI. For example:

YUI Panel
When I wrote the Name Picker widget I had problems with positioning the "popup". Using a YUI Panel should help.
YUI Grids with Drag-Drop
I'm surprised nobody has demonstrated how to use something like this grid's remote dataset feature with a Domino view yet.

With all the libraries around at the moment it's becoming ever more easier to write some really cool browser-based application. To me it seems that YUI is the one to watch and best supported, documented and likely to out live the rest.

I'll let you know how I get on with it.


    • avatar
    • Andy
    • Tue 3 Oct 2006 07:01 AM

    I have a re-sortable data grid I wrote a couple of years ago as a lotusscript agent that creates a grid in javascript, which in turn write the HTML, but I have recently found an easier version that can be added to any domino view.

    I will post this up to notes411.com in a day or so, and you can see what I mean.



    • avatar
    • YoGi
    • Tue 3 Oct 2006 07:05 AM

    I've used a lot prototype, 'till I discovered YUI few months ago. And I can't live with it right now.

    That said, it is certainly worth to learn DOJO Toolkit as it's IBM choice for all further new softwares (Websphere Portal 6.0 shipped last july, but the next Quickplace release too).

  1. Is this with Vanilla Domino (no websphere!)

  2. My real problem is having to import X100s number of .js files and have to work around having to no folder structure in Domino (so i cant drag and drop dojo for example), how do you get round that?

  3. The YUI libraries are the best balance between trully useful widgets and spot-on documentation. My latest application uses YUI Panels and AJAX calls to segment a very large form into smaller field groupings with faster updates. It creates a "thick" client experience via a browser.

    They also have an AJAX connection manager, and a very solid animations library. But I still also use the prototype libraries since I cannot get away from $() and $F().

    I notice that you linked to Jack Slocums blog, he has some truly amazing stuff.

  4. @Joseph: Jack Slocum wrote a quick C# application where you can build a javascript single project file from multiple js files. The link is here:


    • avatar
    • YoGi
    • Tue 3 Oct 2006 08:27 AM

    You can use Domino webdav feature to drag'n drop your .js files thru explorer or any webdav client.

    If your interested, i've written a blog about this.

  5. @Joseph & Jeff: If you're using Dojo you should be using their build system which will produce a single compressed file with only the pieces that you need. Shoudn't need a separate C# app.

  6. I've been waiting for someone to implement YUI in Domino. Somehow Jake, I knew it would be you!

    I can't wait to see what you come up with.

    • avatar
    • Andy
    • Tue 3 Oct 2006 09:10 AM

    That Data grid example...


  7. Thanks for the link Jake. I thought that I would stick with Protaculous ;) but the smoothness of the effects on the examples make it very compelling.

  8. The YUI menu widget shows promise as well. I've just added an application menu (File, Edit, View, etc.) to a Domino app with YUI; what appeals to me about this widget is that each menu, submenu, menu item, etc., is treated as a separate object, making it a piece of cake to modify later - for example, adding an item to a Window menu each time the user opens a new panel.

    The size definitely is an issue... there's a great utility at javascriptcompressor.com, which drastically reduces the size of most javascript libraries - unfortunately, it requires the syntax to be absolutely precise, so if the author of a library got lazy and put the then of an if on the same line instead of within braces, or left out semicolons all over the place, the compressed version will fail. I'm in the process of running some of the YUI components through JSLint to rectify some of these issues; when I have a working compressed version of each, I'll be sure to post them.

    One last thing: if you haven't already, check out MooTools (mootools.net). It's model is similar to the Protaculous combo, but seems to be a cleaner implementation in some respects. It also includes JQuery features (using css selectors to obtain element handles).

  9. @YoGi - you got Webdav to work with Domino? I had no end of trouble with it. I wanted to do the same thing - drag in a folder structure and have it be preserved. Please link to your blog about this (in English I hope) ;-)

    @Jeff - Thanks for the link to Jock's Blog- nice work around!

    • avatar
    • Jake Howlett
    • Tue 3 Oct 2006 11:58 AM

    I've managed, since YoGi's post to setup WebDAV and import the whole YUI in to a Domino DB. More tomorrow.

  10. And those of you who are familiar with Eclipse should check Aptana (standalone or as Eclipse plugin) for building Javascript/AJAX web applications. Its code assist and other features can be a big time saver. You can get it here {Link} and be sure to watch videos at {Link} . Aptana comes with all your favourite JS libraries included (Prototype, Scriptaculous, YUI, Dojo, Mochikit...).

    • avatar
    • YoGi
    • Tue 3 Oct 2006 04:47 PM

    @Jerry: you can find it here (originally in french, sorry):


    • avatar
    • IanB
    • Wed 4 Oct 2006 02:37 AM

    Can't beat JQuery for easy DOM handling! Lot's of add-ons, some good documentation (take that prototype!) and only around 16K...

    {<a href="http://www.jquery.com">Link</a>}

    • avatar
    • IanB
    • Wed 4 Oct 2006 02:38 AM

    Ahh - how do you do links here then ! :-)

    • avatar
    • Remko
    • Wed 4 Oct 2006 04:32 AM

    I agree with IanB.. Jquery is the best

Your Comments


About This Page

Written by Jake Howlett on Tue 3 Oct 2006

Share This Page

# ( ) '


The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social

About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »


Here are the external links posted on the same day.

More links are available in the archive »

More Content