Christian Renner (ch12r)

Kuckst du!

qooxdoo.org
Auf der Suche nach einer freien Alternative zur sehr schicken “Ext JS”-Bibliothek für das Erstellen von JavaScript-basierenden RIA’s bin ich auf das AJAX-Framework qooxdoo (gesprochen: [’ku:ksdu:]) gestoßen. Aktuell liegt es in der Version 0.8.1 vor und wird von der “1&1 Internet AG” unter der LGPL entwickelt.

Neben der Erstellung von desktop-ähnlichen GUI’s bietet es ein mächtiges SDK, das dem Entwickler das automatisierte Komprimieren des Quellcodes, Unit-Testing, sowie Erstellen einer API ermöglicht. Ein Überblick über die verschiedenen GUI-Komponenten bietet die Live-Demo: Demo-Browser.

Im Folgenden möchte ich gerne einen kurzen Einstieg in das Framework schildern.

Für ein ausführliches Tutorial ist momentan leider keine Zeit. Eventuell wird eines folgen, wenn das Projekt in der endgültigen Version 1 verfügbar ist. Etwas ausführlichere Tutorials gibt es sowohl englisch- als auch deutschsprachig.

Installation der SDK

Im Vergleich zu anderen AJAX-Frameworks, wie Prototype und JQuery verfolgt es einen für mich neuen Ansatz in der Entwicklung einer Weboberfläche mit JavaScript. Bisher war ich es gewohnt ein, zwei JS-Dateien im Header des XHTML-Dokumentes einzubinden, um direkt im Anschluss in der gewohnten Entwicklungsumgebung meine Skripte zu erstellen.
Das Arbeiten mit Qooxdoo sieht standardmäßig einen Entwicklungsprozess mit dem mitgelieferten, in Phyton geschriebenen, SDK vor. Hierfür muss zunächst Phyton installiert werden, was unter Windows relativ einfach mit ActivePhyton zu realisieren ist.
Für andere Plattformen sind weitere Empfehlungen auf der Herstellerseite zu finden. Dort findet man auch die aktuelle Version des Frameworks. Hat man sich die aktuelle SDK heruntergeladen, wird diese entpackt (c:\qooxdoo).

Hallo Welt!

Um ein neues Projekt mit der Bezeichnung “helloworld” (Achtung: Ein Bindestrich im Projektnamen erzeugt einen Fehler zur Laufzeit!) aufzusetzen, öffnen wir die Konsole und geben folgenden Aufruf ein:

C:\qooxdoo\tool\bin\create-application.py --name=helloworld --out=C:\xampp\htdocs\

Dadurch wird durch das SDK ein Projektverzeichnis mit dem Namen “helloworld” im htdocs-Verzeichnis meiner Xampp-Installation erstellt. Das mache ich, da ich die später noch zu erzeugende API über meinen lokalen Webserver verfügbar haben möchte.

Durch das SDK werden in dem Verzeichnis für das Projekt relevante Konfigurationsdateien, sowie eine kleine Hello-World-Anwendung generiert.
Diese beinhaltet einen Button, der durch Drücken ein

alert("Hello World!");

auslöst. Der zugehörige Code befindet sich im Verzeichnis

C:\xampp\htdocs\helloWorld\source\class\helloworld\Application.js

.

Das obligatorische Hello-World wird also von den Entwicklern bereits mitgeliefert. Um nun trotzdem das Gefühl zu bekommen, etwas geschafft zu haben, werden wir den Button mit einem Tooltip versehen. Hierzu erweitern wir die bereits bestehende “Application.js” um folgende Codezeilen:

var tooltip = new qx.ui.tooltip.ToolTip("Tipp: Durch Drücken des Buttons wird ihnen die"
                                                   +" Hello-World-Ausgabe angezeigt!");
tooltip.setShowTimeout(50);
button1.setToolTip(tooltip);

Das Testen der Anwendung erfordert ein vorheriges Kompilieren der Anwendung. Um die Anwendung zu übersetzen wird folgender Aufruf in die Konsole eingegeben:

cd xampp\htdocs\helloworld
generate.py source

Die Anwendung lässt sich dann im Browser mittels der URL

http://localhost/helloworld/source/

testen.

Deployment und Dokumentation

Um die Anwendung zu auszuliefern, bietet es sich an den Sourcecode vorher zu bauen. Dazu werden die benötigten Dependencies in eine Datei gepackt und komprimiert. Der Aufruf lautet, wie folgt:

generate.py build

Alle benötigten Dateien befinden sich anschließend im Verzeichnis

C:\xampp\htdocs\helloworld\build

und können nun auf den Webserver kopiert werden.

Die projektspezifische API wird durch folgenden Aufruf erzeugt:

generate.py api

Die API ist dann anschließend über folgende URL verfügbar:

http://localhost/helloworld/api

.

Fazit

Ziel des Frameworks ist die Unterstützung von RIA’s mittels JavaScript ohne tiefgehende Kenntnisse von HTML, CSS und des DOMs. Ob das bis ins Detail tatsächlich der Realität entspricht, kann ich zum jetzigen Zeitpunkt noch nicht sagen. Was ich sagen kann ist:

Das Framework bzw. das SDK ist nach einer kurzen Einarbeitungszeit leicht zu handhaben und sehr gut dokumentiert. Des Weiteren lassen sich sehr schöne GUI’s entwickeln mit einer Methodik, die stark an die Java-Welt (Swing, SWT) angelehnt ist. Auch die Aufrufe innerhalb des SDK ‘s erinnern an Java-Tools (Ant, Maven).
Die integrierte Möglichkeit zur Durchführung von Unit-Tests erlaubt das Skalieren eines JS-Projektes und somit die Entwicklung von “echten” RIA’s. Das Generieren einer API rundet die ganze Sache ab.

Des Weiteren lässt sich durch den RIA-Ansatz ein sehr schönes MVC umsetzen. Das heißt, dass der Gedanke an eine Kombination eines MVC-Server-Frameworks, wie zum Beispiel dem Zend Framework, und dem hier vorliegenden in meinen Augen durchaus lohnenswert ist. Für mein nächstes Projekt wird dieses Gedankenspiel in jedem Fall eine Rolle spielen. Genaueres werde ich berichten, wenn es so weit ist 😉

Live-Link zum Beispiel: Hallo Welt!
Sourcen: qooxdoo_helloworld_source.zip

This entry was posted in Development and tagged , , , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared.

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="">