Framework vaadin создание простого проекта средствами maven пример

Обновлено: 06.07.2024

Когда вы разработчик бэкенд, вы будете слышать, как человек, которые не могут создать встроенные в HTML страницы интерфейса и не может использовать боль, вызванную стилем настройки CSS. Так же, как стать разработчиком бэкэнд, он знает ограничений, то есть, мы можем играть и запускать крупномасштабные производства серверные приложения, но вы не можете создать красивую страницу на самом деле отображения данных, управляемых этими серверными приложениями. Если вы столкнулись с теми же идеями, пожалуйста, не волнуйтесь,Vaadinэто здесь.

Использование Vaadin, вы можетеИспользование JavaСоздайтеПередняя часть приложения 。 Она обеспечивает поддержку создания высокозрелых на стороне сервера пользовательского интерфейса, который позволяет нам писать компоненты многократного производства уровня в Java языка. Он поддерживает все популярные среды разработки Java (Затмение Intellij, NetBeans, Maven и т.д. Примеры этого учебника использования IntelliJ). Мы сначала понять фактический принцип работы Vaadin и следуют различные компоненты и схемы, присутствующие в Vaadin. Мы закончим этот курс с отличным образцом применения, который демонстрирует обработку событий и несколько макетов в одном окне. Давайте начнем.

содержание

2. Как Vaadin работает?

В общем, Vaadin очень похож на AWT, Spring и SWT. У нас есть некоторые макеты и компоненты, которые могут быть созданы и обеспечить, и они, наконец, связаны с родительским макетом для отображения контейнера. Фактический примерный способ этих компонентов и схемы отличаются. Компонент Vaadin не является традиционным компонентом Java представлены с использованием макета в зависимости от Java оказания базовой операционной системы, но связь с сервером бэкэнд и автоматически управляет HTML5 / CSS / JavaScript компонентов в рамках и рамой. Давайте представим себе, как Vaadin расположен между двигателем UI фронтального и его собственные компоненты:

На приведенном выше рисунке, очень ясно , что , как Vaadin предотвращает тыловые разработчиков от написания HTML, CSS и компоненты JS, и обеспечивает двигатель VADIN, мы можем разработать сам Java - код на этом движке, а затем передается кадр переводится в HTML-компоненты. сам.

Это клиент Vaadin двигатель (написанный на HTML5 / CSS / JavaScript, Google Web Toolkit) и на стороне сервера Framework, которая управляет UI. Серверный компонент также поддерживает привязку данных в Vaadin, что позволяет легко интегрировать базы данных на компоненты. И, наконец, не думаю, что Vaadin ограничивается Java. С последней версией Vaadin, вы можете написать HTML на основе макета Vaadin, используйте CSS настройки стиля, и использовать код JavaScript сам корректировать поведение. В этом, конечно, мы будем использовать только только Java язык.

3. Vaadin плагин

Поскольку мы понимаем принцип работы Vaadin, мы можем установить нашу машину. Чтобы продолжить изучение этого курса и простой в использовании плагин предоставляется в IDE, можно установить плагин для Eclipse:

Vaadin плагин Затмения

Если вы используете IntelliJ как и я, мы также можем получить IDE плагин:

Vaadin IntelliJ плагин

Плагин не абсолютно необходимо, но это дает возможность использовать систему пользовательского интерфейса на основе 100%, где вы можете использовать готовую систему.

4. Создание проекта

Теперь мы готовы, и, наконец, вы можете использовать Maven для создания проекта для нас. Мы будем создавать приложения, используя прототип Vaadin. Давайте посмотрим на команду здесь:

Это результат, который мы получаем, когда мы создаем проект (мы показываем только интересные части):

Прототип VADIN отвечает за добавление соответствующих зависимостей и другую информацию, необходимую для сборки проектов. В следующем разделе мы будем понимать проект pom.xml Все части файла.

5. Maven зависимость

Проект, который мы создали с помощью прототипа Vaadin отвечает за добавление соответствующих зависимостей в проекте. позволь нам pom.xml Проэкт pom.xml документ. Давайте посмотрим на зависимости, добавленных в файл:

Следующие зависимости были добавлены к проекту:

javax.servlet-api Эта зависимость дает возможность поддерживать сервлеты в нашем проекте для сетевых вызовов
vaadin-server Эта зависимость включает в себя программные пакеты для управления сведением о сервере, например сеансов, связи с клиентами и т.д.).
vaadin-push Эта зависимость не требуется для этого урока, но это все еще очень важно. Когда нам нужно обновить пользовательский интерфейс, основанный на нити, выполняемой на сервере, запрос может быть отправлен с сервера на пользовательский интерфейс, так что пользовательский интерфейс может быть обновлен сразу, а пользовательский интерфейс не должен выдавать запрос сети, чтобы получить статус данных на пользовательском интерфейсе. сервер. Чтобы сделать это, используйте нажимные мешки.
vaadin-client-compiled Эта зависимость основана на GWT и включает в себя пакет для компиляции компоненты клиента.
vaadin-themes Эта зависимость включает в себя некоторые встроенные темы и все утилиты для создания пользовательских тем.

Далее, нам необходимо добавить Vaadin хранилища и управление зависимостями. dependencyManagement Теги помогают управлять всеми зависимостями VADIN:

Наконец, нам нужен плагин Jetty, что позволяет нам работать в командной строке. jetty:run Чтобы легко проверить версию развития.

Это позволяет запускать приложение Vaadin непосредственно из командной строки и предоставить нам встроенный сервер Jetty.

6. Vaadin Servlet

В Vaadin, мы не имеем web.xml файл для настройки планировщика сервлета приложения. Вместо этого мы имеем Vaadin Servlet, который определяет точку входа в приложение через некоторые комментарии:

В приведенном выше применении сервлета, ui Поле ясно сказано MyUI.class Это является основной точкой входа для приложения.

7. Vaadin основной класс

Когда мы используем Vaadin прототип определить приложение, приложение поставляется с базовым набором UI в основном классе приложения, как показано в предыдущем разделе, пользовательский интерфейс также содержит определение Vaadin Servlet. Это предопределено основная точка входа класс UI в нашем приложении:

Этот интерфейс является точкой входа приложения. Пользовательский интерфейс может представлять собой окно браузера (или вкладку), или какую-то часть встроенного Vaadin приложения HTML страницы. использование UIVaadinRequestинициализация. Он разработан, чтобы переопределить этот метод, чтобы добавить компоненты пользовательского интерфейса и инициализации компонентов не-функций.

На самом деле, до сих пор, мы готовы запустить проект, чтобы отобразить макет приложения по умолчанию, сделанный сам VADIN прототип. Выполните следующую команду для запуска проекта:

Доступ к следующей ссылке, чтобы увидеть работу приложения:

Теперь мы можем попробовать приложение:

Запуск образца приложения

8. Менеджер компоновки Vaadin

Пример приложения мы бежим выше, используется VerticalLayout Для того, чтобы расположить элемент пользовательского интерфейса в вертикальном порядке. а также VerticalLayout Точно так же, Vaadin дает нам различные менеджер компоновки для размещения пользовательского интерфейса сборки в разных направлениях. Давайте изучим, что менеджеры

8.1 VerticalLayout

Когда нам нужно укладывать компоненты в одном столбце, первые остатки элементов в нижней части, а остальные элементы отображаются ниже указанных выше компонентов, можно использовать VerticalLayout Договоренность:

Все компоненты, добавленные к этой схеме будут сложены вместе. Обратите внимание, что с каждым компонентом (Компоновка также является компонентом ) Сопутствующие методы, их стиль использует имена, основанные на их свойствах настройки CSS. Это делает имя метода легко догадаться, и более удобным для чтения.

8.2 HorizontalLayout

С волей VerticalLayout Класть VerticalLayout ， HorizontalLayout Поместите компонент в горизонтальном направлении. Давайте посмотрим, как создать экземпляр этого макета:

В примере приложения, просто замените VerticalLayout а также VerticalLayout Как появляются в настоящее время:

Vaadin горизонтальное расположение

8.3 Разметка сетки

Другой макет GridLayout Позволяет нам сделать компонент сетки, которая обеспечивает очень гладкую и последовательный внешний вид нашей страницы рендеринга.

Продолжить и попытаться использовать существующий макет GridLayout Для обработки макета компонента пользовательского интерфейса.

8.4 FormLayout

Наконец, мы можем использовать FormLayout Поместите тег сборки в двух отдельных столбцах, а также может обеспечить дополнительный индикатор для требуемого поля. Может быть создан как:

9. Vaadin ингредиент

В этом разделе мы представим некоторые основные, но наиболее полезные элементы Vaadin пользовательского интерфейса, которые практически используются во всех UIs, используемых для Web.

9,1 этикетки

Label Является компонентом для отображения статического текста, который не изменяется со статусом приложения. Определим путь Label Instance и установите его VerticalLayout Функция:

это Label Внешний вид выглядит следующим образом:

9,2 ссылки

При предоставлении внешнего веб-адреса, Vaadin предоставляет компоненты связь с одной и той же цели:

Это Link Внешний вид:

Vaadin LINK Компоненты

9,3 текстовое поле

TextFields К Label Компоненты и позволяют пользователям обеспечить единую линию ввода TextArea Комбинированные компоненты. Это пример программы, которая показывает значок TextField А встроенные иконки в библиотеке Vaadin:

Это TextField Внешний вид:

Vaadin TextField Компоненты

9.4 TextArea

TextArea Компоненты, как TextField В качестве компонентов, единственное отличие состоит в TextArea Можно указать несколько строк в компонентах. Давайте посмотрим на демонстрацию:

Это TextArea Внешний вид:

компоненты TextArea Vaadin

TextArea Компоненты позволяют ввести большой текст в компоненте и отражают текстовые ограничения, которые должны быть введены.

9.5 DateField и InlineDatefield

В веб-интерфейсе, дата выбора является очень распространенной задачей. Vaadin предоставляет два одинаковых элементов DateField с участием InlineDateField 。 DateField Компоненты отображает выпадающий календарь, можно выбрать одну дату. После выбора даты, InLineDateField Не исчезает. Давайте посмотрим на пример программы:

DateField и InlineDatefield

Это DateField Внешний вид:

Vaadin DateField Компоненты

Это InLineDateField Внешний вид:

Vaadin Инлайн DateField Компоненты

После того, как пользователь выбирает дату, InlineDateField Не исчезает.

9.6 PasswordField

Для того, чтобы принять секретные ключи и пароли в пользовательском интерфейсе, мы можем использовать PasswordField 。 Давайте посмотрим на демонстрацию:

поле для ввода пароля

Это PasswordField Внешний вид:

Vaadin Passwordfield Компоненты

PasswordField Это TextField Это просто, чтобы скрыть текст, который мы вошли среди них.

9,7 кнопка

Для того, чтобы дать пользователям возможность выполнять операции в некоторых случаях (например, представлять формы или подобное содержание), кнопка является лучшим использование компонентов. Давайте посмотрим на пример программы:

Это Button Появление компонента:

компоненты Кнопка Vaadin

Vaadin позволяет сделать несколько типов кнопок, таких как кнопки «опасность» (по умолчанию красный), довольно несколько кнопок, и т.д.

9,8 флажок

Для того чтобы принять несколько значений до значения, мы можем использовать CheckBoxes Это позволяет пользователям устанавливать или отменять их без необходимости полагаться на того, установлен интерфейс. CheckBoxes 。 Давайте посмотрим на пример программы:

Это CheckBox Появление компонента:

Vaadin флажок в сборе

9.9 список

В качестве последнего компонента, это очень общая задача, чтобы отобразить список элементов, содержащих фиксированный элемент. Давайте посмотрим, как это сделать:

Это Lists Появление компонента:

компонент списка Vaadin

Таким образом, мы только создать список, чтобы собрать элементы и отображать его ComboBox В элементе, этот элемент показывает выпадающее меню, содержащее элемент списка.

10. Использование темы Vaadin

Тема Vaadin это лучший способ, чтобы полностью указать приложение к новой теме в таблице стилей, используемой в проекте Vaadin. По умолчанию, Vaadin предоставляет четыре встроенных в темах, мы можем изменить их в любое время. Встроенная темаvalo ， северный олень ， хамелеонс участиемruno 。 Для того, чтобы найти таблицу стилей, пожалуйста, посетите WebContent/themes/declarativeui/declarativeui.scss 。 Мы можем изменить заданное значение темы в конце указанного файла, который изменит тему выбора приложений.

пожалуйста, проверьтекаталог Vaadin Найти практически неограниченное количество, готовую к использованию темы Vaadin, которые могут быть использованы в вашем проекте.

11. Заключение

В этом курсе мы изучили, как создать очень простой, но действительное приложение Vaadin с помощью одной команды Maven. Мы видим, который Maven-зависимые элементы и модули, что спектакль потребность приложений Vaadin. Мы изучили множество компонентов VADIN, обычно используемые в приложении VADIN UI. Для инженеров серверной Java, Vaadin является отличной основой. Он обеспечивает все преимущества , которые разработчики Java могут думать о потому , что она позволяет создавать системы Maven на основе полагаться на управление отношениями. Это очень простой метод , который можно непосредственно использовать услуги Spring непосредственно в самом же пункта, или следовать за дизайн. Режим является сохранение пользовательского интерфейса и сетевого уровня в проекте полностью разделен.

В будущем Vaadin конечно, мы узнаем, как динамизации приложение Vaadin путем добавления работы бэкэнд приложения. Например,Spring BootПриложение обеспечивает динамическое содержимое из базы данных в приложение.

Когда вы бэкэнд-разработчик, вы понимаете, какая боль возникает, когда вы слышите, как люди говорят, что вы не можете создавать страницы пользовательского интерфейса, встроенные в HTML, и не можете стилизовать их в CSS. Это похоже на то, что у бэкэнд-разработчика есть свои известные ограничения: мы можем играть и запускать большие производственные бэкенд-приложения, но не можем создавать красивые страницы, на которых фактически отображаются данные, управляемые этими бэкэнд-приложениями. Если одна и та же идея преследовала тебя, не волнуйся, Ваадин здесь.

С Vaadin можно создавать интерфейс ваших приложений исключительно на Java . Он обеспечивает высокоразвитую поддержку создания пользовательского интерфейса на стороне сервера, что позволяет нам создавать компоненты многоразового использования промышленного уровня на языке Java. Он поставляется с поддержкой всех популярных сред разработки Java (Eclipse, IntelliJ, NetBeans, Maven и т. Д .; в этом руководстве используются IntelliJ). Мы начнем с понимания того, как на самом деле работает Ваадин, и рассмотрим различные компоненты и схемы, которые существуют в Ваадине. Мы закончим урок отличным примером приложения, которое демонстрирует обработку событий и несколько макетов в одном представлении. Давайте начнем.

Содержание

2. Как работает Ваадин?

Вообще говоря, Ваадин очень похож на AWT, Spring и SWT. У нас есть несколько макетов и компонентов, для которых мы создаем и предоставляем наши данные, и, наконец, связываем их вместе в родительском макете для отображения контейнера. Разница возникает в том, как эти компоненты и макеты действительно отображаются. Вместо традиционных компонентов, визуализируемых с использованием Java, расположение которых зависит от базовой операционной системы, компоненты Vaadin представляют собой компоненты HTML5 / CSS / JavaScript, которые через Ajax взаимодействуют с внутренним сервером и управляются средой автоматически. Давайте представим, как Vaadin расположен между интерфейсными модулями интерфейса и его собственными компонентами:

На рисунке выше очень ясно, как Vaadin защищает бэкэнд-разработчиков от написания компонентов на основе HTML, CSS и JS и предоставляет механизм Vaadin, где мы можем работать над самим кодом Java для компонентов пользовательского интерфейса, которые впоследствии могут быть преобразованы в компоненты HTML с помощью платформы сам.

Это клиентский движок Vaadin (написанный на HTML5 / CSS / JavaScript и основанный на Google Web Toolkit) и серверная структура, которые управляют пользовательским интерфейсом для нас. Серверные компоненты также поддерживают привязку данных в Vaadin, что упрощает интеграцию базы данных в компоненты. Наконец, не думайте, что Vaadin ограничивается только Java. В новейших версиях Vaadin также можно писать макет Vaadin на основе HTML, стилизовать его с помощью CSS и настраивать поведение с помощью самого Javascript. В этом уроке мы ограничимся использованием только языка Java.

3. Vaadin Плагины

Теперь, когда мы понимаем, как работает Vaadin, мы готовы настроить нашу машину для ее разработки. Для продолжения урока и простых в использовании плагинов, доступных прямо в вашей IDE, мы можем установить плагин Eclipse как:

Vaadin Eclipse Plugin

Если вы используете IntelliJ (как и я), мы также можем получить плагин для IDE:

Vaadin IntelliJ Плагин

Плагин не является абсолютно необходимым, но он открывает возможность работы с системой на 100% UI, где вы можете работать с системами WYSIWYG.

4. Создание проекта

Теперь, когда мы готовы ко всему, мы наконец можем использовать Maven для создания проекта для нас. Мы будем использовать архетип Vaadin для создания приложения. Давайте посмотрим на команду в действии здесь:

mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-application -DarchetypeVersion=LATEST -DgroupId=com.javacodegeeks.example -DartifactId=JCG-Vaadin-Example -Dversion=1.0 -Dpackaging=jar

Вот что мы получаем, когда создаем проект (мы показываем только интересные части):

[INFO] >>> maven-archetype-plugin:3.0.1:generate (default-cli) > generate-sources @ standalone-pom >>> [INFO] <<< maven-archetype-plugin:3.0.1:generate (default-cli) < generate-sources @ standalone-pom <<< [INFO] --- maven-archetype-plugin:3.0.1:generate (default-cli) @ standalone-pom --- [INFO] Archetype repository not defined. Using the one from [com.vaadin:vaadin-archetype-application:8.4.1] found in catalog remote [INFO] Using property: groupId = com.javacodegeeks.example [INFO] Using property: package = com.javacodegeeks.example [INFO] Using following parameters for creating project from Archetype: vaadin-archetype-application:LATEST [INFO] Parameter: groupId, Value: com.javacodegeeks.example [INFO] Parameter: package, Value: com.javacodegeeks.example [INFO] Parameter: packageInPathFormat, Value: com /javacodegeeks/example [INFO] Parameter: package, Value: com.javacodegeeks.example [INFO] Parameter: groupId, Value: com.javacodegeeks.example [INFO] Project created from Archetype in dir : /Users/shubham/JCG-Vaadin-Example

Vaadin archtype заботится о добавлении соответствующих зависимостей в наш проект вместе со всей другой информацией, необходимой для создания проекта. В следующем разделе мы pom.xml все части, которые были в файле pom.xml проекта.

5. Maven Зависимости

Проект, который мы создали с использованием архетипа Vaadin, заботится о добавлении соответствующих зависимостей в наш проект. Давайте взглянем на файл проекта pom.xml по частям. Давайте начнем с рассмотрения зависимостей, которые были добавлены в файл:

В проект были добавлены следующие зависимости:

Далее нам также нужно добавить репозиторий Vaadin и управление зависимостями. Тег dependencyManagement помогает управлять версией всех зависимостей Vaadin:

Наконец, нам нужен плагин Jetty, который позволяет нам легко протестировать сборку разработки, запустив jetty:run из командной строки.

Это позволяет нам запускать приложение Vaadin непосредственно из командной строки и предоставляет нам встроенный сервер Jetty.

6. Ваадин Сервлет

В Vaadin у нас нет файла web.xml для настройки сервлета диспетчера для приложения. Вместо этого у нас есть Vaadin Servlet, который с помощью некоторых аннотаций определяет точку входа приложения:

@WebServlet (urlPatterns = "/*" , name = "MyUIServlet" , asyncSupported = true ) @VaadinServletConfiguration (ui = MyUI. class , productionMode = false ) public static class MyUIServlet extends VaadinServlet < >

В приведенном выше приложении сервлета в поле пользовательского ui четко MyUI.class что MyUI.class является основной точкой входа для указанного приложения.

7. Ваадин Главный Класс

Поскольку мы определили наше приложение с использованием архетипа Vaadin, приложение поставляется с базовым пользовательским интерфейсом, уже настроенным в основном классе приложения, который, как показано в предыдущем разделе, также содержит определение для сервлета Vaadin. Вот основной интерфейс точки входа, предопределенный в нашем приложении:

import com.vaadin.annotations.VaadinServletConfiguration; private static final long serialVersionUID = 7132834690301152714L; layout.addComponent( new Label( "Thanks " + name.getValue() @WebServlet (urlPatterns = "/*" , name = "MyUIServlet" , asyncSupported = true ) @VaadinServletConfiguration (ui = MyUI. class , productionMode = false ) public static class MyUIServlet extends VaadinServlet <

Этот интерфейс является точкой входа в приложение. Пользовательский интерфейс может представлять собой окно браузера (или вкладку) или некоторую часть страницы HTML, в которую встроено приложение Vaadin. Пользовательский интерфейс инициализируется с помощью VaadinRequest . Этот метод предназначен для переопределения для добавления компонента в пользовательский интерфейс и инициализации некомпонентных функций.

На самом деле, мы готовы запустить проект на данный момент, чтобы показать макет приложения по умолчанию, созданный самим архетипом Vaadin. Запустите следующую команду для запуска проекта:

Посетите следующий URL, чтобы увидеть приложение работает:

URL, чтобы открыть

Мы можем попробовать приложение сейчас:

Запуск примера приложения

8. Vaadin Layout Managers

Образец приложения, которое мы запускали выше, использовал VerticalLayout для VerticalLayout компоновки элементов пользовательского интерфейса. Подобно VerticalLayout , Vaadin предоставляет нам различных менеджеров по расположению для размещения компонентов пользовательского интерфейса в разных направлениях. Давайте рассмотрим, что менеджеры