Ajaxschmiede.de

Um das aus Deutschland stammende Ajax-Framework Qooxdoo, über das wir bereits berichteten, war es in den letzten Monaten still geworden. Vor einem Monat meldeten sich die Entwickler mit der grundlegend überarbeiteten Version 0.8 ihrer All-in-one-Bibliothek zurück.

Die Bereiche, die am meisten von der Überarbeitung provitieren, sind das „GUI Toolkit“ und das „developer tool chain“.

Der Code des GUI-Toolkit wurde für Qooxdoo 0.8 komplett umgeschrieben. Das Toolkit soll damit auf dem aktuellen Technik-Stand sein und Unterstützung für alle gängigen Browser (IE, Firefox, Safari, Opera) bieten.

Das GUI-Toolkit besitzt eine Schichtarchitektur: Über einer niedrigeren DOM-basierten Ebene (die auch als unabhängige Bibliothek genutzt werden kann), werden eine Vielzahl von Widgets und Layout-Managern eingebunden.

Entwicker von RIA- (Rich Internet Applications) Umsetzungen können kinderleicht eigene angepasste Widgets und Layouts erstellen. Das Bearbeiten der Themes von Widgets ist völlig unabhängig vom eigentlichen Widget-Code und erlaubt nun unbgegrenzte Gestaltungsmöglichkeiten wie abgerundete Rahmen, Farbverläufe und Schatten.

Das neue Qooxdoo kommt mit zwei neuen schicken Themes daher. Diese können auf einfache Weise angepasst werden – völlig ohne CSS-Kenntnisse.

Neben den interessanten Änderungen an dem GUI-Toolkit, wurde auch das „developer tool chain“ genannte Werkzeug gehörig aufgebohrt. Dieses integrierte Tool befreit den Web-Entwickler von lästigen und komplizierten Aufgaben und bietet zu gleich Hilfestellung während der Anwendungserstellung.

In der Vorgängerversion erfolgte der Entwicklungsprozess noch per Makefile und erforderte Windowsnutzer um Cygwin installieren und nutzen zu können, löste man sich nun in Qooxdoo 0.8 von diesen Voraussetzungen. Alles was jetzt noch benötigt wird, ist eine funktionierende Python-Installation, die auf jedem beliebigen Betriebssystem (einschließlich Windows) läuft und sich leicht konfigurieren lässt.

Weitere Höhepunkte der neuen Version von „Tool Chain“ sind:

• Verknüpfen von Grafiken
• Unterstützung einer Vielzahl von Sprachen
• JSON-basierte Konfiguration
• Testen einzelner Segmente
• umfangereiche API-Dokumentation

Einen leichten Einstieg in Qooxdoo bietet das Online-Handbuch (englisch).

Pi ist eine leichtgewichtige Javascriptbibliothek, die für die Bedürfnisse von JS-Programmieren entworfen wurde.

Pi wurde zum einen entwickelt um eine nützliche Entwicklungsumgebung zu bieten, zum anderen um speziell die Unterschiede der verschiedenen Browser zu minimieren.

Die umfangreiche pi.element-Klasse ermöglicht es, komplexe Benutzerschnittstellen leicht und systematisch zu erstellen.

Die extend-Methode erlaubt das objektorientiertes Erzeugen und Erweitern von Klassen. Dazu steht ein Tutorial zur Verfügung.

Ajax-Anwendungen werden mittels pi.xhr-Klasse entwicklerfreundlich entwerfen.

Mit pi.get() lässt sich einfacher auf Elemente zugreifen. Zudem stellt pi.util.Element eine Menge Methoden zum intuitiven Manipulieren der DOM-Syntax zur Verfügung.

Mittels pi.env kann der Browser des Webpage-Besuchers abgefragt werden.

Als Beispielanwendungen, die auf Pi setzen, wären der Javascript-Debugger Firebug Lite und ein Realtime-Chat zu nennen. Wobei letzterer noch den Pi-Plugin Comet nutzt.

Frisch veröffentlicht wurde die neue, voll abwärtskompatible, Version 2.2 des Ext JS Javascript-Frameworks. Neben wichtigen Fehlerbehebungen und Geschwindigkeitsverbesserungen  bringt die neue Version auch eine Reihe von neuen Komponenten und Extensions mit sich.

Neue Features sind:

Checkbox- und Radio-Gruppe

Individuelle Checkboxen und Radio Buttons sind nichts neues. Selbst per CSS gestaltet sehen diese Controls jedoch in vielen Browsern unterschiedlich aus. Diese Standard-Controls können ja gegen optisch konsistente Controls von Ext JS ersetzt werden.

Live-Beispiel

History

Eine weitere Komponente, die in Ext JS fehlt, ist eine History. Diese erlaubt es auf einer einzelnen Seite innerhalb der Ext JS Applikation über die Vor- und Zurückbuttons des Browsers in bereits aufgerufenen Inhalten zu navigieren.

Live-Beispiel

MultiSelect / ItemSelector

Multiselect ist ein Control, das, wie der Name schon sagt, die Mehrauswahl von Listen-Elementen erlaubt. Der Itemselector kombiniert zwei Multiselects in einem komplexeren Modul, welches Drag&Drop, Massenauswahl und Abwählen neben weiteren Features enthält.

Live-Besipiel

FileUploadField

Wie schon aus anderen Frameworks bekannt bietet auch Ext JS jetzt eine Möglichkeit, Dateien hochzuladen. Dieses sehr nützliche Control kann sowohl mit (nurlesbarem) Textfeld und „Durchsuchen-Button“ als auch nur mit dem „Durchsuchen-Button“ angelegt werden.

Live-Beispiel

XmlTreeLoader

Der XmlTreeLoader dient zur Demonstration, wie sich eine vorhanden Ext JS Komponente um Funktionalität erweitern lässt, die in eigenen Applikationen benötigt wird.

Live-Beispiel

GMapPanel

Diese Komponente war eigentlich nur als Demo gedacht. Durch den Erfolg in der Community wurde darauf jedoch eine offizielle Erweiterung erstellt. GMapPanel ermöglicht es, Karten von Google Maps in einem Fenster innerhalb einer Website anzuzeigen. Gleichzeitig zeigt dieses nützliche Beispiel, wie sich eine Ext JS Komponente mit einer externen API (der von Google Maps) verknüpfen lässt.

Live-Beispiel

Das Framework erfuhr aber noch zahlreiche weitere Änderungen, wie z.B. die volle Unterstützung von Firefox3. Weiterhin gibt es drei neue umfangreiche Beispiele zu Drag&Dro. Es wurden zahlreiche Performance-Verbesserungen und Bugfixes vorgenommen. Die Entwickler wollen aber auch die Nutzer der 1.x Version nicht im Stich lassen und planen die Version 1.2 von Ext JS, in der ebenfalls Fehler behoben werden.

Zum Ext JS 2.2 Download

Die vor allem als Internet Service Provider bekannte 1&1 Internet AG, Tochterunternehmen des Riesenkonzerns United Internet AG, arbeitet seit über 4 Jahren an einem aufregendem Ajax-Framework namens Qooxdoo. Dieses soll ein neues Zeitalter der dynamischen Web-Entwicklung einläuten.

Qooxdoo, ausgesprochen „kucksdu“, ist ein allumfassendes und innovatives Gerüst für Ajax-Anwendungen. Durch den wirkungsvollen Einsatz von objektorientiertem Javascript können Web-Entwickler mit diesem Framework schnell eindrucksvolle und browserübergreifende Anwendungen erstellen. Weder HTML, CSS oder DOM werden hierzu benötigt.

Qooxdoo beinhaltet eine Reihe von plattformunabhängigen Entwicklungswerkzeugen, ein modernes Interface-Toolkit und einen fortschrittlichen Client-Server-Communication-Layer.

Das gesamte Framework ist durchgehend klassenbasiert (über 300 Klassen existieren) und versucht alle Vorteile des objektorientierten JS effizient einzusetzen. Da alle grundlegenden Javascript-Funktionen, -Klassen und -Objekte unangetastet bleiben, sprich: nicht erweitert worden, ist es problemlos und leicht möglich, Qooxdoo in bestehenden Code einzubetten oder noch andere Bibliotheken mit einzubinden.

Unterstützt werden alle modernen Browser: Firefox (1.5, 2.0, 3.0), Internet Explorer (6, 7), Opera (8, 9) und WebKit / Safari 3.0.

Der schnelle und zuverlässige Javascriptparser ist ein fester Bestandteil des automatischen Erstellprozesses, der das Optimieren, Komprimieren, Verlinken und Verwalten von benutzerspezifischen Anwendungen sehr bedienerfreundlich gestaltet.

Zudem wurde großer Wert auf die Internationalisierung und Lokalisierung für eine Vielzahl von Ländern und Sprachen gelegt.

Obwohl Qooxdoo ein reines Javascript-Framework ist, befindet es sich auf gleicher Augenhöhe mit anderen Toolkits wie QT oder SWT zum Erstellen graphischer Benutzeroberflächen (GUI).

Die vielen internen Minianwendungen (Widgets) sind in Aussehen und Bedienung sehr an bestehende Desktopapplikationen angelehnt. Die dargestellten Elemente verhalten sich wie gewöhnliche Fenster. Das heißt, sie lassen sich in Größe und Aussehen den Vorlieben anpassen.

Alle Widgets beruhen auf mächtigen und äußerst flexiblen Layout-Managern, die der Schlüssel zu den nahezu unbegrenzten Anwendungsmöglichkeiten sind. Die Definition eines Interfaces geschieht aus Leistungsgründen in Javascript.

Um eine graphische Oberfläche zu beschreiben wird weder HTML verwendet noch muss man sich Gedanken über CSS  machen. Durchdachte und leicht anpassbare Vorlagen für das Erscheinungsbild, Farben, Rahmen, Schriftarten und Icons nehmen viel Arbeit ab und erlauben nebenbei das Ändern der Themen zur Laufzeit.

Als klientseitige und serveragnostische Anwendung beherrscht Qooxdoo vollen RPC-Server-Support (aktuell Java, PHP, Perl) um etwa seine fortschrittlichen Client-Server-Kommunikation aufzuzeigen.

Eine abstrakte Transportschicht unterstützt Abfragen, Timeouts und Implementierungen via XMLHttpRequest, Iframes und Scripts. Wie im ganzen Framework wird hierbei auch eventorientiertes Programmieren vollkommen unterstützt, wodurch die asynchrone Kommunikation sehr vereinfacht wird.

Neben Unmengen an Demos und Anwendungsbeispielen existiert auch eine umfangreiche Dokumentation.

Und das beste zuletzt: Qooydoo ist als Open Source frei verfügbar.

Mit der Bereitstellung der Version 2.6. des DOMAssistant hat das Entwicklerteam um den Schweden Robert Nyman ein wahres Kunststück in Sachen Geschwindigkeitsoptimierung fertig gebracht.

An der modular aufgebauten Javascript-Bibliothek, über die wir bereits berichteten, wurde vor allem der Bereich der CSS-Selektoren genaun analysiert und beschleunigt. Das Ergebnis kann sich sehen lassen: DOMAssistent besitzt die schnellste Performance beim Verwenden von CSS-Selektoren.

Im SlickSpeed Selector Test kann sich jeder davon überzeugen. Dabei werden folgende Bibliotheken miteinander verglichen: DOMAssistant 2.6, jQuery 1.2.3, Prototype 1.6.0.2, Mootools 1.2b2, ExtJS Core 2.0.1 und YUI 2.4.1. Ich habe den Test selbst durchgeführt und war erstaunt darüber, wie viel länger andere Bibliotheken benötigen.

Der $$-Methode

Neben dem bisher bekannten $-Operator wurde nun zusätzlich der $$-Operator eingeführt. Er dient dazu ein Element über das id-Attribut direkt anzusprechen. Im Gegensatz zum einfachen $ gibt der neue Operator einen Fehler zurück, falls kein Element mit der im Parameter übergebenen id existiert.

$("#navi a"); // CSS-Selektor-Aufruf
$$("navi"); // um Elemente über die id zu addressieren

Die bisherige Syntax greift nun nur noch für CSS-Selektoren, nicht mehr um nur Elemente über die id zu erreichen!

Parallele Ajax-Aufrufe

Bis zu diesem Release war es nicht möglich mehrere post- oder get-Methoden gleichzeitig aufzurufen. Wurde bisher ein neuer Ajax-Befehl gestartet, bevor der aktuelle abgearbeitet werden konnte, wurde letzterer abgebrochen. Ab Version 2.6 von DOMAssistent können nun beliebig viele Ajax-Aufrufe gleichzeitig ausgeführt werden.

Plugins

Das Nyman-Team bleiben seiner Linie treu und will seine Javascript-Bibliothek klein und effektiv halten. Dennoch wünschen sich viele Javascript-Entwickler die Fähigkeiten von DOMAssistent zu erweiteren und eigene Funktionen und Methoden zu integrieren. Diesem Wunsch kam man nach, indem man die Möglichkeit schuf Plugins einzubinden. Eigene Erweiterungen können auf einer eigens eingerichteten Seite Anderen zur Verfügung gestellt werden. Eine Anleitung zum Erstellen von Plugins steht ebenso auf dieser Page bereit.

Wer neugierig geworden ist, kann sich auf der Downloadseite die neuste Version von DOMAssistent herunterladen – wie gewohnt als Gesamtpaket oder einzelne Module.

DOMAssistant stellt ähnlich wie jQuery einige sehr leistungsstarke Funktionen zur Verfügung. Die Syntax der beiden Javascript-Bibliotheken ist sehr ähnlich aufbaut. Im Unterschied zu jQuery besteht DOMAssistant aus mehreren Modulen, die man auch einzeln, je nach Bedarf, einbinden kann.

Folgende Module stehen zur Verfügung:

• DOMAssistant.Core
• DOMAssistant.AJAX
• DOMAssistant.Content
• DOMAssistant.CSS
• DOMAssistant.Events
• DOMAssistant.Load

Durch das Einbinden der benötigen Module spart man Traffic und verkürzt damit auch die Ladezeit der Seite, weil wirklich nur das benutze geladen wird.

Das Core-Modul stellt die grundlegenden Funktionen für DOMAssistant zur Verfügung und muss eingebunden werden. Hauptbestandteil davon ist der $-Operator, der benutzt wird um in verkürzter und sehr flexibler Notation auf Elemente zuzugreifen. Des weiteren bietet Core noch die Funktionen elmsByClass, elmsByAttribute, elmsByTag und each um über den Class-, Attribut- und Tag-Namen Elemente manipulieren zu können.

Das Content-Modul bringt einige Funktionen mit um auf den Inhalt von Elementen Einfluss zu nehmen. Im Einzelnen wären dies die Methoden: prev, next,create, setAttributes, addContent, replaceContent und remove. So ist es zum Beispiel mit create möglich relativ einfach neue Elemente samt Attributen zu erzeugen und an beliebiger Stelle in das Dokument zu integrieren.

Die anderen Module bieten spezielle Methoden um das Manipulieren von CSS, das Event-Handling und den Umgang mit Ajax zu vereinfachen.

Heute hat Google Code die JavaScript Bibliothek „Really Simple History“ (RSH) in der Version 0.6 final veröffentlicht. RSH eignet sich für das Management von Bookmarking und Browser Historie in Ajax/DHTML Anwendungen. Die Version 0.6 unterstützt moderne Webbrowser wie Internet Explorer 7, Safari und Opera. Die Bibliothek wurde 2005 von Brad Neuberg entwickelt und hat seit dem einen großen Nutzerstamm gewonnen. Eindeutig dazu beigetragen hat seine Einfachheit, leichte Handhabung und die Unabhängigkeit von anderen AJAX Frameworks.

Für Ende dieses Jahres ist Version 0.8 beta geplant, die zusätzliche Erweiterungen enthalten wird. Version 1.0 ist für das erste Quartal 2008 geplant.

Wie kürzlich bei Golem.de berichtet wurde, hat Google das AxsJAX-Framework als Open Source veröffentlicht. Dieses soll Entwicklern dabei helfen, barrierefreie Ajax-Applikationen mit Hilfe von Accessibility-Funktionen zu entwickeln. Der Umfang dieser Funktionen sind in der ARIA Roadmap des W3 Konsortiums (W3C) verankert.

Informationen zum Framework und den Download findet man bei Google-Code unter http://code.google.com/p/google-axsjax/