Dojo Workshop #3 - UI Widgets, Validierungen

Steuerelemente werden durch Dijit um zahlreiche Funktionalitäten erweitert. Widgets können über eine einheitliche API in JavaScript angesprochen und erstellt werden. Dijit bietet auch die Möglichkeit eigene Themes zu verwenden.

Widgets können entweder deklarativ direkt im Markup definiert werden oder aber mit Hilfe von JavaScript erstellt werden. Wenn Widgets im Markup deklariert werden, darf ein Aufruf an den Parser nicht fehlen. Dieser sucht nach Elementen mit bekannten Dojo-Tags, z. B. data-dojo-type, und ruft die entsprechenden Konstruktorfunktionen für die betreffenden Elemente auf. Es ist hierbei jedoch überlebenswichtig dass der in data-dojo-type angegebene Typ in der korrekten Groß- und Kleinschreibung angegeben ist. Andernfalls findet sich keine entsprechende Konstruktorfunktion und das Widget wird nicht erstellt. Im Fehlerfall erscheint jedoch eine Meldung in der Konsolenausgabe des Browsers.

Zum Einstieg wurde eine Login-Seite, bestehend aus den Eingaben Anmeldename (TextBox), Passwort (TextBox) und Land (Select), erstellt. Das Land ist mehr Just For Fun auf der Seite da es im Gegensatz zum Anmeldename und Passwort keine Texteingabe, sondern eine Auswahl erfordert. Listen, bzw. Select-Widgets, können so zum Beispiel keine optgroup's und benötigen zwingend ein value Attribut. Werden optgroup's verwendet, stellt Dijit das Widget nicht korrekt dar (keine Listenelemente und Null-Breite). Wird kein value Attribut verwendet, funktioniert die Angabe von selected z. B. nicht und es ist keine Änderung der Auswahl möglich.

Die Eingabefelder für Anmeldename und Passwort waren weniger kritisch. Damit die Eingabefelder jedoch mit den Möglichkeiten von Dojox validiert werden können, bedarf es keiner normalen dijit/form/TextBox, sondern einer dijit/form/ValidationTextBox. Darüber hinaus sind die Dojox Validierungen ebenfalls modularisiert. Eine E-Mail Validierung wird erst möglich nachdem neben dem dojox/validate Modul auch das dojox/validate/web Module als Abhängigkeit definiert wird.

Das Konfigurieren der Validierung gestaltet sich an dieser Stelle aufgrund der fehlenden Dokumentation etwas umständlich. Entweder ist Reverse Engineering aus den Dojox-Sourcen erforderlich, oder aber Beispiele verraten einen bereits die notwendigen Details zur Steuerung der Schnittstelle. Die Konfiguration geschieht entweder deklarativ oder per Skript. Bei der deklarativen Schreibweise wird die Konfiguration direkt im data-dojo-props Attribut im HTML vorgenommen. Einige wenige Validierungsweisen (die bereits Teil von HTML Standards oder Drafts sind) können über die entsprechenden Mechanismen gelöst werden. Diese werden korrekt durch Dojo interpretiert. Darunter fällt z. B. das required Attribut für Pflichtfelder.

Das data-dojo-props Attribut validator: dojox.validate.isEmailAddress, invalidMessage:'Der Anmeldename muss eine gültige E-Mail Adresse sein.' an einer ValidiationTextBox sagt z. B. aus, dass zur Validierung die Methode isEmailAddress am dojox.validate Objekt aufgerufen werden soll. Ist die Validierung fehlerhaft wird die entsprechende Meldung neben der Eingabe dargestellt. Es sind ebenso eigene Validierungsmethoden möglich.

Für diese Seite werden beim Laden bereits 87 Requests an den Webserver abgesetzt. Der Grund für die hohe Anzahl der Requests ist das Nachladen der benötigten Abhängigkeiten. Da diese hohe Anzahl der Requests in Produktivumgebungen, insbesondere bei hoher Latenz, zu einer hohen Ladezeit führt, sollten mit Dojo erstellte Projekte unbedingt das Packaging bzw. Building berücksichtigen. Dies werden wir in einem späteren Workshop ausprobieren und die Anwendung noch einmal auf ihre Geschwindigkeit untersuchen.

Folgende Teilnehmer waren anwesend: Marco Jacob, Heiko Dehmel und Thorsten Kutz.