YUI: I Officially Can’t Keep Up

First off, congratulations to Eric Miraglia and the YUI team – they have just announced the release of YUI 2.5.0:

The YUI Team just released version 2.5.0 of the library. We’ve added six new components — Layout Manager, Uploader (multi-file upload engine combining Flash and JavaScript), Resize Utility, ImageCropper, Cookie Utility and a ProfilerViewer Control that works in tandem with the YUI Profiler. This release also contains major improvements to the DataTable Control and new Dual-Thumb Slider functionality in the Slider Control.

Six new components?!? Man, I just can’t keep up with learning all this new stuff let alone keep YUI.Net up to date.

Roadmap Gone Off Track

I was working on a roadmap for YUI.Net but now I have some serious consideration to do about what next steps to take. Although there has been plenty of interest in the YUI.Net project, nobody has really come forward to help out. I am not complaining. I really enjoy working on YUI.Net. I just don’t have the time to dedicate to it right now. I am going to continue to follow the development of the YUI, but I don’t think I will continue development on the YUI.Net library for the foreseeable future.

Microsoft + Yahoo! and My Affair With YUI

If you read my blog regularly, there are two things you may or may not know about me:

• I work at Microsoft
• I love the Yahoo User Interface Library

So today’s big news that Microsoft has offered to buy Yahoo! for 44.6 billion dollars speaks to both of these facts about me. This is obviously big news for both Yahoo! and Microsoft and many people have their different takes on whether or not it is a good idea or not. I just want to say that I am feeling like my secret love affair with YUI is somehow more justified after hearing this news.

Now if I build sites using the YUI CSS library, or work on YUI.Net, I can be comforted by the fact that I wasn’t the first one to think of Microsoft + Yahoo! being a happy combination.

By the way, I realize that I haven’t added any new code to the YUI.Net controls in a long time. I am working on a roadmap of how to move forward and would love any feedback from people who have used the controls.

Yui.Net: The Tooltip

As part of my ongoing series covering the Yui.Net library (an asp.net wrapper for the Yahoo User Interface Library), today I will cover a fairly simple but useful component – the ToolTip. This component is exactly what you would expect it to be – a ToolTip which you can associate with any element on the page. The nice thing about the YUI ToolTip is that it can contain html code, can be styled via css and it can have animations applied to it.

Lets start with a simple example – a div with a basic tool tip. As with all Yui.Net controls, you must first include the YahooScriptManager on your page:

<yui:YahooScriptManager ID="manager" runat="server" />

Next, we’ll just place a simple div:

<div id="content">Just a simple div</div>

then we can place our ToolTip control on the page:

<yui:Tooltip ID="toolTip" runat="server" ContextID="content" Text="This is a simple tooltip!" />

this will cause a simle tooltip popup when you place your mouse over the div. Lets take a look at the code that is generated by these controls. First, there are the necessary script tags managed by the YahooScriptManager:

<script src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script>

then there is the javascript initialization of the tooltip object:

var toolTip = new  YAHOO.widget.Tooltip("toolTip", { 
    visible: false, constraintoviewport: true, iframe : false, 
    context: "content", text: "This is a simple tooltip!"} );

That is all that is really needed for a basic tooltip. Now, lets add a fade animation so that the ToolTip will fade in an out nicely:

<yui:Tooltip ID="toolTip" runat="server" ContextID="content" Text="This is a simple tooltip!">
    <Animations>
        <yui:Animation Type="Fade" Duration="3" />
    </Animations>
</yui:Tooltip>

This will cause an extra script reference to be generated by the YahooScriptManager:

<script src="http://yui.yahooapis.com/2.2.2/build/animation/animation-min.js" type="text/javascript"></script>

Whenever possible the YahooScriptManager will only include the references needed for the needed functionality so the animation library is only included if a control on the current page will need animation. Actually, it is not the YahooScriptManager that makes this decision but it is the controls themselves. Now the generated javascript looks like:

var toolTip = new  YAHOO.widget.Tooltip("toolTip", 
    { visible: false, effect: 
    {effect:YAHOO.widget.ContainerEffect.FADE,duration:0.3}, 
    constraintoviewport: true, iframe : false, context: "content", 
    text: "This is a simple tooltip!"} );

That is about all you really need to know about the ToolTip control to get started. Pretty standard really. Next up I will cover the FloatPanel control and some new features I am building into the YUI.Net library for dealing with javascript events.

YUI.Net: Calendar Control

The first control I will highlight in the Yui.Net control library is the calendar. I find that I often need a client side calendar control to allow users to just choose a quick date without having to deal with the overhead brought on by the Asp.Net calendar control (ViewState, Postback, etc). When I ran across the YUI calendar I was really impressed with both its functionality as well as it customizability.

The Basics

In order to just get a basic calendar displayed on your page, you need to include two things:

1. The YahooScriptManager

<yui:YahooScriptManager ID="manager" runat="server" />

2. The Calendar Control

<yui:Calendar id="cal" runat="server" />

On the server site, the Script manager generates the following code:

<script src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script> 
<script src="http://yui.yahooapis.com/2.2.2/build/calendar/calendar-min.js" type="text/javascript"></script> 

<script type="text/javascript" media="Screen"> 
function SetHiddenSelectedDates(type, args, obj) { 
    var txtDate1 = document.getElementById(obj.id + "_selectedDates"); 
    var selected = ""; 
    var dates = obj.getSelectedDates(); 
    for(var i = 0; i < dates.length; i++) 
    { 
        var month = dates[i].getMonth() + 1; 
        var day = dates[i].getDate(); 
        var year = dates[i].getFullYear(); 
        selected = selected + month + "/" + day + "/" + year + ","; 
    } 
    txtDate1.value = selected.substring(0, selected.length - 1); 
} 
</script> 

<link href="http://yui.yahooapis.com/2.2.2/build/calendar/assets/calendar.css" rel="stylesheet" type="text/css" media="Screen" /> 

<script type="text/javascript" media="Screen"> 
    var cal; 
    function init() { 
        cal = new  YAHOO.widget.Calendar("cal", "cal_container", { pagedate: "05/2007"} ); cal.render();cal.selectEvent.subscribe(SetHiddenSelectedDates, cal, true); 
    } 
    YAHOO.util.Event.addListener(window, "load", init); 
</script>

There are 3 things I would like to point out in this code (not necessarily in the order they appear):

First, there are the includes of the yahoo-dom-event.js and the calendar-min.js files which are hosted on the yahoo servers. YUI.Net also allows you to host the files yourself if you need access to the debug scripts or if you just prefer to store the files locally. the calendar.css file is also included which contains the default styles for the calendar control.

Second, there is the javascript initialization code in the last script block. This initializes the calendar with the default values and hooks up the event handler for the selectEvent event. This allows the calendar to store the selected dates in a hidden html field for use on the server side.

Lastly, there is the SetHiddenSelectedDates method which is responsible for taking the selected dates and storing them as a comma delimited string in a hidden html field.

The calendar control renders the following html markup:

<div id="cal_container"></div><input type="hidden" name="cal_selectedDates"></input>

This is basically just the div which will contain the calendar and the hiddent field to hold the selected dates. Notice that the name of the div is the same that is passed in to the YAHOO.widget.Calendar constructor.

Server Side Properties

public DateTime[] SelectedDates

This returns a list of dates currently selected. It achieves this by parsing through the hidden html field mentioned earlier which stores all of the selected dates in a comma delimited list. This property is read only.

public string SelectedDateString

This string maps to the ‘selected’ property of the YUI calendar configuration property. (Side note: this can get a little confusing because there is a while javascript object model which does not always map directly to the sever side .Net object model). Here is an excerpt from the YUI documentation for this property:

Sets the calendar’s selected dates. The built-in default date format is MM/DD/YYYY. Ranges are defined using MM/DD/YYYY-MM/DD/YYYY. Month/day combinations are defined using MM/DD. Any combination of these can be combined by delimiting the string with commas. For example: “12/24/2005,12/25/2005,1/18/2006-1/21/2006”

public DateTime? SelectedDate

Allows for a quick way to access the selected date for calendars which are limited to just one selection. A nullable date is used so a null can be returned if no date is selected.

public int Pages

This allows support for multiple calendars in one control which appears like:

This causes the calendar to be rendered as a YAHOO.widget.CalendarGroup rather than a YAHOO.widget.Calendar. This is an example of where I have tried to make such functionality transperant to the user.

Here is how the rest of the properties map to the YUI javascript properties:

Yui.Net Server Side Property	YUI client side javascript property
PageDate	pagedate
MinDate	mindate
MaxDate	maxdate
Title	title
Closable	close
UseIFrame	iframe
MultiSelect	MULTI_SELECT
ShowWeekdays	SHOW_WEEKDAYS
MonthFormat (enum)	LOCALE_MONTHS
WeekdayFormat (enum)	LOCALE_WEEKDAYS
WeekStartDay	START_WEEKDAY
ShowWeekHeader	SHOW_WEEK_HEADER
ShowWeekFooter	SHOW_WEEK_FOOTER
HideBlankWeeks	HIDE_BLANK_WEEKS
NavLeftImageUrl	NAV_ARROW_LEFT
NavRightImageUrl	NAV_ARROW_RIGHT

In some cases I have renamed some properties to make them more Asp.Net like and changed thier types from numbers to enums to provide a better user experience.

As you can see, most of the power of this control comes from the javascript provided by Yahoo – which is why the YUI.Net is mostly a wrapper with some funcationlity added.

Technorati tags: YUI, Asp.Net

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.