Ajaxschmiede.de

WaveMaker Software^TM hat die Version 3.1.1 seines Entwickler-Werkzeuges WaveMaker Visual Ajax Studio^TM für die Entwicklung von Web2.0-Enterprise-Anwendungen veröffentlicht.

Mit dem Visual Ajax Studio können Entwickler datenbankgestützte Ajax-Webapplikationen erstellen, ohne komplexen Code schreiben zu müssen. Neue Features reduzieren die Entwicklungszeit erheblich.

Die Software führt in eine neue Ära der visuellen Web 2.0 Entwicklung ein, verrät Christopher Keene (Vorstandsvorsitzender bei WaveMaker). Man verspricht sich einen großen Markt für das Produkt und eine echte Alternative zu ASP.NET. Besonders gelegentlichen Entwicklern soll die Arbeit beim Erstellen von Webanwendungen abgenommen werden.

WaveMaker Visual Ajax Studio 3.1.1 bietet jetzt das automatische Erstellen von Formularen. Das reduziert die benötigte Zeit für das Erstellen einer formular-basieren Webanwendung auf wenige Sekunden. Dieses neue Feature betrachtet Formulare als mehrfach aufrufbare Widgets, die die Migration von herkömmlichen Client/Server Applikationen hin zu einer standardisierten Ajax-Webapplikation erleichtern. Mit WaveMaker können Entwickler und Projektleiter innovative Web 2.0 Technologien vereinen, während sie an architektonischen, Sicherheits- und Datenstrategien des IT-Managers festhalten.

Darüber hinaus stehen WaveMaker Visual Ajax Studio 3.1.1 und WaveMaker Rapid Deployment Framework 3.1.1 jetzt unter der Open Source GNU AGPL Version 3 Lizenz sowie einer WaveMaker kommerziellen Lizenz. Durch den Zusatz der AGPL Lizenz wird das Engagement für Open Source und offene Standards fortgesetzt. Es besteht keine Herstellerbindung, während Entwickler und Unternehmen die Lizenz wählen, die am besten ihren Bedürfnissen entspricht.

Hier noch einmal die neuen Features von Visual Ajax Studio 3.1.1 im Überblick:

• automatische Formular-Generierung – erstellt webbasierte Formulare aus einer Datenbanktabelle in Sekunden
• erweiterbare Paletten – erlauben Entwicklern eigene Widgets innerhalb Paletten des Studios hinzuzufügen
• Entwickler-Gemeinschaft – die Registrierung ist jetzt in das Studio eingebaut
• die doppelte Lizenz-Strategie bietet Entwicklern und Unternehmen die Wahl zwischen einer Open Source Lizenz (AGPL v3) oder eine kommerziellen Lizenz
• DB2 ist jetzt eine getestetes und unterstütztes Datenbanksystem
• Microsoft Internet Explorer 6 ist getestet und wird jetzt unterstützt
• zahlreiche Behebung von Fehlern und Verbesserungen an Widgets

Wer Visual Ajax Studio vor dem Download zunächst in Aktion sehen möchte, sollte sich den Screencast anschauen:

niedrige Auflösung
hohe Auflösung

Screenshots des Entwickler-Werkzeuges:

Das YUI-Entwicklerteam hat die Version 2.5.0 ihrer User-Interface-Bibliothek veröffentlicht. Die Yahoo! User Interface (YUI)-Bibliothek ist eine Sammlung aus nützlichen, in Javascript geschriebenen, Hilfsmitteln und Bedienelementen zur Erstellung von interaktiv umfangreichen Web-Applikationen, die auf Techniken wie DOM Scripting, DHTML und Ajax basieren.

Die Entwickler haben 6 völlig neue Komponenten in die Bibliothek integriert und – neben etlichen anderen Verbesserungen – die Möglichkeiten von DataTable, einem Tool zum Erstellen veränderbare und individuell anpassbarer Tabellen, stark erweitert und beschleunigt.

Folgende Neuerungen von DataTable sind in der aktuellen YUI-Version zu finden:

• neues, schnelleres Render-Schema
• Unterstützung des horizontalen und diagonalen Scrollens
• höhere Stabilität, auch im Umgang mit DataSource Utility
• Verändern der Position von Tabellenzeilen per drag-and-drop
• leichtere Bedienbarkeit beim Verwalten von Tabellenspalten durch eine neue API, die das Anzeigen, Verstecken, Entfernen und Hinzufügen von Spalten erlaubt
• Einführung der Paginator-Klasse um Tabellen in übersichtliche Häppchen zu präsentieren – samt Navigationsmenü

Die nachfolgenden Kompontent sind neu hinzugekommen, befinden aber noch im Beta-Status:

• Layout-Manager – Vereinfacht die Erstellung mehrteiligen Benutzerschnittstellen. Eine solches erzeugtes Layout kann sowohl im Vollbildmodus als auch elementbezogen benutzt werden. Die einzelnen, bis zu 5, Bestandteile können dabei dynamisch in der Größe verändert werden. Zudem ist es möglich Layout-Einheiten auf- und zuzuklappen.
• Multi-File-Uploader – ermöglicht das browserseitige Hochladen mehrer Dateien in einem Zug. Da dies mit Javascript allein nicht geht, griff das YUI-Entwicklerteam auf Flash zurück. Des weiteren unterstützt der Uploades das Ausschließen bestimmter Dateiendungen und das Anzeiges eines Fortschrittsbalkens beim Dateiupload.
• Resize Utility – erlaubt das dynamische Verändern der Größe sämtlicher Blockelemente wie input und div. Auch in diesen Bereich fällt das umfangreiche und vielfältig einsetzbare Drag & Drop-Tool, das kaum Wünsche übrig lässt.
• Image Cropper – ein Werkzeug zum Zurechtschneiden von Bildern mit Real-Time-Vorschau.
• Cookie Utility – bietet Funktionen zum Erleichtern des Umgangs mit Cookies, einschließlich zum Erstellen und Manipulieren von sogenannten Sub-Cookies für den Fall, dass das Browserlimit an zugelassenen Cookies erschöpft ist.
• ProfilerViewer Control – grafische Oberfläche für den in YUI 2.4.0 eingeführten Profiler, der Javascript-Entwicklern helfen soll, die Laufzeit des Codes zu verkürzen.
• Slider-Kontrolle mit Bereich – ermöglicht das Festlegen von Minimall und Maximalwerten, um einen Wertebereich zu erhalten.

Neben den Neuerungen wurden auch zahlreiche bestehende Komponenten weiterentwickelt und haben das Beta-Stadium verlassen. Das betrifft die folgenden Werkzeuge:

• Color Picker Control – graphische Obefläche zur Farbauswahl. Die Bedienung ist an Desktoplösungen orientiert.
• Get-Utility – ermöglicht das nachträgliche Einbinden von JS- und CSS-Files in die DOM, nachdem eine Seite komplett geladen wurde. Und das ebenso über Domaingrenzen hinweg.
• JSON-Utility – bietet die Funktionen JSON-to-string und string-to-JSON zum Umwandeln von Zeichenketten in die JavaScript Object Notation und umgekehrt.
• ImageLoader – kann Seitenaufbau von Homepages beschleunigen, indem auch noch nicht angezeigte Bilder bereits in den Cache geladen werden.
• YUI-Test-Utility – ein Framework zum Testen und Analysieren von Javascript-Umsetzungen. Das Tool erzeugt Testszenarien, findet Programmfehler und simuliert DOM-Events auf nahezu allen Browsern.

Wie man nur unschwer erkennen kann, arbeitet die Yahoo-Entwicklergruppe mit großen Einsatz und Ideenreichtum an einer wirklich sehr, sehr allumfassenden Javascript-Bibliothek, die vom Umfang her nahezu alle anderen aussticht. Die über 270 Beispiele auf der YUI-Seite sprechen für sich.

Ich tue mich mit YUI etwas schwer. Die schiere Funktionsvielfalt erschlägt einen fast. Man weiß nicht, wo man anfangen soll. Einfach Drauflosprobieren geht bei diesem JS-Schwergewicht nicht. Hier ist eine längere Einarbeitungszeit nötig.

Wer sich davon nicht abschrecken lässt und Geduld und Zeit mitbringt, wird sicher die ein oder andere geniale Anwendung umsetzen können.

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.

Kürzlich berichteten wir über den Einsatz von Lightview als Bildergalerie. Der Autor Nick Stakenburg hat jetzt die Version 2 seiner Script-Bibliothek veröffentlicht. Bisher konnten mit Lightview Bilder auf elegante Weise über einer Webseite eingeblendet werden, wie aus Lightbox bekannt. Lightview 2 geht einen Schritt weiter und ermöglicht diesen Effekt ebenso mit Quicktime Videos (.mov), Flash Videos (.swf), Ajax (in Form von ajax-gestützter Verarbeitung innerhalb von Lightview), Iframe und Inline-Content. Diese Funktionalität ist grundsätzlich nichts Neues und bereits aus anderen Javascript-Bibliotheken, wie z.B. ThickBox, bekannt.

Der Screenshot zeigt das Abspielen eines Quicktime Videos mit Lightview 2:

Weitere Informationen, Demonstrationen, die Dokumentation und den Download findet man auf der Lightview-Projektseite.

Jeder Webentwickler muss hin und wieder Eingabeformulare erstellen, deren Eingabe auswerten und weiterverarbeiten. Derartige Eingaben sollten vor jeder Weiterverarbeitung jedoch immer validiert werden. Für den Nutzer ist es hilfreich, schon wärend der Eingabe etwaige ungültig ausgefüllte Felder anzuzeigen.

Die kleine Open Source Javascript Bibliothek „LiveValidation“ bietet solch eine Validierung in Echtzeit. Die Syntax ist leicht verständlich, Namenskonventionen und Parameter der Validierungen sind ähnlich zu denen im Ruby on Rails Framework.

Während eine Eingabe wird der Nutzer sofort über das richtige oder falsche Ausfüllen des Formularfeldes informiert. Das hilft von vorn herein Eingabefehler zu vermeiden.

Es können verschiedene Validierungen definiert werden. Hier einige wichtige:

• Format – Ein Regulärer Ausdruck beschreibt die gültigen Werte.
• Numericality – Dieser Typ befasst sich mit sämtlichen nummerischen Eingaben, es lassen sich reine Integer-Eingaben, Eingaben von Zahlen in unterschiedlichen Formaten, Zahlen mit einem Mindest- oder Maximalwert, sowie einen Zahlenbereich deklarieren.
• Length – Ist ebenfalls ein umfangreicher Validierungs-Typ. Es lässt sich eine bestimmte Anzahl von Zeichen definieren, eine Mindestlänge, eine Maximallänge oder ein Bereich.
• Inclusion – Validiert nach einer Lister gültiger Werte, entweder nach einem axakten Wert oder einem in einer Zeichenkette enthaltenen Wert.
• Confirmation – Vergleicht zwei Formularfeld-Eingaben, ob sie identisch sind. Das ist besonders für eine wiederholte Eingabe eines Passwortes nützlich.
• Email – Prüft die eingegebene Email-Adresse auf syntaktische Korrektheit.

Weitere Möglichkeiten sind der LiveValidation-Beispielseite zu entnehmen. Auf jeden Fall deckt die Bibliothek die gängigsten Validierungsarten ab.

Trotz clientseitiger Javascript-Validierung sollte auf eine serverseitige Validierung (bspw. durch PHP) auf keinen Fall verzichtet werden. Die clientseitige Validierung ist als nützlicher Zusatz anzusehen, denn sie lässt sich durch Deaktivieren von Javascript im Webbrowser umgehen.

Diese Woche ist Ajaxschmiede.de Blog der Woche auf der Webseite des Fachmagazins T3N. Das Magazin erscheint vierteljährlich als Printausgabe und widmet sich aktuellen Themen rund um Open Source, Webentwicklung und Web 2.0. Besonders umfassend wird über das Web-CMS TYPO3 berichtet. Herausgegeben wird das Magazin von der yeebase media solutions GbR.

Wir freuen uns über diese Auszeichnung. Vielen Dank für die Anerkennung!

Voraussichtlich wird In der nächsten Printausgabe die Ajaxschmiede als Blog-Highlight vorgestellt. Wir sind gespannt und erstatten Bericht, wenn es soweit ist. 🙂

Nach einem Jahr Entwicklungszeit ist die neue Version des Conent-Managment-Systems Drupal nun fertig. Dank eines Installers lässt sich das neue Drupal in wenigen Minuten einrichten. Bereits während der Installation kann das benötigte Sprachpaket einbunden werden, das System steht somit von Anfang an in der Landessprache des Anwenders zur Verfügung.

Wie auch in Drupal 5 nutzt die neue Version die mächtige Javascript-Bibliothek jQuery in der aktuellen Version 1.2.3, wie wir bereits berichteten.

Es können beispielsweise Menüpunkte per Drag & Drop verschoben werden. Die Drag & Drop Funktionalität steht für zahlreiche weitere Elemente zur Verfügung, wie z.B. hochgeladene Dateien. Durch hin- und herverschieben von Inhalt-Blöcken kann der Inhalt auf Seiten geändert werden. Diese nützlichen Interaktions-Features machen dem Anwender die Arbeit wesentlich attraktiver.

Wie man es von WordPress kennt, besitzt das neue Drupal eine Übersicht, die den Anwender über neue Versionen und Sicherheits-Updates des Drupal-Core, eingebundener Module und Templates informiert.

Templates, insbesondere reine CSS-Layouts, lassen sich noch einfacher erstellen. Das CMS soll jetzt so sicher wie noch nie sein. Ebenso wurde die Performance optimiert, pro Seite wird weniger Code geladen, somit können mir dem selben Speicherlimit mehr Module geladen werden.

Viele weitere Neuerungen in Drupal 6 sind der offiziellen Seite zu entnehmen ist.

Die Betreiber der Seite PBwiki veröffentlichten vor kurzem einem Vergleich der verschiedenen Javascript-Bibliotheken in Sachen Ladegeschwindigkeit bei unterschiedlichen Versionen und Browsern mit interessanten Ergebnissen.

Auf dem Testparcour traten die folgenden JS-Tool gegeneinander an:

• Dojo (1.0.1)
• jQuery (1.2.1)
• Prototyoe (1.6.0)
• Yahoo UI (2.4.0)
• Protoculous (1.0.2)

Dabei wurde auch verglichen, welchen Vorteil gepackte gegenüber ungepackten Versionen beim Laden haben und wie groß der Vorteil von sich im Cache befindlicher Dateien ist.

Ladezeiten der Toolkits (Zeit in ms)

Während die Bibliotkek von Yahoo ungecached noch den vorletzten Platz belegt, gelang ihr, sobald sie im Cache vorliegt, der Sprung an die Spitze der Schnelligkeit. Ingesamt kann man sagen, dass der Cache die Zeit bis zur Ausführung des Scriptes auf etwa 1/5 der ursprünglichen Zeit reduziert wird.

Unkomprimiert vs komprimiert (JQuery, Zeit in ms)

Beim Vergleich der Komprimiermethoden bleibt festzuhalten, dass das minify-Verfahren gegenüber dem gewöhnlichen Packen überlegen ist. Das ist um so überraschender da die Dateigröße bei gepackter Form erheblich kleiner ist.

Vergleich der Browser (jQuery, cached, Zeit in ms)

Wie man sehen kann, können die Browser aus dem Hause Microsoft an der bisherigen Version des Firefox 2 sehr leicht vorbeiziehen. Die große Differenz ist eventell damit verbunden, dass die IEs enger ans Betriebssystem geknüpft sind. Zudem muss man auch in Erwägung ziehen, dass der Explorer vermehrt auf neueren und damit schnelleren Computersystem zum Einsatz kommt. Mozilla hat aber mit der 3er Version ein heißen Eisen im Feuer.

Der komplette Testbericht kann übrigens hier angesehen werden.

Der Grund für die neue Version liegt vorrangig – wie man dem Entwickler-Blog entnehmen kann – im Beheben von Fehler in jQuery 1.2.2. Die aktuelle Version ist jetzt absolut kompatibel zu Adobe AIR. Des Weiteren wird diese Version in dem CMS „Drupal 6“ eingesetzt und bildet die Grundlage für jQuery UI 1.5. Darüber hinaus wurden in dieser Version einige nebensächliche Funktionen für Plugin-Entwickler hinzugefügt.

.data() and .removeData()

Diese Methoden ergänzen die bereits existierenden Methoden jQuery.data und jQuery.removeData, die in jQuery 1.2 eingeführt wurden. Diese Methoden wurden für Plugin-Entwickler angepasst.

.unbind(”.namespace”)

In der Version 1.2 konnte man definierte Ereignisse hinzufügen und entfernen. Jedoch musste man immer ein Name des verwendeten Event-Typs inkludiert werden. Jetzt können alle gebundenen Ereignisse, die zu einem bestimmten Namensraum gehören, entfernt werden.

.trigger(”click!”)

Es wurde eine neue Ergänzgung hinzugefügt, die es erlaubt mit einem Namen versehene Ereignisse vom Ausgelöstwerden auszuschließen.

Alpha Versionen von jQuery UI 1.5 und jQuery Enchant 1.0

Außerdem präsentierten die jQuery-Entwickler die Alpha-Version von jQuery UI 1.5 vor. Diese Alpha stellt eine Generalüberholung des bestehenden Codes dar, behebt dabei unzählige Fehler und beschleunigt die API. Es wird noch einige Zeit und endloses Testen dauern bis diese Version genauso stabil läuft wie die 1.2er.

Zusätzlich gaben die jQuery-Väter bekannt, an einem Plugin namens jQuery Enchant zu arbeiten und veröffentlichten auch gleich eine Alpha-Version davon. jQuery Enchant soll die jQuery-Bibliothek um eine Menge zusätzlicher Effekte bereichern, wie zum Beispiel „Abschneiden“, „Wackeln“ und „Explodieren“. Auch Enchant wird noch eine Entwicklungs- und Testzeit verschlingen.

jQuery 1.2.3 herunterladen

Vor wenigen Tagen veröffentliche Nick Stakenburg Version 1.1.0 seines Lightview-Tools, mit dessen Hilfe man eine sehenswerte Fotogalerie recht schnell auf die eigene Homepage zaubern kann.

Zu den Stärken dieses Javascript-Tools zählt sicherlich die hohe Browserunterstützung (Internet Explorer 6+, Firefox 1.5+, Safari 2+ and Opera). Es ist dafür ausgelegt, in allen Browsern ein sauberes Bild – ohne Flackern – zu erzeugen und passt sich automatisch der Bildschirmauflösung an.

Desweiteren lässt sich Lightview ohne große Vorkenntnisse in ein bestehendes Projekt einzubinden. Es können dabei sowohl einzelne Bilder als auch Galeriegruppen angesprochen werden, wobei es bei letzteren auch die Möglichkeit gibt, die Bilder in einer Diashow wiederzugeben.

Lightview setzt die kürzlich veröffentlichte Prototype-Version 1.6.0.2 voraus. Falls man Effekte nutzen möchte, benötigt man zusätzlich Scriptaculous 1.8.1.

Wie bei ähnlichen Frameworks werden im HTML-Kopf die erforderlichen Dateien geladen.

<link rel="stylesheet" type="text/css" href="css/lightview.css" />
<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='js/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='js/lightview.js'></script>

Bis auf die scriptaculous.js, die benötigt wird, wenn man besondere Effekte einbauen will, sind alle anderen Dateien Pflicht.

Der Anwenden von Lightview auf ein einzelnes Bild geschieht über das class-Attribut.

<a href='image.jpg' class='lightview'>image</a>

Es ist ebenso möglich Bilder zu Gruppen zusammenzufassen. Dafür verwendet man zusätzlich das rel-Attribut mit dem Wert gallery[group], wobei group frei gewählt werden kann.

<a href='image.jpg' class='lightview' rel='gallery&#91;group&#93;'>image</a>
<a href='image.jpg' class='lightview' rel='gallery&#91;group&#93;'>image</a>

Desweiteren bietet Lightview die Möglichkeit Bilder mit Titeln und Untertiteln zu versehen. In beiden Fällen wird das title-Attribut benutzt. Als Trennzeichen zwischen Titel und Untertitel dienen zwei Doppelpunkte.

<a href='image.jpg' title='Eine Bildüberschrift' class='lightview'>image</a>
<a href='image.jpg' title='Eine Bildüberschrift :: und sogar ein Untertitel' class='lightview'>image</a>

Zum Veranschaulichen habe ich folgende Demonstrations-Seite erstellt.