MS Ajax and Yahoo UI Hand-In-Hand. Very NICE!

I decided to test out if MS Ajax would play nicely with Yahoo UI/Ext and to my suprise, they do!! How sweet is that!!!

I decided to take the sweet FeedViewer from Yahoo UI Ext ,

and instead of add/listing RSS channels, I list a bunch of sites which are pulled back from the database and when you click the a site, the site detail (which is also pulled from the database like site description, site popularity and etc etc) is displayed into a new tab inside the main center panel!

Here is what I did.

1.

Yahoo UI initaite a function upon window's onload by doing

YAHOO.util.Event.on(window, 'load', Viewer.init, Viewer, true);

because MS Ajax has the buildIn function "pageLoad()", I replaced the above statement with

function PageLoad()
{
     Viewer.init();
}

much simpler and it works! :)

2. I added a Search text box to the toolbar div "myfeeds-db",  and used MS Ajax's "addhandler" to watch for "keyup" activity (sort like auto-suggest) by doing

a) var searchBox = new YAHOO.ext.DomHelper.Template('Search :<input type="text" id="SearchBox" />');
 b) searchBox.append('myfeeds-tb');
 c) Sys.UI.DomEvent.addHandler($get("SearchBox"),"keyup", this.searchSites);

As you can see, the first statement, I used Yahoo UI/Ext to create the textbox, the second statement, I added the textbox to the container div and the last statement, I used MS "addHandler" fucntion to watch for "keyup" and attached a callback function "searchSites" for rendering later.

and guess what? it works too!

3.  To retrieve the sites from db upon while you are typing,  I needed to performe my Ajax function. In my case, I used a method in my codebehind instead of webservices, so I did

PageMethods.GetSites(typed_value, this.onSiteRendering);

again, it worked beautifully.

So to sum up,

1. I used pageLoad() instead of Yahoo.Util.Event.on(window, 'load', ......) checked
2. I used addHandler() function, checked
3. I used PageMethods to retrieve my data in JSON format, checked.

A few things I noticed.

1. Yahoo UI/Ext use getEl() as a shortcut to document.getElementByID where MS Ajax use $get().

2.  Yahoo UI use Yahoo.util.Connect.asynRequest('POST','your page', {success:success_callback_function, failure:failure_callback_function}, 'parameters') where in MS Ajax we simply do PageMethods.YourMethod(parameter, callback_fucntion);

3. Yahoo UI ext supports Templates

for example

var postSites = new YAHOO.ext.DomHelper.Template('<a id="feed-{id}" href="SiteDetai2l.aspx?siteid={id}"><span class="body">{name}<br><span class="desc">{desc}</span></span></a>');

to replace the value such as {id}, {name}, {desc}, simply declare a variable like so

var mysites = {};
mysites[id] = {id: id_value, name: name_value, desc: desc_value};
postSites.append('ui-element',mysites[id]);

all values will be replaed with your value in the Template. Very handy. MS Ajax should have this functionality as well, I just can't find any documentation on how to do it right now..(todo)

I probably didn't have to do these things the way I did it, but I just want to test out if I mix functions from both libraries, would it work?  That's my  purpose and I'm gladed that  they  placed so well together.

MS ajax is missing some powerful UI elements, their AjaxToolKit are somewhat useless to me as nothing is paticular useful. Yahoo UI provides a suite of much thought out UI elements and I intend to use them all to my advantages. In the next few days, I want to test out the Yahoo UI/Ext Grid (supports resizing!!) with MS ajax, let's see how well that will work.

Looks like it's going to be fun for the next few days. :)

Comment Notification

If you would like to receive an email when updates are made to this post, please register here

Subscribe to this post's comments using RSS