Vaadin się pindrzy

Vaadin jest narzędziem, w którym tworzymy aplikacje z interfejsem opartym o web. Oznacza to, że mamy do dyspozycji całkiem niezły zestaw narzędzi do zarządzania wyglądem aplikacji. Najpotężniejszym z nich jest oczywiście CSS^W.
Tworzenie własnego zestawu stylów w Vaadin jest niestety trochę skomplikowane. Wynika to z faktu, że mamy na „dzień dobry” gotowe bardzo dużo elementów. W dodatku poszczególne elementy UI nie są tym czym się wydają. Na całe szczęście tą ciężką i niewdzięczną pracę może wykonać za nas webmaster 😀

Miej własny styl

Proces tworzenia własnego wyglądu aplikacji nie jest skomplikowany. Po wygenerowaniu projektu za pomocą mavena wystarczy w katalogu src/main/webapp/ umieścić plik VAADIN/themes/*nazwa\_skórki*/styles.csso mniej więcej takiej treści:

Listing 1. Własny styl CSS

@import "../reindeer/styles.css";
/* własne style */
.v-button-caption {
	font-size: 1.2em
}

Importujemy domyślny styl w celu ułatwienia sobie życia. Przecież jeżeli chcemy zmienić krój czcionki w jednym miejscu nie będziemy pisać całego arkusza od nowa.

Nadaj sobie styl

Mamy już gotowy plik css to czas pozwolić użytkownikowi na zmianę stylu. Poniższa aplikacja demonstruje zmianę stylu. Wystarczy, że zastosujesz powyższy plik css.

Listing 2. Aplikacja do zmiany stylu

/*
 * Copyright 2009 IT Mill Ltd.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */
package pl.koziolekweb.blog;

import com.vaadin.Application;
import com.vaadin.ui.Button;
import com.vaadin.ui.Window;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;

/**
 * The Application's "main" class
 */
@SuppressWarnings("serial")
public class MyVaadinApplication extends Application {
	private Window window;

	@Override
	public void init() {
		window = new Window("My Vaadin Application");
		setMainWindow(window);
		Button changeStyleBtn = new Button("Change Style");
		changeStyleBtn.addListener(new ClickListener() {

			public void buttonClick(ClickEvent event) {
				setTheme("koziolek");
			}
		});
		window.addComponent(changeStyleBtn);
	}
}

Gotowe 🙂

Wyjaśnienia

W komentarzach do pierwszego wpisu o Vaadin padło pytanie czy wszystkie zdarzenia są obsługiwane po stronie serwera. Odpowiedź brzmi tak, ale… odsyłany jest specjalny obiekt JSON zawierający informację o zmianie stanu. Zatem ilość odsyłanych nadmiarowych danych jest stosunkowo niewielka. Jedynym wyjątkiem jest zmiana stylu aplikacji gdyż w tym przypadku przeładowywane jest całe okno.