Suche

Vaadin

Grundsätzlich wählt Vaadin einen altbewährten Ansatz, der auf zwei wesentlichen Schritten bzw. Server-Roundtrips basiert:

  1. Oberfläche an Client übertragen: der Java-Komponentenbaum (repräsentiert die Oberfläche) wird in ein übertragbares und für den Client verständliches Format überführt. Bei Vaadin wird dabei die so genannte UIDL (User Interface Definition Language) eingesetzt. Innerhalb des Clients wird die UIDL mittels GWT Rendering Engine in eine Oberfläche transformiert.
  2. Die clientseitige Vaadin JavaScript Engine protokolliert sämtliche Änderungen im Client (z. B. Feldwert geändert und Button gedrückt) und sendet sie zurück an den Server. Die Änderungen werden auf dem Server verarbeitet und die daraus resultierenden Änderungen im Komponentenbaum zurück an den Client gesendet. Dabei wird ein Delta-Rendering eingesetzt, d. h. es werden nur Änderungen übertragen und nicht die komplette Seite erneut geladen.

Da die gesamte Client-Server-Kommunikation bereits durch Vaadin behandelt wird, kann der Entwickler den Client-Server-Kommunikationsteil als Blackbox betrachten und muss lediglich gegen ein Swing-ähnliches API programmieren. Das vereinfacht die Entwicklung extrem und ermöglicht es, den Fokus der Entwicklung auf den Serverteil der Anwendung zu setzen. Damit erspart man sich die Überlegungen beim Client, ob nun das gesamte Domain-Objekt oder nur ein Teil davon an den Server übertragen werden soll. Der Einstieg in Vaadin erfolgt basierend auf der klassischen „Hallo Vaadin!“-Anwendung. Diese wird jedoch schnell wachsen, denn das Frameworkkonzept erlaubt eine steile Lernkurve.

Die einfachste Art, mit Vaadin durchzustarten, ist die Installation als Eclipse-Plug-ins [2] (HELP│INSTALL NEW SOFTWARE…). Nach der Installation kann direkt ein Projekt mit Vaadin-Struktur erstellt werden: FILE │ NEW │ OTHER │ VAADIN │ VAADIN PROJECT. Das Projekt beinhaltet eine Java-Klasse, die gemäß Listing 1 erweitert wird.

Listing 1: Hallo Vaadin! (Abb. 2)
package com.example.hellovaadin;

import com.vaadin.Application;
import com.vaadin.ui.*;
import com.vaadin.ui.Button.ClickEvent;

public class HellovaadinApplication extends Application 
{
    @Override
    public void init() 
    {
        Window mainWindow = new Window("Hellovaadin Application");

        Label label = new Label("Enter your name:");
        mainWindow.addComponent(label);

        final TextField textfield = new TextField("name");
        mainWindow.addComponent(textfield);

        Button button = new Button("Say Hello",new Button.ClickListener() 
{
            public void buttonClick(ClickEvent event) 
            {
                textfield.setValue("Hello " +textfield.getValue());
            }
        });
        mainWindow.addComponent(button);

        setMainWindow(mainWindow);
    }
}

Auf das Layout der Anwendung wird an dieser Stelle kein Wert gelegt, die grundlegende Funktionsweise von Vaadin wird in Listing 1 jedoch ersichtlich: Es existieren mehrere Vaadin-Java-Komponenten com.vaadin.Button, com.vaadin.Textfield usw. Sie werden in einen Container eingebettet. In unserem Beispiel wird als Container direkt das Hauptfenster eingesetzt – der Einsatz von weiteren Subcontainern (HorizontalLayout, VerticalLayout usw.) ist möglich, das Konzept der Layouts funktioniert analog zum Swing-Container-Konzept. Um auf Actions zu reagieren, wird dem Button ein ClickListener zugewiesen. Innerhalb des ClickListeners wird die eigentliche Logik der Anwendung implementiert. Ganz klar, in der Praxis würde an dieser Stelle der Aufruf einer Controller-Methode erfolgen. Um das Beispiel jedoch einfach zu halten, wird auf den Controller-Aufruf an dieser Stelle verzichtet. Führen Sie die Anwendung direkt aus der Eclipse-Umgebung via RUN AS │ RUN ON SERVER aus. Dazu sollte ein Tomcat oder sonstiger Servlet-Container in Ihre Eclipse-Umgebung gelinkt sein. Die Anwendung wird im Browser unter folgendem URL gestartet: http://localhost:8080/HelloVaadin/. Voilà, das ist Ihre erste Vaadin-Anwendung, die jetzt nach Belieben angepasst werden kann. Eine Übersicht sämtlicher verfügbaren Vaadin-Komponenten kann direkt der Vaadin-Seite [3] entnommen werden.

Abb. 2: Vaadin-SamplerAbb. 2: Vaadin-Sampler (Vergrößern)

Wichtig beim Hinzufügen neuer Komponenten und Anpassungen: Der Server muss bei Veränderungen im Java-Layout bzw. der Java-Logik nicht neu gestartet werden, der Applikation muss jedoch explizit mitgeteilt werden, dass sie neu gerendert werden soll. Das ist über den Parameter ?restartApplication möglich (http://localhost:8080/HelloVaadin/?restartApplication). Sollten Sie jemals das Problem haben, dass Änderungen nicht angezeigt werden, können Sie sicher sein, dass der Parameter nicht gesetzt wurde – eine der häufigsten Stolperfallen im Vaadin-Framework, die Sie jetzt umgehen können.

Abb. 3: Anwendung „Hello Vaadin!“

Als Nächstes soll die „Hallo Vaadin!“-Anwendung erweitert werden (Abb. 3). Als Grundlage wird dabei das „5 Minute Tutorial“ von Vaadin eingesetzt [4]. Um einen stärkeren Praxisbezug herzustellen, wird jedoch das Szenario „Adressbuch“ in eine so genannte Device-Management-Anwendung umgewandelt. In vielen Unternehmen schwirren mittlerweile etliche mobile Demogeräte herum, die verwaltet werden müssen. Statt zukünftig ein verknittertes Excel aus der Schublade zu ziehen, können Sie dann auf einen URL verweisen, die die Ausgabe/Rücknahme von Geräten trackt (Abb. 4).

Abb. 4: Rudimentäres Device Management

Das Erweiterungspotenzial der Anwendung ist grenzenlos. Darüber hinaus beinhaltet die Anwendung eine Login-Maske, die den Zugriff auf die Anwendung kontrolliert. Die Login-Maske ist technisch eine 0815-Coding-Prozedur. Durch ihren Einsatz kommt jedoch ein weiterer wichtiger Aspekt in die Demoanwendung ― die Seitennavigation. Der Sprung von der Login-Maske zur Hauptanwendung zeigt eine rudimentäre Möglichkeit, Navigation basierend auf Vaadin zu implementieren. Zugegeben, das elementare Navigationskonzept von Vaadin ist gewöhnungsbedürftig und vergleichbar mit einer Schultafel: Seiteninhalte werden an die Tafel geschrieben, eine neue Seite bedeutet das Auswischen der Tafel und Hinzufügen neuer Inhalte. Grundsätzlich bewegt sich der Benutzer jedoch nur auf einer festen Tafel, der Sprung zwischen verschiedenen Tafeln (Vaadin Pendant: Application) ist nicht möglich, und den Tafeldienst übernehmen Sie an dieser Stelle. Es stehen jedoch diverse Vaadin-Erweiterungen zur Verfügung [5], [6], die Ihnen Navigationskonzepte zur Verfügung stellen. Im Rahmen der DeviceManagement-Anwendung wird die Navigation jedoch von Hand implementiert. Das gesamte Beispiel liegt als Eclipse-Projekt auf der Leser-CD unter Devicemanagement.zip.

Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.