О фреймворке Vaadin я знаю уже давно и даже начинал его изучать, но отсутствие возможности использовать его на практике не давало возможности серьёзно углубиться в это направление. Но в последнее время рекламные материалы Vaadin встречаются в сети буквально везде: в твиттере, в ютюбе и даже в рекламном баннере у меня в блоге. Так что я решил в свободное время попробовать поработать с этим фреймворком.
О фреймворке
Vaadin (приблизительный перевод с финского — самка оленя) — java-фреймворк для разработки RIA-веб-приложений. Для отображения компонентов веб-приложения используется Google Web Toolkit. Главная особенность данного фреймворка заключается в том, что интерфейс веб-приложения можно описывать при помощи java-кода, как это делается при разработке стандартных настольных приложений с AWT/Swing или JavaFX. В мире Java ближайшими аналогами являются Apache Wicket и JSF в связке с PrimeFacess, но они, на мой взгляд, не дотягивают до возможностей Vaadin. Ещё одним достоинством этого фреймворка лично я считаю простоту интеграции как с Java EE, так и со Spring Framework.
Vaadin поставляется с большим количеством компонентов, список которых расширяется силами сообщества, имееет готовое оформление (тема Valo), а так же может интегрироваться с Google Polymer, что позволяет не заострять внимание на внешнем виде интерфейса и сосредоточиться на написании логики приложения. В целом Vaadin идеально подходит для тех случаев, когда нужно разработать веб-приложение, но по какой-то причине нет возможности разрабатывать веб-интерфейс на стандартной связке из Rest-сервисов и HTML5-интерфейса с использованием JavaScript-фреймворков вроде AngularJS или ExtJS.
Начало разработки
В стандартном примере создания нового веб-приложения на основе Vaadin используется архетип vaadin-archetype-application из com.vaadin. При помощи Maven проект создаётся следующим образом:
|
1 |
mvn -B archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-application -DarchetypeVersion=7.6.6 -DgroupId=org.test -DartifactId=vaadin-app -Dversion=1.0-SNAPSHOT |
Выполнение этой команды создаст директорию vaadin-app со стандартной заготовкой веб-приложения. После этого можно при помощи Maven собрать проект и запустить:
|
1 2 |
cd vaadin-app mvn package jetty:run |
Эта команда запустит встроенный jetty-сервер на порте 8080, в чём можно убедиться, открыв адрес localhost:8080 в браузере:
Так же в директории vaadin-app/target окажется собранный war-файл, который можно развернуть в сервлет-контейнере.
Структура проекта
Среди сгенерированных файлов нас интересует java-файл, содержащий класс MyUI:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
package org.test; import javax.servlet.annotation.WebServlet; import com.vaadin.annotations.Theme; import com.vaadin.annotations.VaadinServletConfiguration; import com.vaadin.annotations.Widgetset; import com.vaadin.server.VaadinRequest; import com.vaadin.server.VaadinServlet; import com.vaadin.ui.Button; import com.vaadin.ui.Label; import com.vaadin.ui.TextField; import com.vaadin.ui.UI; import com.vaadin.ui.VerticalLayout; /** * This UI is the application entry point. A UI may either represent a browser window * (or tab) or some part of a html page where a Vaadin application is embedded. * <p> * The UI is initialized using {@link #init(VaadinRequest)}. This method is intended to be * overridden to add component to the user interface and initialize non-component functionality. */ @Theme("mytheme") @Widgetset("org.test.MyAppWidgetset") public class MyUI extends UI { @Override protected void init(VaadinRequest vaadinRequest) { final VerticalLayout layout = new VerticalLayout();// Создадим вертикальный лейаут final TextField name = new TextField();// Создадим текстовое поле для ввода имени name.setCaption("Type your name here:"); Button button = new Button("Click Me");// Создадим кнопку button.addClickListener( e -> {// Добавим коллбек на нажатие кнопки layout.addComponent(new Label("Thanks " + name.getValue() // Выведем приветствие в лейаут + ", it works!")); }); layout.addComponents(name, button);// Добавим поле ввода имени и кнопку в лейаут layout.setMargin(true);// Добавим внешние отступы лейауту layout.setSpacing(true);// Добавим отступы между компонентами лейаута setContent(layout);// Сделаем содержимым интерфейса созданный лейаут } @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true) @VaadinServletConfiguration(ui = MyUI.class, productionMode = false) public static class MyUIServlet extends VaadinServlet { } } |
Главным классом в описании пользовательского интерфейса является UI и его наследники, в данном случае MyUI. UI-классы могут описывать весь интерфейс, отображаемый на веб-странице, либо его отдельные компоненты. После создания экземпляра UI-класса вызывается метод init, в котором описываются компоненты интерфейса, как это показано в созданном файле.
Аннотация @Theme указывает используемую тему; в данном случае это mytheme, которая расширяет valo. Файлы, относящиеся к оформлению можно найти в директории vaadin-app/src/main/webapp/VAADIN/themes/mytheme.
Аннотация @Widgetset указывает используемый набор виджетов. Описание набора виджетов можно найти в vaadin-app/src/main/resources/org/test. Текущий набор виджетов расширяет стандартный com.vaadin.DefaultWidgetSet.
Аннотация @VaadinServletConfiguration на классе-сервлете позволяет сконфигурировать приложение, в частности указать основной для сервлета UI-класс, а так же набор виджетов.
Советую ознакомиться с официальной документацией Vaadin. Документация удобная и очень информативная. В следующем посте я опишу принцип работы веб-приложения, основанном на Vaadin, и продемонстрирую использование компонентов интерфейса.