streamalism.org

1. Áttekintés

Vaadin egy szerveroldali Java keretrendszer webes felhasználói felületek létrehozásához.

Ebben az oktatóanyagban azt vizsgáljuk meg, hogyan kell használni a Vaadin alapú felhasználói felület egy Spring Boot alapú háttérprogramon. A Vaadin bemutatásához olvassa el ezt az oktatóanyagot.

2. Beállítás

Kezdjük azzal, hogy Maven-függőségeket adunk hozzá egy szokásos Spring Boot alkalmazáshoz:

 com.vaadin vaadin-spring-boot-starter 

Vaadin a Spring Initializer által is elismert függőség.

Ez az oktatóprogram a Vaadin újabb verzióját használja, mint az indítómodul által alapértelmezetten biztosított verzió. Az újabb verzió használatához egyszerűen határozza meg a Vaadin Bill of Materials (BOM) leírását:

   com.vaadin vaadin-bom 10.0.11 pom import 

3. Háttérszolgáltatás

Használunk egy Munkavállaló entitás keresztnév és vezetéknév tulajdonságok CRUD műveletek végrehajtására rajta:

@Entity public class Employee {@Id @GeneratedValue private Long id; privát karakterlánc keresztnév; privát karakterlánc vezetéknév; }

Itt található az egyszerű, megfelelő Spring Data tárház - a CRUD műveletek kezeléséhez:

nyilvános felület EmployeeRepository kiterjeszti a JpaRepository {List findByLastNameStartsWithIgnoreCase (String vezetéknév); }

Nyilatkozunk a lekérdezési módszerről findByLastNameStartsWithIgnoreCase a EmployeeRosory felület. Visszaadja a Munkavállalós illik a vezetéknév.

Töltsük fel előre is a DB-t néhány mintával Munkavállalós:

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

4. Vaadin felhasználói felület

4.1. MainView Osztály

A MainView osztály a Vaadin felhasználói felület logikájának belépési pontja. Megjegyzés @Útvonal megmondja a Spring Boot-nak, hogy automatikusan vegye fel és mutassa meg a webalkalmazás gyökerében:

A @Route public class MainView kiterjeszti a VerticalLayout {private EmployeeRepository workerRepository; privát EmployeeEditor szerkesztő; Rács rács; TextField szűrő; saját gomb addNewBtn; }

Testreszabhatjuk az URL-t, ahol a nézet megjelenik, ha paramétert adunk a @Útvonal kommentár:

@Route (value = "myhome")

Az osztály a következő felhasználói felület összetevőket használja az oldal megjelenítéséhez:

EmployeeEditor szerkesztő - megmutatja a Munkavállaló űrlap, amelyet a munkavállalók létrehozásához és szerkesztéséhez nyújtanak.

Rács rács - öv a lista felsorolásához Alkalmazottak

TextField szűrő - szövegmezőben adja meg a vezetéknevet, amely alapján az öv szűrni fog

Gomb addNewBtn - Gomb új hozzáadásához Munkavállaló. Megjeleníti a EmployeeEditor szerkesztő.

Belsőleg használja a alkalmazottRaktár a CRUD műveletek elvégzéséhez.

4.2. Az alkatrészek együttes bekötése

MainView kiterjed VerticalLayout. VerticalLayout egy alkatrésztartály, amely az alkomponenseket hozzáadásuk sorrendjében mutatja (függőlegesen).

Ezután inicializáljuk és hozzáadjuk az összetevőket.

A gombhoz egy + ikonnal ellátott címkét adunk.

this.grid = new Rács (Employee.class); this.filter = new TextField (); this.addNewBtn = új gomb ("Új alkalmazott", VaadinIcon.PLUS.create ());

Használunk HorizontalLayout vízszintesen rendezheti a szűrő szövegmezőjét és a gombot. Ezután adja hozzá ezt az elrendezést, az öv és a szerkesztőt a szülő függőleges elrendezéséhez:

HorizontalLayout műveletek = new HorizontalLayout (filter, addNewBtn); add (műveletek, rács, szerkesztő);

Adja meg az övmagasságot és az oszlopneveket. Súgószöveget is felveszünk a szövegmezőbe:

grid.setHeight ("200px"); grid.setColumns ("id", "keresztnév", "vezetékNév"); grid.getColumnByKey ("id"). setWidth ("50px"). setFlexGrow (0); filter.setPlaceholder ("Szűrés vezetéknév szerint");

Az alkalmazás indításakor a kezelőfelület ezt nézi:

4.3. Logika hozzáadása az alkatrészekhez

Beállítjuk ValueChangeMode.EAGER hoz szűrő szövegmező. Ez szinkronizálja az értéket a kiszolgálóval minden alkalommal, amikor az ügyfélen megváltozik.

Beállítottunk egy figyelőt is az értékváltoztatási eseményhez, amely az alkalmazottak szűrt listáját adja vissza a szűrő:

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

Ha kiválasztunk egy sort az övön belül, megmutatjuk a Munkavállaló űrlap, amely lehetővé teszi a felhasználó számára az utó- és vezetéknév szerkesztését:

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

Az új alkalmazott hozzáadása gombra kattintva megjelenik az üres mező Munkavállaló forma:

addNewBtn.addClickListener (e -> editor.editEmployee (új alkalmazott ("", "")));

Végül meghallgatjuk a szerkesztő által végrehajtott változtatásokat, és frissítjük a rácsot a háttérkép adataival:

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

A alkalmazottak listája függvény megkapja a Munkavállalós frissíti a rácsot:

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

4.4. A Form elkészítése

Egy egyszerű űrlapot használunk a felhasználó számára egy alkalmazott hozzáadásához / szerkesztéséhez:

@SpringComponent @UIScope nyilvános osztály Az EmployeeEditor kiterjeszti a VerticalLayout megvalósítja a KeyNotifier {private EmployeeRepository adattárat; magán alkalmazott alkalmazott; TextField firstName = új TextField ("Keresztnév"); TextField vezetéknév = new TextField ("Vezetéknév"); Gomb mentése = új gomb ("Mentés", VaadinIcon.CHECK.create ()); Gomb törlése = új Gomb ("Mégse"); Gomb törlése = új Gomb ("Törlés", VaadinIcon.TRASH.create ()); HorizontalLayout műveletek = új HorizontalLayout (mentés, törlés, törlés); Binder binder = új Binder (Employee.class); privát ChangeHandler changeHandler; }

A @SpringComponent csak egy álneve Springsnek @Összetevő annotáció hogy elkerüljék a konfliktusokat Vaadinsszel Összetevő osztály.

A @UIScope a babot a jelenlegi Vaadin felhasználói felülethez köti.

Jelenleg szerkesztve Munkavállaló tárolja a munkavállaló tag változó. Rögzítjük a Munkavállaló tulajdonságai révén keresztnév és vezetéknév szövegmezők.

Az űrlapon három gomb található - mentés, megszünteti és töröl.

Miután az összes összetevőt összekötötte, az űrlap az alábbiak szerint néz ki a sorválasztáshoz:

Használjuk a Kötőanyag amely megköti az űrlapmezőket a Munkavállaló tulajdonságok az elnevezési megállapodás használatával:

binder.bindInstanceFields (ez);

A felhasználói műveletek alapján meghívjuk a megfelelő EmployeeRepositor metódust:

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

5. Következtetés

Ebben a cikkben egy teljes funkcionalitású CRUD felhasználói felület-alkalmazást írtunk a Spring Boot és a Spring Data JPA segítségével a kitartás érdekében.

Szokás szerint a kód elérhető a GitHubon.