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.
- Access your projects.
- Click the Project tab to view your Aptana projects.
- Create a new Yahoo UI project.
- From the Aptana File menu, select New > Project...
The New Project wizard opens.
- On the New Project wizard, expandAptana Projects and select Default Web Project.
- Click the Next button.
- In the Project name: field, type a name for your new project.
- Click the Next button.
- From the Select AjAX Libraries list, check the box next to Yahoo UI.
- On the Jaxer Support screen, click the Select All button if you would like to add Jaxer support to your project.
- Click the Next button.
- On the HTML Preview Settings screen, define any custom preview settings that you might need for your project.
- Click the Next button.
- 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.
- From the Aptana File menu, select New > Project...
- Explore the Yahoo UI project.
- 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.
- Click the Source tab to return to the source view of yahooui_sample.htm.
- In the Project View, expand your project folder to view the files in your Yahoo UI project.
- 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.
- Just below the open yahooui_sample.htm file in the Editor, click the Preview tab.
- Preview Code Assist.
- 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.
- 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.
- Start coding.
- As you type, notice that Code Assist is now active for the Yahoo UI objects and functions that you use.
- Press ctrl+space at any time to activate Code Assist.