© Excellent backgrounds/Shutterstock.com
Vaadin-Widgets mit JavaScript erweitern

Vaadin und JavaScript


Mit seinem rein Java-basierten, serverseitigen Ansatz für die Webentwicklung gewann das Vaadin-Framework in den letzten Jahren immer mehr an Zuspruch. Seit der siebten Version des Frameworks wurde die Erweiterbarkeit wesentlich verbessert und die Entwicklung von eigenen UI-Komponenten vereinfacht. Dies erleichtert die Integration von JavaScript-Bibliotheken in den eigenen Widgets und bereichert die Möglichkeiten der Webentwicklung mit Vaadin.

Der größte Teil der Entwicklung mit Vaadin geschieht auf der Serverseite, bei der die Entwickler Webapplikationen mit Vaadins eventbasiertem Ansatz in einem Java-Swing-ähnlichen Stil entwerfen und steuern können [1]. Auf der Clientseite baut Vaadin auf dem Google Web Toolkit (GWT) auf und abstrahiert damit von clientseitigen Technologien und Browserinkompatibilitätsproblemen. Schließlich fügt Vaadin, transparent für den Entwickler, eine Kommunikationsebene zwischen der Server- und Clientseite hinzu. Dementsprechend erfordert die Implementierung eigene Vaadin-UI-Komponenten: erstens die Erstellung des clientseitigen GWT-basierten Teils, zweitens die serverseitige Steuerkomponente und drittens die Definition und Implementierung der Kommunikationsschnittstellen zwischen den beiden Seiten.

Um diesen Prozess zu veranschaulichen, wird in diesem Artikel das herkömmliche Vaadin-Textfeld mit dem jQuery-Plug-in jquery.inputmask erweitert, mit dem Ziel, die Funktionalitäten des Plug-ins serverseitig steuerbar zu machen, sowie vom Plug-in gefeuerte Events an den Server zurückzuübertragen.

jquery.inputmask-Plug-in

jquery.inputmask [2] ist ein jQuery-Plug-in für die Erstellung von Eingabemasken, durch das Entwickler die möglichen Eingabezeichen eines Felds beliebig einschränken können. Zusätzlich können mit diesem Plug-in Trennzeichen und Platzhalter festgelegt werden. Das Plug-in bietet per Default nur drei Maskendefinitionen:

  • 9: numerisch

  • a: alphabetisch

  • *: alphanumerisch

Allerdings können diese Definitionen durch mehrere bereitgestellte Extensions erweitert werden, beispielsweise für die Definition eines Datums oder einer Telefonnummer. Außerdem können eigene Maskendefinitionen leicht konfiguriert werden.

Im folgenden Beispiel wird die Eingabemöglichkeit im Feld test auf drei Ziffern, ein Strich als Trennzeichen, gefolgt von drei Buchstaben, beschränkt. Die eckigen Klammern geben lediglich an, dass ein Teil der Maske optional ist:

$('#test').inputmask('999[-aaa]');

Versucht ein Benutzer einen Buchstaben bei den ersten drei...

Exklusives Abo-Special

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