Eclipse-Nutzer können sich freuen: Mit Aptana gibt es ein äußerst komfortables GUI für Web-2.0-Entwicklung, das auf Eclipse basiert und populäre Javascript-Bibliotheken kennt.

Früher genügte zum Webentwickeln ein einfacher Texteditor. So entstanden schnell und unkompliziert einfache HTML-Seiten, die womöglich auch ein wenig Javascript oder CSS enthielten. Mit Web 2.0 und der zunehmenden Komplexität von Webseiten steigen indes auch die Ansprüche an die Entwicklungswerkzeuge, aber die Entwickler zogen bislang nicht nach: “Als wir unser Projekt Ende 2005 starteten, befragten wir viele Entwickler und fanden heraus, dass die meisten von ihnen Notepad, Emacs und Vi benutzen. Das heißt, niemand hatte eine komplette IDE für das Web 2.0. Also machten wir uns daran, das zu ändern.” erzählt Paul Colton.

Colton ist Gründer und treibende Kraft hinter Aptana [1], das manche schon mit Macromedias Dreamweaver vergleichen – sicherlich ein wenig übereilt. Die auf Eclipse basierende IDE zum Entwickeln von AJAX– und Aflax-Elementen steht unter der Eclipse Public License 1.0, nutzt zahlreiche Features der modularen Entwicklungsumgebung und arbeitet plattformübergreifend.

Die IDE bringt in der aktuellen Version 0.2.4 recht ausgefeilte Features mit: Besonders der Code-Assistent – er unterstützt Frameworks wie Dojo, Mochikit und Prototype – überzeugt. Das integrierte Tool Scriptdoc erleichtert die Dokumentation von eigenem Code. Bisher redet die IDE nur englisch; das soll sich aber ändern. Außerdem arbeitet das Team an der Unterstützung von PHP und ASP. Beide Punkte stehen in der Roadmap [3] ganz oben.

Installation

Gewöhnlich gibt es zwei Versionen von Aptana: Eine “Current” und eine “Next”-Version [4]. Letztere verfügt über aktuellere Features, kann aber noch instabil sein. Auf der Heft-CD finden Sie die “Next”-Variante von Aptana als ZIP-Datei. Bevor Sie die IDE starten, braucht es noch ein paar Handgriffe.

Als Ubuntu-User installieren Sie mittels Apt zunächst von einem externen Paketarchiv die Mozilla-Software. Dazu öffnen Sie mit Root-Rechten die Datei /etc/apt/sources.list und suchen die Zeile # deb http://de.archive.ubuntu.com/ubuntu/ dapper universe. Kommentieren Sie diese aus, ebenso wie die Zeile darunter. Am Ende der beiden Zeilen tragen Sie neben universe, jeweils getrennt durch ein Leerzeichen, den Begriff multiverse ein. Speichern Sie die modifizierte Datei.

Nun folgt ein Update der Paketquellen: Wie üblich genügt dazu ein sudo apt-get update. Dann spielen Sie Mozilla über sudo apt-get install mozilla ein. Anschließend setzen Sie eine Umgebungsvariable mit dem Pfad zu den Mozilla-Bibliotheken:

export MOZILLA_FIVE_HOME=/usr/?
lib/mozilla

Startet Aptana nicht, fehlt häufig dieser Pfad. Um ihn permanent zu setzen, übertragen Sie die komplette Zeile in die Datei ~/.bashrc. Die IDE benötigt zudem Java 1.4.2, das Ubuntu aber mitbringt.

Unter Suse verläuft die Installation etwas holpriger: Als Eclipse-Plugin (siehe Kasten “Aptana als Eclipse-Plugin”) wollte die Software im Test gar nicht laufen, als Standalone-Variante schon. Sie benötigen für Suse 10.0 zunächst eine Java-Umgebung, die Sie über eine externe Paketquelle beziehen.

Um die einzubinden, rufen Sie YaST auf und wählen unter Installationsquelle wechselnHinzufügen die Option FTP. In die Zeile Servername tragen Sie ftp3.gwdg.de ein, in die Zeile darunter gehört der Pfad pub/opensuse/distribution/SL-OSS-factory/inst-source. Suse liest gemächlich die Paketliste der neuen Quelle ein, dann installieren Sie auf gewohnte Weise java-1_4_2-gcj-compat, libgcj sowie mozilla.

Für SuSE 10.1 verwenden Sie die Mozilla-Version von der Heft-CD. Die spielen Sie mit Root-Rechten und dem Befehl rpm -Uhv mozilla-1.7.11-9.i586.rpm auf Ihre Festplatte. Vergessen Sie auch unter Suse nicht, den Pfad zu exportieren, für beide Susen lautet das Kommando:

export MOZILLA_FIVE_HOME=/opt/?
mozilla/lib

Um Aptana zu installieren, kopieren Sie das Archiv von der Heft-CD in ein Verzeichnis und entpacken via unzip Apt* das Paket. Wechseln Sie in das neue Unterverzeichnis und rufen Sie die IDE über ./aptana auf. Die Software fragt zunächst, wo sie das Verzeichnis Workspace anlegen darf, in dem sie Projekte und Dateien lagert. Anschließend öffnet sich eine Startseite, die aktuelle Informationen von der Aptana-Webseite wiedergibt. Bricht der Start mit einer Fehlermeldung ab, setzen Sie den Mozilla-Pfad erneut und überprüfen Sie Ihre Java-Installation mit dem Kommando java -version.

Abbildung 1: Nutzen Sie Aptana als Eclipse-Plugin unter Ubuntu, holt Eclipse die Software nach ein paar Mausklicks aus dem Internet.

Public Viewing

Das GUI von Aptana setzt sich – wie das von Eclipse – aus so genannten Ansichten (Views) zusammen, kleine dynamische Fenster, die den vorhandenen Platz funktional unter sich aufteilen (Abbildung 2). Jede Ansicht enthält einen Anfasser mit Namensschildchen. Ein Doppelklick auf den Namen expandiert die Ansicht in den Vollbildmodus. Mit gedrückter linker Maustaste verschieben Sie die gesamte Ansicht an einen anderen Ort. Verstecken sich mehrere Fenster hintereinander, signalisiert das ein Pfeil mit einer Zahl. Die Views haften aneinander: Vergrößern Sie eine Ansicht, verkleinern sich die anderen automatisch.

Abbildung 2: Die Ansichten (Views) teilen den Platz demokratisch unter sich auf. Über die Reiter bewegen Sie die dynamischen Fenster an eine andere Stelle.

Rechts finden Sie die Outline-Ansicht, welche die Codeelemente einer Seite hierarchisch strukturiert und abbildet. Darunter sehen Sie die Aktionsansicht, die Codeschnipsel und Templates für CSS, HTML, Javascript und XML verwaltet. Was es damit auf sich hat, erfahren Sie weiter unten. Der große zentrale Bereich dient als eigentliche Arbeitsfläche. Dort schreiben, ändern und überprüfen Sie den Quellcode. Ein Klick auf Preview am unteren linken Rand des Fensters startet gleichnamige Dienstleistung. Ihre Seite erscheint in einem Browser-Fenster.

Die Problemansicht unter dem Hauptfenster zeigt Fehler im Skript oder ungültige Tags an, die Ansicht dahinter verbirgt eine Scripting-Konsole. Den integrierten Dateimanager File finden Sie im Bereich links unten. Über ihn durchforsten Sie verschiedene Ordner nach Skripten und Bibliotheken und legen neue Javascript- und CSS-Dateien an. Um ganze Projekte im Auge zu behalten, wählen Sie die dahinter liegende Projektansicht. Im Fenster darüber verwalten Sie über Code Assist Profiles die Bibliotheken eines Projekts – seien es selbst geschriebene oder externe von Dojo oder Prototype.

Eine Ansicht, die anfangs noch auf der rechten Seite des Bildschirms erscheint, nennt sich Walkthroughs. Sie lädt dynamisch verschiedene AJAX- und Aflax-Tutorials aus dem Internet nach, die Sie per Mausklick betrachten.

Zusätzlich bringt Aptana einen recht umfangreichen Hilfebrowser mit, auf den Sie über Help | Help Contents zugreifen (Abbildung 3). Der enthält nicht nur ein paar sehr verständliche Schritt-für-Schritt-Anleitungen, sondern auch die Referenzen für CSS, Javascript, HTML DOM Level 0 und 2 und den Mochikit-Index. Es handelt sich also um ein Stück Dokumentation, das besonders Einsteigern nützt.

Abbildung 3: Der Hilfe-Browser erweist sich als nützlich, da er nicht nur den Umgang mit Aptana beschreibt, sondern auch Referenzen für CSS und Javascript enthält.

Verschwindet eine Ansicht ungewollt von der Bildfläche, gibt es die Möglichkeit, sie und alle anderen Ansichten über Window | Show View | Other zurückzurufen. Einige Ansichten zeigt Aptana gar nicht erst an, da sie Platz wegnehmen und Aptana sie im Entwicklungsprozess separat handhabt – über die so genannten Perspectives. Unter Window | Open Perspective | Other versammeln sich vier verschiedene Perspektiven.

Wählen Sie eine aus, verändert die IDE ihr Aussehen. Sie ordnet die Ansichten nicht nur anders an, sondern bringt auch neue Ansichten ins Spiel, wie die Variablen- oder Breakpoint-Ansichten in der Debug-Perspektive (Abbildung 4). Wie Sie die Perspektiven einrichten, wie groß die Fenster sind und wo Sie diese positionieren, bleibt Ihnen überlassen. Haben Sie die perfekte Raumaufteilung gefunden, speichern Sie diese über Window | Save Perspective As ab.

Abbildung 4: Mit der Perspektive ändern Sie nicht nur die Anordnung der Fenster, sondern öffnen auch neue Ansichten mit weiteren Funktionen.

All die schönen Sachen

Wie aber hilft Ihnen diese flexible Oberfläche beim Programmieren? Mit zahlreichen Features wie Code-Assist, Outline, Codeergänzung, Syntax-Highlighting und durch die Integration bekannter Javascript-Bibliotheken. Wie bei anderen IDEs versammeln Sie Ihre Dateien in einem Projekt, das Aptana im Ordner Workspace ablegt. Diese Projekte exportieren und importieren Sie auf Wunsch.

Gerade bei der Arbeit an umfangreichen Webseiten erleichtern Projekte die Übersicht. Ein Klick auf File | New | Project öffnet ein neues Projekt. Sie entscheiden sich entweder für ein einfaches Projekt (Simple Project) oder ein AJAX Library Project, das Sie unter dem Eintrag Web Library Project finden. Sie geben dem Kind einen Namen und suchen dann heraus, welche Bibliotheken Sie für das AJAX-Projekt brauchen (Abbildung 5).

Aptana erzeugt nach dem Start eine Beispieldatei als Ausgangspunkt. Wählen Sie Dojo als Javascript-Bibliothek, heißt die Datei dojo_sample.htm. Sie erscheint links unten in der Projektansicht und im Quellcode auf der zentralen Arbeitsfläche. Links oben in Code Assist Profiles erscheinen die zugehörigen Javascript-Dateien dojo.js und html.js: Ein Doppelklick öffnet Sie zum Bearbeiten.

Nun schreiben Sie ein eigenes Programm: Code Assist – wie der Codeassistent auf englisch heißt – hilft Ihnen dabei. Löschen Sie zum Beispiel neben dem CSS-Selektor #fadeElm in der Datei dojo_sample.html die erste geschweifte Klammer und tippen sie neu ein, erscheint ein Kasten, der Ihnen nicht nur zeigt, welche CSS-Eigenschaften der Selektor verträgt, sondern auch, welche dieser Eigenschaften die bekannten Browser verstehen (Abbildung 5).

Jeder Browser interpretiert die CSS-Spezifikationen etwas anders, da hilft so eine Information weiter. Mit den Pfeiltasten navigieren Sie nun durch den Kasten. Markieren Sie ein Element, erscheint daneben ein so genannter Tooltipp, der erklärt, was das Element bewirkt. Über [Eingabe] bestätigen Sie Ihre Wahl, und Aptana fügt das Element neben dem Cursor ein.

Abbildung 5: Der Code-Assistent zeigt, welche Eigenschaften ein Selektor annehmen kann und in welchen Browsern er funktioniert.

Der Code-Assistent vervollständigt auf diese Weise einige Selektoren, Klassen und Funktionen – vorausgesetzt, er hat Informationen darüber. Mit Ihren selbst geschriebenen Funktionen weiss er zunächst nichts anzufangen. Also füttern Sie ihn über Scriptdoc. Die Software bereitet die Daten aus den Javascript-Dokumenten im Workspace für den Codeassistenten auf. Dazu müssen Sie ihren Code lediglich nach einem festen Schema dokumentieren.

Für besseren Durchblick in langen Codepassagen sorgt die Outline-Ansicht. Gewöhnlich sind die Tags und Funktionen im Quellcode hierarchisch angeordnet. Outline erkennt diese Elemente und ihre Beziehungen zueinander und bildet sie ab (Abbildung 6). Klicken Sie auf ein bestimmtes Element, springt der Cursor im Quellcode dorthin. Kleine Symbole neben den Tags verraten zudem, ob es sich um Funktionen, Variablen oder Selektoren handelt. Ein Klick auf ein Tag zeigt, welche Variablen und Funktionen sich darin verbergen. Outline dient aber nur der Navigation; mit dieser Ansicht verändern Sie die Einträge nicht.

Abbildung 6: Outline verschafft Ihnen einen Überblick über die Struktur eines Dokuments, indem es seine Elemente hierarchisch gruppiert.

Ein weiteres Aptana-Feature, das Ihnen den Umgang mit dem Code erleichtert, ist das Syntax-Highlighting. Die IDE hebt die verschiedenen Elemente im Programm farbig hervor, je nachdem, ob es sich um einen Wert, einen Kommentar oder schlicht um Text handelt. Das erleichtert den Überblick. Sie ändern die Farben – abhängig vom Dateityp – über Window | Preferences | Aptana | Editors.

Damit Sie Teile des Codes, die Sie oft brauchen, schnell zur Hand haben, gibt es die Snippets, zu deutsch: Codeschnipsel. Die finden Sie in der Aktionsansicht. Sie markieren ein Stück Text im Code und klicken dann auf den Schnipsel Ihrer Wahl: Um die Auswahl herum erscheint ein spezifischer Tag. Einige HTML-Templates bringt die Software bereits mit, eigentlich dient das Feature aber dazu, selbst solche Snippets anzulegen.

In Aptana vergleichen Sie auch zwei Dokumente miteinander oder die aktuelle mit einer früheren Version. Klicken Sie dazu mit der rechten Maustaste in den Quellcode und benutzen Sie die Option Compare with | Each Other. An der selben Stelle finden Sie auch den Eintrag Team | Apply Patch, über ihn spielen Sie einen Patch ein. Wie das Wort Team zeigt, erlaubt es die Software, dass Sie ein Projekt auf einem Netzlaufwerk ablegen und so anderen den Zugriff ermöglichen.

Über Plugins erweitern Sie die IDE: Die bereits vorhandene Unterstützung für Ruby on Rails nennt sich RadRails. Für die Zukunft planen die Entwickler von Aptana aber auch Plugins für PHP und ASP.

Einstellungssache

Natürlich erlaubt es Aptana, eine Reihe von Dingen selbst einzustellen: Der Menüpunkt Window | Preferences zaubert einige Reiter hervor, die ein Feintuning erlauben. Unter Appearance passen Sie die Farben und Ansichten von Aptana an. Im Bereich Editors heißt ein wichtiger Abschnitt Keys: Dort legen Sie Tastaturkürzel für Aptana fest, um schneller an wichtige Funktionen zu gelangen.

An anderer Stelle weisen Sie den Editoren Dateiformate zu: Fehlt zum Beispiel ein Editor für XUL-Dateien, ordnen Sie diese dem XML-Editor zu. Unter Startup and Shutdown bestimmen Sie, welche Plugins die IDE automatisch lädt, wenn sie startet. Im Bereich Workspace legen Sie fest, wie oft die Software Ihre Daten zwischenspeichert und wie viele Schritte Sie in einem Dokument rückgängig machen wollen.

Fazit

Die Reise von Aptana hat gerade erst begonnen, doch das freie Tool nimmt bereits ordentlich Fahrt auf. Sicher: Einen großen Teil der interessanten Features verdankt es den Eclipse-Entwicklern, aber die Integration der Bibliotheken, der Codeassistent und andere Merkmale machen es zu einem sehr brauchbaren Tool für Leute, die sich nicht an die Arbeit mit dem Texteditor gewöhnen wollen.

Aptana eignet sich für Einsteiger und Fortgeschrittene mit AJAX-Interessen. Bei sehr großen Projekte machen sich allerdings Performance-Einbrüche bemerkbar. Es verfügt noch nicht über so umfangreiche Funktionen wie Quanta Plus; speziell Internationalisierung, FTP-Unterstützung und Unicode-Erkennung stehen zurzeit noch auf der Todo-Liste des Projekts. Aptana punktet indes in Sachen Usability und kennt zudem zahlreiche Javascript-Funktionen.