Spring: Dojo im Einsatz – Teil II

Dieser Artikel stellt weitere Dojo-Widgets vor und zeigt euch, wie diese mit Hilfe von Spring JS verwendet werden können. Die hier vorgestellten Widets sind: dijit.form.Checkbox, dijit.form.NumberSpinner, dojox.form.BuyButton.

Checkbox

Bei dijit.form.Checkbox handelt es sich um eine einfache Checkbox, wie man sie beispielsweise bei der Akzeptanz von Nutzungsbedingungen kennt. Durch Dojo wird die Checkbox jedoch um Ajax-, Styling-und Validierungsfunktionen erweitert. Die erste Zeile des Beispiels definiert eine Spring Forms Checkbox, die auf das Attribut registerNewsletter in der dahinter liegenden Backingbean gemappt wird. Wir vergeben als Element-Id den gleichen Namen wie für das Attribut. Über die Element-Id der Checkbox teilen wir Dojo mit, welches Formularelement angereichert werden soll. Über den widgetType geben wir an, welche Art von Dojo-Widget verwendet werden soll. Über widgetAttr können wir das Widget weiter anpassen, z.B. durch CSS-Styles. In diesem Fall legen wir über promptMessage den Text fest, welcher angezeigt wird, wenn die Checkbox verwendet wird. Über required : true sagen wir Dojo, dass beim Abschicken des Formulars die Checkbox nicht leer sein darf.

<form:checkbox path="registerNewsletter" id="registerNewsletter" />
<script type="text/javascript">
	Spring.addDecoration(new Spring.ElementDecoration({
		elementId : "registerNewsletter",
		widgetType : "dijit.form.CheckBox",
		widgetAttrs : {
			promptMessage : "Test",
			required : true
		}
	}));
</script>

Numberspinner

Das nächste Beispiel behandelt ein Eingabefeld, in welches der Benutzer nur Zahlen eingeben kann und diese durch zwei Button erhöhen und verringern kann. Dieses Widget wird als NumberSpinner bezeichnet. Zunächst definieren mit Spring Forms ein Eingabefeld und binden es an das Attribut age der dahinter liegenden Backingbean. Die Element-Id des Eingabefeldes wird wieder mit dem gleichen Namen belegt. In den darauf folgenden Zeilen wird das einfache Eingabefeld mit Dojo angereichert und in ein NumberSpinner-Widget umgewandelt.

<form:input path="age" id="age" />
<script type="text/javascript">
	Spring.addDecoration(new Spring.ElementDecoration({
		elementId : "age",
		widgetType : "dijit.form.NumberSpinner",
		widgetAttrs : {
			promptMessage : "test",
			required : true
		}
	}));
</script>

Busybutton

Das letzte Beispiel des Artikels zeigt, wie mit Hilfe von Dojo ein BusyButton erstellt werden kann. Ein BusyButton kann beispielsweise für einen Button verwendet werden, der für das Abschicken eines Formulars zuständig ist. Die Besonderheit des Buttons ist, dass dieser nach Abschicken des Formulars deaktiviert wird und der Benutzer die Daten nicht ausversehen mehrfach abschicken kann. Zunächst definieren wir einen einfachen HTML-Button und vergeben für diesen die Element-Id busyButton. Über diese Id reichern wir mit Dojo und dem Widget dojox.form.BusyButton den Standard-Button an. Wir geben über das Attribut label den Text an, den der Button im nicht gedrückten Zustand anzeigt. Das Attribut busylabel enthält den Text, den der Benutzer sieht, wenn er den Button gedrückt hat. Dieser wird so lange angezeigt, bis die jeweilige Aktion abgearbeitet ist. Damit das Formular nach drücken des Buttons abgeschickt wird, überschreiben wir die onClick-Funktion.

<input type="submit" value="Übernehmen" id="busyButton" />
<script type="text/javascript">
Spring.addDecoration(new Spring.ElementDecoration({
    elementId : "busyButton",
    widgetType : "dojox.form.BusyButton",       
    widgetAttrs : {
       label:"Übernehmen",
       busylabel:"Bitte warten...",
       onClick : function() {
            this.inherited("onClick", arguments);             
            document.busyButton.submit();
            } 
        }
    }));
</script>

Auch interessant: Spring: Dojo im Einsatz – Teil I