Ein weiterer Bestandteil von Spry sind die sogenannten Widgets. Das sind grafische Elemente, die aus HTML, CSS und Javascript bestehen und einer Seite hinzugefügt werden können. Sie sind Bestandteil des Spry-Frameworks und verbessern die Benutzerinteraktionen auf einer Seite, was diese funktionsfähiger macht. Die Mehrzahl der Widgets sind erweiterte Versionen von HTML-Formular-Elementen. Außerdem gibt es zusätzliche grafische Elemente Sie bieten Menüs sowie alternative Möglichkeiten zur Anzeige von Inhalten.
Jedes Spry-Widget besteht aus HTML-Code für das Layout, Javascript für die Funktionalität sowie CSS für das Design. Adobe behauptet, dass sorgfältig darauf geachtet wurde, diese Widgets auch barrierefrei zu machen. Hierzu zählen der Zugriff per Tastatur sowie die Verfügbarkeit der Widget-Inhalte auch dann, wenn Javascript deaktiviert ist oder nicht unterstützt wird. Eine Zusammenstellung von speziellen Entwicklungsrichtlinien ist bei Adobe erhältlich. Diese sollen gewährleisten, dass Entwickler, die ihre Widgets mit der Spry-1.5-API erstellen, auch auf die Barrierefreiheit achten.
Die Spry-Widgets, die bestehende HTML-Formular-Elemente erweitern, sind:
- Checkbox Widget
- Radio Button Widget
- Select Widget
- Text Area Widget
- Text Field Widget
Diese Widgets erweitern die normalen Formularfunktionen, indem sie eine Validierung der Eingaben bieten. Außerdem liefern sie dem Benutzer ein Feedback, etwa in Form von Eingabemarken oder Fehlermeldungen. Das Feedback erfolgt, indem entweder mithilfe von CSS die Hintergrundfarbe eines Formularelements verändert wird oder eine Fehlermeldung angezeigt wird. Die meisten dieser Widgets bieten eine Reihe von Ereignissen. Damit kann die Validierung zu unterschiedlichen Zeitpunkten während der Benutzerinteraktion erfolgen. Beispiele wären etwa die Eingabe eines Wertes, die Auswahl eines anderen Formularelements oder das Abschicken des Formulars.
Unten folgt ein einfaches Beispiel dafür, wie das Validation-Textfield-Widget zur Formularvalidierung eingesetzt wird. Das Feld muss ausgefüllt werden, zulässig sind nur ganzzahlige Werte. Für jede Validierung ist eine eigene Fehlermeldung vorgesehen. Wie schon oben sieht man nur einen Ausschnitt aus der Seite. Es ist zu beachten, dass innerhalb der <head>-Tags sowohl die Javascript- als auch die CSS-Dateien für dieses Widget importiert werden. Diese sind zwar im Spry-Download enthalten. Sie finden sich jedoch nicht im selben Ordner wie die Daten-Bibliotheken, sondern im Widgets-Ordner.
Innerhalb der <form>-Tags im obigen Code erkennt man, dass ein <span>-Element verwendet wird, um das zu validierende Textfeld zu identifizieren. Darin verschachtelt finden sich weitere <span>-Tags für jede Validierungsnachricht. Diese werden wiederum mit dem class-Attribut unterschieden. Unterhalb des Formulars gibt es einen Javascript-Block Er liefert die entsprechende Logik für den Browser, die Validierung auszulösen.
Die Methode Spry.Widget.ValidationTextField verlangt zunächst als Parameter das zu validierende Textfeld. Zwei weitere, optionale Parameter ermöglichen es, den gewünschten Datentyp festzulegen. Dazu benötigt man noch ein bestimmtes Ereignis, das die Validierung auslöst. In diesem Fall erfolgt die Aktion, wenn das Textfeld den Fokus verliert.
Das Auto Suggest-Widget ist neu in Spry 1.5. Es handelt sich hierbei um ein Textfeld-Formularelement, das für Suchfunktionen gedacht ist Dabei werden noch während der Benutzereingabe mögliche Treffer für die eingegebenen Kriterien angezeigt. Dieses Widget unterscheidet sich von den anderen, weil es für die angezeigten Vorschläge auf einen Datensatz zurückgreift. Die Art und Weise, wie Treffer angezeigt werden, bleibt ganz der Phantasie des Entwicklers überlassen. In den bei Spry enthaltenen Beispieldateien geschieht dies über Kombinationen aus Text und Bildern.
Es gibt noch einige weitere Widgets, die nicht auf Formularelementen basieren:
- Accordion
- Collapsible Panel
- Menu Bar
- Sliding Panels
- Tabbed Panel
Das Menu-Bar-Widget kann man einfach an der Seite unterbringen. Es bietet die bekannte Navigation mit mehreren Knoten. Die übrigen Widgets stellen unterschiedliche Möglichkeiten zur Verfügung, zusätzliche Daten auf dem Bildschirm anzuzeigen, ohne dass dazu die Seite neu geladen werden muss. Sie funktionieren ähnlich wie bei anderen AJAX-Frameworks. Sie verhalten sich wie Steuerelemente von Desktopanwendungen – und nicht wie normale HTML-Bedienelemente.
Der Download von der Adobe-Labs-Website enthält gute Beispiele für die Funktionsweise dieser Widgets.
Loading ...
Neueste Kommentare
Noch keine Kommentare zu Einfach zu implementierendes AJAX-Framework: So funktioniert Spry
Kommentar hinzufügenVielen Dank für Ihren Kommentar.
Ihr Kommentar wurde gespeichert und wartet auf Moderation.