TOC

Beispielanwendung mit Spring Boot und Vaadin

Anwendungsbeispiel mit Spring Boot und Vaadin

1. Überblick

Vaadin ist einserver-side Java framework for creating web user interfaces.

In diesem Tutorial erfahren Sie, wie SieVaadin based UI on a Spring Boot based backend verwenden. Eine Einführung in Vaadin finden Sie im Tutorial vonthis.

2. Konfiguration

Beginnen wir mit dem Hinzufügen von Maven-Abhängigkeiten zu einer Standard-Spring Boot-Anwendung: 


    com.vaadin
    vaadin-spring-boot-starter

Vaadin ist auch eine anerkannte Abhängigkeit vonSpring Initializer.

In diesem Tutorial wird eine neuere Version von Vaadin als die vom Startermodul bereitgestellte Standardversion verwendet. Um die neuere Version zu verwenden, definieren Sie einfach die Vaadin-Stückliste wie folgt: 


    
        
            com.vaadin
            vaadin-bom
            10.0.11
            pom
            import

3. Backend-Service

Wir verwenden eineEmployee-Entität mit den EigenschaftenfirstName undlastName, um CRUD-Operationen daran auszuführen: 

@Entity
public class Employee {

    @Id
    @GeneratedValue
    private Long id;

    private String firstName;
    private String lastName;
}

Hier ist das einfache, entsprechende Spring Data-Repository - zum Verwalten der CRUD-Operationen: 

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

Wir deklarieren die AbfragemethodefindByLastNameStartsWithIgnoreCase auf der Schnittstelle vonEmployeeRepository. Es wird die Liste vonEmployees zurückgegeben, die mitlastName übereinstimmt.

Füllen Sie die Datenbank auch mit einigen StichprobenEmployees vor: 

@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 UI

4.1. MainView Klasse

DieMainView-Klasse ist der Einstiegspunkt für Vaadins UI-Logik. 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;
}

Wir können die URL anpassen, unter der die Ansicht angezeigt wird, indem wir der Annotation@Routeeinen Parameter geben: 

@Route(value="myhome")

Die Klasse verwendet die folgenden UI-Komponenten, um auf der Seite angezeigt zu werden:

EmployeeEditor editor - Zeigt das FormularEmployee an, mit dem Mitarbeiterinformationen zum Erstellen und Bearbeiten bereitgestellt werden.

Grid<Employee> grid - Umgürten, um die Liste vonEmployees anzuzeigen

TextField filter - Textfeld zur Eingabe des Nachnamens, anhand dessen der Gürtel gefiltert wird

Button addNewBtn - Schaltfläche zum Hinzufügen eines neuenEmployee. Zeigt denEmployeeEditor-Editor an.

Es verwendet intern dieemployeeRepository, um die CRUD-Operationen auszuführen.

4.2. Komponenten zusammen verdrahten

MainView erweitertVerticalLayout. VerticalLayout is a component container, which shows the subcomponents in the order of their addition (vertikal).

Als nächstes initialisieren wir die Komponenten und fügen sie hinzu.

Wir versehen die Schaltfläche mit einem + Symbol. 

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

Wir verwendenHorizontalLayout, um das Filtertextfeld und die Schaltfläche horizontal anzuordnen. Fügen Sie dann das folgende Layout, Raster und den folgenden Editor zum übergeordneten vertikalen Layout hinzu: 

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

Geben Sie die Rasterhöhe und die Spaltennamen an. Wir fügen auch Hilfetext in das Textfeld ein: 

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

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

Beim Start der Anwendung würde die Benutzeroberfläche folgendermaßen aussehen:

image

4.3. Hinzufügen von Logik zu Komponenten

Wir setzenValueChangeMode.EAGER auf das Textfeldfilter. This syncs the value to the server each time it’s changed on the client.

Wir haben auch einen Listener für das Wertänderungsereignis festgelegt, der die gefilterte Liste der Mitarbeiter basierend auf dem infilter: angegebenen Text zurückgibt 

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

Bei Auswahl einer Zeile innerhalb des Gürtels wird das FormularEmployeeangezeigt, sodass der Benutzer den Vor- und Nachnamen bearbeiten kann: 

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

Wenn Sie auf die Schaltfläche Neuen Mitarbeiter hinzufügen klicken, wird das leere FormularEmployeeangezeigt: 

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

Schließlich hören wir uns die Änderungen des Editors an und aktualisieren das Raster mit Daten aus dem Backend: 

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

Die FunktionlistEmployees ruft die gefilterte Liste vonEmployees ab und aktualisiert das Raster: 

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

4.4. Das Formular erstellen

Wir verwenden ein einfaches Formular, damit der Benutzer einen Mitarbeiter hinzufügen / bearbeiten kann: 

@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, um Konflikte mit der Klasse von VaadinsComponentzu vermeiden.

Das@UIScope bindet die Bean an die aktuelle Vaadin-Benutzeroberfläche.

Derzeit werden bearbeiteteEmployee in der Mitgliedsvariablenemployee gespeichert. Wir erfassen die Eigenschaften vonEmployeeüber die TextfelderfirstName undlastName.

Das Formular verfügt über drei Schaltflächen:save,cancel unddelete.

Sobald alle Komponenten miteinander verbunden sind, sieht das Formular für eine Zeilenauswahl wie folgt aus:

image

Wir verwenden einBinder which binds the form fields with the Employee properties using the naming convention: 

binder.bindInstanceFields(this);

Wir nennen die entsprechende EmployeeRepositor-Methode basierend auf den Benutzeroperationen: 

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

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

5. Fazit

In diesem Artikel haben wir eine CRUD-UI-Anwendung mit vollem Funktionsumfang geschrieben, die Spring Boot und Spring Data JPA für die Persistenz verwendet.

Wie üblich ist der Codeover on GitHub verfügbar.

Related