Creating a new AJAX library project [edit]

Introduction

This walkthrough will instruct you how to create a new AJAX library project, such as a web site based off of the Yahoo UI or prototype libraries.

  1. Access your projects.
    1. Click the Project tab to view your Aptana projects.
  2. Create a new AJAX 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 any supported AJAX libraries that you want to import and code against.
    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 AJAX library project, which includes a lib folder for any libraries that you checked, new library-specific HTML template file(s) named <library>_sample.htm, and new Code Assist Profiles for each library that you checked.

      A <library>_sample.htm file automatically opens in the HTML Editor.

      If you are linking to multiple AJAX libraries, Aptana opens the <library>_sample.htm file for the first library alphabetically. You can open any other <library>_sample.htm files that are part of your project by double-clicking them in the Project View. Whenever you open a <library>_sample.htm file in the HTML Editor, Aptana auto-generates a Code Assist Profile for you for that library. As long as the <library>_sample.htm is the active HTML file, its Code Assist Profile will be the active profile.

  3. Explore your AJAX project.
    1. Just below the open <library>_sample.htm file in the Editor, click the Preview tab.

      Aptana displays a preview of the sample page for your project.

    2. Click the Source tab to return to the source view of <library>_sample.htm.
    3. In the Project View, expand your project folder to view the files in your AJAX project.
    4. In the Code Assist Profiles View, expand the <library>_sample.htm project folder to view the JavaScript library files.

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

  4. Preview Code Assist.
    1. In your AJAX project, double-click the <library>_sample.js file for your library to open the file in the Editor and view the code for this example.
    2. Insert your cursor somewhere on a new line in the <library>_sample.js file, and press ctrl+space.

      Code Assist displays a list of functions from your library and the JavaScript Core language and DOM. Use Code Assist to help you code.

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