YUI – Yahoo! User Interface Library
What is YUI?
The type of tools on offer include;
- Event registrations
- Dom support
- Drag n’ Drop
My favourite is the Container that provides a very simple mechanism to include your own dialogs on a page, including psuedo modal windows.
My Staff Database
The project I wrote using YUI was essentially a very simple contact list with the following basic structure;
[Edit Box] [Find Button]
[Name of person] n [Contact details]n [Photo]n
[Name of person] n+1 [Contact details]n+1 [Photo]n+1
The Edit Box for searching for a persons name is implemented as an AutoComplete control, so as you type in the persons name it displays a list of ever more specific matches. When you find a match, you click the Find Button and the page is scrolled to the person in question and their name is animated to draw the users attention. The user can then see the thumbnail image of the person and can click on the image to see a larger picture. This invokes a photo-box dialog that displays the picture in a modal dialog without the user having to leave the main page.
Any problems using YUI?
YUI isn’t without its problems.
When I started using YUI it was in a beta form so the help was a bit sparse and even though it has been improved I still needed to fish around inside the implementation libraries to understand what I needed to do.
The other major problem with the CSS use is how accessable the page is. In my example I had to add extra buttons and events to cope with the keyboard user. Reading between the lines it looks like the YUI is doing more in this area but currently I feel you have to add too much of this code yourself.
Extending the YUI
Apart from the coding style issues I found extending the YUI relatively easy. The main problem is due to its main advantage, the coupling of the modules hides the complexity of the lower-level libraries but it can also means that you can break the code without really knowing why. In my example I have pictures of different sizes to display within my photo-box, so I extended the module to allow me to specificy the dimensions of the image. This worked fine for a while but suddenly the box refused to be moved by the user and would just stutter. Also if I created a dialog larger than the viewport it started to behave erratically. I’m still not sure what caused this, perhaps beta code, but after a re-write for the latest version it seems to work.
I think the YUI is well worth a look but I do get the feeling that the majority of the features are built for users with a monitor and a mouse. Then again there is nothing stopping you extending the library to better cope with other devices. So even though it isn’t perfect I’m certainly considering using it in future projects.