streamalism.org

1. Oversigt

Vaadin er en server-Java-ramme til oprettelse af web-brugergrænseflader.

I denne vejledning undersøger vi, hvordan du bruger en Vaadin-baseret brugergrænseflade på en Spring Boot-baseret backend. For en introduktion til Vaadin henvises til denne vejledning.

2. Opsætning

Lad os starte med at tilføje Maven-afhængigheder til en standard Spring Boot-applikation:

 com.vaadin vaadin-spring-boot-starter 

Vaadin er også en anerkendt afhængighed af Spring Initializer.

Denne tutorial bruger en nyere version af Vaadin end den standard, der er bragt ind af startmodulet. For at bruge den nyere version skal du blot definere Vaadin Bill of Materials (BOM) sådan:

   com.vaadin vaadin-bom 10.0.11 pom import 

3. Backend-service

Vi bruger en Medarbejder enhed med fornavn og efternavn egenskaber til at udføre CRUD-operationer på det:

@Entity offentlig klasse medarbejder {@Id @GeneratedValue privat Lang id; privat streng fornavn; privat streng efternavn; }

Her er det enkle, tilsvarende Spring Data-arkiv - til at styre CRUD-operationerne:

offentlig grænseflade EmployeeRepository udvider JpaRepository {List findByLastNameStartsWithIgnoreCase (String lastName); }

Vi erklærer forespørgselsmetode findByLastNameStartsWithIgnoreCase på den Medarbejderopbevaring interface. Den returnerer listen over Medarbejders matcher efternavn.

Lad os også udfylde DB med et par eksempler Medarbejders:

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

4. Vaadin UI

4.1. MainView Klasse

Det MainView klasse er indgangspunktet for Vaadins UI-logik. Kommentar @Rute fortæller Spring Boot at hente den automatisk og vise ved roden af ​​webappen:

@Route offentlig klasse MainView udvider VerticalLayout {private EmployeeRepository medarbejderRepository; privat medarbejderredaktør; Gitternet; TextField filter; privat knap addNewBtn; }

Vi kan tilpasse URL'en, hvor visningen vises, ved at give en parameter til @Rute kommentar:

@Route (værdi = "mit hjem")

Klassen bruger følgende UI-komponenter, der skal vises på siden:

Medarbejderredaktør redaktør - viser Medarbejder formular, der bruges til at give medarbejderinformation til oprettelse og redigering.

Gitternet - gird for at få vist listen over Medarbejdere

TextField filter - tekstfelt for at indtaste efternavnet, som basen skal filtreres fra

Button addNewBtn - Knap for at tilføje et nyt Medarbejder. Viser Medarbejderredaktør redaktør.

Det bruger internt medarbejderlager at udføre CRUD-operationer.

4.2. Tilslutning af komponenterne sammen

MainView strækker sig Lodret layout. Lodret layout er en komponentbeholder, der viser underkomponenterne i rækkefølgen af ​​deres tilføjelse (lodret).

Dernæst initialiserer vi og tilføjer komponenterne.

Vi giver en etiket til knappen med et + -ikon.

this.grid = new Grid (Medarbejder.klasse); this.filter = nyt TextField (); this.addNewBtn = ny knap ("Ny medarbejder", VaadinIcon.PLUS.create ());

Vi bruger Vandret layout for at arrangere filtertekstfeltet og knappen vandret. Tilføj derefter dette layout, gird og editor i det overordnede lodrette layout:

HorizontalLayout-handlinger = ny HorizontalLayout (filter, addNewBtn); tilføj (handlinger, gitter, editor);

Angiv bæltehøjde og kolonnenavne. Vi tilføjer også hjælpetekst i tekstfeltet:

grid.setHeight ("200px"); grid.setColumns ("id", "firstName", "lastName"); grid.getColumnByKey ("id"). setWidth ("50px"). setFlexGrow (0); filter.setPlaceholder ("Filtrer efter efternavn");

Ved opstart af applikationen ser UI dette ud:

4.3. Tilføjelse af logik til komponenter

Vi sætter os af ValueChangeMode.EAGER til filter tekstfelt. Dette synkroniserer værdien til serveren, hver gang den ændres på klienten.

Vi indstiller også en lytter til værdiændringshændelsen, som returnerer den filtrerede liste over medarbejdere baseret på teksten i filter:

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

Når vi vælger en række inden for bjælken, viser vi den Medarbejder form, så brugeren kan redigere fornavn og efternavn:

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

Når vi klikker på knappen Tilføj ny medarbejder, viser vi det tomme Medarbejder form:

addNewBtn.addClickListener (e -> editor.editEmployee (ny medarbejder ("", ""));

Endelig lytter vi til redaktionens ændringer og opdaterer gitteret med data fra backend:

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

Det listeMedarbejdere funktionen får den filtrerede liste over Medarbejders og opdaterer gitteret:

ugyldig listeEmployees (String filterText) {if (StringUtils.isEmpty (filterText)) {grid.setItems (employeeRepository.findAll ()); } andet {grid.setItems (medarbejderRepository.findByLastNameStartsWithIgnoreCase (filterText)); }}

4.4. Opbygning af formularen

Vi bruger en simpel formular til brugeren til at tilføje / redigere en medarbejder:

@SpringComponent @UIScope offentlig klasse EmployeeEditor udvider VerticalLayout implementerer KeyNotifier {private EmployeeRepository repository; privat ansat; TextField firstName = new TextField ("Fornavn"); TextField lastName = new TextField ("Efternavn"); Button save = new Button ("Save", VaadinIcon.CHECK.create ()); Knap annullering = ny knap ("Annuller"); Knap slet = ny knap ("Slet", VaadinIcon.TRASH.create ()); HorizontalLayout-handlinger = ny HorizontalLayout (gem, annuller, slet); Bindemiddel = nyt bindemiddel (medarbejderklasse); private ChangeHandler changeHandler; }

Det @SpringComponent er bare et alias til Springs @Komponent kommentar for at undgå konflikter med Vaadins Komponent klasse.

Det @UIScope binder bønnen til det nuværende Vaadin UI.

I øjeblikket redigeret Medarbejder er gemt i medarbejder medlemsvariabel. Vi fanger Medarbejder egenskaber igennem fornavn og efternavn tekstfelter.

Formularen har tre knapper - Gemme, afbestille og slet.

Når alle komponenterne er kablet sammen, ser formularen ud som nedenfor for et rækkevalg:

Vi bruger en Ringbind som binder formfelterne med Medarbejder egenskaber ved hjælp af navngivningskonventionen:

binder.bindInstanceFields (dette);

Vi kalder den relevante EmployeeRepositor-metode baseret på brugerhandlingerne:

ugyldig sletning () {repository.delete (medarbejder); changeHandler.onChange (); } ugyldig gemme () {repository.save (medarbejder); changeHandler.onChange (); }

5. Konklusion

I denne artikel skrev vi et komplet CRUD UI-program ved hjælp af Spring Boot og Spring Data JPA for persistens.

Som sædvanlig er koden tilgængelig på GitHub.