Hi. My name is Robin, and we'll be looking at the Dojo Library today in the new Aptana IDE. All right, let's start off with a new project.

It's an Ajax Library project. We'll call it "Dojo," and we'll select the Dojo Library from the list of available Java Script libraries built in. As you can see, this is creating a Dojo project on the bottom left here, and it pulls up a Dojo sample file to get you started. Okay, this is in split-screen mode, and you can see that HTML is on the top, and the Preview on the bottom.

This, of course, is a live preview, so you can see the various things the Dojo animation package does. Okay, and, of course, if you hit F5, you'll reset and redraw the file. All right, let's close that because we'll be making our own today, and let's have a quick look through the Dojo library itself. We have all the various license files and the compressed files, and then in the source folder, the gigantic amount of work that was put into the Dojo Library itself.

All right, let's start a new HTML file: File new, and we'll say HTML. We'll call it "Test," and up will come our test HTML file. Notice in our Code Assist window, it's automatically sensed that we've created an HTML file, and it's ready to give us Code Assist against it. All right, first thing; let's import the Dojo Library itself, so script tags, source equals, and here's one of my favorite features; we get Code Assist on our actual hard drive, so now, we can just drill down and find the Dojo JS file. Nice.

Okay, notice on the left, now, we have a plus on the Test HTML, and that means it's auto sensed that we have a new library we've imported, the JavaScript library, and it's added it to the Code Assist. Okay, we have one more library to import here, and we'll do it the same way. "script src =" and this one is a little harder to find. It's a "lib/Dojo/Source". There we go, and LFX, and, finally, HTML.

All right. And notice, now, it's also auto added the HTML file to our Code Assist. Great. Let's make a DIV tag so we can actually see something here, so we'll say "DIV," and we'll call this "id = DIV 0." And let's give it a style as well. That'll save us from typing any words. "Style = background." Let's make that red. I believe that will be "F00," and let's give it a width, 20 percent. All right. I believe that's right. Let's close it and notice how it auto-closes our "DIV" tag.

When we safe, we automatically get a preview. All right. Let's also make in here something to click on. Let's make an anchor tag, and we'll give it an href of - we'll give it an href of our JavaScript function, about to write, and we'll call that JavaScript function because we know in advance, "Fadeout." All right. Now, let's go ahead and write that JavaScript function. Oh, I guess I better close out the anchor tag, and notice how it's automatically closed again.

All right. Back up here, we'll write that JavaScript, and again, the script tag; we get auto formatting, and now, the function. The function; we won't have any parameters, but we will give it a name, and it'll be "Fadeout." All right. Okay, and our "Fadeout" function; we'll actually use the Dojo Fadeout method, and that's located at "Dojo.LFX." and notice how we're getting Code Assist on all this, HTML, and this is for an uncommented library as well, so as you comment your library more, you get even richer Code Assist, but, of course, it well works just out of the box on pretty much any JavaScript.

Okay, and that is the fadeout method we're looking for. Notice how they have a whole bunch of methods in here for animation, highlights, wipe-in, wipeout, explode. We'll use the fadeout method for now. Okay, fadeout. Let's see what kind of parameters it needs. It needs a nodes tag, and we know that that is actually our DIV tag, so we'll call that "Div 0" and what else does it need? It needs a duration. Let's give it, say, 600 milliseconds. All right.

And, of course, we need to get that to play. All right, if we save that, we hopefully should be getting - oh, I see, we need some text in here. Let's give this "Fadeout." There we go. Okay, let's see what happens when we click. It fades out. Yay! And, of course, if we hit F5, we can click it again.

All right, let's give a few more things here. Let's duplicate this DIV tag three times, and we'll call this DIV 1 and DIV 2, and let's the change the color up here a little bit; 808, that should be purplish, and blue should be what - 00F. All right. We saved that. Let's go back to our animation function here. We can copy that a few times, and we'll give this one maybe only part of the duration, 302, and you know what? For fun, we saw all those overloads. Let's try a different one. What do we got here? How about "Wipeout"?

Okay. I think that was an old song. All right, we'll save this; see how it goes. "Fadeout?" Yay! Okay, one more thing. Let's try a fadeIn function, and then we can get it back, so this will be fadeIn, and, of course, we can reuse these names, fadeIn, fadeIn and wipeIn, and I guess we'll need another link. Let's give it a BR tag here, and we'll copy this one, just so you don't have to watch me type; Enter, and this will be fadeIn, and, of course, it will play the fadeIn function.

Save that, fadeOut, fadeIn. Yay! Okay, thanks. That was a demonstration of Dojo. Hope you join us again.

[End of Video]