Hi. This is Robin again, and we'll be looking at the Yahoo UI Library today in the new Aptana IDE.

All right, to get started, it's an Ajax Library, so we'll make a new project, and it's an Ajax Library project. We'll call it Yahoo, and we'll select it from the list, the Yahoo UI Library. That does a lot of things automatically.

The most obvious is the HTML is out here on a split-screen mode with HTML at the top and the Presentation view at the bottom, and on the bottom left here, it's automatically creating a project. That includes the sample HTML file you're looking at on the right side and the Yahoo Library itself, and, as you can see, they have a whole bunch of code doing really neat things.

Here's an example of the Animation Library. That's what we'll be using today, and as you can see, it's got a whole bunch of functionality in there. All right, great. One thing that's nice about the split-screen view while you're working is that if you make an edit in the HTML and save, you automatically get the view, and that, of course, will free us up to a little more room.

Let's expand this screen a little bit here, and we'll bring this one down, and let's go look at the code itself. Okay, here, they make a color animation object. You can see we get the Content Assist when we hover. It has certain parameters, and then they attach it to an Event Listener.

Okay, that's for color animation. We're going to make a movement animation, so we'll try and squish left here, and we'll call this "anim equals new" and that is in - the movement animation library is in the Yahoo name space also under "util." But it's just called "anim" not "color anim," and as you can see, again, here, we get a sample usage and a description even of what the library does.

Let's look at the parameters it takes. First thing it takes is string element, and we can see down here; that's a reference to the element that will be animated. Okay, let's go have a look at our code. It's the div ID we want to animate, and it's called "demo", so I guess the first parameter will be "demo". Okay, what's the next parameter? The attributes to be animated.

The attributes; well, we want to animate the left attribute, going from left to right, so let's just make an attribute object here, so we'll call it "a" to be short, and it's an object literal in the Yahoo Library, so let's just go ahead and make an object literal, and we'll have the property being left, and we'll animate to, Pixel No., say, 300, okay? And there's other options in there. You can animate from and to and duration and all that kind of stuff, but we'll just leave it simple like that.

Of course, because we're animating an exact pixel, we'll have to make sure that our style also is positioned absolute, so let's go ahead and put that in. So it did not position absolutely. All right. Is it complaining about something here? Let's check. Oh, it's complaining about our JavaScript. Well, that's a good thing because our JavaScript is now complete.

Okay, so the second parameter here; if you hit Ctrl+Shft+Space, you can see we're now in the second parameter of attributes. We've already defined that to be A. Let's go on to the third parameter, the duration. Well, this is an optional parameter, and as we can read, method is also an optional parameter, so for now, let's just leave it right at that.

The last thing to do is to hook this up to an event listener, and by memory, I know that is also in the "util" category under the event object, and there we go, the event object. Okay, and the thing we want to do is we want to add a listener, so there's the "addListener". Let's check its parameters. Okay, the H2L element to assign the event to - let's just go ahead and assign that to "document" just to be lazy here. And the type of event - let's listen for the "click" event. What else do we have here?

The method the event invokes the anim class in the Yahoo utilities actually has an animate method, and that's what we're interested in here, so our anim object, and we'll use the animate method. Okay, what's next? The scope - that will be the anim object, and, lastly, if the object passed in becomes the scope of the listener; yes, we'll just say true to that because they did.

All right, let's check it out. We'll save this; we'll come down here, and we'll click, and, sure enough, it animates. One more quick thing: There was some overloads in here. Let's check out what they were. Okay, there's a duration. Well, one second seems fine, and what's the last one? It's the easing method. Okay, and you can see they have the Yahoo Util Easing object. Let's check out what's in there, so Yahoo.Util.Easing, and what do we have? A whole bunch of good stuff. Wow. Look at all that.

Okay, let's try the "bounce-out," and see how that looks. We'll save, click; oh, nice. Let's try two seconds. Save, click; nice. Okay, well, that's the demo of the Yahoo Library, and I hope you enjoyed listening, and I hope you'll tune in again. Thanks.

[End of Video]