Grand Hotel Web 2.0

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.