Die großen Änderungen halten sich in Grenzen, da vor allem viele kleine Fehler ausgemerzt worden:

• getStyle() und setStyle() unterstützen nun auch die CSS-Eigenschaft opacity (Undurchsichtigkeit) – und zwar browserübergreifend
• Antworten (Responses) von Ajax-Aufrufe vom Typ json werden automatisch “geparst”
• Ajax-Aufrufe unterstützen nun auch timeout’s und Ausnahmenverarbeitung (Exceptions)
• removeEvent() ermöglicht nun das Entfernen aller (einschließlich anoymer) Ereignisse eines Elementes
• getStyle() liefert im Internet Explorer nun immer die korrekten Werte für float, width und height zurück

Die aktuelle DA-Version steht bei code.google.com zum Download zur Verfügung.

PictureSlides bietet vielfältige Möglichkeiten Slideshows und Fotogalerien individuell zu erstellen und anzupassen. Dabei gibt es die folgenden Varianten, die man sich jeweils in einer Demo ansehen kann: nur große Bilder anzuzeigen, eine Slideshow in eine existierende Seite einzubetten und eine Fotogalerie samt Vorschau-Bildern zu erstellen.

Zu den Features zählen:

• Slideshows, die beim Öffnen der Seite starten
• Slideshows mit Wiederholungsschleifen
• Lightbox-ähnlicher Effekt während des Slideshow-Durchlaufs zum Abheben vom Rest der Homepage
• Ein- und Ausblendeffekt
• Wahlweises Vorladen der Bilder um Ladezeiten zu umgehen
• Individuelles Steuern, welches Foto zuerst angezeigt werden soll, über den Programmcode
• Unterstützung von Tastaturkürzeln
• Vor- und Zurück-Links
• Einblenden von Text neben dem Bild
• Bilderzähler

Dieses Plugin besteht aus zwei Dateien: Eine Datei beinhaltet den gesamten nötigen Javascript-Code, die andere enthält die Einstellungen zum Anpassen aller Parameter, Features und Werte.

Eine ausführliche Einbauanleitung samt Dokumentation steht allen Interessierten in englischer Sprache zur Verfügung.

Das zweite Plugin, das ist vorstellen möchte, trägt den Namen boxIt und ist von dem Franzosen Samuel Desnoës, der bereits für die französische Übersetzung der DOMAssistant-Dokumentation verantwortlich war, entwickelt worden.

Während Rahmen um block-artige HTML-Elemente (div, p, ul, li) standardmäßig eckig sind und man daher “runde Ecken” meist nur über div-Verschachtelungen erzeugen kann, vereinfacht boxIt den Quellcode und damit auch das Vorgehen erheblich, indem der Anwendungsentwickler nur noch das HTML-Element angeben muss und das Plugin den Rest via Javascript hinzufügt.

Auf der Homepage des Entwicklers findet sich eine Demonstrationsseite, die aufzeigt, wie boxIt arbeitet. Ebenso existiert eine ausführliche (englischsprachige) Beschreibung über das Benutzen des Plugins.

Die Neuerungen in 2.7.1 lesen sich wie folgt:

• Unterstützung der Pseudo-Klassen :nth-last-child, :nth-last-of-type und :target
• Unterstützung einfacher und doppelter Kommata bei Attributwerten
• noParse-Option für die ajax()-Funktion zum Umgehen der erzwungenen Umwandlung von GET- in POST-Parameter bei POST-Aufrufen
• Fehlerbereinigung der setAttributes-Methode im IE
• Fehlerbereinigung der XHTML-Namespace-Evaluation in XPath
• addContent akzeptiert nun auch numerische Werte
• Events können aus sich selbst heraus hinzugefügt und entfernt werden, ohne Probleme im Event-Handler zu verursachen
• Erstellen von <object>-Elementen im Firefox funktioniert nun korrekt

Für die nächste Hauptversion planen die DA-Entwickler die Erweiterung des Event-Modells um benutzerdefinierte Ereignisse, das Einführen weiterer Möglichkeiten zur Ereignissteuerung und noch einige andere Funktionen, die Anwendungsentwicklern zu Gute kommen sollen.

Unicode-Support

Da das Web bekannterweise international und vielsprachig ist, war das Anliegen der DA-Entwickler Unicode-Unterstützung zu bieten. Dadurch ist es möglich, Webseiten in nahezu allen Sprachen anzusprechen. Um “neue Märkte” zu erschließen, steht die Dokumentation nun auch in chinesisch zu Verfügung.

Neue Funktionen

cssSelect - führt eine CSS-Selektoranfrage über eine DOM-Elementreferenz aus. Zum Beispiel:

$(document).cssSelect(".hover[type=div]");

ajax – Diese Methode bietet dem Web-Entwickler umfangreichere und genauere Möglichkeiten um eine Ajax-Anfrage zu manipulieren. Zum Beispiel:

$("#container").ajax({
	url: "ajax.php",
	method: "POST",
	params : "name=DOMAssistant",
	callback: functionReference,
	headers : {
		"Content-type" : "application/x-www-form-urlencoded"
	}
});

setStyle – Ermöglicht den direkten Zugriff zum Ändern von Stylesheet-Angaben. Zum Beispiel:

$("#container").setStyle("border", "10px solid red");

$("#container").setStyle({
	background : "#ffffa2",
	color : "#f00"
});

first – Diese Hilfsmethode gibt das erste Element einer CSS-Selektoranfrage zurück. Zum Beispiel:

$("#navigation a").first();

Performance und Genauigkeit

Wie bereits erwähnt, beschleunigten die DOMAssistant-Entwickler nochmals nach Version 2.6 ihre Bibliothek. Vor allem die Ausführungsgeschwindigkeit von Selektoranfragen im Microsoft Internet Explorer wurde enorm verkürzt. Auf der eingerichteten SlickSpeed-Testseite kann sich jeder von der Schnelligkeit von DA 2.7 überzeugen.

Abschließend sei gesagt, dass auch etliche Fixes in die neue Version Einzug hielten, die die Stabilität der Anwendungen und die Genauigkeit der Ergebnisse erhöhen.

Entsprechend der DOMAssistant-Kompatibilität funktioniert das Ajax-Formular mit den Browsern Internet Explorer 5.5 (und höher), Firefox 1.5 (und höher), Opera 9 und Safari 2.

Bevor ich auf die Besonderheiten meiner Implementierung eingehe, kann sich jeder selber ein Bild meiner Anwendung machen, indem er sich meine Demonstration anschaut.

Mein Script besteht aus 4 Javascript-Funktionen, deren Namen sich größtenteils selbst erklären: initAJAX, sendData, getData und resData. Die letzte Funktion wertet die Antwort der aufgerufenen PHP-Datei aus, an die die Daten geschickt worden.

DOMAssistant bietet die Möglichkeit Daten sowohl per post- als auch per get-Methode zu übertragen. Da man bereits im form-Element von HTML eine Methode zur Datenübertragung wählt, lasse ich in dem Script die Art der Übermittlung auslesen und dann entsprechend die Funktion DOMAssistant.AJAX.post beziehungsweise DOMAssistant.AJAX.get ausführen.

Um die zu übertragenden Daten zu bestimmen, habe ich die Funktion getData geschrieben, in der ich Gebrauch von CSS-Selektoren mache um den Inhalt und die name-Attribute aller Eingabefehler auszulesen.

function getData(id) {
	data = ""; // Datenstring
	// für alle input-Felder innerhalb des ausgewählten form-Elements
	//, die nicht das Attribut name mit dem Wert ref_page haben
	$("#" + id + " input:not([name=ref_page])").each(function () {
		// wenn input type nicht radio
		if ($(this).type === "radio") {
			// wenn radio-Button ausgewählt
			if ($(this).checked) {
			// Zusammensetzen des Datenstrings
				if (data != "") data += "&";
				data += $(this).name + "=" + $(this).value;
			}
			// wenn input-type nicht radio
		} else {
			if ($(this).type !== "submit") {
				// Zusammensetzen des Datenstrings
				if (data != "") data += "&";
				data += $(this).name + "=" + encodeURIComponent($(this).value);
			}
		}
	});
	// für alle select-Boxen und Textfelder
	$("#" + id + " select, #" + id + " textarea" ).each(function () {
		// Zusammensetzen des Datenstrings
		if (data != "") data += "&";
		data += $(this).name + "=" + $(this).value;
	});
	// Rückgabe des Datenstrings
	return data;
}

Der Datenstring erhält anschließend die Form vorname=wert&nachname=wert&… und wird an die save.php geschickt.

Die save.php hat es in sich, da sie multifunktionell ist:

• Es ist egal, ob Daten per get oder post übertragen wurden, da sowohl das $_POST- als auch das $_GET-Array nach übergeben Werten überprüft werden. Ist eines der Arrays nicht leer, wird ein Zeiger mit dem Variablennamen $myData auf das entsprechende Array gelegt, wodurch der Inhalt des jeweiligen Array über $myData verfügbar wird.
• Diese eine Datei verarbeitet einerseits die Datenübertragungen per Ajax und anderseits auch die gewöhnlichen – sprich ohne Javascript. Entscheidend hierfür ist das versteckte input-Feld mit dem name-Attribbut ref_page, das die Adresse des jeweiligen Formulars durch den Aufruf echo $_SERVER["PHP_SELF"]; enthält. Im Falle einer Ajax-Übermittlung wird dieses Feld nicht mit übertragen, bei der geläufigen Form schon und dient als Weiterleitungsadresse (header: Location), wodurch man die save.php nicht zu Gesicht bekommt.
• In allen Übermittlungsfällen (get oder post, ajax oder regulär) wird sowohl bei erfolgreicher als auch fehlgeschlagener Übertragung eine Meldung zurückgegeben. Im Ajax-Fall in Form eines Strings, im regulären Fall in Form der Weiterleitung mit übergebener get-Variable.

Auf welche Art die Daten auch übertragen wurden, es erfolgt in jedem Fall eine Benachtigung des Benutzers. Sollte der Datentransfer per Ajax geschehen sein, wird über Javascript ein h3-Element mit der entsprechenden Meldung angezeigt. Bei einer gewöhnlicher Übermittlung geschieht dies über PHP und die übergebene get-Variable.

Ich habe alle verwendeten Dateien in ein rar-Archiv gepackt, somit kann jeder interessierte Entwickler das Formular ausprobieren und anpassen.

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.

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.