streamalism.org

1. Pregled

Vaadin je Java poslužiteljski okvir za stvaranje web korisničkih sučelja.

U ovom uputstvu istražit ćemo kako se koristi Korisničko sučelje zasnovano na Vaadinu na pozadini temeljenoj na Spring Boot-u. Uvod u Vaadin potražite u ovom vodiču.

2. Postavljanje

Počnimo s dodavanjem ovisnosti Mavena u standardnu ​​aplikaciju Spring Boot:

 com.vaadin vaadin-spring-boot-starter 

Vaadin je također prepoznata ovisnost Spring Initializatora.

Ovaj se vodič koristi novijom verzijom Vaadina od zadane koju je donio početni modul. Da biste koristili noviju verziju, jednostavno definirajte Vaadinov prijedlog materijala (BOM) ovako:

   com.vaadin vaadin-bom 10.0.11 pom uvoz 

3. Backend usluga

Upotrijebit ćemo Zaposlenik entitet sa ime i prezime svojstva za izvršavanje CRUD operacija na njemu:

@Entity zaposlenik javne klase {@Id @GeneratedValue private Long id; private String firstName; private String lastName; }

Evo jednostavnog, odgovarajućeg spremišta podataka Spring - za upravljanje CRUD operacijama:

javno sučelje EmployeeRepository proširuje JpaRepository {List findByLastNameStartsWithIgnoreCase (String lastName); }

Izjavljujemo metodu upita findByLastNameStartsWithIgnoreCase na Spremište zaposlenika sučelje. Vratit će popis Zaposleniks podudaranje s prezime.

Idemo također unaprijed popuniti DB s nekoliko uzoraka Zaposleniks:

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

4. Vaadin UI

4.1. MainView Razred

The MainView klasa je ulazna točka za Vaadinovu UI logiku. Bilješka @Route govori Spring Bootu da ga automatski pokupi i prikaže u korijenu web aplikacije:

@Route javna klasa MainView proširuje VerticalLayout {private EmployeeRepository workerRepository; privatni urednik EmployeeEditor; Mrežna mreža; Filtar TextField; privatni gumb addNewBtn; }

URL gdje se prikazuje prikaz možemo prilagoditi davanjem parametra @Route napomena:

@Route (vrijednost = "myhome")

Klasa koristi sljedeće komponente korisničkog sučelja za prikaz na stranici:

Urednik EmployeeEditor - pokazuje Zaposlenik obrazac koji se koristi za pružanje podataka o zaposlenicima za stvaranje i uređivanje.

Grid grid - pojas za prikaz popisa - Zaposlenici

Filtar TextField - tekstualno polje za unos prezimena na osnovu kojeg će se filtrirati nosač

Gumb addNewBtn - Gumb za dodavanje novog Zaposlenik. Prikazuje EmployeeEditor urednik.

Interno koristi spremište zaposlenika za izvođenje CRUD operacija.

4.2. Povezivanje komponenata zajedno

MainView proteže se VerticalLayout. VerticalLayout je spremnik komponenata, koji prikazuje potkomponente redoslijedom njihova dodavanja (okomito).

Dalje, inicijaliziramo i dodamo komponente.

Na gumbu dajemo oznaku sa ikonom +.

this.grid = nova mreža (Employee.class); this.filter = novi TextField (); this.addNewBtn = novi gumb ("Novi zaposlenik", VaadinIcon.PLUS.create ());

Koristimo HorizontalLayout za vodoravno raspoređivanje polja s tekstom filtra i gumba. Zatim dodajte ovaj izgled, pojas i editor u nadređeni vertikalni izgled:

HorizontalLayout akcije = novi HorizontalLayout (filtar, addNewBtn); dodaj (akcije, mreža, uređivač);

Navedite visinu pojasa i nazive stupaca. U tekstualno polje dodajemo i tekst pomoći:

grid.setHeight ("200px"); grid.setColumns ("id", "firstName", "lastName"); grid.getColumnByKey ("id"). setWidth ("50px"). setFlexGrow (0); filter.setPlaceholder ("Filtriraj prema prezimenu");

Pri pokretanju aplikacije, korisničko sučelje izgledalo bi ovako:

4.3. Dodavanje logike komponentama

Mi ćemo postaviti ValueChangeMode.EAGER prema filtar polje za tekst. To sinkronizira vrijednost s poslužiteljem svaki put kad se promijeni na klijentu.

Također smo postavili slušatelj za događaj promjene vrijednosti, koji vraća filtrirani popis zaposlenika na temelju teksta navedenog u filtar:

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

Pri odabiru reda unutar nosača, pokazali bismo Zaposlenik obrazac, dopuštajući korisniku da uređuje ime i prezime:

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

Klikom na gumb dodaj novog zaposlenika, prikazali bismo prazno Zaposlenik oblik:

addNewBtn.addClickListener (e -> editor.editEfficiee (novi zaposlenik ("", "")));

Na kraju, osluškujemo promjene koje je izvršio editor i osvježavamo mrežu podacima iz pozadine:

editor.setChangeHandler (() -> {editor.setVisible (lažno); listEeeeeev (filter.getValue ());});

The popisZaposlenici funkcija dobiva filtrirani popis Zaposleniks i ažurira mrežu:

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

4.4. Izgradnja forme

Korisnik ćemo koristiti jednostavni obrazac za dodavanje / uređivanje zaposlenika:

@SpringComponent @UIScope javna klasa EmployeeEditor proširuje VerticalLayout implementira KeyNotifier {privatno spremište EmployeeRepository; privatni zaposlenik zaposlenik; TextField firstName = novo TextField ("Ime"); TextField lastName = novo TextField ("Prezime"); Gumb spremi = novi gumb ("Spremi", VaadinIcon.CHECK.create ()); Otkazivanje gumba = novi gumb ("Otkaži"); Gumb delete = novi gumb ("Delete", VaadinIcon.TRASH.create ()); HorizontalLayout akcije = novi HorizontalLayout (spremanje, otkazivanje, brisanje); Vezivno vezivo = novo Vezivo (Employee.class); privatni ChangeHandler changeHandler; }

The @SpringComponent je samo alias Springsu @Komponenta bilješka kako bi se izbjegli sukobi s Vaadinima Komponenta razred.

The @UIScope veže grah na trenutni Vaadin UI.

Trenutno uređeno Zaposlenik je pohranjena u zaposlenik varijabla člana. Hvatamo Zaposlenik svojstva kroz ime i prezime tekstualna polja.

Obrazac ima tri gumba - uštedjeti, otkazati i izbrisati.

Nakon što se sve komponente povežu zajedno, obrazac će izgledati kao ispod za odabir retka:

Koristimo a Vezivo koji povezuje polja obrasca s Zaposlenik svojstva koja koriste konvenciju imenovanja:

binder.bindInstanceFields (ovo);

Pozivamo odgovarajuću metodu EmployeeRepositor na temelju korisničkih operacija:

void delete () {repository.delete (zaposlenik); changeHandler.onChange (); } void save () {repository.save (zaposlenik); changeHandler.onChange (); }

5. Zaključak

U ovom smo članku napisali cjelovitu aplikaciju CRUD UI koristeći Spring Boot i Spring Data JPA za ustrajnost.

Kao i obično, kod je dostupan na GitHub-u.