streamalism.org

1. Oversikt

Vaadin er en server-side Java-rammeverk for å lage nettbrukergrensesnitt.

I denne opplæringen vil vi utforske hvordan du bruker en Vaadin-basert brukergrensesnitt på en vårstøvelbasert backend. For en introduksjon til Vaadin, se denne opplæringen.

2. Oppsett

La oss starte med å legge til Maven-avhengigheter i en standard Spring Boot-applikasjon:

 com.vaadin vaadin-spring-boot-starter 

Vaadin er også en anerkjent avhengighet av Spring Initializer.

Denne opplæringen bruker en nyere versjon av Vaadin enn standardversjonen som ble tatt med av startmodulen. For å bruke den nyere versjonen, definerer du bare Vaadin Bill of Materials (BOM) slik:

   com.vaadin vaadin-bom 10.0.11 pom import 

3. Backend-service

Vi bruker en Ansatt enhet med fornavn og etternavn egenskaper for å utføre CRUD-operasjoner på den:

@Entity offentlig klasse ansatt {@Id @GeneratedValue private Lang id; privat streng fornavn; privat streng etternavn; }

Her er det enkle, tilsvarende Spring Data repository - for å administrere CRUD-operasjonene:

offentlig grensesnitt EmployeeRepository utvider JpaRepository {List findByLastNameStartsWithIgnoreCase (Strengens etternavn); }

Vi erklærer spørringsmetode findByLastNameStartsWithIgnoreCase på Ansattes depot grensesnitt. Den vil returnere listen over Ansatts samsvarer med etternavn.

La oss også forhåndsutfylle DB med noen få eksempler Ansatts:

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

4. Vaadin UI

4.1. MainView Klasse

De MainView klasse er inngangspunktet for Vaadins UI-logikk. Kommentar @Rute forteller Spring Boot å automatisk plukke den opp og vise ved roten til webappen:

@Route offentlig klasse MainView utvider VerticalLayout {private EmployeeRepository employeeRepository; privat EmployeeEditor redaktør; Rutenett; TextField filter; private Button addNewBtn; }

Vi kan tilpasse URL-en der visningen vises ved å gi en parameter til @Rute kommentar:

@Route (verdi = "mitt hjem")

Klassen bruker følgende UI-komponenter som skal vises på siden:

EmployeeEditor-redaktør - viser Ansatt skjema som brukes til å gi informasjon om ansatte for å opprette og redigere.

Rutenett - gird for å vise listen over Ansatte

TextField filter - tekstfelt for å angi etternavnet som basen blir filtrert fra

Knapp addNewBtn - Knapp for å legge til en ny Ansatt. Viser Ansatt redaktør redaktør.

Den bruker internt ansatt Depot for å utføre CRUD-operasjonene.

4.2. Koble komponentene sammen

MainView strekker VerticalLayout. VerticalLayout er en komponentbeholder, som viser underkomponentene i rekkefølgen for tilsetningen (vertikalt).

Deretter initialiserer vi og legger til komponentene.

Vi gir en etikett til knappen med et + -ikon.

this.grid = new Grid (Employee.class); this.filter = nytt TextField (); this.addNewBtn = ny knapp ("Ny ansatt", VaadinIcon.PLUS.create ());

Vi bruker Horisontal oppsett for å arrangere filtertekstfeltet og knappen horisontalt. Deretter legger du til denne layouten, beltet og redigeringsprogrammet i det overordnede vertikale layoutet:

HorizontalLayout-handlinger = ny HorizontalLayout (filter, addNewBtn); legg til (handlinger, rutenett, redaktør);

Oppgi beltehøyde og kolonnenavn. Vi legger også til hjelpetekst i tekstfeltet:

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

Ved applikasjonsoppstart vil UI se på dette:

4.3. Legge til logikk til komponenter

Vi setter av ValueChangeMode.EAGER til filter tekstfelt. Dette synkroniserer verdien til serveren hver gang den endres på klienten.

Vi setter også en lytter for verdiendringshendelsen, som returnerer den filtrerte listen over ansatte basert på teksten i filter:

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

Når vi valgte en rad i beltet, ville vi vise Ansatt skjema, slik at brukeren kan redigere fornavn og etternavn:

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

Når vi klikker på knappen Legg til ny ansatt, viser vi det tomme Ansatt skjema:

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

Til slutt lytter vi til endringene redaktøren har gjort og oppdaterer rutenettet med data fra backend:

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

De listeMedarbeidere funksjonen får den filtrerte listen over Ansatts og oppdaterer rutenettet:

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

4.4. Bygg skjemaet

Vi bruker et enkelt skjema for brukeren å legge til / redigere en ansatt:

@SpringComponent @UIScope offentlig klasse EmployeeEditor utvider VerticalLayout implementerer KeyNotifier {private EmployeeRepository repository; privat ansatt ansatt; TextField firstName = new TextField ("Fornavn"); TextField etternavn = nytt TextField ("Etternavn"); Button save = new Button ("Save", VaadinIcon.CHECK.create ()); Knapp avbryt = ny knapp ("Avbryt"); Button delete = new Button ("Delete", VaadinIcon.TRASH.create ()); HorizontalLayout-handlinger = ny HorizontalLayout (lagre, avbryt, slett); Bindemiddel = nytt Bindemiddel (ansatt.klasse); private ChangeHandler changeHandler; }

De @SpringComponent er bare et alias til Springs @Komponent kommentar for å unngå konflikter med Vaadins Komponent klasse.

De @UIScope binder bønnen til det nåværende Vaadin UI.

For øyeblikket redigert Ansatt lagres i ansatt medlemsvariabel. Vi fanger opp Ansatt egenskaper gjennom fornavn og etternavn tekstfelt.

Skjemaet har tre knapper - lagre, Avbryt og slett.

Når alle komponentene er koblet sammen, vil skjemaet se ut som nedenfor for et radvalg:

Vi bruker en Binder som binder formfeltene med Ansatt egenskaper ved hjelp av navnekonvensjonen:

binder.bindInstanceFields (dette);

Vi kaller den riktige EmployeeRepositor-metoden basert på brukeroperasjonene:

ugyldig sletting () {repository.delete (ansatt); changeHandler.onChange (); } ugyldig lagre () {repository.save (ansatt); changeHandler.onChange (); }

5. Konklusjon

I denne artikkelen skrev vi en fullverdig CRUD UI-applikasjon ved hjelp av Spring Boot og Spring Data JPA for utholdenhet.

Som vanlig er koden tilgjengelig på GitHub.