Using Aptana Studio 3

Aptana Studio 3 is a very powerful open source IDE. It is built from Eclipse and supports JavaScript, HTML, DOM, CSS, PHP, Ruby on Rails, and more. In addition to these supported languages and technologies, Aptana Studio also supports Git, deployment through FTP/SFTP/Engine Yard and other setups, a strong debugger with all the debugging goodness you'd expect, code assist, and finally a built-in terminal.

In Chapter 1, Getting Started, we installed it as a standalone program; however, if you are an avid Eclipse user, you can also install it as a plugin. Since we will be using this software for the remainder of the book, we should spend some time getting familiar with it.

The interface

We'll start by looking at the various aspects of the Aptana Studio interface. Due to scope constraints, we will only look at the pieces we will be using the most. For a more detailed look at Aptana Studio, check out Aptana Studio Beginner's Guide, Thomas Deuling, Packt Publishing.

Toolbar

Here, we have a lot of the standard icons and commands you'd expect to see in an IDE. Starting left to right, the toolbar will be explained:

The following is a description of the options:

• The new icon creates a new project, file, folder, and more.
• The save icon saves the current open file.
• The save all icon saves all the currently loaded files.
• The print icon prints the current file.
• The open URL icon will load the source code of the specified URL.
• The toggle breakpoint icon creates a breakpoint at the current location of the cursor.
• The debug icon launches the current project in Firefox (default) and changes other debug properties. Browsers in this option will need the respective debugging tool installed.
• The run icon is the same as debug icon but does not include the debug information.
• The open a PHP type icon allows you to inspect PHP elements.
• The next four icons toggle on/off certain windows in the IDE.
• The terminal icon opens a terminal window.
• The themes icon allows you to change the current look of the IDE.

Project Explorer

This window will list all the files and folders associated with the current project. You can right-click in this area and import/export files, create new files and folders, and create a new file from a specified template. This window also supports the standard operations such as renaming and deleting files. The window looks like the following screenshot:

Console, terminal, and problems

This window will show various output messages during the debugging process, compilation errors, and, when you are using the Terminal tool, this will be the actual window that is used:

The Editor window

The heart of Aptana Studio, the editor. This screen is where all the magic happens. The editor has code completion, syntax highlighting, and code folding. The window looks similar to the following screenshot:

Suggested customizations

The default IDE theme is Aptana Studio. Personally for us, it's a bit rough on the eyes so we always change the theme to Dreamweaver. It's a very clean theme that is a lot easier on the eyes. Of course this is a personal preference and you may like the default, but take a few minutes and look through each theme to see if there is one you like better. The more comfortable the IDE is on your eyes, the better the coding experience will be for you.

We need to specify our XAMPP instance so that it can be used when we execute the project. Technically, if you are storing all of your Aptana projects in the XAMPP htdocs folder, this wouldn't be used, but just to be safe or if you have a web server you'd rather use, this will come in handy.

1. Go to the Project menu and choose Properties.
2. Click on Preview Settings and then click New.
3. From this dialog box, choose External Web Server.
4. Enter any name you wish in the Name field.
5. For the Base URL option, put in http://localhost (if you had to use a different port number from 80, be sure to specify that as well).
6. Document Root should be <XAMPP installation directory>/htdocs.
7. Click OK twice and the server is set for this project.

If you use GitHub or have a JIRA instance, you can set the username and password for these services under the Preferences | Accounts window, which can be found under the Window menu.

Navigate to Preferences | Editors, you can set the number of lines in a tab for each of the supported languages. I use the default but I know some people prefer to increase or decrease that number, so this is where you can make that change.

Creating a new project

Aptana Studio supports four different project types:

• Web: This is your standard web project that allows you to create an empty project or create one based on the HTML5 Boilerplate.
• PHP: This is recommended for projects that will be using PHP. You can also set the PHP release compatibility for the project.
• Ruby: Here you can create a new Ruby project based on the Ruble template or an empty project.
• Rails: The last project is a Rails project.

For the majority of this book, we will be using either Web or PHP.

1. Let's go ahead and create a web project based on HTML5 Boilerplate.
2. Navigate to File | New | Web Project.
3. Select the HTML5 Boilerplate template.
4. Click Next.
5. Name your project anything you wish; we're using aptanatest.
6. Make sure the default location checkbox is checked and the location is pointing to your XAMPP htdocs folder.
7. Click Finish.

Your Project Explorer screen should look similar to the following screenshot:

All of these files are part of the extremely popular HTML5 Boilerplate template. You can see more about it at https://github.com/h5bp.

Let's see what this bad boy looks like when we execute it. Click on Run. Anything happen? Were you one of the lucky ones that knew what to do to get Aptana Studio to execute the code? There is one nuance of Aptana Studio that bothers us and gets us about 9 out of 10 times when we go to run a project. If you do not have the main file of the project, in this case index.html, selected when you click Run, nothing happens. No error, no dialog box asking you to select a file, nothing. We admit; we're not sure if this is something to do with Eclipse itself, or whether it's just Aptana Studio. So if your project did nothing when you clicked on Run, select index.html and click Run again.

This time around you should have seen something similar to the following screenshot:

At first glance, you may be disappointed that all those files just give this one line of text. HTML5 Boilerplate is a great start to writing HTML5 applications. It puts in a lot of the gotchas you may come across so that you don't have to worry about them. So while this sample is very miniscule, it is an extremely powerful and complex tool in the backend.