Speaker: Paul Colton
View this screencast to see how to create a new web project based on the MochiKit JavaScript library.


View video

Welcome to the Aptana overview for MochiKit. Let's get started. This is the main Aptana interface, the welcome screen. We'll get started by clicking on the "workbench". This is the main user interface for developing with Aptana. On the upper left, you'll see the Code Assist profile. This lists all of the HTML and Java Script files that are used to provide Code Assist.

Here, you'll see the File View. Aptana supports both file-based editing and project-based editing. There's the main editor area and Outline View to the right and a Problems View below that we'll make small for now. I'm going to switch to project mode for MochiKit by clicking the Aptana Projects button here. I'm then going to right-click on the Navigator with a new project.

You'll notice under "Web", there's a project called "New MochiKit Library Project." I'll click that. I'll give it a name, My MochiKit Project. What this wizard does is provide all of the basic MochiKit library files that are needed in a small symbol HTML file. You can immediately just click Preview and see that here is that sample file, actually using the MochiKit Library.

What we'll do is we'll shut some of these windows down, close them down, and we'll replace the sample that comes with it and type it in manually, so I'll start with deleting that, and then I'll add some script tags. Notice immediately, the Code Assist is helping. I'll select "script" and the close tag is added for me.

I'll go in here, and I'll start typing. Notice that when I pause, Code Assist tries to help me out. Since the function already exists in the sample file, we'll go ahead and just select it there and we'll reimplement it here as a function. Notice the parenthesis and the brace auto completion. I'll start typing a command that it knows in MochiKit. If I wait, you'll see the Code Assist has automatically suggested it for me. I'll go ahead and say, "Yeah, swapDOM is what I want." Open paren; it gives me help on what its parameters are and offers some possible suggestions, but for now, we'll just type it ourselves.

That little green bar you see here means that I can tab to jump out of that section. We'll then use another MochiKit command called "stand". Those, I just type the first few letters. It helps me; tells me what it is, so I'll say "stand no". Now, I'll actually use some objects from MochiKit, so I'll just type that. There's the MochiKit object. I'll hit "Enter" and "." and there's more MochiKit. I want to use "Visual". Type "V", and there's Visual selected for me.

I'm going to type "." again, and I want version, and there it is; then, notice that all we have is the included documented MochiKit library file. Everything is done automatically by Aptana. And now that I'm done there, I'll close. Notice the highlighting of the braces. We'll then use another function called "roundClass" and just start typing it; there it is. This has a lot of documentation, so we'll say we want to "H1 no". And then use roundClass again and type the first few letters. There's Round Class. Say no to Round H2. In this case, we'll pass then. We'll create an object here called Corners at the bottom, semicolon, and then I'll come here, and then I'll say I want to add this event. I'll just type "addL" and then there's the one I want, Add Mode Event, and then I'll say I want to add that object, type that, and there it is right there.

So Aptana actually looks at what you're typing and looks at everything in your Code Assist profile. In this case, it would be the entire MochiKit library, so type that, and then I'll just save, and then it'll switch to previous, and then you'll see that everything's been rounded and works perfectly, and all I have to do is just create a new project and start typing, and Aptana helps everywhere it can. Thanks.

[End of Video]