KNOW-HOW Aptana www.fotolia.de, Andrea Danti Danti Andrea www.fotolia.de, The Aptana Free developer environment for AJAX be unstable. Before you can launch Aptana, there are one or two manual tasks to complete. Ubuntu users will need to run Apt to install the Mozilla software from an ex- WEB BUILDING ternal package archive. To do so, become root, open /etc/apt/sources.list, and look Aptana is an extremely convenient GUI for AJAX development. You can for the line that reads # deb http:// de.archive.ubuntu.com/ubuntu/dapper use this versatile IDE as a stand-alone solution or an Eclipse plugin. universe. Comment out this line and the line that follows. At the end of these two BY KRISTIAN KISSLING lines, add the words universe and multi- verse, separated by a blank. Now save ot so long ago, web program- in particular, Code Assist, which sup- the modified file. mers could use a simple text ed- ports frameworks like Dojo, Mochikit, The next step is to update the package Nitor to develop simple HTML and Prototype. The integrated Scriptdoc sources: sudo apt-get update will take pages that maybe even included some tool makes it easier for developers to care of this. Then install Mozilla by giv- Javascript or CSS. But Web 2.0, and the document their ever-increasing complexity of websites, own code. As of have sharpened the demands placed on this writing, the development tools. Aptana [1] is an IDE is available in Open Source, multi-platform IDE for English only, al- AJAX web development. According to though there are founder Paul Colton, “When we plans to add sup- launched our project at the end of 2005, port for other lan- we asked many developers, and what we guages. The team found out was that most of them used is also working on Notepad, Emacs, and Vi. In other words, PHP and ASP sup- nobody had a complete IDE for Web 2.0. port [3]. So we went about changing that.” Some users compare Aptana with Installation Macromedia’s Dreamweaver. Aptana is Aptana comes in an Eclipse-based IDE that you can use to either a “Current” create both AJAX and Aflax elements. version or a The Aptana IDE is released under the “Next” version Eclipse Public License 1.0. [4]. The latter has Figure 1: If you opt to run Aptana as an Eclipse plugin on Ubuntu, The current version of the IDE, 0.2.4, more up-to-date Eclipse will automatically retrieve the software off the Web at the has a number of sophisticated features, features but might click of your mouse. 48 ISSUE 74 JANUARY 2007 WWW.LINUX - MAGAZINE.COM Aptana KNOW-HOW ing the sudo apt-get install mozilla com- read on. The large mand, before going on to set an environ- area in the center mental variable with the path to the is the workspace, Mozilla libraries: where you can write, modify, and export MOZILLA_FIVE_HOME=U test your source /usr/lib/mozilla code. Clicking Preview in the If you can’t launch Aptana, you might lower left corner be missing this path. To make the path of the window persistent, just add this line to your launches the ~/.bashrc. The IDE also requires Java preview service 1.4.2, although Ubuntu has this by and renders your default. page in a browser The install on Suse is less intuitive: in window. fact, we were unable to convince the The Problem Figure 2: Views share the available space democratically. The tabs software to run as an Eclipse plugin (see view below the let you move these dynamic windows to different positions. the “Aptana as an Eclipse Plugin” box) main window in our lab, although the stand-alone vari- shows script errors or invalid tags; the The browser not only has a couple of in- ant was quite happy to do so. For Suse Scripting console is hidden in a view be- tuitive step-by-step guides, but also the 10.0, you first need to install a Java envi- hind this. The integrated File manager, references for CSS, Javascript, HTML ronment, which you can download from located on the lower left, can be used to DOM Level 0 and 2, and the Mochikit an external package source. browse folders for scripts and libraries index. This is a very useful collection of To add the source, launch YaST and and to create new Javascript and CSS documents, especially for newcomers. select the FTP option in Change Installa- files. The Project view helps you keep If a view accidentally disappears from tion Source | Add. Enter ftp3.gwdg.de in track of your projects. The Code Assist the screen, you can restore it, or any the Server name line and the path in the Profiles in the window above this view other view, by selecting Window | Show line below: pub/opensuse/distribution/ helps manage the project libraries, no View | Other. Aptana does not display SL-OSS-factory/inst-source. Suse will take matter whether you wrote them yourself some views by default, as they take up its time reading the package list from the or imported external libraries from Dojo space, and Aptana handles them sepa- new source, but when it’s done, you can or Prototype. rately within the development process, go on to install java-1_4_2-gcj-compat, The Walkthroughs view appears on by means of Perspectives. Selecting Win- libgcj and mozilla in the normal way. the right side of the screen. It dynami- dow | Open Perspective | Other takes you See the Aptana website or the docu- cally loads various AJAX and Aflax tuto- to four different perspectives. mentation for your own Linux distro for rials off the Web, letting developers view Selecting a perspective changes the information on installing Aptana for the tutorials at the click of a mouse. appearance of the IDE, not only by reor- other Linux variants. Aptana also has a fairly comprehen- ganizing the current views, but also by sive help browser, which you access by displaying new views, such as the vari- Public Viewing selecting Help | Help Contents (Figure 3). able or breakpoint views in the Debug Just like Eclipse, the Aptana GUI uses views – small dynamic windows that Aptana as an Eclipse Plugin share the available space (Figure 2). Running Aptana as an Eclipse plugin stall. This pops up a dialog where you Every view has a handle with labels. gives you a couple of additional Eclipse can use the function Search for new fea- Double clicking a name expands the features, which let you program in lan- tures to install. Click the New Remote view to fill the screen. You can hold guages such as Java or C. Although Ap- Site button to display an input box down the left mouse button and drag the tana officially supports Eclipse 3.1, it will where you can type Aptana as the mouse to move the whole view to a dif- also run with Eclipse 3.2, give or take a Name:, followed by the URL: ferent position. An arrow with a number couple of restrictions. You can install http://update.aptana.com/update/. the IDE from the Ubuntu Multiverse by shows you where windows are hiding Complete this process by clicking Finish, giving the sudo apt-get install eclipse other windows: if you scale up one view, and in the dropdown menu that follows, eclipse-jdt command. You do not need to select Aptana Development Tools, then the other views automatically scale install Aptana: Eclipse will automatically Next (Figure 1). Accept the license, and down. download Aptana off the Web. press Next and Finish. Install All then The Outline view, which is located on To launch the software, just type eclipse tells Eclipse to install Aptana. To open the right, shows the code elements for a on the command line. Eclipse will first Aptana, relaunch Eclipse, and after page in a tree structure. Below this, you prompt you to specify a path for the doing so, select Window | Open can see the Action view, which manages Workspace. Now close the welcome Perspective | Other, and finally, Aptana. code snippets, as well as templates for screen to access the menu. Select Open Although Eclipse output a couple of CSS, HTML, Javascript, and XML. To dis- Perspective | Other | Debug, and then error messages in our lab, the IDE still cover what the Action view does, just Help | Software Updates | Find and In- worked perfectly. WWW.LINUX - MAGAZINE.COM ISSUE 74 JANUARY 2007 49 KNOW-HOW Aptana invaluable. You can press the arrow keys to navigate the dialog. If you select an item, a tool tip is displayed next to it to explain what the element actually does. Pressing [Enter] confirms the current selection and tells Aptana to insert the element next to the cursor. Code Assist will complete various se- lectors, classes, and functions in this way, assuming it has enough informa- tion on them. Of course, it will not un- derstand any functions you have written yourself. But why not use Scriptdoc to supply missing details? Scriptdoc marks up the data from the Javascript docu- ments in the workspace for Code Assist. For this to work, all you need to do is to document your code according to a fixed schema. The Outline view helps you keep track of longer sections of code. Normally, Figure 3: The help browser is useful, as it not only explains how to work with Aptana but also tags and functions are organized hierar- provides references for CSS and Javascript.