© DrHitch/Shutterstock.com
Vaadin Schnelleinstieg

2 Baukasten für Apps


Mit Vaadin TouchKit zur eigenen Anwendung

Im ersten Kapitel stellten wir die Entwicklung einer mobilen Applikationen mit Vaadin TouchKit vor. Unsere dort eingeführte Demoapplikation Vornitologist ist universell als HTML5-Applikation einsetzbar und dient der Beobachtung von Vögeln. Sie können die Applikation auf Ihrem mobilen Gerät (z. B. iPhone, iPad und Android-Smartphone) aufrufen um einen Eindruck über die Applikation zu erhalten [1]. Der Schwerpunkt des zweiten Kapitels liegt in der Realisierung von typischen mobilen Anforderungen. Zu diesen zählen eine interaktive Navigation, die ortsabhängige Darstellung von Informationen und die Unterstützung im Offlinemodus. Wenn Sie erst mit diesem Heft einsteigen, empfehlen wir Ihnen begleitend zu diesem Artikel einen Blick in den Quellcode der Demoapplikation Vornitologist. Sie können online den Codebrowser [2] verwenden oder das Projekt in Ihre Entwicklungsumgebung importieren.

Durch hierarchische Daten navigieren

Für die Navigation innerhalb hierarchisch strukturierter Daten bietet das TouchKit einen ähnlichen Weg wie Table Views in iOS. Der Benutzer wählt einen Eintrag in einer Liste aus und wird dadurch in eine tiefere Hierarchiestufe geführt. Über einen Back Button kann der Benutzer wieder in die darüber liegende Stufe zurückkehren. Der Wechsel zwischen den Stufen ist animiert.

Diese Art der Navigation wird im TouchKit durch die Klasse NavigationManager realisiert. Vaadin stellt weiterhin die Klasse NavigationButton bereit, die von der Klasse Button erbt und für die Verwendung mit einem NavigationManager entwickelt wurde. Einem NavigationButton kann eine Zielkomponente zugewiesen werden. Diese Eigenschaft nutzt der NavigationManager, wenn zwischen NavigationViews gewechselt wird. Der NavigationButton wird als Back Button verwendet, der durch den NavigationManager automatisch verwaltet wird. Wird der Back Button vom Benutzer geklickt, wird zu der Zielkomponente zurück navigiert.

Wenn der Benutzer einen solchen NavigationButton betätigt, wird zunächst eine Animation zum Wechsel der Ansicht im Browser gestartet. Erst dann erfolgt die Kommunikation mit dem Server. Auch wenn die neue Ansicht aufwändig zu laden ist oder es Latenzen beim Zugriff auf den Server gibt, erhält der Benutzer den Eindruck einer reaktionsschnellen Oberfläche.

Selbst wenn die Zielkomponente eines NavigationButtons spät erzeugt wird, hat der Benutzer eine sofortige Reaktion, wenn er den Button betätigt. Die Animation für den Wechsel der A...

Neugierig geworden?

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