Contoh Aplikasi dengan Spring Boot dan Vaadin

1. Ikhtisar

Vaadin adalah framework Java sisi server untuk membuat antarmuka pengguna web .

Dalam tutorial ini, kita akan menjelajahi cara menggunakan UI berbasis Vaadin pada backend berbasis Spring Boot . Untuk pengantar Vaadin, lihat tutorial ini.

2. Penyiapan

Mari kita mulai dengan menambahkan dependensi Maven ke aplikasi Spring Boot standar:

 com.vaadin vaadin-spring-boot-starter 

Vaadin juga merupakan ketergantungan yang diakui oleh Spring Initializer.

Tutorial ini menggunakan versi Vaadin yang lebih baru daripada versi default yang dibawa oleh modul awal. Untuk menggunakan versi yang lebih baru, cukup tentukan Vaadin Bill of Materials (BOM) seperti ini:

   com.vaadin vaadin-bom 10.0.11 pom import   

3. Layanan Backend

Kami akan menggunakan entitas Karyawan dengan properti firstName dan lastName untuk melakukan operasi CRUD di dalamnya:

@Entity public class Employee { @Id @GeneratedValue private Long id; private String firstName; private String lastName; }

Inilah repositori Spring Data yang sederhana dan sesuai - untuk mengelola operasi CRUD:

public interface EmployeeRepository extends JpaRepository { List findByLastNameStartsWithIgnoreCase(String lastName); }

Kami mendeklarasikan metode kueri findByLastNameStartsWithIgnoreCase pada antarmuka EmployeeRepository . Ini akan mengembalikan daftar Karyawan yang cocok dengan nama belakang .

Mari kita juga mengisi DB dengan beberapa contoh Karyawan :

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

4. Vaadin UI

4.1. Kelas MainView

Kelas MainView adalah titik masuk untuk logika UI Vaadin. Anotasi @Route memberi tahu Spring Boot untuk secara otomatis mengambilnya dan ditampilkan di root aplikasi web:

@Route public class MainView extends VerticalLayout { private EmployeeRepository employeeRepository; private EmployeeEditor editor; Grid grid; TextField filter; private Button addNewBtn; }

Kita dapat menyesuaikan URL tempat tampilan ditampilkan dengan memberikan parameter pada anotasi @Route :

@Route(value="myhome")

Kelas menggunakan komponen UI berikut untuk ditampilkan di halaman:

Editor EmployeeEditor - menunjukkan formulir Karyawan yang digunakan untuk memberikan informasi karyawan untuk dibuat dan diedit.

Grid grid - gir untuk menampilkan daftar Karyawan

Filter BidangTeks - bidang teks untuk memasukkan nama belakang berdasarkan sandaran yang akan difilter

Button addNewBtn - Tombol untuk menambah Karyawan baru . Menampilkan editor EmployeeEditor .

Ini secara internal menggunakan employeeRepository untuk melakukan operasi CRUD.

4.2. Menyambungkan Komponen Bersama

MainView memperluas VerticalLayout . VerticalLayout adalah wadah komponen, yang menampilkan subkomponen dalam urutan penambahannya (secara vertikal).

Selanjutnya, kami menginisialisasi dan menambahkan komponen.

Kami memberikan label ke tombol dengan ikon +.

this.grid = new Grid(Employee.class); this.filter = new TextField(); this.addNewBtn = new Button("New employee", VaadinIcon.PLUS.create());

Kami menggunakan HorizontalLayout untuk menyusun bidang teks filter dan tombol secara horizontal. Kemudian tambahkan layout ini, gird, dan editor ke dalam layout vertikal induk:

HorizontalLayout actions = new HorizontalLayout(filter, addNewBtn); add(actions, grid, editor);

Berikan tinggi sandaran dan nama kolom. Kami juga menambahkan teks bantuan di bidang teks:

grid.setHeight("200px"); grid.setColumns("id", "firstName", "lastName"); grid.getColumnByKey("id").setWidth("50px").setFlexGrow(0); filter.setPlaceholder("Filter by last name");

Pada aplikasi startup, UI akan terlihat seperti ini:

4.3. Menambahkan Logika ke Komponen

Kami akan menetapkan ValueChangeMode.EAGER ke bidang teks filter . Ini menyinkronkan nilai ke server setiap kali diubah pada klien.

Kami juga menyetel listener untuk peristiwa perubahan nilai, yang mengembalikan daftar karyawan yang difilter berdasarkan teks yang disediakan di filter:

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

Saat memilih baris di dalam sandaran, kami akan menampilkan formulir Karyawan , memungkinkan pengguna untuk mengedit nama depan dan nama belakang:

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

Saat mengklik tombol tambahkan karyawan baru, kami akan menampilkan formulir Karyawan kosong :

addNewBtn.addClickListener(e -> editor.editEmployee(new Employee("", "")));

Terakhir, kami mendengarkan perubahan yang dibuat oleh editor dan menyegarkan kisi dengan data dari backend:

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

Fungsi listEmployees mendapatkan daftar Karyawan yang difilter dan memperbarui kisi:

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

4.4. Membangun Formulir

Kami akan menggunakan formulir sederhana bagi pengguna untuk menambahkan / mengedit karyawan:

@SpringComponent @UIScope public class EmployeeEditor extends VerticalLayout implements KeyNotifier { private EmployeeRepository repository; private Employee employee; TextField firstName = new TextField("First name"); TextField lastName = new TextField("Last name"); Button save = new Button("Save", VaadinIcon.CHECK.create()); Button cancel = new Button("Cancel"); Button delete = new Button("Delete", VaadinIcon.TRASH.create()); HorizontalLayout actions = new HorizontalLayout(save, cancel, delete); Binder binder = new Binder(Employee.class); private ChangeHandler changeHandler; }

The @SpringComponent hanya sebuah alias untuk Springs @Component penjelasan untuk menghindari konflik dengan Vaadins Komponen kelas.

The @UIScope mengikat kacang ke Vaadin UI saat ini.

Saat ini, Karyawan yang diedit disimpan dalam variabel anggota karyawan . Kami menangkap properti Karyawan melalui bidang teks firstName dan lastName .

Formulir tersebut memiliki tiga tombol - simpan , batalkan , dan hapus .

Setelah semua komponen disambungkan, formulir akan terlihat seperti di bawah ini untuk pemilihan baris:

Kami menggunakan Binder yang mengikat bidang formulir dengan properti Karyawan menggunakan konvensi penamaan :

binder.bindInstanceFields(this);

Kami memanggil metode EmployeeRepositor yang sesuai berdasarkan operasi pengguna:

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

5. Kesimpulan

Pada artikel ini, kami menulis aplikasi CRUD UI berfitur lengkap menggunakan Spring Boot dan Spring Data JPA untuk ketekunan.

Seperti biasa, kode tersedia di GitHub.