This article in English

Mit Smartphone-Browsern (und ihren aktuellen Pendants auf dem Desktop) kommt “neuen” Input-Typen eine wichtige Bedeutung zu: über (z.B.)

<input type=“time“ …

bieten iPhone, Android & Co. eine optimierte Möglichkeit zur Auswahl einer Zeit / Zeitdauer an:

Nutzer erwarten zu Recht eine schnell und effizient zu bedienende Anwendung. Deshalb macht es auch Sinn, die Möglichkeiten von HTML5 in vaadin-Anwendungen zu nutzen. Bei der Entwicklung von mobilen Anwendungen zeigt sich schnell, dass die nativen Inputs nahezu unschlagbar sind. Sie sind eine Bereicherung auch und vor allem für das vaadin TouchKit.

Akquinet stellt dafür (basierend auf der täglichen Entwicklungs-Erfahrung und unter Apache 2.0 License) ein Addon für vaadin bereit, das folgende HTML5-Inputs abdeckt:

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

Neben dem oben gezeigten Time-Field lässt sich so z.B. auch eine Bereichs-Auswahl realisieren. Diese wird von Chrome wie folgt dargestellt:

Folgender Code (im server-seitigen Teil von vaadin) erstellt dieses Control:

    RangeField rangeField = new RangeField();

    rangeField.setMin(2);

    rangeField.setMax(10);

    rangeField.setCaption(“Range between 2 and 10”);

    layout.addComponent(rangeField);

Vaadin verfügt über eine fantastische Community – und wir hoffen, einen kleinen aber effektiven Beitrag mit diesem HTML5 für vaadin-Addon zu leisten.

Fühlen Sie sich frei, das Addon für sich zu nutzen – sie finden es auf https://vaadin.com/directory#addon/html5-widgets-for-vaadin-core oder https://github.com/akquinet/vaadin-html5-widgets

Wir freuen uns über Feedback und Anregungen!