Einführung in die Entwicklung mit Vaadin
Seite 4: Designer, Fazit
Faulheit will gelernt sein
Da das manuelle Zusammenklicken von Vaadin-Formularen nicht der Weisheit letzter Schluss ist, sei als letzte Aufgabe dieses Artikels ein Blick auf den Designer geworfen. Ein Monatsabonnement für ihn beginnt bei rund 40 Dollar.
Wer alle in der Einleitung genannten Pakete installiert hat, kann zum Hinzufügen eines neuen Designs sein Projekt im Projekt-Explorer rechts anklicken und die Option New File auswählen. Im daraufhin erscheinenden Assistenten wechseln Entwickler in die Rubrik "Vaadin" und wählen die Option "Vaadin-Design" aus. Sodann klicken sie auf Next und vergeben einen Namen – in den folgenden Schritten HeiseExample. Nach dem erfolgreichen Erzeugen der neuen Datei verändert sich die Projektstruktur: Neben dem Java-Ordner gibt es nun auch ein Ressourcenverzeichnis, in dem HTML-Dateien liegen. Nach dem Anklicken eines dieser Files wechselt Eclipse in den Vaadin-Designmodus: Der erstmalige Startprozess nimmt etwas Zeit in Anspruch.
Der Vaadin Designer ist manchmal etwas temperamentvoll: Wenn das Programm nach einiger Zeit immer noch bei der Fehlermeldung "Please wait, loading view" stehen bleibt, sollten Anwender im ersten Schritt versuchen, das folgende Paket zu installieren:
sudo apt-get install libwebkitgtk-1.0-0
Führt das nicht zum Erfolg, können sie auf einen Trick zurückgreifen: Der Vaadin Designer wird über einen integrierten Webserver gestartet, den Eclipse im Prinzip in einem Browserfenster öffnet. Wer die Eclipse-IDE aus der Kommandozeile heraus ausführt, kann die URL des Servers ernten – auf der Workstation des Autors lautet sie http://192.168.0.104:36936/e220?editor&DESIGNER_IDE&LINUX#!edit.
Führt auch das nicht zum Erfolg, können Entwickler sich immerhin mit dem HTML-Code beschäftigen, indem sie das Source-Tab aktivieren. Von Haus aus sieht der generierte Code folgendermaßen aus:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" name="design-properties" content="{"RULERS_VISIBLE":true,"GUIDELINES_VISIBLE":false,"SNAP_TO_OBJECTS":true,"SNAP_TO_GRID":true,"SNAPPING_DISTANCE":10,"JAVA_SOURCES_ROOT":"src/main/java","THEME":"mytheme"}">
<meta charset="UTF-8" name="vaadin-version" content="7.7.0">
</head>
<body>
<vaadin-vertical-layout size-full></vaadin-vertical-layout>
</body>
</html>
Nach dem erfolgreichen Laden, das durchaus etwas Zeit in Anspruch nehmen kann, blendet der Vaadin Designer eine Warnung ein, die zum Anmelden auffordert: Man besucht die im Dialogfenster eingeblendete URL und folgt den im Bildschirm angezeigten Anweisungen, um einen Lizenzschlüssel herunterzuladen. Nach dessen Eingabe entsperrt man den Designer für einige Zeit.
Vom Verhalten her ist der Vaadin Designer im Großen und Ganzen analog zu Visual Studio und anderen IDEs zu nutzen: Die in der Palette befindlichen Steuerelemente lassen sich per Drag-and-drop im Formular einfügen, das Properties-Fenster zeigt weitere Informationen über ihre Attribute und Verhaltenseigenschaften an.
Im Code-Behind findet sich sodann eine gleichnamige Klasse, die im vorliegenden Beispiel folgendermaßen aufgebaut ist:
@DesignRoot
@AutoGenerated
@SuppressWarnings("serial")
public class HeiseExample extends VerticalLayout {
public HeiseExample() {
Design.read(this);
}
}
Beachtet sei an der Stelle, dass der Code der Klasse von Vaadin bei jeder Änderung der HTML-Datei neu generiert wird: Änderungen an diesem Teil des Codes sollten also nach Möglichkeit unterbleiben. Die restliche Nutzung der View verhält sich dann analog zu von Hand generierten Elementen: beim Navigator anmelden, aufrufen und profitieren.
Fazit
Nach diesen Ausführungen ist klar: Das Benutzer-Interface-System von Vaadin funktioniert. Die Darstellung attraktiver Formulare stellt allerdings nur einen kleinen Teil der JavaScript beginnt normalerweise erst dann, wenn man größere Datenmengen verarbeitet.
Tam Hanna
befasst sich seit dem Jahr 2004 mit Handcomputern und Elektronik. Derzeit liegt sein Fokus auf interdisziplinären Anwendungen von Informationstechnologie.
(ane)
