Asp.Net Controls for the Yahoo User Interface Library

I am a big fan of yahoo! and how they handle their developer resources. They release APIs for most of their services free of charge and their documentation is always top notch. One of my favorite developer resources they support is not a service but a group of javascript libraries called the Yahoo User Interface Library (YUI). Not only do I like the library itself, but I really like the community around it. (althought they could use a better forum than Yahoo! groups.) Like I mentioned earlier, the documentation is top notch. There is also a blog and and a series of screencasts about the YUI. And if that isn't enough, will now host the files on their servers. Recently, I was working on an Asp.Net project where we needed some of the functionality provided by the YUI container controls. Being the web control guy I am, I decided to make a control to make working with the panel controls easier. Next, I realized I needed the calendar control as well so I wrote a web control for that as well. The next thing I knew I started writing controls to wrap the basic functionalities in many of the YUI controls and I had a class library on my hands. I have recently cleaned the code up a little bit and decided to share it with the world. Keep in mind that I am not really much of a javacript expert so the client side functionality of the controls is just the bare minimum. In fact, if anybody else out there has any feedback on how I implemented the javascript, please let me know. Here is the basic class diagram for what I have so far.

The inheritence heirarchy for the panels, mostly mirrors that of the YUI. The Module and Overlay classes contain functionality used by the Menu, FloatPanel, and the Tooltip controls.

Architecture

The basic architecture is that each control implements an interface called IYahooControl. This interface is used by the YahooScriptManager to generate the javascript needed to initialize the controls.

interface IYahooControl 
{ 
    string LoadScript { get; } 
    YahooScript[] ScriptScriptDependancies { get; } 
    YahooStyleSheet[] StyleScriptDependancies { get; } 
}

The script manager is a non visual control that must be placed on any page which uses any of the Yahoo controls. It basically manages all of the script references and initialization of the client side controls. In most cases, I have tried to match the object model of the YUI javacript classes as closely as possible. There are however, some exceptions. I decided to make some of the properties function more like most Asp.Net controls when it made sense. For example, the YUI Button control has a property called 'disabled' which defaults to false but Asp.Net tends to use 'Enabled' and defaults it to true. Most of these changes should be fairly small. I have tried to wrap most of the panel controls into one class called FloatPanel. This control can be set to draggable and resizable which will change the actual YUI class which implements this functionality automatically.

Helper Classes

There are several classes which I consider just general utility classes which I included in the project just so I can use them in the control. I will do a separate post in the future going through some of those classes and why I feel they are essential.

Server Side Functionality

Since the YUI controls are client side controls, they don't really have any inherant server side functionality. I have not yet made much effort to add this functionality yet. The only exceptio is the calendar control. I added a SelectedDates property which you can use on the server side to see which dates are selected. I implemented this by added a hidden field to the form and storing the selected dates in it on the client side. This allows me to access that on the server side when the form is posted.

Future Plans

The biggest weakness of the controls I have build so far is they don't really provide an easy way to plug into the rich YUI eventing model. I have not yet decided how I am going to approach this so any feedback is definitely welcome. I have put the code up on CodePlex so hopefully I can generate some interest and get some other developers to contribute to the project. There is another project on CodePlex related to the YUI controls which included both the Grid and the TreeView (which I have not yet implemented). I plan on taking a look at how are two libraries can possibly work together

Documentation

I would really like to follow in the tradition of the YUI and provide good documentation but that will have to wait until a future release.