Vaadin – statische Inhalte und Stylesheet

Wenn man mit Vaadin erstmal zum Arbeiten anfängt, ist alles kompliziert. Trotz vorhandener Dokumentation benötigt man längere Zeit, herauszufinden, wie alles funktioniert.

1. Statische Inhalte wie Bilder

Beispielsweise ist es mit der Standard-Konfiguration der web.xml erstmal nicht möglich, statische Inhalte wie Bilder auszuliefern, die z.B. in /images liegen.

<servlet-mapping>
  <servlet-name>default</servlet-name>
  <url-pattern>/images/*</url-pattern>
</servlet-mapping>

<servlet-mapping>
  <servlet-name>Vaadin Application Servlet</servlet-name>
  <url-pattern>/*</url-pattern>
</servlet-mapping>

Der untere Teil matcht die URL mit /* und leitet alle Anfragen an das Vaadin-Servlet weiter. Möchte man statischen Content ausliefern und nicht über ein HTTP-Servlet gehen (das kostet ja auch sinnloserweise Performance), benötigt man einen zusätzlichen Schnippsel (der drüber), der /images/* matcht. Der Servlet-Name ‚default‘ ist möglicherweise reserviert oder nur ein dummy-Platzhalter. Das weiß ich nicht so genau … Auf jedenfall werden diese Dateien aber ohne Umwege direkt zurückgeliefert.

Die statischen Inhalte legt man einfach unter src/main/webapp/images ab.

2. Stylesheet

Eigene Stylesheets werden mit Vaadin als ‚Theme‘ eingebunden. Hierzu wird in der Main-Klasse folgendes gemacht:

@Override
public void init() {
    [...]
    setTheme("mytheme");
    [...]
}

Vaadin erwartet dann im Verzeichnis src/main/webapp/VAADIN/themes/mytheme/ eine Datei, die ’styles.css‘ heißt. In diese kann man seine CSS-Definitionen hineinpacken. In dieses Verzeichnis kann man dann auch ein weiteres Verzeichnis wie ‚images‘ anlegen und in relativer Form aus dem Stylesheet heraus darauf zugreifen.

Hier ein Beispiel der styles.css

@import "../reindeer/styles.css";
.loginform {
    background-image: url("images/image.png");
}

Es ist wichtig, dass der import an erster Stelle im Stylesheet steht. Dieser importiert die Default-Vaadin-Stylesheets – in diesem Fall, das reindeer-Theme. Das Verzeichnis ‚reindeer‘ muss an dieser Stelle nicht mal vorhanden sein. Später, nach dem Packagen oder beim Debuggen existieren die Stylesheets automatisch.

Das Ganze fügt sich auch wunderbar mit dem maven-Build-Prozess … Mit einem mvn package bekommt man das WAR-File inklusive aller Resourcen 🙂

So, das waren auch schon die größten Hürden. Wenn man es weiß, ist es nicht schlimm, jedoch dauerte das herausfinden auch wieder einige Stunden.