Einfach zu implementierendes AJAX-Framework: So funktioniert Spry

Die Spry Effects sind schon seit längerem Bestandteil des Frameworks. Doch die Effects-Library wurde für Version 1.5 überarbeitet. Vor allem änderte man die Namen der Methoden. Dadurch sind sie konsistenter mit anderen Programmiersprachen geworden.

Zweck der Spry Effects ist es, grafische Elemente einer HTML-Seite um optische Effekte zu bereichern. Diese Effekte können animierte Übergänge sein oder das Markieren von Inhalten. In der Regel sollte man Animation nur äußerst sparsam einsetzen. Doch manchmal ist sie auch recht nützlich, etwa um den Status einer Anwendung anzuzeigen. Ein Übergang von einem Status zum anderen kann diskret animiert werden, um dem Benutzer besseres Feedback zu geben.

Hier eine Liste der Spry Effects:

• Blind
• Fade
• Glow
• Highlight
• Shake
• Slide
• Squish

Beobachter können verwendet werden, um mehrere Effekte miteinander zu kombinieren. So wird zum Beispiel ein Panel im selben Maße verkleinert, wenn ein anderes seine Breite vergrößert. Damit wirkt der Wechsel zwischen den Panels, als ob diese sich verschieben.

Per Clustering können Effekte hintereinander ausgeführt werden. Dadurch vergrößert ein Panel zuerst seine Breite und danach seine Höhe. Mit einem Beobachter würden dieselben Abläufe gleichzeitig erfolgen.

Das Folgende ist ein Ausschnitt aus einer HTML-Seite, bei der der Blind Effect eingesetzt wird. Bei diesem Beispiel löst das Anklicken eines Hyperlinks den Effekt aus. Der Blind Effect sorgt dafür, dass das <div>-Element, das den Text enthält, allmählich seine Höhe verändert. Schließlich ist es ganz verschwunden. Der Hyperlink funktioniert dabei in beide Richtungen. Die Spry-Effects-Library ist Bestandteil des standardmäßig im Spry-Download enthaltenen includes-Verzeichnisses.

Spry und Dreamweaver CS3

Eine erweiterte Version von Spry 1.4 ist in Dreamweaver CS3 integriert. Tag-Editoren erleichtern dem Benutzer die Arbeit. Spry Data ist zum Beispiel mithilfe der Dialoge in Dreamweaver CS3 einfacher zu implementieren. Denn man kann damit etwa XML-Schemata importieren oder eine Voransicht der Daten erzeugen. Dreamweaver CS3 kümmert sich auch darum, dass die erforderlichen Javascript- und CSS-Dateien in die jeweilige Website integriert werden.

Die Spry-Symbolleiste enthält drei Arten von Objekten, die oben bereits besprochen wurden: die Anzeige von XML-Daten, Elemente zur Formularvalidierung sowie Menüs und Panel.

Dreamweaver CS3 kann die von der Spry-XmlDataSet-Library verwendeten XML-Daten auswerten und die einzelnen Eigenschaften als Zeile im Bindings-Panel anzeigen. Diese Eigenschaften können dann per Drag-and-Drop vom Bindings-Panel in die Seite eingefügt werden. Falls sie sich innerhalb einer Spry Region oder eines Spry Repeat befinden, werden sie dynamisch vom Browser angezeigt.

Fazit

Das Spry-Framework ist ein einfach zu implementierendes Ajax-Framework, besonders für Designer, für die es auch vorrangig gedacht ist. Verfechter von Webstandards haben zwar kritisiert, dass die Implementierung von Spry proprietäre HTML-Attribute verwendet. Doch für den Normalbenutzer dürfte das kein Thema sein, da die Spry-Komponenten wie versprochen funktionieren.

Zwar ist Spry auch in Dreamweaver CS3 integriert. Man kann es aber auch mit einem schlichten Texteditor verwenden. Adobe liefert eine Vielzahl von Beispielen im Spry-Download mit. Das aktuelle Release bringt jetzt auch eine API mit. Damit haben Entwickler die Möglichkeit, eigene Widgets zu erstellen. Diese können dann innerhalb des Spry-Frameworks verwendet werden.