Qooxdoo vorgestellt

Teil 2: Workshop Javascript-Framework: Qooxdoo

15.9.2009 von Redaktion pcmagazin und Timo Haberkern

ca. 2:15 Min
Ratgeber
  1. Workshop Javascript-Framework: Qooxdoo
  2. Teil 2: Workshop Javascript-Framework: Qooxdoo
  3. Teil 3: Workshop Javascript-Framework: Qooxdoo
  4. Teil 4: Workshop Javascript-Framework: Qooxdoo

Konsolenarbeit

In vielen Dingen geht Qooxdoo andere Wege als andere populäre Javascript-Frameworks. Einer dieser Unterschiede ist die Nutzung von Batch-Skripten während der Entwicklung. Das Framework bringt eine Reihe von Python-Skripten mit, die wiederkehrende Aufgaben automatisieren und vereinfachen.

Ähnlich wie bei Webframeworks (wie Rails oder Symfony) kommt hier der Konsole während der Anwendungsentwicklung eine gesteigerte Bedeutung zu. Aus diesem Grund ist auch eine Python-Installation auf dem Entwicklungsrechner notwendig, da alle Skripte in dieser Sprache realisiert sind. Eines davon wird beispielsweise für die Erstellung der Anwendungsgrundstruktur genutzt. Diesem Skript wird ein Anwendungsname und ein Zielverzeichnis angegeben.

C:\Qooxdoo-0.8.2-sdk\tool\bin\
create-application.py --name=hallowelt --out=C:\Qooxdoo

Dieser Befehl erstellt eine neue Anwendung mit dem Namen hallowelt im Verzeichnis c:\Qooxdoo\hallowelt.

Wenn Sie einen Blick in dieses Verzeichnis werfen, werden Sie feststellen, dass dieser Befehl eine ganze Reihe von Verzeichnissen und Dateien angelegt hat. In dieser Verzeichnisstruktur finden im Laufe der Entwicklung einer Qooxdoo-Anwendung alle Daten ihren Platz. So gibt es beispielsweise ein Verzeichnis für Klassen, eines für Übersetzungen und eines für Ressourcen, wie beispielsweise Bilder. Die Projektstruktur bietet die Grundlage für die weitere Entwicklung der Javascript-Anwendung.

Widgets

Bei webbasierten Anwendungen liegt ein Hauptaugenmerk in der Entwicklung der Benutzeroberfläche. Hierfür kommen Widgets wie Bäume, Tabs, Menüs, Buttons, Eingabefelder und vieles andere mehr zum Einsatz. Qooxdoo bringt eine große Menge an Widgets mit, die sich sehr einfach nutzen lassen. Da das Framework objektorientiert entwickelt ist, ist die verwendete Syntax zur Erstellung von GUI-Elementen gut verständlich.

Das folgende Beispiel zeigt die Erstellung eines Buttons innerhalb eines Javascript-Fensters.

var win = new qx.ui.window.Window
("First Window");
win.setLayout(new qx.ui.layout.
VBox());
win.setWidth(300);
win.set
Height(200);
win.
setShowMinimize(false);
this.getRoot().
add(win, {left:20, top:20});
var btn1 = new
qx.ui.form.Button('Klick mich', '');
win.add(btn1);
win.open();

Auf diese Art und Weise wird in einem Qooxdoo-Projekt die gesamte Anwendung entwickelt. Durch die reichhaltige Auswahl an Widgets ist dies mit sehr wenig Aufwand erledigt und erste Ergebnisse können so viel schneller und einfacher erreicht werden.

Layouting

Eine der schwierigsten Aufgaben, die sich im Laufe der Entwicklung von Webanwendungen stellt, ist das Layouten der Fenster, Dialoge und Widgets.

Während es bei Webseiten durchaus vorteilhaft und akzeptabel sein kann, die Seite und einzelne Bereiche mit einer festen Größe zu versehen, ist dies bei desktopnahen Anwendungen eher nachteilig. Hier erwartet der Benutzer, dass sich Bereiche und Fenster an eigene Bedürfnisse oder Bildschirmgrößen anpassen lassen.Auch zur Lösung dieses Problemes bietet Qooxdoo eine Lösung. Verschiedene Layout-Container bieten die Möglichkeit, Inhalte automatisch anzuordnen. Eine Menge fertiger Layout-Container wird bereits mitgeliefert und können direkt eingesetzt werden.

Javascript-Frameworks
Die Kommandozeilentools von Qooxdoo übernehmen lästige Routinearbeiten, wie beispielsweise die Erstellung eines Projektgrundgerüstes.
© Archiv

Darunter befinden sich auch einige, die vom Benutzer in ihrer Größe verändert werden können. Alle Container bieten die Möglichkeit, sich an die Fenster-Größe anzupassen und auch ein Scrolling für die Inhalte automatisch einzublenden, wenn dessen Größe die des Containers übertrifft. Das folgende Listing zeigt die Nutzung eines Container-Elementes (in diesem Fall eines Canvas), dem ein Element zugeordnet wird.

var canvas = new qx.ui.container.
Composite(new qx.ui.layout.Canvas);
canvas.add(new qx.ui.form.
Button("Hallo Welt"), {
left : 20,
top: 20
});

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.