Rozdział 2

1Generowanie i konfiguracja aplikacji.................................................................................................1

2Struktura aplikacji..............................................................................................................................1
3Uruchomienie aplikacji .....................................................................................................................3
4Podsumowanie ...................................................................................................................................5

W tym rozdziale przyjrzymy się podstawowym elementom aplikacji Vaadin. Przygotujemy

środowisko do dalszej pracy oraz skonfigurujemy IDE.

1 Generowanie i konfiguracja aplikacji

W poprzednim rozdziale omówiłem instalację Vaadin oraz podstawową konfigurację w różnych

środowiskach. Celowo skróciłem informacje dotyczące współpracy z Apache Maven ponieważ w
tym rozdziale zostanie ona dokładnie omówiona.
Na początek wygenerujmy projekt za pomocą Mavena:
mvn archetype:generate -DarchetypeGroupId=com.vaadin
-DarchetypeArtifactId=vaadin-archetype-clean -DarchetypeVersion=LATEST
-DgroupId=twoj.pakiet -DartifactId=twoj-projekt -Dversion=1.0
-Dpackaging=war

Listing 1: Tworzenie aplikacji Vaadin za pomocą Maven

Istnieją trzy różne archetypy projektów Vaadin. Pierwszy, który jest na listingu 1 to vaadin-
archetype-clean, za pomocą którego można stworzyć pusty projekt. Nie będzie on zawierał
żadnych dodatkowych elementów ponad klasę MyVaadinAppliaction i podstawową konfigurację.
Drugi to vaadin-archetype-sample, który zawiera kod przykładowego widgetu GWT
zintegrowanego z Vaadin. Jest to dość rozbudowany przykład w porównaniu z wygenerowanym za
pomocą trzeciego z archetypów vaadin-archetype-widgetset.
Po wygenerowaniu projektu podepnij go do wybranego IDE. Ja będę używał Eclipse, ale nie ma to
większego znaczenia ponieważ i tak linia poleceń będzie intensywnie używana.
Teraz należy dokonać dodatkowej konfiguracji projektu. Będzie ona obejmować na obecnym etapie
tylko wsparcie dla testów jednostkowych. Kolejne elementy konfiguracji będziemy dodawać w
miarę potrzeb1. Do listy zależności, sekcja dependencies w pliku pom.xml, dołączymy
zależności do TestNG2 i Mockito3. Pierwszy z nich to framework testów jednostkowych, a drugi to
narzędzie do tworzenia zaślepek(ang. stub) i imitacji(ang. Mock). Następnie trzeba skonfigurować
wtyczkę , sekcja plugins, Surefire tak by uruchamiała testy TestNG. Na koniec należy stworzyć
folder src/test/resources, a w nim plik testng.xml.

2 Struktura aplikacji
Przyjrzyjmy się teraz strukturze naszej aplikacji. Vaadin nadal pozostaje frameworkiem webowym
zatem wygenerowany został plik web.xml, w którym znajduje się konfiguracja aplikacji. Ważną
informacją jest ta, że Vaadin do uruchomienia wymaga tylko kontenera serwletów takiego jak
1 Pełna konfiguracja projektu w postaci listingu pliku pom.xml znajduje się w dodatku 1.
2 http://testng.org
3 http://mockito.org
Tomcat czy Jetty. Nie musimy wykorzystywać całego serwera JEE. Co więcej ponieważ aplikacje
Vaadin nie są typowymi aplikacjami EE to użycie wielu elementów specyfikacji EE jest po prostu
trudne bez dokonania odpowiednich zmian w strukturze aplikacji.
Na listingu 2 znajduje się wynik działania polecenia tree. Jak widać struktura projektu jest
standardowa dla aplikacji webowej tworzonej przy użyciu Mavena.

.
├── pom.xml
├── src
│ ├── main
│ │ ├── java
│ │ │ └── pl
│ │ │ └── koziolekweb
│ │ │ └── v_j_v
│ │ │ └── MyVaadinApplication.java
│ │ ├── resources
│ │ └── webapp
│ │ ├── META-INF
│ │ │ ├── context.xml
│ │ │ └── MANIFEST.MF
│ │ └── WEB-INF
│ │ └── web.xml
│ └── test
│ ├── java
│ └── resources
└── target
├── classes
└── test-classes

Listing 2: Wynik działania polecenia tree

Przyjrzyjmy się zatem plikowi web.xml. Na listingu 3 znajduje się zawartość tego pliku. Jest on
stosunkowo prosty. Nie znajdziesz w nim skomplikowanych mapowań ani długiej listy filtrów i czy
listenerów. Na obecnym etapie są to zbędne elementy, a jak później się przekonamy to nawet duże
zmiany w architekturze nie będą pociągały za sobą dużych zmian w pliku.
Parametr productionMode służy do zarządzania kilkoma elementami. Po pierwsze jeżeli jest
ustawiony na false to oznacza, że aplikacja pracuje w trybie deweloperskim w sposób
analogiczny do dev-mode znanego z GWT. Po drugie aplikacja w tym trybie trochę inaczej
zarządza swoim stanem. Wynika to z założenia, że programista może chcieć podpiąć się
debuggerem do aplikacji. Dodatkowo zostają aktywowane funkcjonalności związane ze śledzeniem
stanu aplikacji, debugowaniem interfejsu użytkownika oraz wsparciem dla wtyczki Firebug
4
w przeglądarce Mozilla Firefox5.
Po uruchomieniu aplikacji wszystkie żądania zostaną skierowane do serwletu
ApplicationServlet,który jest rozszerzeniem standardowego HttpServlet (pośrednio
przez AbstractApplicationServlet). Nie jest to jednak zwykłe rozszerzenie tej klasy. Ze
względu na specyficzną architekturę obsługa wszystkich żądań po stronie serwera jest stosunkowo
rozbudowana. Szczegóły opiszę w rozdziale 3.
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5">
<display-name>Vaadin Web Application</display-name>
<context-param>
<description>Vaadin production mode</description>
<param-name>productionMode</param-name>
<param-value>false</param-value>
</context-param>
<servlet>
<servlet-name>Vaadin Application Servlet</servlet-name>
<servlet-
class>com.vaadin.terminal.gwt.server.ApplicationServlet</servlet-class>
<init-param>
<description>Vaadin application class to start</description>
<param-name>application</param-name>
<param-
value>pl.koziolekweb.v_j_v.MyVaadinApplication</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>Vaadin Application Servlet</servlet-name>
<url-pattern>/*</url-pattern>
</servlet-mapping>
</web-app>

Listing 3: Zawartość pliku web.xml

Parametr application służy do określenia klasy głównej aplikacji. Klasa ta spełnia rolę
analogiczną jak klasy z metodą public static void main w aplikacjach desktopowych czy
klasy rozszerzające (J)Applet w apletach.
Jak zatem łatwo zauważyć konfiguracja Vaadin nie jest skomplikowana. Co ważne stworzenie
własnej klasy rozszerzającej jeżeli chcemy np. dodać obsługę Spring nie jest skomplikowane.

3 Uruchomienie aplikacji
Uruchommy teraz aplikację wygenerowaną przez mavena. Na listingu 4 przedstawione jest
polecenie kompilujące projekt i uruchamiające serwer.

V-J-V$ mvn clean compile package jetty:run

Listing 4: Polecenie kompilujące projekt i uruchamiające serwer Jetty

Jeżeli przejdziemy do przeglądarki i połączymy się z adresem http://localhost:8080/
{artifactId}, gdzie {artifactId} to nazwa z pliku pom.xml to zobaczymy obrazek taki
4 http://getfirebug.com/
5 http://www.mozilla.com/pl/firefox/
sam jak na rysunku 1.

Rysunek 1: Okno aplikacji wygenerowanej w mavenie

Przyjrzyjmy się jeszcze przez chwilę zawartości konsoli. Na listingu 5 przedstawiono jej zawartość.

[INFO] Started Jetty Server

2011-03-02 19:47:30 com.vaadin.terminal.gwt.server.AbstractApplicationServlet
checkProductionMode
WARNING:
=================================================================
Vaadin is running in DEBUG MODE.
Add productionMode=true to web.xml to disable debug features.
To show debug window, add ?debug to your application URL.
=================================================================

Listing 5: Zawartość konsoli po uruchomieniu aplikacji

Wpis ten został dokonany przez serwlet obsługujący żądanie i oznacza, że aplikacja pracuje w
trybie deweloperskim. Jeżeli klikniemy na przycisk w aplikacji to pojawi się komunikat „Thank you
for clicking”, ale w logu nie zostanie dokonany żaden nowy wpis.
4 Podsumowanie
W tym rozdziale uruchomiliśmy przykładowy projekt Vaadin oraz skonfigurowaliśmy go w IDE. W
następnym rozdziale stworzymy prostą aplikację web oraz poznamy komponenty Vaadin.