My Portal Project

With the successful launch of a benefits enrollment application at my office, I wanted to put some thoughts down on the use of the Yahoo User Interface javascript libraries in that application. All in all, the libraries were excellent, except for two bugs which remind me of the value of writing your own libraries.

The primary uses of the YUI libraries in our application were the modal dialog boxes used for editing various sections of an application, the DOM and event libraries, and the AJAX connectivity to the web server. The AJAX, DOM, and event libraries were excellent with no issues whatsoever, but the dialog boxes (YUI panels) created some performance issues, and a few CSS anomolies that required some serious debugging to find, and one that is still sitting in the sourceForge bug list.

To create a modal dialog box with the YUI libraries, you need to create some DIVs with the following structure:

<div id="thisPanel">
 <div class="hd">Header Content</div>
 <div class="bd">Body Content</div>
 <div class="ft">FooterContent</div>
</div>

Then you need to call an initializing function when the page is finished loading that will format and hide the DIV.

YAHOO.namespace("personal.xp");
YAHOO.personal.xp.panel = new YAHOO.widget.Panel("thisPanel", { width:"30em",constraintoviewport: true, fixedcenter: true, underlay:"none", close:true, visible:false, draggable:true, modal:true } );
YAHOO.personal.xp.panel.render();

Within our benefit enrollment application we have 9 of these panels and the rendering of all nine panels is a major performance lag. This is not page load performance, but rather page rendering performance, where we can see the parts of the page that are not being rendered as part of the YUI panels, for a second or two before the rest of the page shows. I have been playing around with some alternative methods that may allow the non-panel sections to load independently of the rest of the page, but little luck so far.

The modal dialog is a very powerful UI tool, and one that has been missing in web development for years. The previous method of spawning new browser windows is easily broken by the user losing the new windows focus, and the inability to programmatically know when the user is done with their input.

Another issue with the YUI panel that I discovered I highlighted in this post; where another DIV inside a YUI panel was not visible when the YUI panel was hidden, but prevented any buttons beneath the panel from being clicked.

Lastly, a pretty big bug is that with Firefox 1.5.x and 2.0.x, SELECT dropdown lists are broken and the user cannot expand the list, as seen in this demo page. Fortunately, we are an IE company, but my comfort factor is greatly reduced nonetheless. It’s on the list now, and I’ll drop a note when there is some resolution.

This entry was posted on Friday, December 22nd, 2006 at 8:40 pm and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.