Własne układy w Vaadin

Krótka przerwa od Guavy i przesiadka na Vaadin. Dziś o własnych szablonach układów.

Problem wyglądu

Często gęsto jest tak, że chcąc uzyskać jakiś konkretny układ graficzny dla bardziej skomplikowanych komponentów graficznych tworzymy własne komponenty. Własne komponenty składamy w bardziej skomplikowane by finalnie uzyskać pożądany efekt.
Doskonałym przykładem tego typu sytuacji są wszystkie aplikacje zarówno webowe jak i desktopowe. Sam też niejednokrotnie na forum 4programmers pisałem, że „jak nie potrafisz ułożyć skomplikowanego layout podziel go na mniejsze i spróbuj znowu”. Jest to oczywiście kolejne zastosowanie metody „dziel i zwyciężaj” lecz w przypadku Vaadin niesie ona duże niebezpieczeństwo.

Problem spotykany jest też w Swingu – spadek wydajności przy renderowaniu okien. Rzecz oczywiście rozbija się o to jak wiele dodatkowej pracy związanej z wyliczaniem pozycji komponentów ma aplikacja. Co więcej, jest to robione „pod spodem” i tym samym ma magiczną zdolność do bycia ignorowanym.

W przypadku Vaadin niepisana zasada mówi, żeby nie zagnieżdżać więcej niż trzy LayoutManagery. Pierwszym będzie zatem główny układ aplikacji. Drugim układ okna, trzecim układ komponentu… i zaczyna być ciasno w przypadku skomplikowanych komponentów.

Jak to ogarnąć?

Paradoksalnie najprościej ten problem rozwiązać stosując stary dobry CSS w połączeniu z klasami rozszerzającymi CustomLayout. Layout ten to nic innego jak swoisty „trik” pozwalający na wykorzystanie szablonów napisanych w czystym html-u jako layoutów w Vaadin.

Część HTML + CSS

W trakcie generowania aplikacji za pomocą mavena możemy podać nazwę wykorzystywanej skórki (theme). Podajemy coś tam, coś tam i teraz w src/main/webapp/VAADIN/themes/ mamy katalog o nazwie jaką podaliśmy. W nim są obecnie tylko pliki css i scss, ze stylami naszej aplikacji. Tworzymy zatem tu katalog layouts, a w nim plik MyCustomLayout.html.

Listing 1. Plik MyCustomLayout.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<nav location="button" id="button-box"></nav>
<div location="label" id="label-box"></div>
</body>
</html>

Jak widać jest to zwykły, „goły” plik html. Jedyna różnica w stosunku do innych plików tego typu polega na dodatkowych atrybucie location w elementach, które mają być miejscami „wstrzyknięć” komponentów Vaadin. Następnie w pliku styles.css konfigurujemy nasz układ:

Listing 2. konfiguracja układu w styles.css

#button-box{
    border: 1px solid #afafff;
    height: 4em;
    width: 12em;
}
#label-box{
    border: 1px solid #afafff;
    height: 4em;
    width: 12em;
    font-family: garamond;
}

Tyle. Oczywiście można to dowolnie rozbudowywać, przekształcać i dostosowywać do potrzeb. Co więcej jeżeli zastosujemy taki układ jako główny dla aplikacji możemy dodać statyczne grafiki tak jak w HTMLu.

Część javowa

Tu sprawa troszkę się komplikuje jeżeli chcemy sobie ułatwić życie w przyszłości. Po pierwsze musimy przygotować klasę reprezentującą nasz nowy układ:

Listing 3. Klasa MyCustomLayout

public class MyCustomLayout extends CustomLayout {

	private final static String NAME = "MyCustomLayout";

	public MyCustomLayout() {
		super(NAME);
	}

	public void addComponent(Component c, Placeholders p) {
		addComponent(c, p.placeholder);
	}
//...
}

Pole NAME po przekazaniu do konstruktora klasy nadrzędnej będzie traktowane jako nazwa pliku przy czym nie należy dodawać sufiksu .html, bo się zjebie.

Kolejnym elementem jest enum Placeholders:

Listing 4. Enum Placeholders

public class MyCustomLayout extends CustomLayout {
//...
	public static enum Placeholders {
		BUTTON("button"),
		LABEL("label");
		private final String placeholder;

		Placeholders(String label) {
			this.placeholder = label;
		}
	}
}

Który będzie sobie siedział w naszym layoucie. Dlaczego tak? Ponieważ możemy popełnić literówkę w nazwie punku „wstrzyknięcia”. Łatwiej poprawić ją w jednym miejscu niż w wielu.

La grande finale

Czas to wszystko złożyć do kupy w postaci naszej aplikacji testowej. Przerobiłem po prostu wygenerowany kod na taki:

Listing 5. Aplikacja testowa

@Theme("mytheme")
@SuppressWarnings("serial")
public class MyVaadinUI extends UI {

	@Override
	protected void init(VaadinRequest request) {
		final MyCustomLayout layout = new MyCustomLayout();
		setContent(layout);

		Button button = new Button("Click Me");
		button.addClickListener(new Button.ClickListener() {
			public void buttonClick(ClickEvent event) {
				layout.addComponent(new Label("Thank you for clicking"), LABEL);
			}
		});
		layout.addComponent(button, BUTTON);
	}

	@WebServlet(value = "/*", asyncSupported = true)
	@VaadinServletConfiguration(productionMode = false, ui = MyVaadinUI.class)
	public static class Servlet extends VaadinServlet {
	}

}

Śmiga całkiem miło.

2 myśli na temat “Własne układy w Vaadin

  1. Swego czasu popełniłem kupę kodu w Vadinie dla pewnego banku w P.
    Z perspektywy czasu widzę, że prościej i fajniej byłoby to zrobić w AngularJs. Polecam. Gwt i pochodne to ślepy zaułek. Szkoda czasu i nerwow. Tak samo jak JSP i JSF.

Napisz odpowiedź

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax