2. Hello Vaadin!

Lassen Sie uns nun auf unsere Reise durch die Welt von Vaadin begeben. Wie es in der Literatur für Computerthemen so üblich ist, wollen auch wir hier mit einem einfachen Hello World Beispiel beginnen. Mit dessen Hilfe werden wir die grundlegendsten Konzepte des Frameworks kennenlernen.

In diesem Kapitel werden wir eine erste, sehr einfache Anwendung schreiben, die schon die wesentlichen Grundbestandteile einer jeden Vaadin-Applikation enthalten wird. Wir begnügen uns hierbei nicht damit, einfach nur ein simples Label mit dem Text “Hello World” auf den Bildschirm zu bringen. Wir wollen uns gleich anständig mit Namen begrüßen lassen und sehen deshalb die Eingabe unseres Namens in ein Textfeld vor. Diese Eingabe müssen wir über eine Schaltfläche bestätigen. Anschließend werden wir auf eine Seite umgeleitet, auf der wir mit Namen begrüßt werden.

Damit lernen wir die drei wichtigsten Grundelemente der Programmierung von Vaadin-Anwendungen kennen: die validierte Eingabe von Daten, die Ereignisbehandlung und die Seitennavigation innerhalb einer Anwendung.

Anschließend verschaffen wir uns einen Überblick über die wichtigsten Eigenschaften von Rich Internet Applications, zu denen ja mit Vaadin geschriebene Anwendungen gehören, wie wir im letzten Kapitel erfahren haben.

2.1 Anlegen eines Projekts

Wir beginnen mit einem neuen Eclipse-Projekt, das wir HelloVaadin nennen wollen. Für dieses Beispiel verwenden wir das Vaadin Plugin für Eclipse, das wir zuvor über den Eclipse Marketplace installiert haben.

Um ein neues Vaadin Projekt anzulegen, verwenden wir den Wizard für Vaadin Projekte, den wir unter File → New → Other… → Vaadin → Vaadin 7 Project finden. Der erste Dialog des Wizards erlaubt einige grundlegende Einstellungen.

Zunächst können wir den Namen unseres neuen Projektes festlegen. Wir geben hier HelloVaadin ein. Unter Project location wählen wir den Zielort der Projektdateien. Wir lassen das Projekt einfach in unseren Eclipse Workspace legen.

Als nächstes wählen wir bei der Target runtime den Servlet Container aus, auf dem wir unser Projekt laufen lassen wollen. Wir müssen in Eclipse unter Window → Preferences → Server → Runtime Environment mindestens eine Server-Laufzeitumgebung, z. B. einen Tomcat Server, eingerichtet haben. Wir können hier eine dieser Server-Konfigurationen auswählen. Sollte in diesem Dialog noch kein Server auswählbar sein, können wir die Option auch einfach überspringen. Unser Projekt lässt sich ohne Probleme auch später noch auf einer Server-Umgebung ausführen.

Im nächsten Feld wählen wir die Konfiguration unseres Projekts. Wir haben hier die Möglichkeit, die Version der verwendeten Servlet-Spezifikation zu wählen. Welche Version wir auswählen hängt im Wesentlichen davon ab, welche Features der Servlet-Spezifikation wir benötigen und welche Servlet-Version unsere Server-Zielplattform unterstützt. Für unser einfaches Hello World-Beispiel genügt uns die Version 2.4 der Servlet-Spezifikation. Über die Schaltfläche Modify… können wir die vorhandenen Konfigurationsmöglichkeiten anpassen. Beispielsweise lässt sich hier die verwendete Java Version ändern. Wir definieren damit die aktiven Eclipse Projekt-Facetten unseres Projekts.

Zu guter Letzt legen wir die Deployment configuration und die verwendete Vaadin-Version für unser Projekt fest. Mit der Deployment configuration definieren wir, in welcher Umgebung unsere Vaadin-Anwendung später einmal betrieben werden soll. Es gibt dazu drei Möglichkeiten, aus denen man wählen kann:

• Servlet: Dies ist die Standardkonfiguration. Man wählt diese, um seine Vaadin-Anwendung als herkömmliche Java Webanwendung in einem Servlet Container, wie Tomcat, Jetty oder GlassFish zu betreiben.
• Google App Engine servlet: Alternativ kann man seine Anwendung auch in der Google App Engine installieren. Die App Engine ist ein PaaS-Dienst (Platform-as-a-Service) von Google. Man kann damit seine Vaadin-Anwendung sehr einfach in der Cloud betreiben.
• Generic portlet (Portlet 2.0): Schließlich ist es auch möglich, Vaadin als Portlet in einem Portal Server laufen zu lassen. Damit bietet es sich z. B. an, Portlets für das Liferay Portal mit Hilfe von Vaadin zu implementieren.

Die Konfiguration, die wir hier wählen, legt fest, welches konkrete Vaadin-Servlet in unserem Projekt eingesetzt wird. Abhängig von der Laufzeitumgebung unserer Anwendung muss ein spezielles Servlet verwendet werden. So gibt es eine eigene Servlet-Implementierung für die Google App Engine und für Portal Server.

Wir können uns später jedoch jederzeit für eine andere Laufzeitumgebung entscheiden. Vaadin ist so konzipiert, dass der Programmcode einer Anwendung vollständig von der konkreten Umgebung abstrahiert ist. Egal ob wir unsere Anwendung in die Google App Engine oder in einem herkömmlichen Servlet Container installieren — unser Anwendungscode bleibt davon unberührt (zumindest der Vaadin-Teil). Einzig das darunterliegende Servlet muss angepasst werden.

Nachdem wir nun die Grundkonfiguration für unser Vaadin-Projekt festgelegt haben, können wir auf Next klicken, um auf dem nächsten Dialog das Quellcode- und Ausgabeverzeichnis festzulegen. Hier können wir die Standardeinstellungen beibehalten.

Ein weiterer Klick auf Next bringt uns auf den Konfigurationsdialog für das Web-Modul. Hier legen wir den Context Root unserer Anwendung fest. Das ist der Pfad in der URL zu unserer Anwendung. Wenn wir hier also die Voreinstellung HelloWorld beibehalten, wird unsere Anwendung später lokal unter der URL http://localhost:8080/HelloWorld erreichbar sein.

Das Content Directory, das wir als nächstes festlegen können, bezeichnet dasjenige Verzeichnis in unserem Projekt, das sämtliche Web-Ressourcen enthalten wird. Unter diesem Pfad befindet sich das WEB-INF-Verzeichnis und die web.xml (falls vorhanden). Den vorgegebenen Namen WebContent können wir auch hier beibehalten. Für unser erstes Vaadin Projekt setzen wir den Haken bei Generate web.xml deployment descriptor. Damit wird für uns von dem Eclipse Plugin die Grundkonfiguration des Deployment Descriptors generiert. Wir können diesen später nach unseren eigenen Wünschen anpassen. Falls wir auf der ersten Seite des New Project Wizards eine Servlet-Version größer gleich 3.0 angegeben haben, können wir auch auf die web.xml verzichten und das Servlet im Code rein über Annotationen konfigurieren.

Mit einem Klick auf Next kommen wir auf die letzte Dialogseite des Wizards.

Dort haken wir die Option Create project template an. Damit wird für uns die Package-Struktur des Projekts und die Vaadin Hauptklasse erzeugt. Als nächstes geben wir die folgenden Informationen an:

• Application name: Name der Anwendung. Dieser Wert wird später in der web.xml als Servlet-Name für das Vaadin Servlet verwendet.
• Base package name: Name des Basis-Packages, unterhalb dessen unsere Anwendung liegt.
• Application class name: Klassenname für die Hauptklasse der Anwendung. Typischerweise heißt diese Klasse wie unsere Anwendung mit angehängtem UI, also z. B. HelloWorldUI. Wenn wir den Haken bei Create project template gesetzt haben, wird diese Klasse für uns automatisch angelegt.
• Theme name: Name des Themes, das von unserer Anwendung verwendet werden soll. Ein Theme definiert das optische Erscheinungsbild einer Vaadin-Applikation. Wir können hier einen Namen vorgeben, der zu unserer Anwendung passt. Was es mit Themes auf sich hat, werden wir später erfahren. Wir können es an dieser Stelle erst einmal so hinnehmen, dass für uns ein eigenes Theme erzeugt wird.

Schließlich können wir noch die Version der verwendeten Portlet-Spezifikation wählen, falls unsere Vaadin-Anwendung als Portlet betrieben werden soll. Diesen Punkt benötigen wir für unser Beispiel nicht. Als letzten Konfigurationswert legen wir die Vaadin-Version fest, die für unser Projekt verwendet werden soll. Hier können wir einfach die jeweils aktuelle Vaadin-Version wählen.

Als letztes drücken wir nun den Finish-Knopf und lassen Eclipse unser bis hierher konfiguriertes Projekt erzeugen. Es wird ein Eclipse-Projekt generiert, das Ivy als Build Tool verwendet. Die Eclipse Ivy Integration sorgt anschließend dafür, dass alle benötigten Abhängigkeiten (d. h. die Vaadin Bibliotheken und deren abhängigen Libraries) aufgelöst und heruntergeladen werden. Mit den vorhandenen Abhängigkeiten kann das Projekt von Eclipse fehlerfrei kompiliert werden. Als Ergebnis haben wir jetzt ein neues Projekt namens HelloVaadin in unserem Workspace. Schauen Sie sich gerne ein wenig in den Projektdateien um.

Im Folgenden wollen wir einen kurzen Blick auf die erzeugten Projektdateien werfen. Wir werden dabei die wichtigsten Grundbestandteile einer Vaadin-Anwendung umreißen.

Die Projektdateien

Schauen wir uns einige der generierten Dateien etwas genauer an.

HelloVaadin/src/org/vaadin/hellovaadin/HelloVaadinUI.java

Diese Datei beherbergt die Klassendefinition der Hauptklasse unseres Projekts. Die Klasse HelloVaadinUI erbt von der kurz und knapp benannten Vaadin Klasse com.vaadin.ui.UI. Dies ist die Einstiegsklasse für eine Vaadin-Applikation. In ihr muss vor allem die abstrakte Methode UI#init(VaadinRequest) implementiert werden. Über dieser Methode wird eine Vaadin-Anwendung initialisiert. Sie wird immer dann aufgerufen, wenn eine Benutzerin oder ein Benutzer unsere Anwendung mit dem Browser besucht.

Man kann sich die init()-Methode ungefähr wie die main()-Methode eines herkömmlichen Java-Programms vorstellen. Hier wird der Einstiegspunkt einer Anwendung definiert. Die Hauptaufgabe dieser Methode ist es also, die Benutzeroberfläche der Anwendung zu initialisieren und die initialen Ereignisbehandlungsroutinen für die Verarbeitung der Benutzeraktionen zu registrieren.

HelloVaadin/WebContent/VAADIN/themes/hellovaadin/*

In diesem Verzeichnis befindet sich das sogenannte Theme einer Vaadin-Anwendung. Ein Theme legt das äußere Erscheinungsbild der Anwendung fest. Hier können wir das Look & Feel für unser Programm definieren. Im Wesentlichen besteht das aus speziell angepassten Cascading Stylesheets (CSS) und weiteren Ressourcendateien, wie z. B. Bilder und Icons.

Das Vaadin Eclipse Plugin hat schon ein solches Theme für uns angelegt. Dieses dient allerdings vorerst nur als Vorlage für unsere eigenen Anpassungen, d. h. das Theme ist zu Beginn leer. Belassen wir die Theme-Dateien so wie sie im Moment sind, verhält sich unsere Vaadin-Anwendung genauso, als hätten wir kein eigenes Theme definiert. Wir brauchen uns also vorerst gar nicht um diese Dateien zu kümmern.

HelloVaadin/WebContent/WEB-INF/web.xml

Die web.xml ist der Deployment Descriptor unserer Webanwendung, der zumindest bei Verwendung von älteren Servlet-Spezifikationen benötigt wird. In ihr wird im einfachsten Fall ein spezielles Vaadin-Servlet konfiguriert, das wir für unsere Deployment-Umgebung benötigen. Wollen wir unsere Anwendung in der Google App Engine betreiben, müssen wir eine andere Servlet-Implementierung verwenden, als für ein Deployment als Portlet in einem Portal Server.

Neben der Festlegung der verwendeten Servlet-Klasse gibt es noch einige weitere Initialisierungs- und Kontextparameter, die wir in der web.xml konfigurieren können. Dazu gehören unter anderem die Festlegung der Hauptklasse, die das Servlet verwenden soll und die Konfiguration, in welchem Modus die Vaadin-Anwendung betrieben werden soll.

Es gibt zwei Modi, unter denen eine Vaadin-Anwendung laufen kann: der Produktionsmodus und ein Debug-Modus. Gesteuert wird dieser Modus über den Kontextparameter productionMode.

<context-param>
	<description>Vaadin production mode</description>
	<param-name>productionMode</param-name>
	<param-value>false</param-value>
</context-param>

Belegt man diesen Wert wie im Beispiel mit false, so wird die Anwendung im Debug-Modus betrieben. Wir haben dann Zugriff auf einige zusätzliche Features, die uns das Leben als Entwickler etwas erleichtern. Dazu gehört unter anderem ein spezielles Debug-Fenster, das wir zur Laufzeit auf unserer Anwendung anzeigen können. Über dieses Fenster können wir detaillierte Informationen über den clientseitigen Zustand der Applikation erhalten. Wir werden uns diesen Debug-Modus später an anderer Stelle noch etwas genauer anschauen.

Wichtig ist, dass wir in der Produktionsumgebung diesen Modus deaktivieren. Dazu belegen wir den Wert des Kontextparameters productionMode mit true. Es sind dann sämtliche Debug-Funktionalitäten des Vaadin-Servlets deaktiviert. Das schützt die Interna unserer Anwendung vor allzu neugierigen Blicken und kommt zudem der Anwendungs-Performance zugute.

Der zweite wichtige Wert, den wir in der web.xml konfigurieren müssen, ist die UI-Klasse, die vom Vaadin-Servlet verwendet werden soll. Dazu definieren wir den Wert des Servlet Init-Parameters UI. Mit diesem Parameter geben wir dem Vaadin-Servlet unsere eigene Subklasse von com.vaadin.ui.UI bekannt, welche ja die Haupteinstiegsklasse unserer Vaadin-Anwendung darstellt.

<init-param>
	<description>Vaadin UI class to use</description>
	<param-name>UI</param-name>
	<param-value>org.vaadin.hellovaadin.HelloVaadinUI</param-value>
</init-param>

Das Vaadin-Servlet muss, sobald eine Anwenderin oder ein Anwender die Vaadin-Applikation mit dem Browser besucht, eine neue Instanz unserer UI-Klasse erzeugen und diese Instanz in die HTTP Session stellen. Dieses UI-Objekt enthält unter anderem alle UI-Komponenten, die aktuell im Browser des Benutzers dargestellt werden, und deren jeweiligen Zustand. Damit das Vaadin-Servlet neue Instanzen unserer UI-Klasse erstellen kann, muss man ihm den voll qualifizierten Klassennamen dieser Klasse mitteilen. Dies geschieht mit dem UI-Parameter. Das Servlet kann damit bei Bedarf per Reflection neue Instanzen erstellen.

Es geht los: Deployment der Anwendung

Das Vaadin Eclipse Plugin hat uns mit diesen Dateien eine voll funktionsfähige Vaadin-Anwendung generiert. Wir können diese jetzt so wie sie ist in einem Servlet Container deployen und starten. Lassen Sie uns das an dieser Stelle einfach einmal tun.

Wir müssen dazu vorher eine Server-Laufzeitumgebung in Eclipse eingerichtet haben. Dies lässt sich in den Einstellungen unter Window → Preferences → Server → Runtime Environments bewerkstelligen.

Ist das erledigt, kann unser Projekt auf zweierlei Arten auf dem Server installiert werden. Wir können einfach per Drag & Drop das Projektverzeichnis aus dem Package Explorer oder dem Project Explorer auf den Server-Eintrag in der Servers View ziehen. Alternativ können wir mit der rechten Maustaste auf dem Projekt das Kontextmenü aufrufen und dort unter der Option Run As → Run on Server den Zielserver auswählen.

Bei beiden Varianten wird anschließend der Server gestartet und die Anwendung darauf installiert. Wenn der Server hochgefahren ist, kann die Hello Vaadin Anwendung unter der folgenden URL besucht werden (Eclipse wird dann automatisch ein internes Browserfenster öffnen):

http://localhost:8080/HelloVaadin/

Sie müssen gegebenenfalls nur den Port 8080 an den von Ihrem Servlet Container verwendeten Port angleichen.

Schreiben unseres Anwendungscodes

Lassen Sie uns jetzt den vom Vaadin Eclipse Plugin generierten Beispielcode mit unserem eigenen Code ersetzen. Wir wollen das folgende Beispielprogramm als unsere erste Vaadin-Anwendung schreiben.

 1 package org.vaadin.hellovaadin;
 2 
 3 import com.vaadin.annotations.Theme;
 4 import com.vaadin.server.VaadinRequest;
 5 import com.vaadin.ui.Button;
 6 import com.vaadin.ui.Button.ClickEvent;
 7 import com.vaadin.ui.ComponentContainer;
 8 import com.vaadin.ui.Label;
 9 import com.vaadin.ui.Notification;
10 import com.vaadin.ui.TextField;
11 import com.vaadin.ui.UI;
12 import com.vaadin.ui.VerticalLayout;
13 
14 @Theme("hellovaadin")
15 public class HelloVaadinUI extends UI {
16 
17   @Override
18   protected void init(VaadinRequest request) {
19     // {1} //
20     final VerticalLayout layout = new VerticalLayout();
21     layout.setMargin(true);
22     layout.setSpacing(true);
23 
24     buildHomeScreen(layout); // {2} //
25     setContent(layout);      // {3} //
26   }
27 
28   private void buildHomeScreen(final ComponentContainer layout) {
29     // {4} //
30     final TextField nameTextField = new TextField("Wie lautet Ihr Name?");
31     nameTextField.setRequired(true);
32     final Button sayHelloButton = new Button("Sag mal Hallo...");
33 
34     // {5} //
35     sayHelloButton.addClickListener(new Button.ClickListener() {
36       @Override
37       public void buttonClick(ClickEvent event) {
38         if (nameTextField.isValid()) {                        // {6} //
39           layout.removeAllComponents();                       // {7} //
40           buildHelloScreen(layout, nameTextField.getValue()); // {8} //
41         } else {
42           Notification.show("Geben Sie bitte Ihren Namen ein."); // {9} //
43         }
44       }
45     });
46 
47     // {10} //
48     layout.addComponent(nameTextField);
49     layout.addComponent(sayHelloButton);
50   }
51 
52   private void buildHelloScreen(final ComponentContainer layout, String name)\
53  {
54     // {11} //
55     final Label helloLabel = new Label(String.format("Hallo %s!", name));
56     final Button backButton = new Button("<< Zurück");
57 
58     backButton.addClickListener(new Button.ClickListener() {
59       @Override
60       public void buttonClick(ClickEvent event) {
61         layout.removeAllComponents(); // {12} //
62         buildHomeScreen(layout);      // {13} //
63       }
64     });
65 
66     // {14} //
67     layout.addComponent(helloLabel);
68     layout.addComponent(backButton);
69   }
70 }

Zugegeben, dieser Code geht über ein simples Hello World-Programm doch ein wenig hinaus. Aber wenn wir ehrlich sind, würde es uns, nachdem wir den vom Vaadin Eclipse Plugin generierten Code gesehen haben, nicht mehr sonderlich aus den Socken hauen, wenn wir uns anschauen würden, wie man ein simples Label auf die Benutzeroberfläche legt.

Stattdessen sehen wir an diesem einfachen Beispiel die wichtigsten Grundbestandteile, aus der jede nicht-triviale Vaadin-Anwendung besteht, komprimiert an einer Stelle: Ereignisbehandlung, Navigation und Eingabevalidierung.

Schauen wir uns das Beispiel einmal Schritt für Schritt an. Die init()-Methode {1} übernimmt typische Konstruktoraufgaben — mit dem Unterschied, dass sie keine Klasse initialisiert, sondern unsere Vaadin-Anwendung. Hier wird das Hauptlayout eingerichtet {2} und als Inhalt (Content) der UI-Klasse gesetzt {3}. Mit der Methode UI#setContent(com.vaadin.ui.Component) wird der Inhalt des Browserfensters festgelegt. Das ist typischerweise eine Layout-Komponente, die selbst wiederum rekursiv sämtliche geschachtelten Layouts und UI-Komponenten der Benutzeroberfläche enthält.

Das Zusammenstellen der UI-Komponenten, die auf dem Hauptlayout zu sehen sein sollen, wurde in eine eigene Methode buildHomeScreen() ausgelagert. Diese Methode werden wir später noch einmal benötigen.

Werfen wir einen Blick auf buildHomeScreen(). Hier werden zwei UI-Komponenten erzeugt {4} und auf das Layout gelegt {10}. Wir erstellen uns ein Textfeld, in das die Anwender ihren Namen eingeben können, und eine Schaltfläche, die uns auf eine zweite Seite leiten wird. Auf dieser werden die Anwender mit ihrem Namen begrüßt. Die Eingabe in das Textfeld ist verbindlich. Das Textfeld wird daher mit setRequired(true) als Pflichtfeld konfiguriert.

Auf der Schaltfläche sayHelloButton registrieren wir einen Event Listener für Button Clicks. Den com.vaadin.ui.Button.ClickListener implementieren wir als anonyme Klasse. In dieser Ereignisbehandlungsroutine überprüfen wir zuerst, ob die Eingabe in das Textfeld gültig ist {6}. Ist das nicht der Fall, wird ein Hinweis angezeigt {9}.

Hat man einen Namen angegeben, findet als nächstes eine Navigation auf eine zweite “Seite” statt. Dazu entfernen wir sämtliche vorhandenen UI-Komponenten von dem Hauptlayout {7} und ersetzen diese mit den Komponenten, die in der Methode buildHelloScreen() erzeugt werden {8}. Dieser Methode übergeben wir den Inhalt des Textfeldes.

Die Methode buildHelloScreen() erzeugt die zweite Seite unserer Beispielanwendung. Hier wird ein Label mit dem Gruß an die Anwenderin oder den Anwender und ein Zurück-Knopf {11} auf das Hauptlayout gelegt {14}. Auch hier registrieren wir wieder eine anonyme Klasse als ClickListener für den Zurück-Knopf. Der Code für diesen Listener ist sehr einfach: wir entfernen wieder sämtliche Komponenten vom Layout {12} und rufen die Methode buildHomeScreen() {13} auf, die unsere Benutzeroberfläche in ihren Ursprungszustand zurückversetzt.

2.2 Grundeigenschaften einer Vaadin-Anwendung

Wie am Anfang versprochen, können wir an diesem Beispiel sehr schön die Eigenschaften einer typischen Vaadin-Anwendung in ihren Grundzügen erkennen: Ereignisbehandlung, Navigation und Validierung.

Ereignisbehandlung

Das Verhalten einer Vaadin-Applikation ist ereignisgetrieben. Das heißt, nachdem wir die UI-Komponenten für die Benutzeroberfläche zusammengestellt und im Browser dargestellt haben (mit com.vaadin.ui.UI#setContent()), besteht der gesamte Rest der Anwendung nur noch aus der Reaktion auf Benutzeraktionen. Aktionen, die der Benutzer oder die Benutzerin im Browser durchführt, werden als Event zum Server gesendet und dort von Event Listenern ³ verarbeitet. Aus diesen Ereignisbehandlungsroutinen heraus wird dann unsere Business-Logik aufgerufen. Vaadin unterscheidet sich also in dieser Hinsicht nicht von anderen UI-Frameworks, wie Swing, JavaFX oder dem SWT (das Standard Widget Toolkit von Eclipse).

Validierung

Die Überprüfung von Benutzereingaben ist ein wichtiger Bestandteil jeder Software. Auch das Vaadin-Framework bringt einige Schnittstellen und Funktionen mit, mit denen uns die Eingabevalidierung wesentlich erleichtert wird und die uns einen Großteil von immer wiederkehrenden Aufgaben abnimmt.

Im Beispiel haben wir die Eingabe in das Textfeld für den Benutzernamen erforderlich (required) gemacht. Mit der Methode isValid(), die wir auf der Eingabekomponente, dem Textfeld, aufgerufen haben, konnten wir das Framework die Gültigkeit der Benutzereingabe überprüfen lassen und entsprechend darauf reagieren. In diesem einfachen Fall prüfen wir, ob überhaupt eine Eingabe gemacht wurde.

Mit der Validierung und den dazugehörigen Validatoren werden wir uns an späterer Stelle noch intensiv auseinandersetzen.

Single-Page Web Applications

Im Beispielprogramm haben wir gesehen, wie wir die Benutzer von einer Seite der Anwendung auf eine andere Seite weiterleiten können. Nachdem die Anwender ihren Namen eingegeben haben, werden sie auf eine zweite Seite geleitet, auf der sie mit Namen begrüßt werden.

Obwohl das Beispiel extrem simpel ist, demonstriert es doch das Kernprinzip der Seitennavigation mit Vaadin: Anstatt wie es in anderen Web-Frameworks üblich ist, eine komplett neue HTML-Seite zu rendern, haben wir einfach sämtliche UI-Komponenten von der Benutzeroberfläche entfernt (removeAllComponents()) und das Basislayout mit den Komponenten gefüllt, die die nächsten Seite darstellen. Technisch befindet sich der Anwender oder die Anwenderin immer auf der gleichen HTML-Seite. Das ist diejenige, die beim ersten Annavigieren der Anwendung geladen wurde. Es werden anschließend nur Teile der Seite oder der gesamte Seiteninhalt nach Bedarf mit Hilfe von JavaScript-Code ausgetauscht. Es wird somit den Benutzern ein vollständiger Seitenwechsel nur vorgegaukelt.

Dieses Prinzip, bei dem eine Anwendung nur auf einer einzigen HTML-Seite betrieben wird, deren Inhalt über JavaScript-Code dynamisch manipuliert wird, ist das definierende Element für so genannte Single-Page Web Applications.

Single-Page Web Applications (oder auf Deutsch Einzelseiten-Webanwendungen) zeichnen sich dadurch aus, dass sie, wie der Name schon andeutet, auf einer einzigen HTML-Seite betrieben werden. Sie unterscheiden sich damit in dieser Hinsicht wesentlich von klassischen Webanwendungen, bei denen jede Aktion der Benutzer zum Laden einer komplett neuen HTML-Seite führt.

Der erste HTTP GET-Request, den die Benutzerin oder der Benutzer beim Besuch einer solchen Anwendung an den Server schickt, lädt die HTML-Seite, auf der die Single-Page Web Application betrieben wird. Der Seiteninhalt wird anschließend dynamisch, z. B. mit JavaScript, aufgebaut. Alle weiteren Interaktionen mit der Anwendung finden über asynchrone AJAX-Requests statt. Als Ergebnis dieser Server-Anfragen werden nur bestimmte Bereiche der HTML-Seite ausgetauscht oder aktualisiert.

Diese Eigenschaft ist typisch für Rich Internet Applications, einer Klasse von Anwendungen, die sich dadurch auszeichnen, dass sie sehr reichhaltige Interaktionsmöglichkeiten bieten und für den Datenaustausch über das Internet mit einem Server kommunizieren können.

Für die Umsetzung von Rich Internet Applications im Browser gibt es viele Ansätze. Dazu gehören plugin-basierte Lösungen, die die Installation einer bestimmten Erweiterung im Browser voraussetzen. Beispiele hierfür sind Microsoft Silverlight oder Adobe Flash. Daneben gibt es Ansätze, die rein auf HTML5 und JavaScript aufsetzen und die damit ohne die Installation von Plugins auskommen. Zwei wichtige Vertreter hierfür sind das Google Web Toolkit und natürlich das darauf aufsetzende Vaadin Framework.