Рубрики
Без рубрики

Пример приложения с весенней загрузкой и Vaadin

Создайте пример приложения CRUD с помощью Spring и Vaadin.

Автор оригинала: Ganesh Pagade.

Пример приложения с весенней загрузкой и Vaadin

1. Обзор

Ваадин является сервер стороне Java рамки для создания веб-интерфейсов пользователей .

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

2. Настройка

Начнем с добавления зависимостей Maven в стандартное приложение Spring Boot:


    com.vaadin
    vaadin-spring-boot-starter

Ваадин также является признанной зависимостью от Весенний инициализатор .

В этом учебнике используется более новая версия Vaadin, чем по умолчанию, принесенная стартовым модулем. Чтобы использовать новую версию, просто определите Vaadin Билль материалов (BOM) как это:


    
        
            com.vaadin
            vaadin-bom
            10.0.11
            pom
            import
        
    

3. Служба бэкэнда

Мы будем использовать Сотрудник сущность с первоеимя и последнееимя свойства для выполнения операций CRUD на нем:

@Entity
public class Employee {

    @Id
    @GeneratedValue
    private Long id;

    private String firstName;
    private String lastName;
}

Вот простой, соответствующий репозиторий весенних данных – для управления операциями CRUD:

public interface EmployeeRepository extends JpaRepository {
    List findByLastNameStartsWithIgnoreCase(String lastName);
}

Мы объявляем метод запроса findByLastNameStartsWithIgnoreCase на СотрудникРеспозиторий интерфейс. Он вернет список Сотрудник s соответствие последнееимя .

Давайте также предварительно заполнить DB с несколькими образцами Сотрудник секунда:

@Bean
public CommandLineRunner loadData(EmployeeRepository repository) {
    return (args) -> {
        repository.save(new Employee("Bill", "Gates"));
        repository.save(new Employee("Mark", "Zuckerberg"));
        repository.save(new Employee("Sundar", "Pichai"));
        repository.save(new Employee("Jeff", "Bezos"));
    };
}

4. Пользовательский интерфейс Vaadin

4.1. Класс MainView

ГлавнаяВью класс является точкой входа для логики пользовательского интерфейса Vaadin. Аннотация @Route говорит Весенняя загрузка, чтобы автоматически забрать его и показать в корне веб-приложения:

@Route
public class MainView extends VerticalLayout {
    private EmployeeRepository employeeRepository;
    private EmployeeEditor editor;
    Grid grid;
    TextField filter;
    private Button addNewBtn;
}

Мы можем настроить URL, где отображается представление, давая параметр @Route аннотация:

@Route(value="myhome")

Класс использует следующие компоненты пользовательского интерфейса для отображения на странице:

Редактор редакции EmployeeEditor – показывает Сотрудник форма, используемая для предоставления информации о сотрудниках для создания и редактирования.

Сетка сетка – балка для отображения списка Сотрудников

Фильтр Для фильтра TextField – текстовое поле для введите фамилию, на основе которой будет отфильтровываться балка

Кнопка добавитьНьюБтн – Кнопка, чтобы добавить новую Сотрудник . Отображает СотрудникИ- редактор.

Он внутренне использует сотрудникРепозиторий для выполнения операций CRUD.

4.2. Совместное подключение компонентов

ГлавнаяВью расширяет Вертикальноеуте . Вертикальноеуте является компонентным контейнером, который показывает субкомпоненты в порядке их добавления (вертикально).

Далее мы инициализируем и добавляем компоненты.

Мы предоставляем метку к кнопке с иконкой q.

this.grid = new Grid<>(Employee.class);
this.filter = new TextField();
this.addNewBtn = new Button("New employee", VaadinIcon.PLUS.create());

Мы используем ГоризонтальнаяЛейт горизонтально расположить текстовое поле фильтра и кнопку. Затем добавьте этот макет, балку и редактор в родительский вертикальный макет:

HorizontalLayout actions = new HorizontalLayout(filter, addNewBtn);
add(actions, grid, editor);

Предоставьте имена высоты пояса и столбца. Мы также добавляем текст справки в текстовом поле:

grid.setHeight("200px");
grid.setColumns("id", "firstName", "lastName");
grid.getColumnByKey("id").setWidth("50px").setFlexGrow(0);

filter.setPlaceholder("Filter by last name");

При запуске приложения пользовательский интерфейс будет выглядеть так:

4.3. Добавление логики к компонентам

Мы будем устанавливать ValueChangeMode.EAGER в фильтр текстовое поле. Это синхронизирует значение сервера каждый раз, когда оно изменилось на клиенте.

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

filter.setValueChangeMode(ValueChangeMode.EAGER);
filter.addValueChangeListener(e -> listEmployees(e.getValue()));

При выборе строки в поясе, мы хотели бы показать Сотрудник форму, позволяющую пользователю редактировать имя и фамилию:

grid.asSingleSelect().addValueChangeListener(e -> {
    editor.editEmployee(e.getValue());
});

При нажатии кнопки добавить новый сотрудник, мы хотели бы показать пустой Сотрудник форма:

addNewBtn.addClickListener(e -> editor.editEmployee(new Employee("", "")));

Наконец, мы прислушиваемся к изменениям, внесенным редактором, и обновляем сетку с помощью данных бэкэнда:

editor.setChangeHandler(() -> {
    editor.setVisible(false);
    listEmployees(filter.getValue());
});

списокИмплоях функция получает отфильтрованный список Сотрудник s и обновляет сетку:

void listEmployees(String filterText) {
    if (StringUtils.isEmpty(filterText)) {
        grid.setItems(employeeRepository.findAll());
    } else {
        grid.setItems(employeeRepository.findByLastNameStartsWithIgnoreCase(filterText));
    }
}

4.4. Формирование формы

Мы будем использовать простую форму для пользователя, чтобы добавить/отредактировать сотрудника:

@SpringComponent
@UIScope
public class EmployeeEditor extends VerticalLayout implements KeyNotifier {

    private EmployeeRepository repository;
    private Employee employee;

    TextField firstName = new TextField("First name");
    TextField lastName = new TextField("Last name");

    Button save = new Button("Save", VaadinIcon.CHECK.create());
    Button cancel = new Button("Cancel");
    Button delete = new Button("Delete", VaadinIcon.TRASH.create());

    HorizontalLayout actions = new HorizontalLayout(save, cancel, delete);
    Binder binder = new Binder<>(Employee.class);
    private ChangeHandler changeHandler;
}

@SpringComponent это просто псевдоним Для Спрингс @Component аннотация чтобы избежать конфликтов с Vaadins Компонентная класс.

@UIScope связывает фасоль с текущим пользовательским интерфейсом Vaadin.

В настоящее время редактируется Сотрудник хранится в сотрудник переменная члена. Мы захватываем Сотрудник свойства через первоеимя и последнееимя текстовые поля.

Форма имеет три кнопки – сохранить , отменить и удалить .

После того, как все компоненты подключены друг к другу, форма будет выглядеть как ниже для выбора строки:

Мы используем сноповязалка который связывает поля формы с служащий свойства, использующие конвенцию именования :

binder.bindInstanceFields(this);

Мы называем соответствующий метод EmployeeRepositor основанным на операциях пользователя:

void delete() {
    repository.delete(employee);
    changeHandler.onChange();
}

void save() {
    repository.save(employee);
    changeHandler.onChange();
}

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

В этой статье мы написали полное приложение CRUD UI с использованием Spring Boot и Spring Data JPA для сохранения.

Как обычно, код доступен более на GitHub .