Getting started with Aptana and Prototype [edit]

Introduction

This walkthrough will instruct you how to create a new Prototype project and get started with your coding using the documented Prototype library supplied by Aptana.

  1. Access your projects.
    1. Click the Project tab to view your Aptana projects.
  2. Create a new Prototype project.
    1. From the Aptana File menu, select New > Project...

      The New Project wizard opens.

    2. On the New Project wizard, expandAptana Projects and select Default Web Project.
    3. Click the Next button.
    4. In the Project name: field, type a name for your new project.
    5. Click the Next button.
    6. From the Select AjAX Libraries list, check the box next to Prototype.
    7. On the Jaxer Support screen, click the Select All button if you would like to add Jaxer support to your project.
    8. Click the Next button.
    9. On the HTML Preview Settings screen, define any custom preview settings that you might need for your project.
    10. Click the Next button.
    11. Click the Finish button.

      Aptana creates a new Prototype project, which includes a lib folder for the Prototype library, a new Prototype-linked HTML template file named prototype_sample.htm, and a new Code Assist Profile.

      The prototype_sample.htm file automatically opens in the HTML Editor. Because prototype_sample.htm is now the active file, your Prototype profile now becomes the active Profile in the Code Assist Profiles View.

  3. Explore the Prototype project.
    1. Just below the open prototype_sample.htm file in the Editor, click the Preview tab.

      Aptana displays a preview of the Local Links example from Prototype.

    2. Click the Source tab to return to the source view of prototype_sample.htm.
    3. In the Project View, expand your project folder to view the files in your Prototype project.
    4. In the Code Assist Profiles View, expand the prototype_sample.htm project folder to view the documented Prototype library files.

      These are the files that will be available to you in Code Assist.

  4. Preview Code Assist.
    1. In your prototype_sample.htm file, hover your cursor over the $ in the line "paragraph = $(paragraph);" to view the documentation for the Prototype "$" function.
    2. Insert your cursor just after "paragraph = $(paragraph);", and press Return to create a new line.
    3. Type "in" and press ctrl+space.

      Code Assist displays a list of Prototype functions that begin with the letters "in" (e.g. include, indexOf, etc). Use Code Assist to help you code.

  5. Start coding.
    1. As you type, notice that Code Assist is now active for the Prototype objects and functions that you use.
    2. Press ctrl+space at any time to activate Code Assist.