Hi. My name is Robin. I'm here to demonstrate the Outline view in the new Aptana IDE.

All right. Let's start with a new HTML file. You'll notice on the right side, we have the Outline view; on the left side, the Editor. If we expand the Outline view, we can see the structure of the document. Not only that, clicking on different parts of a structure; we can navigate to it. You can see that with the light blue background color.

All right, let's add some content -- H1, and we'll put some text in there. We'll call it "Header 1." And not to be too creative, we'll go H2; we'll put some text in there, and we'll call that "Header 2."

Now, you notice if you expand the body tag, you can see H1 and H2 and navigate to that. All right, second thing to see is we have a Preview tag at the bottom. We click on that, and we actually get a preview of the document. Let's add some style. We'll put that in the header tag, and once we type the style tag, this will bring us into CSS mode, so now, we can actually set H1 to the CSS style with background color, and we'll set the background color to red for H1.

For H2, we'll set the background color again, and we'll set that to yellow this time. All right, notice how the style tag has gotten a plus on it in the HTML side; if we open that, we can see the CSS tags, H1 and H2, and in expanding those, we can see H1 background is red; H2 background is yellow, and, of course, still H1 and H2 are there.

If we Preview down at the bottom left, we can see red and yellow on the H1 and H2 tags. Okay, last thing. Let's add some script, so if we type the script tag, that'll bring us into Java Script mode, and now, we can type "function" and we'll call this "greet". And notice how we're getting Code Assist on JavaScript now, so this is our third language.

The "greet" function; we'll just have it alert, and we'll say, "hello" + name. Okay, notice if we expand the script tag, now, we have JavaScript, and we can navigate to it; CSS, we can navigate to it, and still, we have HTML and navigate to it, so it's three languages in one outline view.

All right, let's just hook up the Java Script "onClick" and we get Code Assist on that equals, and we'll just say "greet" and we'll greet; let's say "Bill" all right? For the second one, H2, on click, and we'll greet, this time, "Sue". And we'll spell that; great. Let's go to Preview. Now, if we click on H1, "Hello, Bill." We click on H2, "Hello, Sue."

[End of Video]