streamalism.org

1. Prehľad

Vaadin je a serverový rámec Java na vytváranie webových používateľských rozhraní.

V tomto výučbe sa dozvieme, ako používať a Rozhranie založené na Vaadine na backende založenom na Spring Boot. Úvod do jazyka Vaadin nájdete v tomto výučbe.

2. Inštalácia

Začnime pridaním závislostí Maven do štandardnej aplikácie Spring Boot:

 com.vaadin vaadin-jar-boot-štartér 

Vaadin je tiež rozpoznaný ako závislosť od Spring Initializer.

Tento výukový program používa novšiu verziu aplikácie Vaadin ako predvolenú verziu, ktorú priniesol štartovací modul. Ak chcete použiť novšiu verziu, jednoducho definujte kusovník materiálu Vaadin takto:

   com.vaadin vaadin-bom 10.0.11 pom import 

3. Backendová služba

Použijeme Zamestnanec subjekt s krstné meno a priezvisko vlastnosti na vykonávanie operácií CRUD:

@Entity public class Zamestnanec {@Id @GeneratedValue private Long id; private String meno; private String priezvisko; }

Tu je jednoduché zodpovedajúce úložisko Spring Data - na správu operácií CRUD:

verejné rozhranie EmployeeRepository rozširuje JpaRepository {List findByLastNameStartsWithIgnoreCase (reťazec priezvisko); }

Deklarujeme metódu dotazu findByLastNameStartsWithIgnoreCase na Úložisko zamestnancov rozhranie. Vráti zoznam Zamestnanecsa zhoduje s priezvisko.

Poďme tiež vopred vyplniť databázu DB niekoľkými vzorkami Zamestnanecs:

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

4. Vaadin UI

4.1. MainView Trieda

The MainView trieda je vstupným bodom logiky používateľského rozhrania Vaadina. Anotácia @ Route povie Spring Boot, aby to automaticky vyzdvihla a ukázala v koreňovom adresári webovej aplikácie:

@Route verejná trieda MainView rozširuje VerticalLayout {private EmployeeRepository employeeRepository; súkromný editor EmployeeEditor; Mriežka mriežky; Filter TextField; súkromné ​​tlačidlo addNewBtn; }

Adresu URL, kde sa zobrazuje zobrazenie, môžeme prispôsobiť zadaním parametra @ Route anotácia:

@ Route (hodnota = "môj domov")

Trieda používa na zobrazenie týchto komponentov používateľského rozhrania:

Editor editora zamestnancov - ukazuje Zamestnanec formulár používaný na poskytovanie informácií o zamestnancoch na vytváranie a úpravy.

Mriežka mriežky Gird na zobrazenie zoznamu Zamestnanci

Filter TextField - textové pole na zadanie priezviska, na základe ktorého bude pás filtrovaný

Tlačidlo addNewBtn - Tlačidlo na pridanie nového Zamestnanec. Zobrazí EmployeeEditor editor.

Vnútorne používa register zamestnancov vykonávať operácie CRUD.

4.2. Zapojenie komponentov dohromady

MainView predlžuje VerticalLayout. VerticalLayout je kontajner komponentov, ktorý zobrazuje podkomponenty v poradí podľa ich pridania (vertikálne).

Ďalej inicializujeme a pridáme komponenty.

Tlačidlu poskytneme štítok s ikonou +.

this.grid = new Grid (Employee.class); this.filter = new TextField (); this.addNewBtn = nové tlačidlo ("Nový zamestnanec", VaadinIcon.PLUS.create ());

Používame HorizontalLayout vodorovne usporiadať textové pole filtra a tlačidlo. Potom pridajte toto rozloženie, pás a editor do nadradeného vertikálneho rozloženia:

Akcie HorizontalLayout = nové HorizontalLayout (filter, addNewBtn); pridať (akcie, mriežka, editor);

Zadajte výšku pásu a názvy stĺpcov. Do textového poľa tiež pridáme text pomoci:

grid.setHeight ("200px"); grid.setColumns ("id", "meno", "priezvisko"); grid.getColumnByKey ("id"). setWidth ("50px"). setFlexGrow (0); filter.setPlaceholder ("Filtrovať podľa priezviska");

Pri spustení aplikácie by používateľské rozhranie vyzeralo takto:

4.3. Pridanie logiky ku komponentom

Nastavíme ValueChangeMode.EAGER do filter textové pole. Týmto sa hodnota synchronizuje so serverom zakaždým, keď sa na klientovi zmení.

Nastavíme tiež poslucháča udalosti zmeny hodnoty, ktorý vráti filtrovaný zoznam zamestnancov na základe textu uvedeného v filter:

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

Pri výbere riadku v rámci opasku by sme ukázali Zamestnanec formulár umožňujúci používateľovi upraviť meno a priezvisko:

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

Kliknutím na tlačidlo pridať nového zamestnanca by sme zobrazili prázdne miesto Zamestnanec forma:

addNewBtn.addClickListener (e -> editor.editEmployee (nový zamestnanec ("", "")));

Nakoniec si vypočujeme zmeny vykonané editorom a obnovíme mriežku údajmi z backendu:

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

The zoznamZamestnanci funkcia získa filtrovaný zoznam Zamestnanecsa aktualizuje mriežku:

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

4.4. Budovanie formulára

Na pridanie / úpravu zamestnanca použijeme jednoduchý formulár, ktorý umožní používateľovi:

@SpringComponent @UIScope verejná trieda EmployeeEditor rozširuje VerticalLayout implementuje KeyNotifier {súkromné ​​úložisko EmployeeRepository; súkromný zamestnanec; TextField firstName = nový TextField ("Meno"); TextField lastName = nový TextField ("Priezvisko"); Button save = new Button ("Save", VaadinIcon.CHECK.create ()); Zrušenie tlačidla = nové tlačidlo („Zrušiť“); Button delete = new Button ("Delete", VaadinIcon.TRASH.create ()); Akcie HorizontalLayout = nové HorizontalLayout (uloženie, zrušenie, odstránenie); Binder binder = nový Binder (Employee.class); súkromný ChangeHandler changeHandler; }

The @SpringComponent je len alias pre Springs @ Komponent anotácia vyhnúť sa konfliktom s Vaadinsom Komponent trieda.

The @UIScope viaže fazuľu na súčasné používateľské rozhranie Vaadin.

Momentálne upravené Zamestnanec je uložený v zamestnanec členská premenná. Zachytávame Zamestnanec vlastnosti prostredníctvom krstné meno a priezvisko textové polia.

Formulár má tri tlačidlá - uložiť, Zrušiť a vymazať.

Po prepojení všetkých komponentov by formulár vyzeral nižšie ako výber riadkov:

Používame a Binder ktorý viaže polia formulára s Zamestnanec vlastnosti pomocou konvencie pomenovania:

binder.bindInstanceFields (toto);

Na základe operácií používateľa voláme vhodnú metódu EmployeeRepositor:

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

5. Záver

V tomto článku sme napísali plnohodnotnú aplikáciu CRUD UI používajúcu Spring Boot a Spring Data JPA na vytrvalosť.

Ako obvykle je kód k dispozícii na GitHub.