So over the last several weeks I have been building a site for a client (it is an internally used app, otherwise I would give you a link). It is a relatively straight forward app for a real estate company so they can track their leads and contacts.

I could have done it the standard way, but I like to try out new stuff as much as I can. In this case I wanted to implement a little Ajax. I find this is a good way to get paid to experiment. It is a win/win for both me and the client. I get to learn a new technology and the client gets a much “fancier” site without having to pay for it (I never charge for the learning curve when I am the one who wants to try out something new).

The site was just a good old fashioned “data collection” site. Easy enough, so to make things interesting, I decided to use the Yahoo! User Interface or YUI. What is that? Well, it is basically Yahoo!’s way of doing the whole Ajax thing. But it is also really cool because they have some nice CSS templates that are built in and ready to use.

The YUI library is absolutely free, very well documented (which is more than I can say for a lot of the frameworks out there), and extremely versatile. Also, the Yahoo! guys go to the trouble of teaching things like design patterns for those interested (always a good idea). I would highly recommend it for anyone new to Ajax or someone who wants to try something new. It definitely isn’t for beginners, but if you have done some javascript, then you should be just fine.

I am definitely no expert, but I got pretty familiar with the pieces that I utilized for the site. Over the coming days I will dive into each of them and go into some details of how I used them and some tips that I picked up along the way.

Before we get started, one thing you might want to note is that when you start using a lot of the various libraries (read javascript files), things start to get kinda big (read up to 500k)…that is no bueno when dealing with slower connections. There are light versions of some of their libraries, but it was not something I had to deal with since I was working on a “closed” app. One thing I have found is that Yahoo! will host optimized versions of their js files for you. Could make things a bit more efficient. You can learn more about that here. Just something to keep in mind.

On with the show.

Today’s aspect of the YUI is the Tab View.

The tab view is kind of a mix between a CSS template, and a control. It gives you something like this:

(Click to see the full YUI example)

It is quite easy to setup because the YUI CSS does most of the work for you.

<div id="divTabs" class="yui-navset">
    <ul class="yui-nav">
         <li class="selected"><a href="#ListingTab"><em>Listings</em></a></li>
         <li><a href="#ContactTab"><em>Contacts</em></a></li>
    </ul>
    <div class="yui-content">
        <div id="ListingTab">
            <div id="divListingView" class="tabContainer">
                <!-- Listing List Goes Here -->
            </div>
        </div>
        <div id="ContactTab">
            <div id="divContactView" class="tabContainer">
                <!-- Contact List Goes Here -->
            </div>
        </div>
   </div>
</div>

There you can see how I set up a couple of my tabs. Not much to it eh? That is because most of my output is generated by the Ajax goodies we will talk about tomorrow.

First you notice a div with the “yui-navset” class. This tells the YUI that inside are some tabs. The <ul> holds your tabs (notice the selected class goes on the tab you want initially selected…usually the first one). Inside of that you state the text of the tabs. If you have 4 tabs, then you will have 4 litags.

<ul class="yui-nav">
     <li class="selected"><a href="#ListingTab"><em>Listings</em></a></li>
     <li><a href="#ContactTab"><em>Contacts</em></a></li>
</ul>

After the tabs themselves you see a lot of divs. There is the main div which has a class “yui-content”, then there is a div for each tab. Note: the tertiary divs (i.e. divContactView) was simply so I could style things and is not required.

When you include the correct js libraries (see “Getting Started” in the tab view link above), then everything just magically works…well magic is probably too strong a word, but it is quite slick.

Now getting a pretty tab is cool and all, but what if you want to do something? Well, that is where events come in. In particular there is the “contentReady” event. If you are loading anything dynamically (ala ajax), then you cannot guarantee that it will be available unless you use the contentReady event. This little guy is invaluable, and you will find yourself using it regularly.

Here is a simple example where I am using the contentReady to create some additional listeners.

myTabs.addListener('contentReady', handleTabContentReady);
function handleTabContentReady(e) 
{  
    var listingTab = myTabs.getTab(0);
    var contactTab = myTabs.getTab(1);
        	
    listingTab.addListener('click', handleListingClick);
    contactTab.addListener('click', handleContactClick);
}

Now with this method I am simply creating basically an “onclick” method that loads some data when the user clicks a tab, which is handled like so.

function handleListingClick(e) 
{  
    getListings();
}

So there you have it, the tab view. There is a ton more you can do with it, but this should get you started if you want to try it out. The YUI documentation linked at the top is a great place if you want to go deeper. Also the YUI Interface Group is great if you run into a wall (I can’t tell you how many times I went hunting for answers there). Its not rocket science, but if you need an ajax loading tab control, you can’t do much better.

Tomorrow I will dive into the real meat and potatoes…how to do ajax calls using their connection manager functionality. Yumm-o.