Vaadin TODO за 30 минут

Fullstack веб-приложение за 30 минут? Звучит интересно. Учитывая что при этом без использования css и js можно получить годный дизайн и нормальную адаптивную верстку!

Vaadin 8

Вообще с самим Vaadin я уже работал, он отлично подходит для написания админок, корпоративных не сильно нагруженных АРМов, позволяя создать фронт на native-java.

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

Поддерживает хорошую интеграцию с spring-boot, что позволяет избежать настроек томката и реально за 5 минут получить работающий скилет.

TODO application

Предлагаю рассмотреть создание маленького веб-приложения — TODO (списка дел).

Для начала очень удобно и быстро собрать скелет помогает Spring Initializr

На скриншоте я показал нужные нам компоненты для нашего проекта: Web, Vaadin, JPA и Н2 (в качесте бд).

Нажимаем Generate и скачиваем готовый maven проект с нужными нам зависимостями. Остается только импортировать его в любимую IDE (у меня это IDEA).

После начинается магия :)

Главное UI

Создадим класс TodoUI на который повесим аннотацию @SpringUI, этим дадим знать spring`у что это наш главный UI приложения.

В перегруженный метод init() добавим методы инициализации наших нашего интерфейса, root — это главный layout, он может быть только один и задается методом setContent()

Теперь по порядку:

  1. Создадим root, зададим выравнивание
  2. Добавим хидер. Сразу зададим стиль
  3. Создадим форму.
  4. Добавим список самих задач. Он подключается через @Autowired спрингом
  5. Кнопку удаления выполненных задач. С логикой удаления и проверки на «ничего не выбрано»

Entry & JPA

Сама сущность весьма проста. Опускаю конструкторы и set/get методы

И настоящая магия Jpa и Spring-data — репозиторий!

Да, достаточно просто создать интерфейс, написать метод и все дальше произойдет само. По имени метода будет сгенерирован запрос к базе. Черт, это реально круто! Никакого SQL :)

Layout для отдельной задачи

В простейшим случае нам нужно иметь CheckBox + TextField. Добавим эти 2 объекта на layout, зададим стиль.

Самое интересное тут — Vaadin Binder. Он позволяет связать jpa сущность с UI. Для этого нам нужно соответствие полей entity и layout класса.

Список всех задач

И последний класс — список всех задач. Он будет содержать все TodoItemLayout и работать с TodoRepository.

Тут важно не забыть обновлять компонент при изменениях и инициализации

Не забудем про интерфейс

Наполнение БД

В resources создадим файл data.sql, в котором напишем команды для создания и наполнения таблицы

Запуск

Все готово. Собираем и запускаем проект:

mvn package spring-boot:run

После можно проверить работу по адресу localhost:8080, если порт уже занят, открываем application.properties и прописываем

server.port=8081

Готово!

На подлесок идеи того, что еще можно прикрутить:

  • Заменить удаление на «сохранение в выполненные»
  • Добавить приоритет
  • Настроить персистентность БД
  • Добавить поддержку пользователей
  • Сделать конкурента Wunderlist :)

Github: https://github.com/sboychenko/vaadin-todo


10 Комментариев

Добавьте свой →

  1. Скажите, уважаемый!
    Подскажите, а как можно подцепить сторонний REST API, который реализован например на Ratcpack?

  2. У вас шаринг plus.google.com не работает

  3. Сергей, огромное спасибо за материал. Пытаюсь сейчас переделать Ваш код. Мне нужно, чтобы страничка выводила таблицу, в которую какой-то метод какого-то класса…. не важной какой, пусть это будет просто набор заданных строк… в общем чтобы этот метод выкидывал в табличку данные и чтобы я мог этот метод вызвать по нажатию кнопки Update на странице. То есть проще говоря мне нужна табличка с кнопкой ее обновления. Как это реализовать? может вам попадались примеры кода?

    • У ваадина есть sampler, где много примеров с кодом.
      https://demo.vaadin.com/sampler/#ui/grids-and-trees/grid/features — вот таблица
      Так же есть хорошая документация на сайте https://vaadin.com/docs/v8/framework/components/components-grid.html вот про таблицы.

      По сути, нужно просто добавить таблицу и кнопку в UI, на кнопку повесить listener, который будет обновлять данные. Если нужно автоматическая перерисовка таблицы по событию в бекенде смотрите в сторону vaadin push.

      • Сергей, огромное Вам спасибо. В принципе, у меня даже получилось полностью сделать, что я хочу. Табличка уже висит. Код забрал у них:

        private void addTable() {

        List people = Arrays.asList(
        new Person(«Nic», 1543),
        new Person(«Nic», 1544));

        VerticalLayout tableLayout = new VerticalLayout();

        Grid grid = new Grid);
        grid.setItems(people);
        grid.addColumn(Person::getName).setCaption(«Name»);
        tableLayout.addComponent(grid);
        root.addComponent(tableLayout);
        }

        Что не пойму: сейчас данные в табличку по сути попадают при инициализации внутри private void addTable. А как подвесить этот код в листенер? На сколько я могу предположить — надо городить отдельный метод у кого-то, который я потом подпихну туда? (заранее сорри за глупые вопросы)

Добавить комментарий