Начало разработки с Vaadin

О фреймворке 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 проект создаётся следующим образом:

Выполнение этой команды создаст директорию vaadin-app со стандартной заготовкой веб-приложения. После этого можно при помощи Maven собрать проект и запустить:

Эта команда запустит встроенный jetty-сервер на порте 8080, в чём можно убедиться, открыв адрес localhost:8080 в браузере:

vaadin-stub

Так же в директории vaadin-app/target окажется собранный war-файл, который можно развернуть в сервлет-контейнере.

Структура проекта

Среди сгенерированных файлов нас интересует java-файл, содержащий класс MyUI:

Главным классом в описании пользовательского интерфейса является 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, и продемонстрирую использование компонентов интерфейса.

  • Евгений

    «При помощи Maven проект создаётся следующим образом:», а вот каким образом к сожалению не написано. Очень интересная статья. Спасибо за труд, только начинаю постигать мир Spring’a, и Ваш сайт в этом очень помогает

    • Александр

      Устранил проблемы с отображением примеров кода, сейчас должно быть видно