Schlagwort-Archiv: webflow

Spring: Dojo im Einsatz – Teil I

Bei Dojo handelt es sich um ein professionelles Javascript Framework, welches dem Entwickler zahlreiche UI Widgets zur Verfügung stellt. Bei den Widgets handelt es sich beispielsweise um eine Kalendar-Komponente, einen WYSIWYG-Editor, einen Fortschrittsbalken, verschiedene Diagrammtypen, Menüs und vieles mehr. Dies ist lediglich ein kleiner Auszuug von den UI-Komponenten, die zur Verfügung stehen. Eine vollständige Auflistung aller Komponenten inklusive Beispiel ist auf dieser Seite zu finden. Alle Dojo-Komponenten lassen sich umfangreich an die jeweiligen Bedürfnisse anpassen. Hierfür steht dem Benutzer eine API zur Verfügung, die auf dieser Seite beschrieben wird.

Über das Modul Spring JS bietet das Spring Framework dem Entwickler die Möglichkeit die einzelnen Dojo-Widgets in die eigene Webanwendung einzubinden. Spring JS ist ein Teil von Spring Webflow und abstrahiert die Verwendung des darunter liegenden Javascript-Frameworks. Als Standard kommt bei SWF Dojo zum Einsatz. Jedoch lassen sich auch andere Javascript-Frameworks einbinden, wie beispielsweise jQuery.

Ein Vorteil eines solchen Javascript-Frameworks ist, dass sich der Entwickler nicht mehr um die Erstellung komplexer UI-Komponenten kümmern muss. Dies spart eine Menge Zeit, da es sehr aufwendig ist Komponenten zu entwickeln, die in allen Browsern korrekt funktionieren und dargestellt werden. Er kann sich stattdessen vollständig auf die Implementation der Logik konzentrieren.

Konfiguration

Dojo lässt sich in Spring auf folgende Art und Weise konfigurieren, vorrausgesetzt das ResourceServlet wurde in Spring korrekt konfiguriert.

<script type="text/javascript" src="<c:url value="/resources/dojo/dojo.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resources/spring/Spring.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resources/spring/Spring-Dojo.js"/>"></script>
<link type="text/css" rel="stylesheet" href="<c:url value="/resources/dijit/themes/tundra/tundra.css"/>"/>

Die Zeilen 1-3 laden die entsprechenden Javascript-Dateien, die für die Verwendung des Dojo-Frameworks in Verbindung mit Spring benötigt werden. Zeile 4 gibt an, welches Theme für die Dojo-Widgets benutzt werden soll. In dem Beispiel wird das Theme Tundra geladen. In der aktuellen Version 1.6 stehen vier Themes zur Auswahl:

  • claro
  • tundra
  • soria
  • nihilo

Beispiele für das Aussehen der einzelnen Themes sind hier zu sehen.

Dropdown Widget

Das folgende Beispiel zeigt, wie mit Hilfe von Spring und Dojo eine Select-Box erstellt wird. Die ersten vier Zeilen definieren die Formular-Komponente mit Hilfe von Spring Forms. Beim Abschicken des Requests wird das ausgewählte Element der Select-Box in der Beanvariable mitarbeiterVar gespeichert. Der Formular-Komponente wird eine ID mitarbeiterSelect zugeordnet über welche diese später mit Dojo-Eigenschaften angereichert wird. Die Zeilen zwei bis drei füllen die Select-Box schließlich mit Elementen. In diesem Beispiel handelt es sich um Namen von Mitarbeitern, die in einer Liste von String-Objekten  (mitarbeiterListe) gespeichert sind. Über das JSTL-Tag c:forEach wird die Liste durchlaufen und die Select-Box gefüllt.

In Zeile 7-14 wird die Select-Box schließlich um Dojo-Eigenschaften erweitert, so dass diese später wie ein Dojo-Widget aus den Beispielen aussieht. Die ID, die wir zurvor vergeben haben, kommt hier wieder zum Einsatz. Über elementId wird Dojo mitgeteilt, welches HTML-Element angereichert werden soll. Wichtig ist, dass die vergebenen IDs immer eindeutig sein müssen. Verschiedenen Komponenten die gleichen IDs zu geben, führt in den meisten Fällen zu Problemen mit Dojo. Über widgetType geben wir an, welches Dojo-Widget auf die vorher definierte Select-Box angewendet werden soll. dijit.form.FilteringSelect ist das entsprechende Widget für eine Select-Box, welche beispielsweise um eine Auswahlvervollständigung erweitert wird. Über required: true wird festgelegt, dass beim Abschicken eines Formulars die Auswahl der Select-Box nicht leer sein darf. Das Abschicken würde in diesem Fall fehlschlagen. Die nächste Zeile gibt an, wie Breit das UI-Widget sein soll. Über das style-Attribut kann das Aussehen der Komponente über CSS-Eigenschaften angepasst werden.

<form:select path="mitarbeiterVar" id="mitarbeiterSelect">
<c:forEach items="${mitarbeiterListe}" var="mitarbeiter">
	<form:option value="${mitarbeiter}">${mitarbeiter}</form:option>
</c:forEach>
</form:select>
<script type="text/javascript">
Spring.addDecoration(new Spring.ElementDecoration({
	elementId: 'mitarbeiterSelect',
	widgetType: 'dijit.form.FilteringSelect',
	widgetAttrs : {
		required: true,
		style: "width: 12em;"
	}
}));
</script>

Kalendar Widget

Eine Kalendar-Komponente mit Dojo zu erstellen ist recht unkompliziert. Alles was wir hierfür benötigen ist ein Input-Formular. Dieses wird in Zeile eins über Spring-Forms definiert. Wie gewohnt vergeben wir auch für diese Formular-Komponente eine eindeutige ID.  Ab Zeile vier reichern wir die Input-Komponente wieder um Dojo-Eigenschaften an. In diesem Fall nutzen wir jedoch ein anderes Dojo-Widget, nämlich dijit.form.DateTextBox. Über das Attribut datePattern wird das Format des Datums angegeben. In diesem Fall entscheiden wir uns für das Format yyyy-MM-dd, welches z.B. dem Datum 2011-12-18 entsprechen würde. Das Datumsformat lässt sich an die jeweiligen Bedürfnisse und Zeitzonen anpassen. Auch diese UI-Komponente akzeptiert keine leeren Eingaben (required: true). Schließlich geben wir für die Komponente noch eine Breite an. Das ist eigentlich auch schon alles, was an Konfiguration notwendig ist. Beim Abschicken des Formulars wird das ausgewählte Datum in der Beanvariable startDate gespeichert und bei Bedarf von Spring in ein Date-Objekt überführt.

<form:input path="startDate" id="startDate"/>
<script type="text/javascript">
Spring.addDecoration(new Spring.ElementDecoration({
	elementId : 'startDate',
	widgetType : 'dijit.form.DateTextBox',
	widgetAttrs : {
		required : true,
		datePattern : 'yyyy-MM-dd',
		style: "width: 12em;"
	}
}));
</script>

Button Widget

Die letzte UI-Komponente von Dojo, die in diesem Artikel vorgestellt werden soll ist dijit.form.Button. Ein Button wird in Formularen in den meisten Fällen dazu genutzt, um die angegebenen Formulardaten abzuschicken, so dass diese von einem Skript im Hintergrund weiterverarbeitet werden können. In diesem Beispiel wird ein einfacher Submit-Button erstellt (ohne Spring Forms). Wie gewohnt wird auch hier wieder eine ID vergeben. Über das Attribut label können wir dem Button einen Text verpassen. In Zeile 12 wird es wieder ein wenig interessanter. Dort definieren wir einen Validator für das Abschicken des Formulars. Dieser Validator wird über die elementId an den vorher definierten Button gebunden. Er wird ausgelöst, sobald ein Benutzer auf den Button klickt. Dies wird über event: ‘onclick’ festgelegt. Klickt ein Benutzer auf den Button, so wird eine Clientseitige Validation des Formulars durchgeführt. Clientseitig meint in diesem Fall, dass die Überprüfung im Browser statt findet. Es wird daraufhin überprüft, ob alle notwendigen Formular-Komponenten ausgefüllt wurden. Ob eine Komponente leer sein darf oder nicht, wurde in den vorangegangenen Beispielen über das Attribut required: true definiert. Zusätzlich dazu wird überprüft, ob die jeweiligen Eingaben valide sind (z.B. ob das Datumsformat des Kalendars korrekt eingegeben wurde).

<input type="submit" value="Abschicken" id="submitButton" />
<script type="text/javascript">
Spring.addDecoration(new Spring.ElementDecoration({
        elementId : "submitButton",
        widgetType : "dijit.form.Button",
        widgetAttrs : {
                label:"Abschicken"
        }
}));
</script>
<script type="text/javascript">
Spring.addDecoration(new Spring.ValidateAllDecoration({
	event : 'onclick',
	elementId : 'submitButton'
}));
</script>