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 bascially manages all of the script references and initilization 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 ‘diabled’ 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 seperate 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.

Advertisements

5 Responses to Asp.Net Controls for the Yahoo User Interface Library

  1. Patay Khan says:

    Great work.
    I was wondering if someone has ASP.NET controls or extenders that wraps YUI controls and came arcross your work. Its fantastic. Keep it up.
    Thanks

  2. Manish Bhoir says:

    Great work Man,
    Really liked the way u created those controls.

  3. Muthu says:

    Any updates to the control extender library now ?

  4. Luke Foust says:

    I realize that I have not released any updates in a long time. I went through a job change and I didn’t have time to keep up with all the awesome changes that Yahoo is making to the YUI. I am still very much interested in this project but honestly, I feel a little overwhelmed by how many versions of the library have come out since I initially wrote these controls.

    What I really need is some other developers from the community and people who are using these controls to help me plan what my next step should be. Please visit the discussion board on codeplex (http://www.codeplex.com/YuiDotNet/Thread/List.aspx) and start providing feedback and/or expressing interest in helping out.

  5. Vercellone says:

    I created a discussion on codeplex…Let me know if I can contribute.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: