14.03.2012

Tapestry - Events aus Textfeldern / Default Actions definieren

Für komplexe Formulare ist nicht immer klar, wie diese auf das Drücken der Enter Taste reagieren. Per Default wird der erste Button im Formular ausgelöst. Dieses Verhalten ist aber nicht immer gewünscht, sondern soll nach Möglichkeit durch den Entwickler definiert werden können.

Leider bietet Tapestry von Haus aus keine Möglichkeit einen Default-Eventhandler zu registrieren. Mit dem Konzept der Mixins und der Nutzung der Prototype Bibliotheken ist eine Lösung trotz allem leicht zu realisieren.
Mixins bieieten die Möglichkeit bereits bestehende Komponenten mit zusätzlichem Verhalten auszustatten. Dies kann unter anderem zusätzliche Validierung, Autocompletion oder auch JavaScript Funktionalität sein. Eingeschränkt werden die Mixins nur durch die Tatsache, dass keine Templates genutzt werden. Die Templates müssen sich also in die Render-Phase integrieren.

Am einfachsten wird die Nutzung in dem bereits Eingangs beschriebene Szenario klar. Als Basis dient ein einfaches Tapestry-Projekt, welches durch Maven verwaltet wird. Die grundlegende Klassenstruktur gestaltet sich wie folgt:


Es existiert eine einzelne Seite, mit einem einfachen Eingabeformular für drei unterschiedliche Werte (value1, value2, value3). Zusätzlich beinhaltet das Formular noch drei Eventlinks, die durch das Betätigen der Enter-Taste innerhalb der Eingabefelder ausgelöst werden können.


Keep it simple, keep it clean ;-)

Der spannende Teil des Beispiels ist innerhalb des selbst defnierten Mixins, dort  wird die Erweiterung durch das entsprechende Prototype Snippet definiert und gerendert.


Das Mixin rendert die erstellte Prototype-Erweiterung während der Render-Phase und erweitert die entsprechende Komponente um die definierte Funktion. Die Prototype-Erweitung wird mit Hilfe der @Import Annotation importiert, zusätzlich, für die Simulation des Klicks, wird die Protolicius event.simulate.js inkludiert. Damit steht die Grundlage für die Definition der Prototype-Erweiterung:


In dieser wird definiert, dass auf dem keyup Event der Komponente die Funktion fireEvent ausgeführt wird. Somit kann innerhalb des Templates definiert werden, welches Event bei dem keyup Event der einzelnen Textfelder ausgeführt werden soll.


Die Events werden durch die Index Seite abgearbeitet.


Der Code findet sich, wie immer, im Repository.

Keine Kommentare:

Kommentar veröffentlichen