© DrHitch/Shutterstock.com
GWT

2 Spannende Formulare mit GWT


Formulare sind ein wesentlicher Bestandteil vieler Webapplikationen und ein essenzieller Punkt der Kundenbindung. GWT bietet für deren Implementierung einfache Komponenten an – schneller, schöner und wartbarer geht’s mit vorgefertigten FormElements.

In vielen Businessapplikationen sind Formulare ein integraler Bestandteil und stellen mit Design und Validierung einen großen Teil der Entwicklung dar. Die Benutzer der Applikation sind bei ihrer Arbeit meist täglich mit den Eingabemasken konfrontiert, und diese werden daher stärker wahrgenommen als die Funktionalität selbst, die zum Großteil im Hintergrund abläuft. Für Unternehmen ist es daher besonders wichtig, einen wiedererkennbaren, konsistenten und optisch ansprechenden Stil in diesen Formularen zu bieten. Zusätzlich ist es für eine gute Bedienbarkeit unerlässlich, dass der Benutzer bei Falscheingaben möglichst bequem und verständlich Rückmeldung erhält. Werden diese grundlegenden Bedingungen nicht erfüllt, kann man im schlimmsten Fall Kunden verlieren – sind Formulare übermäßig mühsam auszufüllen, ist damit zu rechnen, dass der Kunde bereits vor Abschluss abbricht.

Formulare bestehen aus immer wiederkehrenden Grundelementen, nämlich in den meisten Fällen aus einer Beschriftung verbunden mit einem Eingabefeld. Aus Unternehmens- und Entwicklersicht ist es von Vorteil, wenn die benötigten Formulare zeitsparend und einfach implementiert werden können, indem diese Grundelemente zusammengefasst werden.

Diese Parameter – einheitliches Design, einheitliche und benutzerfreundliche Rückmeldungen sowie möglichst zeitsparendes Implementieren von Standardformularen – waren in der Firma Cenarion Information Systems die Motivation zur Entwicklung von User-Interface-Komponenten, deren Komplexität über die von GWT bereitgestellten Grundkomponenten wie TextBox, IntegerBox, RadioButton etc. hinausgeht und durch deren Verwendung (Entwickler-)Zeit und Fehlerpotenzial eingespart werden kann.

Dabei lag das Hauptaugenmerk nicht darauf, Komponenten mit neuer Funktionalität anzubieten, wie das viele Widget Libraries tun, sondern vorhandene Grundelemente zusammenzufassen und strukturell zu verbessern.

2.1 Überblick und Umfang

Folgende Voraussetzungen waren für die zu erstellenden Komponenten gegeben:

Alle Komponenten sollen aus einem Label und einem Eingabefeld unterschiedlichen Typs bestehen.

  • Komponenten sollen mit dem UI-Binder eingebunden werden können und für den UI-Entwickler möglichst einfach, schnell und ohne Detailkenntnisse über Eigenheiten von GWT verwendbar sein.
  • Komponenten sollen, wo sinnvoll, die Verwendung von generischen Datentypen unterstützen und dem Entwickler Typsicherheit bieten. So unterstützt GWT für seine ListBox beispielsweise nur Strings. Es ist für den Entwickler aber wesentlich bequemer, auch im UI direkt mit Proxies, Enums u. a. zu arbeiten. Man vermeidet dadurch auch die Verwendung von Konstanten und andere potenzielle Fehlerquellen.
  • Komponenten sollen einen einheitlichen Style aufweisen. Dennoch muss es möglich sein, einzelne Formulare stilistisch abweichend zu gestalten.
  • Komponenten sollen eine (internationalisierte) einheitliche Validierung bieten. Eine Anpassung muss aber möglich sein, z. B. wenn für ein Einzelfeld eine spezifische Validierung vonnöten ist (wie E-Mail, Postleitzahl o. Ä.).
  • Komponenten sollen eine länderspezifische Darstellung von Zahlen und Daten unterstützen (z. B. für den deutschen Sprachraum passende Darstellung von Währungsbeträgen) sowie damit verbundene Implementierungseigenheiten von GWT im täglichen Gebrauch verstecken.
  • Komponenten sollen das Editorframework unterstützen.

2.2 Die Komponenten aus Benutzersicht

Eine Darstellung von mehreren Komponenten ist in Abbildung 2.1 gezeigt. Felder, deren Eingaben nicht der eingestellten Validierung entsprechen, sind rot markiert und ein informativer Fehlertext wird unter der Komponente angezeigt. Das Element, in dem der Fehlertext angezeigt wird, wird „Feedbackfeld“ genannt.

Komponenten können sich dabei auch ein gemeinsames Feedbackfeld teilen, wenn etwa alle Eingabefelder am Ende eines Formulars gesammelt dargestellt werden sollen. In diesem Fall wird dem Fehlertext automatisch der Name des betroffenen Formularfelds vorangestellt, um ihn gut zuordnen zu können.

Abbildung_2.1.png

Abbildung 2.1: Komponenten im Einsatz

2.3 Implementierung

Aus den vorher genannten Voraussetzungen ergab sich für die Implementierung zunächst der in Abbildung 2.2 gezeigte Aufbau für die Komponent...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang