In dem letzten Artikel dieser Serie habe ich dojo.query() vorgestellt. In diesem Artikel werden wir dojo.query() ebenfalls einsetzen. Dieses Mal im Kombination mit dem dojo.fx-Package, welches Funktionalitäten zur Aninmation innerhalb von Webseiten zur Verfügung stellt. Gerade in dynamischen Webanwendungen, in denen Elemente nachgeladen oder einblendet werden können, helfen Animationen dem Anwender die Veränderung besser wahrzunehmen. Statt also ein neues Element einfach nur sichtbar zu machen, wird das Element sanft eingeblendet. Diese Bewegung ist für den Anwender besser nachzuvollziehen, als wenn aus dem Nichts plötzlich ein Element vorhanden ist, welches vorher nicht dar war.

In unserer Beispielanwendung werden wir zunächst erst einmal etwas verschwinden lassen und zwar die Sessionbeschreibungen. Das passiert in Vorbereitung auf den nachfolgenden Artikel, in dem wir dann zeigen werden, wie die Sessionbeschreibungen auf Knopfdruck sichtbar werden. Schauen wir uns den benötigten Code einmal an:
//Loads fx (animation) package
dojo.require("dojo.fx");

dojo.addOnLoad(function(){
// every odd div in the page with the class "session" assigned
dojo.query(".session:nth-child(odd)").addClass("oddSession");
// wipeOut all descriptions
var descriptionsList = dojo.query(".sessionDescription");
descriptionsList.forEach(function(currentNode, index, array){
dojo.fx.wipeOut({node:currentNode}).play();
});
});
Wie eingangs erwähnt benötigen wir dazu das dojo.fx-Package. Mit dem Befehl dojo.require("dojo.fx") wird das Package nachgeladen. Dabei werden Abhängigkeiten automatisch ermittelt und sofern notwendig weitere Packages ebenfalls nachgeladen. An dieser Stelle eine kleine Anmerkung zum Nachladen von Packages. Obwohl es eine gute Idee ist, nur die Teile von dojo zu laden, die auch wirklich benötigt werden, hat dieser Ansatz auch einen Nachteil. Es werden einen Menge kleiner Dateien geladen. Aus Performancesicht wäre es allerdings besser, nur eine Datei zu laden. Tim Tripcony hat dazu einen Blog-Eintrag geschrieben "I still have one concern about Dojo". Das Problem wurde von den dojo Entwicklern auch erkannt. Das dojo Build System erzeugt aus einer Konfigurationsdatei heraus eine individuell Version von dojo in einer Datei, die nur die wirklich notwendigen Elemente enthält. Wenn Performance also ein Thema ist, wäre dieses ein Ansatz.

Wie gehabt verwenden wir die dojo.addOnLoad-Funktion, um Code nach dem Laden der Webseite auszuführen. Zunächst benötigen wir alle Sessionbeschreibungen. var descriptionsList = dojo.query(".sessionDescription");Mittels dojo.query(".sessionDescription") werden alle DOM-Knoten, die diese CSS-Klasse verwenden, in eine dojo.NodeList geschrieben und der Variablen descriptionsList zugewiesen.

Das dojo.NodeList-Objekt hat eine Methode forEach, die als Parameter eine Funktion erwartet, die dann auf jedes Element in der Liste angewendet wird.descriptionsList.forEach(function(currentNode, index, array){
dojo.fx.wipeOut({node:currentNode}).play();
});Mit dojo.fx.wipeOut wird ein neues Animationsobjekt vom Typ "WipeOut" erstellt. "WipeOut" bezeichnet das langsame Zusammenschieben bis zum völligen Verschwinden des Elementes. Der Konstruktor erwartet ein Konfigurationsobjekt mit den Details für die Animation. Dieses Objekt wird mit {node:currentNode} direkt erzeugt. Wobei "node" der Eigenschaftsname und currentNode der aktuelle DOM-Knoten aus der forEach-Funktion ist. In diesem Fall handelt es sich um die einfachste Form eines Konfigurationsobjektes. Man kann unter anderem auch die Dauer der Animation oder auch die Beschleunigungsfunktion bestimmen. Die Methode play() führt die Animation direkt aus.

Das Ergebnis kann hier angeschaut werden. Es sei noch einmal daran erinnert, dass die Beispieldatenbank heruntergeladen werden kann. Für jeden einzelnen Schritt, den ich hier vorstelle, gibt es eine eigene Maske und zugehörige JavaScript Bibliothek. Für diesen Artikel ist es die Maske "webSpeedAgendaing-Step 3|SpeedAgendaing-3" und "SpeedAgendaing-Step3.js".

dojo-Sample.zip
(433 KB)
Im nächsten Artikel wird unsere Beispielanwendung so erweitert, dass die Sessionbeschreibung jeweils beim Klick auf den Titel sichtbar gemacht werden.