KNOW-HOW Aptana www.fotolia.de, Andrea Danti

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. chically in the source code. Outline will detect these elements, and their rela- perspective (Figure 4). Developers have which libraries you need for your AJAX tions, and map them (Figure 6). If you the freedom to set up perspectives, de- project (Figure 5). click a specific element, the cursor will fining window sizes and positions. Once Aptana creates a sample file as a start- jump to the corresponding position in you have set up a perspective to your lik- ing point. If you select Dojo as your the source code. Small icons next to the ing, you can save it by selecting Window Javascript library, the file will be titled tags tell you if you are looking at a func- | Save Perspective As. dojo_sample.htm. It appears at the bot- tion, variable, or selector. Clicking a tag tom left of the project view, with the tells you what variables and functions Beautiful Things source code shown in the central work- are hiding behind it. However, Outline But how can this flexible GUI really help space. The accompanying Javascript is only for navigation; you can’t modify you become a better programmer? The files, dojo.js and html.js, appear at the entries in this view. answer is with innumerable features top left in Code Assist Profiles, where Syntax highlighting is another Aptana such as Code Assist, outlining, code you can double click to edit them. feature that will help you write code. completion, syntax highlighting, and the Time to write your own program: as The IDE highlights various elements in integration of popular Javascript librar- the name suggests Code Assist will help the program in different colors depend- ies. Just like with other IDEs, you can you do so. For example, if you delete the ing on whether you are looking at a group your files with a project that Ap- first curly bracket next to the #fadeElm value, a comment, or just plain old text. tana will store in the Workspace folder. CSS selector in the Projects can be exported and imported dojo_sample.html as needed. file and start to Projects can help you keep track of type, a dialog will your work, especially if you are involved pop up, showing in developing a major website. Clicking you which CSS File | New | Project opens a new project. properties the se- You can opt for a Simple Project, or an lector supports, AJAX Library Project, which you will and which of find below the Web Library Project entry. these properties Enter an intuitive name, and then decide are supported by popular browsers GLOSSARY (Figure 5). Mochikit: A widespread and well- Every browser documented suite of Javascript libraries, interprets the CSS designed and tested for popular brows- specifications in a ers such as Safari 2.0.2, Firefox 1.0.7, slightly different Firefox 1.5b2, Internet Explorer 6, and way, so this kind Figure 4: The perspective not only changes the way the windows are Opera 8.5. of information is organized; it also opens new views with different functions.

50 ISSUE 74 JANUARY 2007 WWW.LINUX - MAGAZINE.COM Aptana KNOW-HOW

of RadRails. The Aptana developers are planning plugins for PHP and ASP. Preferences Of course, Aptana gives you a number of options for setting up the environment to your liking. Selecting Window | Prefer- ences takes you to a tab where you can fine tune the environment. Appearance lets you modify Aptana’s colors and views. The Keys section below Editors is also important, giving you the ability to define keyboard shortcuts for Aptana to enable even quicker access to frequently needed functions. You can also assign file formats to spe- cific editors: for example, if you don’t have an editor for XUL files, you can as- sign them to the XML Editor. Startup and Shutdown let you say which plugins you Figure 5: Code Assist shows you the properties supported by a selector and also tells you want the IDE to load automatically. which browsers have the required support. Workspace lets you set how often you want the software to create a backup This gives programmers an excellent Aptana lets you compare two docu- copy of your data, and how many steps overview. You can change the colors – ments, or the current document with a you would like to be able to undo. depending on the file type – by selecting previous version. To do so, right click Window | Preferences | Aptana | Editors. the source code, and select Compare Conclusions Snippets, in the Action view, give you with | Each Other. The same menu has Aptana is just at the start of its journey, quick access to bits of code that you use an entry for Team | Apply Patch, which but this free tool is already starting to frequently. Select a piece of text in the lets you install patches. As the word pick up speed. It owes many of the inter- code, and then click the snippet you Team suggests, you can store the project esting features to the Eclipse developers, need to wrap the text in the tagging of on a network drive to support collabora- but the way it integrates libraries, Code your choice. The software has a couple tive development. Assist, and other features, make Aptana of HTML templates, although the feature Plugins give you the ability to extend a very useful tool for people who prefer is actually designed for you to add your the IDE: support for Ruby On Rails is al- not to use a text editor for their work. own snippets. ready available, and it goes by the name Aptana is suitable for beginners and advanced programmers interested in AJAX. Performance hits in large-scale projects detract from the excellent all round impression. Aptana does not have the same feature scope as Quanta Plus as of this writing – features such as lo- calization, FTP support, and Unicode de- tection are still on the project’s to-do list. Despite this, Aptana scores top marks with respect to usability and its support for numerous Javascript functions. ■

INFO [1] Aptana project homepage: http:// www. aptana. com [2] Aflax demos: http:// www. aflax. org/ demos. htm [3] Aptana roadmap: http:// www. aptana. com/ docs/ index. php/ Aptana_Roadmap [4] IDE download page: Figure 6: Outline helps you keep track of the structure of a document by grouping elements http:// www. aptana. com/ download_ hierarchically. linux. php#next

WWW.LINUX - MAGAZINE.COM ISSUE 74 JANUARY 2007 51