TOC

Exemple d’application avec Spring Boot et Vaadin

Exemple d'application avec Spring Boot et Vaadin

1. Vue d'ensemble

Vaadin est unserver-side Java framework for creating web user interfaces.

Dans ce didacticiel, nous allons explorer comment utiliser unVaadin based UI on a Spring Boot based backend. Pour une introduction à Vaadin, reportez-vous au tutoriel dethis.

2. Installer

Commençons par ajouter des dépendances Maven à une application Spring Boot standard: 


    com.vaadin
    vaadin-spring-boot-starter

Vaadin est également une dépendance reconnue par lesSpring Initializer.

Ce tutoriel utilise une version plus récente de Vaadin que celle par défaut introduite par le module de démarrage. Pour utiliser la version la plus récente, définissez simplement la nomenclature de Vaadin comme suit: 


    
        
            com.vaadin
            vaadin-bom
            10.0.11
            pom
            import

3. Service backend

Nous allons utiliser une entitéEmployee avec les propriétésfirstName etlastName pour y effectuer des opérations CRUD: 

@Entity
public class Employee {

    @Id
    @GeneratedValue
    private Long id;

    private String firstName;
    private String lastName;
}

Voici le référentiel Spring Data simple et correspondant - pour gérer les opérations CRUD: 

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

Nous déclarons la méthode de requêtefindByLastNameStartsWithIgnoreCase sur l'interfaceEmployeeRepository. Il renverra la liste desEmployees correspondant auxlastName.

Préremplissons également la base de données avec quelques échantillonsEmployees: 

@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. Interface utilisateur Vaadin

4.1. ClasseMainView

La classeMainView est le point d’entrée de la logique de l’interface utilisateur de Vaadin. Annotation @Route tells Spring Boot to automatically pick it up and show at the root of the web app: 

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

Nous pouvons personnaliser l'URL où la vue est affichée en donnant un paramètre à l'annotation@Route: 

@Route(value="myhome")

La classe utilise les composants d'interface utilisateur suivants à afficher sur la page:

EmployeeEditor editor - affiche le formulaireEmployee utilisé pour fournir des informations sur les employés à créer et à modifier.

Grid<Employee> grid - ceint pour afficher la liste desEmployees

TextField filter - champ de texte pour entrer le nom de famille sur lequel la ceinture sera filtrée

Button addNewBtn - Bouton pour ajouter un nouveauEmployee. Affiche l'éditeurEmployeeEditor.

Il utilise en interne lesemployeeRepository pour effectuer les opérations CRUD.

4.2. Câblage des composants

MainView étendVerticalLayout. VerticalLayout is a component container, which shows the subcomponents in the order of their addition (verticalement).

Ensuite, nous initialisons et ajoutons les composants.

Nous fournissons une étiquette au bouton avec une icône +. 

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

Nous utilisonsHorizontalLayout pour organiser horizontalement le champ de texte du filtre et le bouton. Ajoutez ensuite cette disposition, grille et éditeur à la disposition verticale parent: 

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

Indiquez la hauteur de la grille et les noms des colonnes. Nous ajoutons également du texte d'aide dans le champ de texte: 

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

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

Au démarrage de l'application, l'interface utilisateur ressemblerait à ceci:

image

4.3. Ajout de logique aux composants

Nous allons définirValueChangeMode.EAGER dans le champ de textefilter. This syncs the value to the server each time it’s changed on the client.

Nous définissons également un écouteur pour l'événement de changement de valeur, qui renvoie la liste filtrée des employés en fonction du texte fourni dans lesfilter: 

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

En sélectionnant une ligne dans la ceinture, nous afficherions le formulaireEmployee, permettant à l'utilisateur de modifier le prénom et le nom: 

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

En cliquant sur le bouton Ajouter un nouvel employé, nous afficherons le formulaire viergeEmployee: 

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

Enfin, nous écoutons les modifications apportées par l'éditeur et actualisons la grille avec les données du backend: 

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

La fonctionlistEmployees récupère la liste filtrée deEmployees et met à jour la grille: 

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

4.4. Construire le formulaire

Nous utiliserons un formulaire simple pour l'utilisateur pour ajouter / modifier un employé: 

@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;
}

The @SpringComponent is just an alias to Springs @Component annotation pour éviter les conflits avec la classe VaadinsComponent.

Le@UIScope lie le bean à l'interface utilisateur Vaadin actuelle.

Actuellement, lesEmployee édités sont stockés dans la variable membreemployee. Nous capturons les propriétésEmployee via les champs de textefirstName etlastName.

Le formulaire a trois boutons -save,cancel etdelete.

Une fois que tous les composants sont reliés entre eux, le formulaire se présente comme ci-dessous pour une sélection de rangée:

image

Nous utilisons unBinder which binds the form fields with the Employee properties using the naming convention: 

binder.bindInstanceFields(this);

Nous appelons la méthode EmployeeRepositor appropriée en fonction des opérations de l'utilisateur: 

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

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

5. Conclusion

Dans cet article, nous avons écrit une application complète CRUD UI utilisant Spring Boot et Spring Data JPA pour la persistance.

Comme d'habitude, le code est disponibleover on GitHub.

Related