Introduction

Bond: Vodka Martini.
Bartender: Shaken or stirred?
Bond: Do I look like I give a damn?

from Casino Royale

Ajax functionality, i.e. loading and displaying new content to the user without having to refresh the page, is the new black these days (well, actually, it is the new black for quite a while already). A website without Ajax these days is like James Bond driving a Toyota (no offense to the Japanese automaker though)—it is just not right (at least a lot of product manager will make you believe that). So how are we going to deal with all that request/response hassle including browser incompatibilities without causing us headaches? We make YUIs Connection Manager do all the hard word for us!

The Mission Statement

What we would like to achieve is the following:

• We have a page listing our 3 favorite James Bond actors
• Without JavaScript, clicking on the link “[actor name] appeared in…” will takes us to a new page, showing the actor again, with a table underneath listing movies he appeared in
• With JavaScript, clicking on that link should keep the user on the same page and load that same table via Ajax from the server and display it below the images of the actors.

Step 1a: The Markup for the Overview Page

As usual, we are not rushing into things, but instead stick to the initial plan of starting with the markup, adding appropriate CSS for styling and then add behavior using JavaScript on top. The markup bits for the list very straightforward:

<h1>Which actor appeared in which (other) movies?</h1>
<ul>
    <li><img src="img/sean.jpg" alt="Sean Connery" /><a href="Sean_Connery/">Sean Connery appeared in&hellip;</a></li>
    <li><img src="img/brosnan.jpg" alt="Pierce Brosnan" /><a href="Pierce_Brosnan/">Pierce Brosnan appeared in&hellip;</a></li>
    <li><img src="img/craig.jpg" alt="Daniel Craig" /><a href="Daniel_Craig/">Daniel Craig appeared in&hellip;</a></li>
</ul>

This was easy and that first step can be viewed on the initial demo page.

Step 1b: The Markup for the Details Page

While we are at it, we can also prepare the markup for the page that gets loaded when a user clicks on one of the “…appeared in…” links:

<h1>Sean Connery appeared in&hellip;</h1>
<div>
    <img src="../img/sean.jpg" alt="Sean Connery" />
</div>
<!-- table will go here -->

Step 1c: Setting up the Server

Before we jump into Step 2, I would like to show you how I set up the server to support our Ajax functionality. I created sub directories for each actor which hold:

• an index.php file
• a table_snippet.php file which only contains the HTML fragment with the table to display (and which gets included in the index.php file)

So the structure for the directory “Sean_Connery” might look like:

Directory of \Sean_Connery

26.07.2008  21:59    <DIR>          .
26.07.2008  21:59    <DIR>          ..
23.07.2008  19:56             1.734 index.php
23.07.2008  20:46             6.932 table_snippet.php

This is sufficient for this simple example, but in the real world, this would be set up differently. You would probably have one index.php file which, based on a querystring or particular part of the URL retrieves the data from a datasource, e.g. a database, generates the table markup and provides this to the browser. But going into these details goes beyond this tutorial.

How this kind of structure facilitates the Ajax flow will be explained when we get to Step 3.

Step 2: Adding some styling

As usual, we put some CSS into the game to make things a little bit prettier. No rocket science. The result can, again, be viewed on the demo page for this step.

Step 3: Ajax, please

Now, when we click on one of the “…appeared in…” links we get redirected to a new page with the actor image at the top and the data table underneath. But now we want to use Ajax to keep the user on the same page, load the data and display it underneath our list of actors. How are we going to do it?

Before we dive into it, lets have a look at how YAHOO.util.Connect (the YUI Connection Manager) works. This object has a function as a property called asyncRequest:

YAHOO.util.Connect.asyncRequest  ( method , uri , callback , postData )

So what do these parameters do?

• method: either “GET” or “POST”
• uri: the URI to your script that you request data from and that returns data to the script in your browser
• callback: an object that defines which functions should handle the response coming back from the server
• postData: additional data you want to send when doing a POST request

We are only going to use the first 3 parameters in this example.

At first, we set up a skeleton for our JavaScript module at the bottom of the page and in the init function we get all the anchors on the page.

<!-- Dependency -->
<script src="http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-min.js"></script>

<!-- Used for Custom Events and event listener bindings -->
<script src="http://yui.yahooapis.com/2.5.2/build/event/event-min.js"></script>

<!-- Source file -->
<script src="http://yui.yahooapis.com/2.5.2/build/connection/connection-min.js"></script>
<script type="text/javascript">
YAHOO.namespace("AgentYUI");

YAHOO.AgentYUI.Mission5 = function () {

    var init = function () {
        // get all links on the page
        var anchors = document.getElementsByTagName("a");
        var len = anchors.length;
    };
    return {
        init: init
    };
}();

YAHOO.AgentYUI.Mission5.init();
</script>

After that, we loop through the anchors array and attach an event handler to every onclick event

// loop through anchors and attach XHR request
for (var i = 0; i < len; i++) {
    YAHOO.util.Event.addListener(anchors[i], "click", function (e) {
        YAHOO.util.Event.preventDefault(e);
        YAHOO.util.Connect.asyncRequest("GET", this.href + "table_snippet.php", { success: requestSuccess, failure: requestFailure });
        })
    };
}

Within the loop, we are first using YAHOO.util.Event to attach a listener. The event handler then first prevents the user from getting redirected to the non-JS page. And after that, we are using the newly introduced YUI Connection Manager. We are doing a get request to this.href + “table_snippet.php”, which will, at runtime, be resolved to e.g. “Sean_Connery/table_snippet.php”. If the Ajax request was successfull, we want to have a requestSuccess function that handles the response. If not, call requestFailure.

Now you can see that having one file, table_snippet.php, which serves the data for both the Ajax and non-Ajax version, is a good idea. It saves us from coding things twice when essentially, the data (and the markup) that we would like to serve are the same.

After that for-loop, we still need to do a tiny, but essential thing: We need to prepare a container where we want to put our HTML table when we get the response back. We do this by putting a div after our unordered list with id=container:

// create container where to put in the returned HTML
var bodyEl = document.getElementsByTagName("body")[0];
responseContainer = document.createElement("div");
bodyEl.appendChild(responseContainer);

So what do the requestSuccess/requestFailure functions look like? They are both amazingly simple:

var requestSuccess = function (o) {
    var response = o.responseText;
    responseContainer.innerHTML = response;
}

var requestFailure = function (o) {
    console.log("XHR failed!");
}

In requestSuccess what happens is that a response object o gets passed in, which contains a lot of additional properties about the request/response (you can do a console.dir(o) if you are interested into what sorts of info is contained in that object). For us, we really only care about responseText because that contains the HTML of the table we want to display. All for us then is left to do is dump the markup we got from the server into our container element using innerHTML.

Two notes regarding this:

• In the real world, you would probably deal with a response in JSON format more often than HTML fragments. To be able to use the response as a JSON object in your module, you need to eval it first. The syntax for this is:

  var response = eval("(" + o.responseText + ")");

  Update: Strictly speaking, and for security reasons, it is safer to use the YUI JSON Utility to take care of the parsing instead of using “eval”. We won’t go into details here, but Douglas can explain why eval is evil. So the syntax to use, when the JSON utility is included on the page (thanks alfred for pointing that out):

  var response = YAHOO.lang.JSON.parse(o.responseText); 

  After that you can access all the properties in the object that the server provided you in JSON format using the dot notation e.g. response.myProperty.

• People might argue that innerHTML is bad. It is not. It is a proprietary method invented by Microsoftt but it works in all major browsers today, which is the major thing here. Especially when dealing with HTML fragments in responses like this, it makes life much easier.

Et voilá, we have implemented our Ajax interaction.

Because we are not beginners anymore we can enhance the experience a little bit by using Animation. After that little polishing, have a look at the final result.

Further Reading

• YUI Connection Manager
• YUI Connection Manager API documentation
• Examples on YDN
• Ajax and the Yahoo! Connection Manager by Nicholas C. Zakas
• Another Tutorial on the Connection Manager

Introduction

All the cool moving, fading and more that you always wanted to put on your Web 2.0 site…piece of cake with YUI Animation. In this example, I am gonna show how to use YAHOO.util.Anim (for changing style properties of an element to create e.g. a sliding effect) and YAHOO.util.Motion (for moving an element around on the page).

The Mission Statement

We have 3 junks of information, each one related to a James Bond actor. Each junk consists of a picture of the actor, a headline and some additional biographical information. What we want to do is:

• Without JavaScript, all the items should be shown on the page on pageload and presented to the user (screenshot).
• With JavaScript, the image, as well as the headline should be “pulled in” from off the screen, one after the other. Finally, if the user requires more info about an actor, he can request that by clicking on “get more info” and the respective text will show using another animation effect (screenshot).

Step 1: The Markup

First, as with every other tutorial, we make sure that markup and styling are in place and then add behavior (JavaScript) an top. We start by putting the 3 junks of information on the page, marked up as list items. This would be the one for Sir Sean Connery:

<ul>
    <li id="connery">
       <h2>Sean Connery</h2>
       <a id="connery-get-more" href="http://en.wikipedia.org/wiki/Sean_Connery">Get more info</a>
       <img src="img/sean.jpg" alt="Sean Connery" />
       <p>Sean Connery (born 25 August 1930) is a retired Scottish actor and
       producer who is perhaps best known as...</p>
    </li>
    ...
</ul>

Please check out the demo page for this first step. For screenreaders and people viewing web pages with not that much CSS support, this is acceptable. But as we all know, bare-bones HTML looks ugly, so lets move on to Step 2.

Step 2: Adding some styling

In this step, we are creating the version of the site that should be displayed to users who have CSS support, but lack JavaScript for whatever reason. So we do our best to make the page look like we envisioned it and add some CSS styles to it. As this is about YUI and not about nifty CSS styling, I will not go into much detail at this point but simply let you, my dear reader, observe the result after Step 2 is completed. Still no JavaScript involved, folks.

Step 3a: Animateify the list items

Animateify – what an ugly word. Anyway. We start off putting in animation by including the required YUI files and declaring our module, including an empty init function, and insert the call to the init function, like this:

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

YAHOO.namespace("AgentYUI");

YAHOO.AgentYUI.Mission4 = function () {
   var init = function () {

   };

   return {
      init: init
   }
}();

YAHOO.AgentYUI.Mission4.init();

The first thing we want to do in the init function is to put together references to the respective list items in an array and also store references to the text displayed for the respective actor:

var items = [
    document.getElementById('connery'),
    document.getElementById('brosnan'),
    document.getElementById('craig')
];

conneryText = items[0].getElementsByTagName('p')[0];
brosnanText = items[1].getElementsByTagName('p')[0];
craigText = items[2].getElementsByTagName('p')[0];

Now we can move on to animating the list items themselves. We want them to move in from offscreen, so what we need to do first, is add some JavaScript that actually positions the items offscreen. We do that in the head of the document (it looks ugly, but does the trick). We also add a couple of other styles that make sure that also the other items don’t appear up front (we want to animate them, remember?):

<script type="text/javascript">
document.write("<style>");
document.write("#connery, #brosnan, #craig { left: -500px }");
document.write("a { display: none } ");
document.write("h2 { width: 0; padding: 0 }");
document.write("p { height: 0 }");
</script>

After that, we can create a function called animateListItems which will change the CSS properties of every item to move to 200px from the left on the screen. We do this with YAHOO.util.Motion, like:

var animateListItems = function () {
    var duration = 1; /* setting the duration for the first animation */
    for (var i in items) {
        var listAnim = new YAHOO.util.Motion(items[i], {points:
            { to: [200, 0] } /* move every item to 200px left from the viewport edge */
        });

        listAnim.duration = duration++;
        listAnim.animate(); /* run animation */
    }
};

What is going on? First we set a duration variable to 1 – this is just an comfortable way to make the list items move in from offscreen one after the other. So the first one will take 1 second, the second one will take 2 seconds and the third one 3 seconds to move to its final position. We then loop through all the items and set the endpoint for every item to 200px from the left of the viewport on the x-axis. This is done for all 3 items subsequently. You can see the result of this step on this demo page.

Step 3b: Animating the Headings

Right after the image is in its place, the respective heading is supposed to appear – animated, of course. YAHOO.util.Anim has an Event onComplete you can subscribe a function to which will be called when the animation is completed. So we add this to our animateListItems function:

var animateListItems = function () {
    ...
       listAnim.onComplete.subscribe(animateHeading); /* we use this hook to initiate the animation of the headline */
       listAnim.duration = duration++;
       listAnim.animate(); /* run animation */
    ...
};

We will obviously use the function animateHeading to make our headline(s) appear. In that function, we first set the CSS properties back to what was originally specified in the CSS:

var actorItem = this.getEl(); // get original element, e.g. <li id="connery">
var currentHeadline = actorItem.getElementsByTagName('h2')[0];
var currentGetMoreLink = actorItem.getElementsByTagName('a')[0];
YAHOO.util.Dom.setStyle(currentHeadline, "padding" , "5px" );
YAHOO.util.Dom.setStyle(currentGetMoreLink, "display" , "inline" );

After that, we animate the heading. This time, we use YAHOO.util.Anim to animate a specific CSS property (the width in that case) to create the desired effect:

var headAnim = new YAHOO.util.Anim(currentHeadline, {
    width: { to: 500 }
    },1, YAHOO.util.Easing.easeOut);

What this does is it takes the headline of the list item currently dealt with and adjusts the width-property to 500px over a period of 1 second. In addition, we are adding a nice easing effect

Thats all about the magic on this part and you can – of course – view a demo.

Step 3c: Making the text appear in a smooth way

The final step is to nicely “slide in” the respective biographical text when the user clicks on “get more info”. So the first thing we need to do is attach Event listeners to every “get more info” link. So we add the following code to the init function:

/* attaching event listeners for "more info" links */
for (var i in items) {
    YAHOO.util.Event.addListener(items[i].getElementsByTagName('a')[0], 'click', animateText);
}

As we would like to remember for each text if it is currently open or not (and a subsequent click on the link should make it disappear again), we need an object for each text. We already defined these in the init function:

conneryText = items[0].getElementsByTagName('p')[0];
brosnanText = items[1].getElementsByTagName('p')[0];
craigText = items[2].getElementsByTagName('p')[0];

In the animateText function we first need to check which of the links has been clicked. We determine which text we need to show by checking whether the id contains either “connery”, “brosnan” or “craig” and based on that, we show the respective text – again, animated

var targetEl = YAHOO.util.Event.getTarget(e);

if (targetEl.id.indexOf("connery")!= -1) {
    animEl = conneryText;
} else if (targetEl.id.indexOf("brosnan")!= -1) {
    animEl = brosnanText;
} else {
    animEl = craigText;
}

We also add an additional property to the object (e.g. conneryText) so that we know if the text is currently expanded or hidden.

if (animEl.isExpanded) {
    options = {
        height: { to: 0 }
    };
    animEl.isExpanded = false;
} else {
    options = {
        height: { to: 130 }
    };
    animEl.isExpanded = true;
}

var textAnim = new YAHOO.util.Anim(animEl, options ,1, YAHOO.util.Easing.easeOut);
textAnim.animate();

And this is it. We managed to animate the image, the headline and the text and also made sure that there is an appropriate version for non-JavaScript (and non-CSS users) in place. Lets have a look at the final result.

Introduction

The DOM offers various Events that you can listen and attach a function to, e.g. onclick, onmouseover. But sometimes, these might offer you not enough functionality in your own web application. With YAHOO.util.CustomEvent, you are able to create your own Custom Events, which can be described as an “interesting moment” within the flow of your application. If that “interesting moment” happens, you can fire (i.e. trigger) that event and run a function which is “subscribed” to this event. A checklist of creating a simple Custom Event could read as follows:

1. Create a Custom Event Object in your code (using YAHOO.util.CustomEvent)
2. Declare a function that should get executed when this “interesting moment” happens
3. “Subscribe” this function to the Custom Event (which will be called when the event gets fired)

The following exercise will show you how to create a Custom Event and trigger it when a certain condition within the code is met.

The Mission Statement

We have a blurred version of a picture which shows a very famous James Bond actor (step 1). The picture is split into 9 parts and when clicking on one of them, the clear (i.e. unblurred) version gets displayed (step 2). When all parts of the in-focus picture are available, a speech bubble should be displayed at the position of the mouse cursor (step 3). Inside the speech bubble, a random James Bond movie quote should be displayed.

The Plan

Based on this information, we can make a step-by-step plan of what is supposed to happen and how we are going to do it:

1. When the page gets loaded, the user will see the blurred version of the image (made up of an unordered list)
2. We will attach an onclick event to the ul which captures mouseclicks within the list
3. If the user clicks on the image (i.e. on one of the 9 parts) we will replace the respective part with the focused version
4. When the last image is swapped, we will trigger a Custom Event (this is our “interesting moment”)
5. This Custom Event caters for the display of a speech bubble, with a random James Bond movie quote, at the last mouse cursor position

The Implementation

The first steps involve creating the HTML markup and adding some styling rules. As tables are evil, we will use an ul to put the 9 image parts together. Unfortunately, we need to introduce a little hack to remove the little horizontal gaps which will otherwise get displayed in the browser:

#container li {
    float: left;
    list-style: none;
    font-size: 0; // needed to get rid of gaps between rows
}

Step two is implementing the image swap function. This will be triggered by an onclick Event attached to the unordered list. We can attach it to the ul, because through Event bubbling the parent element will capture any events the are triggered by it’s child elements. The function imgSwap() will then replace the src attribute of the image with the one in focus.

We also need to know which image has been clicked and when all 9 images got replaced. Because of that, we will get all the img elements on the page, loop through them and put each of them into an array. We will need an array, because JavaScript offers a nice function called splice() which lets you remove elements from an array (but not from an object). Therefore: get all the images (which returns an object with all the images) and feed them into array.

var init = function () {
    // attach event to whole unordered list
    var imgContainerEl = YAHOO.util.Dom.get("container");
    YAHOO.util.Event.addListener(imgContainerEl, "click", imgSwap);

    // get all image elements
    tmp = document.getElementsByTagName("img");
    imgArrayLength = tmp.length;

    // unfortunately, tmp is an object (not an array)
    // we need to therefor put all the items into an array in order
    // to use splice() to remove an item when it gets clicked
    imgArray = [];
    for (var i = 0; i < imgArrayLength; i++) {
        imgArray.push(tmp[i]); // move elements from object into array
    }
};

imgSwap() then caters for the actual replacement of the image. It uses YAHOO.util.Event.getTarget(e) to retrieve the target of the onclick event (which, in our case, will be one of the 9 image elements). It will then check if the src attribute will contain “blur_” and replace it with an empty string. Conveniently, I named to images in a way that this works (e.g. blurred: connery_blur_01.gif, unblurred: connery_01.gif). Using splice() it is then possible to remove that respective image from the array which holds all the images on the page. With every click, the length of that array decreases until it is empty, which tells us that all 9 images got swapped and our Custom Event should be triggered.

var imgSwap = function (e) {
    var imgEl = YAHOO.util.Event.getTarget(e);

    if (imgEl.src.indexOf("blur") !== -1) {
        // on click on image swap background image to unblurred version
        var oldSrc = imgEl.src;
        var newSrc = oldSrc.replace("blur_", "");
        imgEl.src = newSrc;

        for (var i = 0; i < imgArrayLength; i++) {
            // loop through array which holds all images on page
            if (imgArray[i].src.indexOf(newSrc) !== -1) {
                // find the one which just got clicked and remove it from array
                imgArray.splice(i, 1);
                imgArrayLength = imgArray.length; // adjust length of array
            }
        }
    }
};

Now it is time for creating our Custom Event. At the beginning of our module code, we will therefor create new Custom Event Object like this:

var onAllClicked = new YAHOO.util.CustomEvent("allClicked");

When creating the new object, you can pass in a parameter which will be the type of the event. This is basically your own custom name for this special event and can be used to trigger different behavior.
In our init() function, we will then subscribe a function to this Custom Event:

onAllClicked.subscribe(showQuotesBubble);

This means basically: “When the Custom Event ‘allClicked’ gets triggered, call the function ‘showQuotesBubble’”. Now all we need to do is fire the event at the right moment. This moment is exactly when the image array is empty. In the example, the showQuotesBubble function does nothing else but alerting a string.

if (imgArrayLength < 1) {
    onAllClicked.fire();
}

Now the major parts are done. When examining the example, you have probably noticed that the function which is subscribed to the Custom Event takes two arguments, type and args. type is basically the event type you can state when creating the object (“allClicked” in our case) and args is just an array of arguments passed into the array. We will use this functionality to pass in the coordinates of the mouse cursor when the last image gets clicked:

onAllClicked.fire({x: e.clientX, y: e.clientY});

As far as Custom Events go, this example is basically finished. All that is left is create a new element in the DOM (a blockquote which holds a random James Bond quote) and use the X/Y values to display that element at these coordinates. You can take a look at the final result with the finishing touches applied.

Further reading

• YUI: Event Utility: Using Custom Events
• A basic example using Custom Objects on the YUI site
• PPK on Event bubbling

Introduction

As you can see from the API documentation for the DOM component, it provides several functions which can become quite handy and enhances the standard DOM functionality, e.g.:

• addClass: add a CSS class to any given element
• removeClass: removes a CSS class from an element
• get: get any given element from the DOM
• getElementsByClassName: as the name implies, retrieving elements based on their classname
• getStyle: get a style property from an element
• setStyle: set a particular style property
• insertAfter: a long awaited functionality that lets you insert a element after a given element in the DOM tree

But there are many more useful functions that can be found in the API documentation of this component.

The Mission Statement

The following little example deals with this task: A given text contains several anchor elements, most of them point to pages on Wikipedia, some of them are just external links and only one is a local link. They should be marked as follows:

• Marking a link to wikipedia
• Marking a link to any other external resource

Due to the fact that Internet Explorer 6 and below do not support the CSS attribute selector, it is a bit difficult to accomplish this task (and make it work in IE6) by using HTML and CSS only. But with the help of JavaScript and the YUI, it is – really – a piece of cake.

The Plan

For the sake of simplicity, we imagine the following:

1. JavaScript is available: search for all anchors on the page and based on the href, attach a certain class
2. JavaScript is not available: leave it with standard link styling

The Implementation

Bond: Who would want to put a contract out on me?
M: Jealous husbands, humiliated tailors, outraged chefs. The list is endless!

from The Man with the Golden Gun

We start off with a little text kindly provided by Wikipedia, with some introduction about James Bond. You might want to check out the initial file. Even this short text already includes several anchor elements, most of them pointing to other resources on Wikipedia. However, the links in the references list point to pages which can be found elsewhere on the web. Finally, a little note at the end leads the user to the starting point of the Agent YUI series.

Before we dive into the JavaScript, we add 2 classes to our styles which will cater for the different styling of our links:

a.wp-link {
    padding-left: 20px;
    background: #fff url(img/wikipedia-icon.gif) top left no-repeat;
}

a.local-link {
    padding-left: 16px;
    background: #fff url(img/icon_external_link.gif) top left no-repeat;
}

Then we create our JavaScript module for this exercise:

YAHOO.AgentYUI.Mission2 = function () {
    // our javascript code will go in here
}();

We then define an init function which will scan through the page and get all the anchor elements. Luckily, there is YAHOO.util.Dom.getElementsBy which will get all the anchor elements on the page and feed them into a method (which we will define shortly) which checks the href attribute:

var init = function () {
    // get all anchors on the page and feed them to the testing method
    YAHOO.util.Dom.getElementsBy(formatLinks, "a");
};

Our testing method formatLinks is then taking one element of the anchors array at a time. It checks the href attribute and based on that will attach a new class using YAHOO.util.Dom.addClass:

var formatLinks = function (el) {
    var currentHref = el.getAttribute("href");

    if (currentHref.indexOf("http://en.wikipedia.org") !== -1) {
        YAHOO.util.Dom.addClass(el, "wp-link");
    } else if (currentHref.indexOf("http://") !== -1) {
        YAHOO.util.Dom.addClass(el, "local-link");
    }
};

After some cleaning up and making the code a little bit more structured, we get our final result. As stated above, this is just a little example of what can be accomplished using the YUI DOM component which provides loads of functions that can support developers when dealing with DOM related tasks and to make the functionality work cross browser.

For further information how the DOM component can assist you, please check out the reading resources listed below.

Further Reading

• YUI Library
• DOM Component
• DOM Component API documentation

The Mission Statement

In this simple example we would like to accomplish the following: We have a link on the page which will lead the user to a page with a list of photos (the non-JavaScript version). If JavaScript is enabled, users should stay on the page and out of the pool of images, one should be randomly displayed on click on the link.

The Plan

So we have 2 different scenarios:

1. JavaScript is available: randomly display an image from the pool
2. JavaScript is not available: lead user to a page with all the images

The Implementation

The HTML markup we are starting with looks like this (and you can also check it in the initial file):

<a href="all.html" id="switch">Show me more, James</a>
<img src="daniel_craig.jpg" alt="James Bond Picture" id="picture" />

We will only make use of the YUI Core components, so all we need to include is the yahoo-dom-event.js file from the recent YUI build.

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

After that, we need to create our main object, which we will use to wrap around our functions:

YAHOO.namespace("AgentYUI");

As this is the our first mission, we will define our module like this:

YAHOO.AgentYUI.Mission1 = function () {}();

Lets define the function that does the image swap first. What this function needs to do is quite simple. Out of an array of image names, get one of them on random and assign this value to the src attribute of the image element. That is fairly easy:

var switchImage = function () {
    var imageEl = YAHOO.util.Dom.get("picture");
    var images = ['daniel_craig.jpg', 'pierce_brosnan.jpg', 'sean_connery.jpg'];
    imageEl.src ="img/" + images[Math.round(Math.random() * 2)];
};

What happens here?

Blofeld: The satellite is now over… Kansas. Well, if we blow up Kansas the world may not hear about it for years.

from Diamonds Are Forever

YAHOO.util.Dom.get(“picture”) returns a reference to the HTML object on the page with the id “picture”. The other lines of code are basically defining the array of image names and then picking one of the array items on random (this is done by creating a random number between 0 and 1 and multiplying it by 2).

Now it is time to bring the Event Component into the game. We need some kind of initialitzation (or main) method to run that attaches our event to the anchor. In this init method, we make use of YAHOO.util.Event, to attach the behavior, like so:

var init = function () {
    // attach event to anchor
    YAHOO.util.Event.addListener("switch", "click", switchImage);
};

What happens here?

YAHOO.util.Event.addListener gets the element with the ID “switch” and attaches an “onclick” event. If that event is fired, switchImage gets executed.

With a little tidying up and proper use of the revealing module pattern, we get a result we can almost be happy with. But it seems as if the image gets changed and then the browser redirects to the page specified in the href attribute. For non-JavaScript users, that would be fine, but if JavaScript is enabled, that redirect should not happen. YUI provides a nice function, which lets you prevent that, called preventDefault. We will add that to our switchImage function like so:

var switchImage = function (e) {
    YAHOO.util.Event.preventDefault(e);
    var imageEl = YAHOO.util.Dom.get(config.imageId);
    imageEl.src = config.imageFolder + "/" + config.images[Math.round(Math.random() * 2)];
};

What happens is: e is the event object that gets passed into the function automatically by the YUI. With that object at hand, we can use YAHOO.util.Event.preventDefault to prevent the browser from redirecting to the next page. So we did it. Take a look at the final result.

Further Reading

• YUI Library
• Event Component
• DOM Component
• API documentation

Introduction

Bond: You know, you’re cleverer than you look!
Q: Hmm… still, better than looking cleverer than you are.

from Die Another Day

The YUI is a JavaScript library created and maintained by the Yahoo! Developer Network. It consists of several components which make the life of Web Developers easier in a way that common desired functionality can easily be achieved by using one (or more) of the components provided by YUI. As with other JavaScript libraries, it aims towards cross-browser compatibility and giving the user the possibility to use one function/component, and does not have to worry if it works in browser X – the library takes care of that.

Apart from JavaScript components to re-use, YUI also includes several CSS resources – for example, to apply a common ground by resetting all the default browser margins, paddings etc.

Why YUI? Why not library X?

From my personal point of view, there are several reasons for using YUI:

1. Unlike some other libraries, the YUI library consists of several single JavaScript files which can be included in a webpage separately. The library does not force you to include one single file, whichs size might amount to 100kB (or more), which increases page load times.
2. YUI is maintained by Yahoo!, a big player in the internet industry, which increases the likelihood of continued support for and development on that library.
3. The syntax is easy to understand. It might be more verbose than the syntax of other libraries (e.g. jQuery), but I believe it is much more easier to hand over code from one developer to another, even if that person has not worked with YUI before.

Components

As stated above, YUI consists of several components. In the current version (2.3.1 as of October 14th, 2007), the following components come with it and are considered stable to use:

YUI Core

• YAHOO Global Object: provides a single global namespaces for all components
• Dom: used for common DOM tasks
• Event: comprises methods related to attaching and subscribing to events

YUI Library Utilities

• Animation: animate elements involving size, opacity, color, position, and other visual characteristics
• Connection Manager: simplifies XMLHttpRequests – if you love AJAX, this will be your friend
• Drag & Drop: create a draggable interface efficiently

YUI Library Controls/Widgets

• AutoComplete: provides suggestion and completion functionality for text input (aka “Suggest as you type”)
• Calendar: calendar interface entirely created with JavaScript
• Container: family of components to let developers create content-containing modules (it includes Module and Overlay: Tooltip, Panel, Dialog, and SimpleDialog)
• Menu: as the name implies…makes it easier to add and display menus
• Slider: enables the user to adjust values in a finite range along one or two axes
• TabView: is designed to enable developers to create navigable tabbed views of content
• TreeView: create a visual presentation of hierarchical node data

YUI Library CSS Tools

• CSS Reset: neutralizes browser CSS styles
• CSS Base: applies consistent style foundation for common elements
• CSS Fonts: foundation for typography and font-sizing
• CSS Grids: more than 1,000 CSS-driven wireframes in a 4KB file

The following components are considered beta:

• Browser History Manager: …designed to facilitate the creation of web applications in which the navigation buttons are fully functional
• DataSource: provides a common configurable interface for other components to interact with different types of data
• Element Utility: makes simpler common tasks such as adding listeners, manipulating the DOM, and setting and getting attributes
• ImageLoader Utility: allows you as an implementer to delay the loading of images on your web page until such a time as the your user is likely to see them
• YUILoader Utility: allows you to load specific YUI components and their dependencies into your page via script
• YUI Test: testing framework for browser-based JavaScript solutions
• Button: enables the creation of rich, graphical buttons that function like traditional HTML form buttons
• Color Picker Control: provides a rich visual interface for color selection
• DataTable: provides a simple yet powerful API to display screen-reader accessible tabular data on a web page
• Rich Text Editor: replaces a standard HTML textarea – it allows for the rich formatting of text content

This series is meant to help newcomers to get started with the YUI library by providing some simple examples (starting with the core components and taking it from there). The first one will be Mission 1: Attaching Events (the easy way).

How to include and use YUI components

To make use of the powerful YUI library, the required component files need to be included in a script statement on the page. If you only want to make use of the core components (YAHOO, Event, DOM), the include statements should look like this:

<!-- Dependency -->
<script type="text/javascript"
src="http://yui.yahooapis.com/2.3.1/build/yahoo/yahoo-min.js"></script>
<!-- Event source file -->
<script type="text/javascript"
src="http://yui.yahooapis.com/2.3.1/build/event/event-min.js"></script>
<!-- Dom source file -->
<script type="text/javascript"
src="http://yui.yahooapis.com/2.3.1/build/dom/dom-min.js"></script>

Or even shorter:

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

The “-min” addition to the JavaScript file tells you that this file is a minified version of the original source file. This means, comments, carriage returns and other unnecessary whitespace have been removed from the file to reduce filesize and save bandwidth.

Just before the closing body tag, those JavaScript files should get included in the page. Douglas Crockford can tell you why it is a good idea to include JavaScript there instead of in the head. It is also part of Yahoo!’s Exceptional Performance Rules.

One word regarding the examples to come during this series: I am going to use the Revealing Module Pattern (courtesy of Christian Heilmann) to write the example-specific JavaScript code. Should you need help to understand how this pattern works, take a look at Christian’s post or check out my article on JavaScript Programming Patterns. Hope you find that stuff useful!

The first part of the series: Mission 1: Attaching Events (the easy way)

Resources

• The Yahoo! User Interface Library (YUI)
• Yahoo! User Interface Blog
• YUI Discussion Forum
• API Documentation
• YUI Examples Gallery
• Sites Powered by YUI
• Yahoo! Gallery – YUI