Getting started with Aptana and Yahoo UI [edit]

Introduction

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

  1. Access your projects.
    1. Click the Project tab to view your Aptana projects.
  2. Create a new Yahoo UI 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 Yahoo UI.
    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 Yahoo UI project, which includes a lib folder for the Yahoo UI library, a new Yahoo UI-linked HTML template file named yahooui_sample.htm, and a new Code Assist Profile.

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

  3. Explore the Yahoo UI project.
    1. Just below the open yahooui_sample.htm file in the Editor, click the Preview tab.

      Aptana displays a preview of the Library Animation example from Yahoo UI.

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

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

  4. Preview Code Assist.
    1. In the yahooui_sample.htm file, right above the closing </script> tag, hover your cursor over the onAvailable function in YAHOO.util.Event.onAvailable function to view the documentation for this Yahoo UI function.
    2. Insert your cursor somewhere on a new line in the script portion of the yahooui_sample.htm file, type "get" and press ctrl+space.

      Code Assist displays a list of Yahoo UI functions that begin with the letters "get" (e.g. getAttribute, getBoundingClientRect, etc). Use Code Assist to help you code.

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