From 29918b148bf10545b2fffe20fe7dbc135135686b Mon Sep 17 00:00:00 2001 From: Marcus Hellberg Date: Tue, 5 Mar 2024 13:46:51 -0800 Subject: [PATCH 1/5] New examples for Vaadin 23.3 --- vaadin/.gitignore | 1 + vaadin/frontend/index.html | 23 ++ vaadin/pom.xml | 183 ++++-------- .../main/java/com/baeldung/Application.java | 8 +- .../src/main/java/com/baeldung/IndexView.java | 25 ++ .../main/java/com/baeldung/data/Contact.java | 73 +++++ .../com/baeldung/data/ContactRepository.java | 6 + .../com/baeldung/data/DataInitializer.java | 46 +++ .../com/baeldung/{ => data}/Employee.java | 9 +- .../{ => data}/EmployeeRepository.java | 2 +- .../com/baeldung/introduction/BindData.java | 20 -- .../com/baeldung/introduction/FormView.java | 88 ++++++ .../com/baeldung/introduction/GridView.java | 40 +++ .../com/baeldung/introduction/PushView.java | 27 ++ .../java/com/baeldung/introduction/Row.java | 45 --- .../com/baeldung/introduction/VaadinUI.java | 282 ------------------ .../introduction/basics/HelloWorldView.java | 13 + .../introduction/basics/VaadinFlowBasics.java | 61 ++++ .../{MainView.java => spring/CrudView.java} | 10 +- .../baeldung/{ => spring}/EmployeeEditor.java | 4 +- .../webapp/VAADIN/themes/mytheme/addons.scss | 7 - .../webapp/VAADIN/themes/mytheme/favicon.ico | Bin 31005 -> 0 bytes .../webapp/VAADIN/themes/mytheme/mytheme.scss | 38 --- .../webapp/VAADIN/themes/mytheme/styles.scss | 11 - 24 files changed, 482 insertions(+), 540 deletions(-) create mode 100644 vaadin/.gitignore create mode 100644 vaadin/frontend/index.html create mode 100644 vaadin/src/main/java/com/baeldung/IndexView.java create mode 100644 vaadin/src/main/java/com/baeldung/data/Contact.java create mode 100644 vaadin/src/main/java/com/baeldung/data/ContactRepository.java create mode 100644 vaadin/src/main/java/com/baeldung/data/DataInitializer.java rename vaadin/src/main/java/com/baeldung/{ => data}/Employee.java (85%) rename vaadin/src/main/java/com/baeldung/{ => data}/EmployeeRepository.java (89%) delete mode 100644 vaadin/src/main/java/com/baeldung/introduction/BindData.java create mode 100644 vaadin/src/main/java/com/baeldung/introduction/FormView.java create mode 100644 vaadin/src/main/java/com/baeldung/introduction/GridView.java create mode 100644 vaadin/src/main/java/com/baeldung/introduction/PushView.java delete mode 100644 vaadin/src/main/java/com/baeldung/introduction/Row.java delete mode 100644 vaadin/src/main/java/com/baeldung/introduction/VaadinUI.java create mode 100644 vaadin/src/main/java/com/baeldung/introduction/basics/HelloWorldView.java create mode 100644 vaadin/src/main/java/com/baeldung/introduction/basics/VaadinFlowBasics.java rename vaadin/src/main/java/com/baeldung/{MainView.java => spring/CrudView.java} (89%) rename vaadin/src/main/java/com/baeldung/{ => spring}/EmployeeEditor.java (96%) delete mode 100644 vaadin/src/main/webapp/VAADIN/themes/mytheme/addons.scss delete mode 100644 vaadin/src/main/webapp/VAADIN/themes/mytheme/favicon.ico delete mode 100644 vaadin/src/main/webapp/VAADIN/themes/mytheme/mytheme.scss delete mode 100644 vaadin/src/main/webapp/VAADIN/themes/mytheme/styles.scss diff --git a/vaadin/.gitignore b/vaadin/.gitignore new file mode 100644 index 0000000000..1ef3efefbd --- /dev/null +++ b/vaadin/.gitignore @@ -0,0 +1 @@ +frontend/generated \ No newline at end of file diff --git a/vaadin/frontend/index.html b/vaadin/frontend/index.html new file mode 100644 index 0000000000..d36e593475 --- /dev/null +++ b/vaadin/frontend/index.html @@ -0,0 +1,23 @@ + + + + + + + + + + + + +
+ + diff --git a/vaadin/pom.xml b/vaadin/pom.xml index aa37a2392a..ea9a3ed75a 100644 --- a/vaadin/pom.xml +++ b/vaadin/pom.xml @@ -1,21 +1,25 @@ + xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" + xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> 4.0.0 org.test vaadin 1.0-SNAPSHOT vaadin - war com.baeldung - parent-boot-2 + parent-boot-3 0.0.1-SNAPSHOT - ../parent-boot-2 + ../parent-boot-3 + + 17 + 24.3.3 + + @@ -30,38 +34,24 @@ - javax.servlet - javax.servlet-api - provided + com.vaadin + vaadin-core com.vaadin - vaadin-server - ${vaadin-server.version} - - - com.vaadin - vaadin-push - ${vaadin-push.version} - - - com.vaadin - vaadin-client-compiled - ${vaadin-client-compiled.version} - - - com.vaadin - vaadin-themes - ${vaadin-themes.version} + vaadin-spring-boot-starter org.springframework.boot spring-boot-starter-data-jpa - com.vaadin - vaadin-spring-boot-starter - ${vaadin-spring-boot-starter.version} + org.springframework.boot + spring-boot-starter-validation + + + io.projectreactor + reactor-core com.h2database @@ -76,47 +66,17 @@ - - org.apache.maven.plugins - maven-war-plugin - ${maven-war-plugin.version} - - false - - WEB-INF/classes/VAADIN/widgetsets/WEB-INF/** - - com.vaadin vaadin-maven-plugin - ${vaadin.plugin.version} - - - org.apache.maven.plugins - maven-clean-plugin - ${maven-clean-plugin.version} - - - - - src/main/webapp/VAADIN/themes - - **/styles.css - **/styles.scss.cache - - - - - - - - - org.eclipse.jetty - jetty-maven-plugin - ${jetty.plugin.version} - - 2 - + ${vaadin.version} + + + + prepare-frontend + + + org.springframework.boot @@ -125,68 +85,41 @@ - - - vaadin-addons - https://maven.vaadin.com/vaadin-addons - - - - vaadin-prerelease - - false - - - - - vaadin-prereleases - https://maven.vaadin.com/vaadin-prereleases - - - vaadin-snapshots - https://oss.sonatype.org/content/repositories/vaadin-snapshots/ - - false - - - true - - - - - - vaadin-prereleases - https://maven.vaadin.com/vaadin-prereleases - - - vaadin-snapshots - https://oss.sonatype.org/content/repositories/vaadin-snapshots/ - - false - - - true - - - + + production + + + + com.vaadin + vaadin-core + + + com.vaadin + vaadin-dev + + + + + + + + com.vaadin + vaadin-maven-plugin + ${vaadin.version} + + + + build-frontend + + compile + + + + + - - - 13.0.9 - 13.0.9 - 13.0.9 - 8.8.5 - 8.8.5 - 8.8.5 - 8.8.5 - 9.3.9.v20160517 - local - mytheme - 3.0.0 - - \ No newline at end of file diff --git a/vaadin/src/main/java/com/baeldung/Application.java b/vaadin/src/main/java/com/baeldung/Application.java index 1d3084723a..b62dd79158 100644 --- a/vaadin/src/main/java/com/baeldung/Application.java +++ b/vaadin/src/main/java/com/baeldung/Application.java @@ -1,15 +1,19 @@ package com.baeldung; +import com.baeldung.data.Employee; +import com.baeldung.data.EmployeeRepository; +import com.vaadin.flow.component.page.AppShellConfigurator; +import com.vaadin.flow.component.page.Push; import org.slf4j.Logger; import org.slf4j.LoggerFactory; - import org.springframework.boot.CommandLineRunner; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.context.annotation.Bean; +@Push @SpringBootApplication -public class Application { +public class Application implements AppShellConfigurator { private static final Logger log = LoggerFactory.getLogger(Application.class); diff --git a/vaadin/src/main/java/com/baeldung/IndexView.java b/vaadin/src/main/java/com/baeldung/IndexView.java new file mode 100644 index 0000000000..c69b160895 --- /dev/null +++ b/vaadin/src/main/java/com/baeldung/IndexView.java @@ -0,0 +1,25 @@ +package com.baeldung; + +import com.baeldung.introduction.PushView; +import com.baeldung.introduction.basics.VaadinFlowBasics; +import com.baeldung.introduction.FormView; +import com.baeldung.introduction.GridView; +import com.baeldung.spring.CrudView; +import com.vaadin.flow.component.html.H1; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.router.Route; +import com.vaadin.flow.router.RouterLink; + +@Route("") +public class IndexView extends VerticalLayout { + + public IndexView() { + add(new H1("Vaadin Flow examples")); + + add(new RouterLink("Basics", VaadinFlowBasics.class)); + add(new RouterLink("Grid", GridView.class)); + add(new RouterLink("Form", FormView.class)); + add(new RouterLink("Push", PushView.class)); + add(new RouterLink("CRUD", CrudView.class)); + } +} diff --git a/vaadin/src/main/java/com/baeldung/data/Contact.java b/vaadin/src/main/java/com/baeldung/data/Contact.java new file mode 100644 index 0000000000..8e534d5bb0 --- /dev/null +++ b/vaadin/src/main/java/com/baeldung/data/Contact.java @@ -0,0 +1,73 @@ +package com.baeldung.data; + +import jakarta.persistence.Entity; +import jakarta.persistence.GeneratedValue; +import jakarta.persistence.Id; +import jakarta.validation.constraints.Email; +import jakarta.validation.constraints.NotBlank; +import jakarta.validation.constraints.Pattern; + +@Entity +public class Contact { + + @Id + @GeneratedValue + private Long id; + @NotBlank + private String name; + @Email + private String email; + @Pattern(regexp = "\\d{3}-\\d{3}-\\d{4}") + private String phone; + + public Contact() { + } + + public Contact(String name, String email, String phone) { + this.name = name; + this.email = email; + this.phone = phone; + } + + public Long getId() { + return id; + } + + public void setId(Long id) { + this.id = id; + } + + public String getName() { + return name; + } + + public void setName(String name) { + this.name = name; + } + + public String getEmail() { + return email; + } + + public void setEmail(String email) { + this.email = email; + } + + public String getPhone() { + return phone; + } + + public void setPhone(String phone) { + this.phone = phone; + } + + @Override + public String toString() { + return "Contact {" + + "id=" + id + + ", name='" + name + "'" + + ", email='" + email + "'" + + ", phone='" + phone + "'" + + " }"; + } +} diff --git a/vaadin/src/main/java/com/baeldung/data/ContactRepository.java b/vaadin/src/main/java/com/baeldung/data/ContactRepository.java new file mode 100644 index 0000000000..15c4adaaa9 --- /dev/null +++ b/vaadin/src/main/java/com/baeldung/data/ContactRepository.java @@ -0,0 +1,6 @@ +package com.baeldung.data; + +import org.springframework.data.jpa.repository.JpaRepository; + +public interface ContactRepository extends JpaRepository { +} diff --git a/vaadin/src/main/java/com/baeldung/data/DataInitializer.java b/vaadin/src/main/java/com/baeldung/data/DataInitializer.java new file mode 100644 index 0000000000..dba162d4e4 --- /dev/null +++ b/vaadin/src/main/java/com/baeldung/data/DataInitializer.java @@ -0,0 +1,46 @@ +package com.baeldung.data; + +import org.springframework.boot.CommandLineRunner; +import org.springframework.stereotype.Component; + +import java.util.ArrayList; +import java.util.List; +import java.util.Random; + +@Component +public class DataInitializer implements CommandLineRunner { + + private final ContactRepository contactRepository; + + public DataInitializer(ContactRepository contactRepository) { + this.contactRepository = contactRepository; + } + + private final List firstNames = List.of( + "John", "Jane", "Emily", "Michael", "Sarah", "James", "Mary", "Robert", + "Patricia", "William", "Linda", "David", "Barbara", "Richard", "Susan", + "Joseph", "Jessica", "Thomas", "Karen", "Charles" + ); + private final List lastNames = List.of( + "Doe", "Smith", "Johnson", "Brown", "Davis", "Miller", "Wilson", "Moore", + "Taylor", "Anderson", "Thomas", "Jackson", "White", "Harris", "Martin", + "Thompson", "Garcia", "Martinez", "Robinson", "Clark" + ); + + @Override + public void run(String... args) throws Exception { + var contacts = new ArrayList(); + Random random = new Random(); + + for (int i = 0; i < 100; i++) { + String firstName = firstNames.get(random.nextInt(firstNames.size())); + String lastName = lastNames.get(random.nextInt(lastNames.size())); + String email = String.format("%s.%s@example.com", firstName.toLowerCase(), lastName.toLowerCase()); + String phone = String.format("555-%03d-%04d", random.nextInt(1000), random.nextInt(10000)); + + contacts.add(new Contact(firstName + " " + lastName, email, phone)); + } + + contactRepository.saveAll(contacts); + } +} diff --git a/vaadin/src/main/java/com/baeldung/Employee.java b/vaadin/src/main/java/com/baeldung/data/Employee.java similarity index 85% rename from vaadin/src/main/java/com/baeldung/Employee.java rename to vaadin/src/main/java/com/baeldung/data/Employee.java index 726f0838b6..2685e38286 100644 --- a/vaadin/src/main/java/com/baeldung/Employee.java +++ b/vaadin/src/main/java/com/baeldung/data/Employee.java @@ -1,8 +1,9 @@ -package com.baeldung; +package com.baeldung.data; -import javax.persistence.Entity; -import javax.persistence.GeneratedValue; -import javax.persistence.Id; + +import jakarta.persistence.Entity; +import jakarta.persistence.GeneratedValue; +import jakarta.persistence.Id; @Entity public class Employee { diff --git a/vaadin/src/main/java/com/baeldung/EmployeeRepository.java b/vaadin/src/main/java/com/baeldung/data/EmployeeRepository.java similarity index 89% rename from vaadin/src/main/java/com/baeldung/EmployeeRepository.java rename to vaadin/src/main/java/com/baeldung/data/EmployeeRepository.java index 044160da78..0d54148c85 100644 --- a/vaadin/src/main/java/com/baeldung/EmployeeRepository.java +++ b/vaadin/src/main/java/com/baeldung/data/EmployeeRepository.java @@ -1,4 +1,4 @@ -package com.baeldung; +package com.baeldung.data; import java.util.List; diff --git a/vaadin/src/main/java/com/baeldung/introduction/BindData.java b/vaadin/src/main/java/com/baeldung/introduction/BindData.java deleted file mode 100644 index 299554c039..0000000000 --- a/vaadin/src/main/java/com/baeldung/introduction/BindData.java +++ /dev/null @@ -1,20 +0,0 @@ -package com.baeldung.introduction; - -public class BindData { - - private String bindName; - - public BindData(String bindName){ - this.bindName = bindName; - } - - public String getBindName() { - return bindName; - } - - public void setBindName(String bindName) { - this.bindName = bindName; - } - - -} diff --git a/vaadin/src/main/java/com/baeldung/introduction/FormView.java b/vaadin/src/main/java/com/baeldung/introduction/FormView.java new file mode 100644 index 0000000000..34bc334b27 --- /dev/null +++ b/vaadin/src/main/java/com/baeldung/introduction/FormView.java @@ -0,0 +1,88 @@ +package com.baeldung.introduction; + +import com.baeldung.data.Contact; +import com.vaadin.flow.component.button.Button; +import com.vaadin.flow.component.html.H2; +import com.vaadin.flow.component.notification.Notification; +import com.vaadin.flow.component.orderedlayout.HorizontalLayout; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.component.textfield.TextField; +import com.vaadin.flow.data.binder.BeanValidationBinder; +import com.vaadin.flow.data.binder.Binder; +import com.vaadin.flow.router.Route; + +@Route("form") +public class FormView extends HorizontalLayout { + + public FormView() { + addBeanValidationExample(); + addCustomValidationExample(); + } + + private void addBeanValidationExample() { + var nameField = new TextField("Name"); + var emailField = new TextField("Email"); + var phoneField = new TextField("Phone"); + var saveButton = new Button("Save"); + + var binder = new BeanValidationBinder<>(Contact.class); + + binder.forField(nameField).bind(Contact::getName, Contact::setName); + binder.forField(emailField).bind(Contact::getEmail, Contact::setEmail); + binder.forField(phoneField).bind(Contact::getPhone, Contact::setPhone); + + var contact = new Contact("John Doe", "john@doe.com", "123-456-7890"); + binder.setBean(contact); + + saveButton.addClickListener(e -> { + if (binder.validate().isOk()) { + Notification.show("Saved " + contact); + } + }); + + add(new VerticalLayout( + new H2("Bean Validation Example"), + nameField, + emailField, + phoneField, + saveButton + )); + } + + private void addCustomValidationExample() { + + var nameField = new TextField("Name"); + var emailField = new TextField("Email"); + var phoneField = new TextField("Phone"); + var saveButton = new Button("Save"); + + var binder = new Binder<>(Contact.class); + + binder.forField(nameField) + .asRequired() + .bind(Contact::getName, Contact::setName); + binder.forField(emailField) + .withValidator(email -> email.contains("@"), "Not a valid email address") + .bind(Contact::getEmail, Contact::setEmail); + binder.forField(phoneField) + .withValidator(phone -> phone.matches("\\d{3}-\\d{3}-\\d{4}"), "Not a valid phone number") + .bind(Contact::getPhone, Contact::setPhone); + + var contact = new Contact("John Doe", "john@doe.com", "123-456-7890"); + binder.setBean(contact); + + saveButton.addClickListener(e -> { + if (binder.validate().isOk()) { + Notification.show("Saved " + contact); + } + }); + + add(new VerticalLayout( + new H2("Custom Validation Example"), + nameField, + emailField, + phoneField, + saveButton + )); + } +} diff --git a/vaadin/src/main/java/com/baeldung/introduction/GridView.java b/vaadin/src/main/java/com/baeldung/introduction/GridView.java new file mode 100644 index 0000000000..3d9500d7d8 --- /dev/null +++ b/vaadin/src/main/java/com/baeldung/introduction/GridView.java @@ -0,0 +1,40 @@ +package com.baeldung.introduction; + +import com.baeldung.data.Contact; +import com.baeldung.data.ContactRepository; +import com.vaadin.flow.component.grid.Grid; +import com.vaadin.flow.component.html.H1; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.router.Route; +import com.vaadin.flow.spring.data.VaadinSpringDataHelpers; + +@Route("grid") +public class GridView extends VerticalLayout { + + public GridView(ContactRepository contactRepository) { + + add(new H1("Using data grids")); + + // Define a grid for a Contact entity + var grid = new Grid(); + grid.addColumn(Contact::getName).setHeader("Name"); + grid.addColumn(Contact::getEmail).setHeader("Email"); + grid.addColumn(Contact::getPhone).setHeader("Phone"); + + // There are two ways to populate the grid with data: + + // 1) In-memory with a list of items + var contacts = contactRepository.findAll(); + grid.setItems(contacts); + + // 2) with a callback to lazily load items from a data source. + grid.setItems(query -> { + // Turn the page, offset, filter, sort and other info in query into a Spring Data PageRequest + var pageRequest = VaadinSpringDataHelpers.toSpringPageRequest(query); + return contactRepository.findAll(pageRequest).stream(); + }); + + add(grid); + + } +} diff --git a/vaadin/src/main/java/com/baeldung/introduction/PushView.java b/vaadin/src/main/java/com/baeldung/introduction/PushView.java new file mode 100644 index 0000000000..28d8162003 --- /dev/null +++ b/vaadin/src/main/java/com/baeldung/introduction/PushView.java @@ -0,0 +1,27 @@ +package com.baeldung.introduction; + +import com.vaadin.flow.component.html.H1; +import com.vaadin.flow.component.html.Span; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.router.Route; +import reactor.core.publisher.Flux; + +import java.time.Duration; +import java.time.Instant; + +// Ensure you have @Push annotation in your Application class +@Route("push") +public class PushView extends VerticalLayout { + + public PushView() { + var output = new Span(); + + add(new H1("Server Push"), output); + + Flux.interval(Duration.ofSeconds(1)) + .map(o -> "Server time: " + Instant.now()) + .subscribe(time -> getUI().ifPresent(ui -> ui.access(() -> { + output.setText(time); + }))); + } +} diff --git a/vaadin/src/main/java/com/baeldung/introduction/Row.java b/vaadin/src/main/java/com/baeldung/introduction/Row.java deleted file mode 100644 index 412a286376..0000000000 --- a/vaadin/src/main/java/com/baeldung/introduction/Row.java +++ /dev/null @@ -1,45 +0,0 @@ -package com.baeldung.introduction; - -public class Row { - - private String column1; - - private String column2; - - private String column3; - - public Row() { - - } - - public Row(String column1, String column2, String column3) { - super(); - this.column1 = column1; - this.column2 = column2; - this.column3 = column3; - } - - public String getColumn1() { - return column1; - } - - public void setColumn1(String column1) { - this.column1 = column1; - } - - public String getColumn2() { - return column2; - } - - public void setColumn2(String column2) { - this.column2 = column2; - } - - public String getColumn3() { - return column3; - } - - public void setColumn3(String column3) { - this.column3 = column3; - } -} \ No newline at end of file diff --git a/vaadin/src/main/java/com/baeldung/introduction/VaadinUI.java b/vaadin/src/main/java/com/baeldung/introduction/VaadinUI.java deleted file mode 100644 index 22ce19f5e0..0000000000 --- a/vaadin/src/main/java/com/baeldung/introduction/VaadinUI.java +++ /dev/null @@ -1,282 +0,0 @@ -package com.baeldung.introduction; - -import java.time.Instant; -import java.time.LocalDate; -import java.util.ArrayList; -import java.util.List; -import java.util.concurrent.Executors; -import java.util.concurrent.ScheduledExecutorService; -import java.util.concurrent.TimeUnit; - -import javax.servlet.annotation.WebServlet; - -import com.vaadin.annotations.Push; -import com.vaadin.annotations.Theme; -import com.vaadin.annotations.VaadinServletConfiguration; -import com.vaadin.data.Binder; -import com.vaadin.data.validator.StringLengthValidator; -import com.vaadin.icons.VaadinIcons; -import com.vaadin.server.ExternalResource; -import com.vaadin.server.VaadinRequest; -import com.vaadin.server.VaadinServlet; -import com.vaadin.ui.Button; -import com.vaadin.ui.CheckBox; -import com.vaadin.ui.ComboBox; -import com.vaadin.ui.DateField; -import com.vaadin.ui.FormLayout; -import com.vaadin.ui.Grid; -import com.vaadin.ui.GridLayout; -import com.vaadin.ui.HorizontalLayout; -import com.vaadin.ui.InlineDateField; -import com.vaadin.ui.Label; -import com.vaadin.ui.Link; -import com.vaadin.ui.ListSelect; -import com.vaadin.ui.NativeButton; -import com.vaadin.ui.NativeSelect; -import com.vaadin.ui.Panel; -import com.vaadin.ui.PasswordField; -import com.vaadin.ui.RichTextArea; -import com.vaadin.ui.TextArea; -import com.vaadin.ui.TextField; -import com.vaadin.ui.TwinColSelect; -import com.vaadin.ui.UI; -import com.vaadin.ui.VerticalLayout; - -@SuppressWarnings("serial") -@Push -@Theme("mytheme") -public class VaadinUI extends UI { - - private Label currentTime; - - @SuppressWarnings({ "rawtypes", "unchecked" }) - @Override - protected void init(VaadinRequest vaadinRequest) { - final VerticalLayout verticalLayout = new VerticalLayout(); - verticalLayout.setSpacing(true); - verticalLayout.setMargin(true); - final GridLayout gridLayout = new GridLayout(3, 2); - gridLayout.setSpacing(true); - gridLayout.setMargin(true); - final HorizontalLayout horizontalLayout = new HorizontalLayout(); - horizontalLayout.setSpacing(true); - horizontalLayout.setMargin(true); - final FormLayout formLayout = new FormLayout(); - formLayout.setSpacing(true); - formLayout.setMargin(true); - final GridLayout buttonLayout = new GridLayout(3, 5); - buttonLayout.setMargin(true); - buttonLayout.setSpacing(true); - - final Label label = new Label(); - label.setId("Label"); - label.setValue("Label Value"); - label.setCaption("Label"); - gridLayout.addComponent(label); - - final Link link = new Link("Baeldung", new ExternalResource("http://www.baeldung.com/")); - link.setId("Link"); - link.setTargetName("_blank"); - gridLayout.addComponent(link); - - final TextField textField = new TextField(); - textField.setId("TextField"); - textField.setCaption("TextField:"); - textField.setValue("TextField Value"); - textField.setIcon(VaadinIcons.USER); - gridLayout.addComponent(textField); - - final TextArea textArea = new TextArea(); - textArea.setCaption("TextArea"); - textArea.setId("TextArea"); - textArea.setValue("TextArea Value"); - gridLayout.addComponent(textArea); - - final DateField dateField = new DateField("DateField", LocalDate.ofEpochDay(0)); - dateField.setId("DateField"); - gridLayout.addComponent(dateField); - - final PasswordField passwordField = new PasswordField(); - passwordField.setId("PasswordField"); - passwordField.setCaption("PasswordField:"); - passwordField.setValue("password"); - gridLayout.addComponent(passwordField); - - final RichTextArea richTextArea = new RichTextArea(); - richTextArea.setCaption("Rich Text Area"); - richTextArea.setValue("

RichTextArea

"); - richTextArea.setSizeFull(); - - Panel richTextPanel = new Panel(); - richTextPanel.setContent(richTextArea); - - final InlineDateField inlineDateField = new InlineDateField(); - inlineDateField.setValue(LocalDate.ofEpochDay(0)); - inlineDateField.setCaption("Inline Date Field"); - horizontalLayout.addComponent(inlineDateField); - - Button normalButton = new Button("Normal Button"); - normalButton.setId("NormalButton"); - normalButton.addClickListener(e -> { - label.setValue("CLICK"); - }); - buttonLayout.addComponent(normalButton); - - Button tinyButton = new Button("Tiny Button"); - tinyButton.addStyleName("tiny"); - buttonLayout.addComponent(tinyButton); - - Button smallButton = new Button("Small Button"); - smallButton.addStyleName("small"); - buttonLayout.addComponent(smallButton); - - Button largeButton = new Button("Large Button"); - largeButton.addStyleName("large"); - buttonLayout.addComponent(largeButton); - - Button hugeButton = new Button("Huge Button"); - hugeButton.addStyleName("huge"); - buttonLayout.addComponent(hugeButton); - - Button disabledButton = new Button("Disabled Button"); - disabledButton.setDescription("This button cannot be clicked"); - disabledButton.setEnabled(false); - buttonLayout.addComponent(disabledButton); - - Button dangerButton = new Button("Danger Button"); - dangerButton.addStyleName("danger"); - buttonLayout.addComponent(dangerButton); - - Button friendlyButton = new Button("Friendly Button"); - friendlyButton.addStyleName("friendly"); - buttonLayout.addComponent(friendlyButton); - - Button primaryButton = new Button("Primary Button"); - primaryButton.addStyleName("primary"); - buttonLayout.addComponent(primaryButton); - - NativeButton nativeButton = new NativeButton("Native Button"); - buttonLayout.addComponent(nativeButton); - - Button iconButton = new Button("Icon Button"); - iconButton.setIcon(VaadinIcons.ALIGN_LEFT); - buttonLayout.addComponent(iconButton); - - Button borderlessButton = new Button("BorderLess Button"); - borderlessButton.addStyleName("borderless"); - buttonLayout.addComponent(borderlessButton); - - Button linkButton = new Button("Link Button"); - linkButton.addStyleName("link"); - buttonLayout.addComponent(linkButton); - - Button quietButton = new Button("Quiet Button"); - quietButton.addStyleName("quiet"); - buttonLayout.addComponent(quietButton); - - horizontalLayout.addComponent(buttonLayout); - - final CheckBox checkbox = new CheckBox("CheckBox"); - checkbox.setValue(true); - checkbox.addValueChangeListener(e -> checkbox.setValue(!checkbox.getValue())); - formLayout.addComponent(checkbox); - - List numbers = new ArrayList(); - numbers.add("One"); - numbers.add("Ten"); - numbers.add("Eleven"); - ComboBox comboBox = new ComboBox("ComboBox"); - comboBox.setItems(numbers); - formLayout.addComponent(comboBox); - - ListSelect listSelect = new ListSelect("ListSelect"); - listSelect.setItems(numbers); - listSelect.setRows(2); - formLayout.addComponent(listSelect); - - NativeSelect nativeSelect = new NativeSelect("NativeSelect"); - nativeSelect.setItems(numbers); - formLayout.addComponent(nativeSelect); - - TwinColSelect twinColSelect = new TwinColSelect("TwinColSelect"); - twinColSelect.setItems(numbers); - - Grid grid = new Grid(Row.class); - grid.setColumns("column1", "column2", "column3"); - Row row1 = new Row("Item1", "Item2", "Item3"); - Row row2 = new Row("Item4", "Item5", "Item6"); - List rows = new ArrayList(); - rows.add(row1); - rows.add(row2); - grid.setItems(rows); - - Panel panel = new Panel("Panel"); - panel.setContent(grid); - panel.setSizeUndefined(); - - Panel serverPushPanel = new Panel("Server Push"); - FormLayout timeLayout = new FormLayout(); - timeLayout.setSpacing(true); - timeLayout.setMargin(true); - currentTime = new Label("No TIME..."); - timeLayout.addComponent(currentTime); - serverPushPanel.setContent(timeLayout); - serverPushPanel.setSizeUndefined(); - ScheduledExecutorService scheduleExecutor = Executors.newScheduledThreadPool(1); - Runnable task = () -> { - currentTime.setValue("Current Time : " + Instant.now()); - }; - scheduleExecutor.scheduleWithFixedDelay(task, 0, 1, TimeUnit.SECONDS); - - FormLayout dataBindingLayout = new FormLayout(); - dataBindingLayout.setSpacing(true); - dataBindingLayout.setMargin(true); - - Binder binder = new Binder<>(); - BindData bindData = new BindData("BindData"); - binder.readBean(bindData); - TextField bindedTextField = new TextField(); - bindedTextField.setWidth("250px"); - binder.forField(bindedTextField).bind(BindData::getBindName, BindData::setBindName); - dataBindingLayout.addComponent(bindedTextField); - - FormLayout validatorLayout = new FormLayout(); - validatorLayout.setSpacing(true); - validatorLayout.setMargin(true); - - HorizontalLayout textValidatorLayout = new HorizontalLayout(); - textValidatorLayout.setSpacing(true); - textValidatorLayout.setMargin(true); - - - BindData stringValidatorBindData = new BindData(""); - TextField stringValidator = new TextField(); - Binder stringValidatorBinder = new Binder<>(); - stringValidatorBinder.setBean(stringValidatorBindData); - stringValidatorBinder.forField(stringValidator) - .withValidator(new StringLengthValidator("String must have 2-5 characters lenght", 2, 5)) - .bind(BindData::getBindName, BindData::setBindName); - - textValidatorLayout.addComponent(stringValidator); - Button buttonStringValidator = new Button("Validate String"); - buttonStringValidator.addClickListener(e -> stringValidatorBinder.validate()); - textValidatorLayout.addComponent(buttonStringValidator); - - validatorLayout.addComponent(textValidatorLayout); - verticalLayout.addComponent(gridLayout); - verticalLayout.addComponent(richTextPanel); - verticalLayout.addComponent(horizontalLayout); - verticalLayout.addComponent(formLayout); - verticalLayout.addComponent(twinColSelect); - verticalLayout.addComponent(panel); - verticalLayout.addComponent(serverPushPanel); - verticalLayout.addComponent(dataBindingLayout); - verticalLayout.addComponent(validatorLayout); - setContent(verticalLayout); - } - - @WebServlet(urlPatterns = "/VAADIN/*", name = "MyUIServlet", asyncSupported = true) - @VaadinServletConfiguration(ui = VaadinUI.class, productionMode = false) - public static class MyUIServlet extends VaadinServlet { - } -} \ No newline at end of file diff --git a/vaadin/src/main/java/com/baeldung/introduction/basics/HelloWorldView.java b/vaadin/src/main/java/com/baeldung/introduction/basics/HelloWorldView.java new file mode 100644 index 0000000000..477cf378c6 --- /dev/null +++ b/vaadin/src/main/java/com/baeldung/introduction/basics/HelloWorldView.java @@ -0,0 +1,13 @@ +package com.baeldung.introduction.basics; + +import com.vaadin.flow.component.html.H1; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.router.Route; + +@Route("hello-world") +public class HelloWorldView extends VerticalLayout { + + public HelloWorldView() { + add(new H1("Hello, World!")); + } +} diff --git a/vaadin/src/main/java/com/baeldung/introduction/basics/VaadinFlowBasics.java b/vaadin/src/main/java/com/baeldung/introduction/basics/VaadinFlowBasics.java new file mode 100644 index 0000000000..cd028dcd1d --- /dev/null +++ b/vaadin/src/main/java/com/baeldung/introduction/basics/VaadinFlowBasics.java @@ -0,0 +1,61 @@ +package com.baeldung.introduction.basics; + +import com.vaadin.flow.component.button.Button; +import com.vaadin.flow.component.checkbox.Checkbox; +import com.vaadin.flow.component.html.H1; +import com.vaadin.flow.component.notification.Notification; +import com.vaadin.flow.component.orderedlayout.HorizontalLayout; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.component.textfield.TextField; +import com.vaadin.flow.router.Route; +import com.vaadin.flow.router.RouterLink; + +// The @Route annotation defines the URL path for the view +// Any component, most commonly a layout, can be used as a view +@Route("basics") +public class VaadinFlowBasics extends VerticalLayout { + public VaadinFlowBasics() { + + // Add components to the layout with the add method + add(new H1("Vaadin Flow Basics")); + + // Components are Java objects + var textField = new TextField("Name"); + var button = new Button("Click me"); + + // Layouts define the structure of the UI + var verticalLayout = new VerticalLayout( + new Button("Top"), + new Button("Middle"), + new Button("Bottom") + ); + add(verticalLayout); + + var horizontalLayout = new HorizontalLayout( + new Button("Left"), + new Button("Center"), + new Button("Right") + ); + add(horizontalLayout); + + // Layouts can be nested for more complex structures + var nestedLayout = new VerticalLayout( + new HorizontalLayout(new Button("Top Left"), new Button("Top Right")), + new HorizontalLayout(new Button("Bottom Left"), new Button("Bottom Right")) + ); + add(nestedLayout); + + // Use RouterLink to navigate to other views + var link = new RouterLink("Hello world view", HelloWorldView.class); + add(link); + + // Use events to react to user input + var nameField = new TextField("Your name"); + var helloButton = new Button("Say hello"); + helloButton.addClickListener(e -> { + Notification.show("Hello, " + nameField.getValue()); + }); + add(nameField, helloButton); + + } +} diff --git a/vaadin/src/main/java/com/baeldung/MainView.java b/vaadin/src/main/java/com/baeldung/spring/CrudView.java similarity index 89% rename from vaadin/src/main/java/com/baeldung/MainView.java rename to vaadin/src/main/java/com/baeldung/spring/CrudView.java index 6d4c0aaa88..a77e32e965 100644 --- a/vaadin/src/main/java/com/baeldung/MainView.java +++ b/vaadin/src/main/java/com/baeldung/spring/CrudView.java @@ -1,5 +1,7 @@ -package com.baeldung; +package com.baeldung.spring; +import com.baeldung.data.Employee; +import com.baeldung.data.EmployeeRepository; import org.springframework.util.StringUtils; import com.vaadin.flow.component.button.Button; @@ -11,8 +13,8 @@ import com.vaadin.flow.component.textfield.TextField; import com.vaadin.flow.data.value.ValueChangeMode; import com.vaadin.flow.router.Route; -@Route -public class MainView extends VerticalLayout { +@Route("crud") +public class CrudView extends VerticalLayout { private final EmployeeRepository employeeRepository; @@ -24,7 +26,7 @@ public class MainView extends VerticalLayout { private final Button addNewBtn; - public MainView(EmployeeRepository repo, EmployeeEditor editor) { + public CrudView(EmployeeRepository repo, EmployeeEditor editor) { this.employeeRepository = repo; this.editor = editor; this.grid = new Grid<>(Employee.class); diff --git a/vaadin/src/main/java/com/baeldung/EmployeeEditor.java b/vaadin/src/main/java/com/baeldung/spring/EmployeeEditor.java similarity index 96% rename from vaadin/src/main/java/com/baeldung/EmployeeEditor.java rename to vaadin/src/main/java/com/baeldung/spring/EmployeeEditor.java index ee312786d1..25e447102c 100644 --- a/vaadin/src/main/java/com/baeldung/EmployeeEditor.java +++ b/vaadin/src/main/java/com/baeldung/spring/EmployeeEditor.java @@ -1,5 +1,7 @@ -package com.baeldung; +package com.baeldung.spring; +import com.baeldung.data.Employee; +import com.baeldung.data.EmployeeRepository; import com.vaadin.flow.component.Key; import com.vaadin.flow.component.KeyNotifier; import com.vaadin.flow.component.button.Button; diff --git a/vaadin/src/main/webapp/VAADIN/themes/mytheme/addons.scss b/vaadin/src/main/webapp/VAADIN/themes/mytheme/addons.scss deleted file mode 100644 index a5670b70c7..0000000000 --- a/vaadin/src/main/webapp/VAADIN/themes/mytheme/addons.scss +++ /dev/null @@ -1,7 +0,0 @@ -/* This file is automatically managed and will be overwritten from time to time. */ -/* Do not manually edit this file. */ - -/* Import and include this mixin into your project theme to include the addon themes */ -@mixin addons { -} - diff --git a/vaadin/src/main/webapp/VAADIN/themes/mytheme/favicon.ico b/vaadin/src/main/webapp/VAADIN/themes/mytheme/favicon.ico deleted file mode 100644 index ffb34a65c73eb1b3d59dcbb8f18ec78a8b0fc767..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 31005 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 Date: Thu, 7 Mar 2024 14:07:25 -0800 Subject: [PATCH 2/5] Complete push example --- .../com/baeldung/introduction/PushView.java | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/vaadin/src/main/java/com/baeldung/introduction/PushView.java b/vaadin/src/main/java/com/baeldung/introduction/PushView.java index 28d8162003..b49aa06e4d 100644 --- a/vaadin/src/main/java/com/baeldung/introduction/PushView.java +++ b/vaadin/src/main/java/com/baeldung/introduction/PushView.java @@ -1,6 +1,5 @@ package com.baeldung.introduction; -import com.vaadin.flow.component.html.H1; import com.vaadin.flow.component.html.Span; import com.vaadin.flow.component.orderedlayout.VerticalLayout; import com.vaadin.flow.router.Route; @@ -16,12 +15,18 @@ public class PushView extends VerticalLayout { public PushView() { var output = new Span(); - add(new H1("Server Push"), output); + // Publish server time once a second + var serverTime = Flux.interval(Duration.ofSeconds(1)) + .map(o -> "Server time: " + Instant.now()); - Flux.interval(Duration.ofSeconds(1)) - .map(o -> "Server time: " + Instant.now()) - .subscribe(time -> getUI().ifPresent(ui -> ui.access(() -> { - output.setText(time); - }))); + + serverTime.subscribe(time -> + // ui.access is required to update the UI from a background thread + getUI().ifPresent(ui -> + ui.access(() -> output.setText(time)) + ) + ); + + add(output); } } From 58335b163a4d354946f6f2c3fb793b893f0e152c Mon Sep 17 00:00:00 2001 From: Marcus Hellberg Date: Wed, 20 Mar 2024 16:17:06 -0700 Subject: [PATCH 3/5] Add example complex layout --- .../introduction/basics/ExampleLayout.java | 45 +++++++++++++++++++ .../introduction/basics/VaadinFlowBasics.java | 2 + 2 files changed, 47 insertions(+) create mode 100644 vaadin/src/main/java/com/baeldung/introduction/basics/ExampleLayout.java diff --git a/vaadin/src/main/java/com/baeldung/introduction/basics/ExampleLayout.java b/vaadin/src/main/java/com/baeldung/introduction/basics/ExampleLayout.java new file mode 100644 index 0000000000..6d6e2b2b7d --- /dev/null +++ b/vaadin/src/main/java/com/baeldung/introduction/basics/ExampleLayout.java @@ -0,0 +1,45 @@ +package com.baeldung.introduction.basics; + +import com.baeldung.data.Contact; +import com.vaadin.flow.component.button.Button; +import com.vaadin.flow.component.grid.Grid; +import com.vaadin.flow.component.orderedlayout.HorizontalLayout; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.component.splitlayout.SplitLayout; +import com.vaadin.flow.component.textfield.TextField; +import com.vaadin.flow.router.Route; + +import java.util.List; + +@Route("example-layout") +public class ExampleLayout extends SplitLayout { + + public ExampleLayout() { + var grid = new Grid<>(Contact.class); + grid.setColumns("name", "email", "phone"); + grid.setItems(List.of( + new Contact("John Doe", "john@doe.com", "123 456 789"), + new Contact("Jane Doe", "jane@doe.com", "987 654 321") + )); + + var form = new VerticalLayout(); + + var nameField = new TextField("Name"); + var emailField = new TextField("Email"); + var phoneField = new TextField("Phone"); + var saveButton = new Button("Save"); + var cancelButton = new Button("Cancel"); + + form.add( + nameField, + emailField, + phoneField, + new HorizontalLayout(saveButton, cancelButton) + ); + + setSizeFull(); + setSplitterPosition(70); + addToPrimary(grid); + addToSecondary(form); + } +} diff --git a/vaadin/src/main/java/com/baeldung/introduction/basics/VaadinFlowBasics.java b/vaadin/src/main/java/com/baeldung/introduction/basics/VaadinFlowBasics.java index cd028dcd1d..7a22eea0ab 100644 --- a/vaadin/src/main/java/com/baeldung/introduction/basics/VaadinFlowBasics.java +++ b/vaadin/src/main/java/com/baeldung/introduction/basics/VaadinFlowBasics.java @@ -45,6 +45,8 @@ public class VaadinFlowBasics extends VerticalLayout { ); add(nestedLayout); + add(new RouterLink("Example layout", ExampleLayout.class)); + // Use RouterLink to navigate to other views var link = new RouterLink("Hello world view", HelloWorldView.class); add(link); From 9d258aa50581584c515ce9253dabfc1f409d28c3 Mon Sep 17 00:00:00 2001 From: Marcus Hellberg Date: Mon, 1 Apr 2024 15:36:34 -0700 Subject: [PATCH 4/5] Update the crud example --- .../src/main/java/com/baeldung/IndexView.java | 4 +- .../main/java/com/baeldung/data/Employee.java | 9 +- .../java/com/baeldung/spring/CrudView.java | 69 ----------- .../com/baeldung/spring/EmployeeEditor.java | 117 ++++++++---------- .../com/baeldung/spring/EmployeesView.java | 95 ++++++++++++++ 5 files changed, 160 insertions(+), 134 deletions(-) delete mode 100644 vaadin/src/main/java/com/baeldung/spring/CrudView.java create mode 100644 vaadin/src/main/java/com/baeldung/spring/EmployeesView.java diff --git a/vaadin/src/main/java/com/baeldung/IndexView.java b/vaadin/src/main/java/com/baeldung/IndexView.java index c69b160895..45ab534ef6 100644 --- a/vaadin/src/main/java/com/baeldung/IndexView.java +++ b/vaadin/src/main/java/com/baeldung/IndexView.java @@ -4,7 +4,7 @@ import com.baeldung.introduction.PushView; import com.baeldung.introduction.basics.VaadinFlowBasics; import com.baeldung.introduction.FormView; import com.baeldung.introduction.GridView; -import com.baeldung.spring.CrudView; +import com.baeldung.spring.EmployeesView; import com.vaadin.flow.component.html.H1; import com.vaadin.flow.component.orderedlayout.VerticalLayout; import com.vaadin.flow.router.Route; @@ -20,6 +20,6 @@ public class IndexView extends VerticalLayout { add(new RouterLink("Grid", GridView.class)); add(new RouterLink("Form", FormView.class)); add(new RouterLink("Push", PushView.class)); - add(new RouterLink("CRUD", CrudView.class)); + add(new RouterLink("CRUD", EmployeesView.class)); } } diff --git a/vaadin/src/main/java/com/baeldung/data/Employee.java b/vaadin/src/main/java/com/baeldung/data/Employee.java index 2685e38286..cdaa426eeb 100644 --- a/vaadin/src/main/java/com/baeldung/data/Employee.java +++ b/vaadin/src/main/java/com/baeldung/data/Employee.java @@ -4,6 +4,7 @@ package com.baeldung.data; import jakarta.persistence.Entity; import jakarta.persistence.GeneratedValue; import jakarta.persistence.Id; +import jakarta.validation.constraints.Size; @Entity public class Employee { @@ -12,11 +13,13 @@ public class Employee { @GeneratedValue private Long id; + @Size(min = 2, message = "First name must have at least 2 characters") private String firstName; + @Size(min = 2, message = "Last name must have at least 2 characters") private String lastName; - protected Employee() { + public Employee() { } public Employee(String firstName, String lastName) { @@ -28,6 +31,10 @@ public class Employee { return id; } + public void setId(Long id) { + this.id = id; + } + public String getFirstName() { return firstName; } diff --git a/vaadin/src/main/java/com/baeldung/spring/CrudView.java b/vaadin/src/main/java/com/baeldung/spring/CrudView.java deleted file mode 100644 index a77e32e965..0000000000 --- a/vaadin/src/main/java/com/baeldung/spring/CrudView.java +++ /dev/null @@ -1,69 +0,0 @@ -package com.baeldung.spring; - -import com.baeldung.data.Employee; -import com.baeldung.data.EmployeeRepository; -import org.springframework.util.StringUtils; - -import com.vaadin.flow.component.button.Button; -import com.vaadin.flow.component.grid.Grid; -import com.vaadin.flow.component.icon.VaadinIcon; -import com.vaadin.flow.component.orderedlayout.HorizontalLayout; -import com.vaadin.flow.component.orderedlayout.VerticalLayout; -import com.vaadin.flow.component.textfield.TextField; -import com.vaadin.flow.data.value.ValueChangeMode; -import com.vaadin.flow.router.Route; - -@Route("crud") -public class CrudView extends VerticalLayout { - - private final EmployeeRepository employeeRepository; - - private final EmployeeEditor editor; - - final Grid grid; - - final TextField filter; - - private final Button addNewBtn; - - public CrudView(EmployeeRepository repo, EmployeeEditor editor) { - this.employeeRepository = repo; - this.editor = editor; - this.grid = new Grid<>(Employee.class); - this.filter = new TextField(); - this.addNewBtn = new Button("New employee", VaadinIcon.PLUS.create()); - - HorizontalLayout actions = new HorizontalLayout(filter, addNewBtn); - add(actions, grid, editor); - - grid.setHeight("200px"); - grid.setColumns("id", "firstName", "lastName"); - grid.getColumnByKey("id").setWidth("50px").setFlexGrow(0); - - filter.setPlaceholder("Filter by last name"); - - filter.setValueChangeMode(ValueChangeMode.EAGER); - filter.addValueChangeListener(e -> listEmployees(e.getValue())); - - grid.asSingleSelect().addValueChangeListener(e -> { - editor.editEmployee(e.getValue()); - }); - - addNewBtn.addClickListener(e -> editor.editEmployee(new Employee("", ""))); - - editor.setChangeHandler(() -> { - editor.setVisible(false); - listEmployees(filter.getValue()); - }); - - listEmployees(null); - } - - void listEmployees(String filterText) { - if (StringUtils.isEmpty(filterText)) { - grid.setItems(employeeRepository.findAll()); - } else { - grid.setItems(employeeRepository.findByLastNameStartsWithIgnoreCase(filterText)); - } - } -} diff --git a/vaadin/src/main/java/com/baeldung/spring/EmployeeEditor.java b/vaadin/src/main/java/com/baeldung/spring/EmployeeEditor.java index 25e447102c..0bc2c61e20 100644 --- a/vaadin/src/main/java/com/baeldung/spring/EmployeeEditor.java +++ b/vaadin/src/main/java/com/baeldung/spring/EmployeeEditor.java @@ -1,92 +1,85 @@ package com.baeldung.spring; import com.baeldung.data.Employee; -import com.baeldung.data.EmployeeRepository; +import com.vaadin.flow.component.Composite; import com.vaadin.flow.component.Key; -import com.vaadin.flow.component.KeyNotifier; import com.vaadin.flow.component.button.Button; +import com.vaadin.flow.component.button.ButtonVariant; import com.vaadin.flow.component.icon.VaadinIcon; import com.vaadin.flow.component.orderedlayout.HorizontalLayout; import com.vaadin.flow.component.orderedlayout.VerticalLayout; import com.vaadin.flow.component.textfield.TextField; import com.vaadin.flow.data.binder.Binder; -import com.vaadin.flow.spring.annotation.SpringComponent; -import com.vaadin.flow.spring.annotation.UIScope; -import org.springframework.beans.factory.annotation.Autowired; -@SpringComponent -@UIScope -public class EmployeeEditor extends VerticalLayout implements KeyNotifier { +public class EmployeeEditor extends Composite { - private final EmployeeRepository repository; + public interface SaveListener { + void onSave(Employee employee); + } + + public interface DeleteListener { + void onDelete(Employee employee); + } + + public interface CancelListener { + void onCancel(); + } private Employee employee; - TextField firstName = new TextField("First name"); - TextField lastName = new TextField("Last name"); + private SaveListener saveListener; + private DeleteListener deleteListener; + private CancelListener cancelListener; - 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); + private final Binder binder = new Binder<>(Employee.class); - Binder binder = new Binder<>(Employee.class); - private ChangeHandler changeHandler; +public EmployeeEditor() { + var firstName = new TextField("First name"); + var lastName = new TextField("Last name"); - @Autowired - public EmployeeEditor(EmployeeRepository repository) { - this.repository = repository; + var save = new Button("Save", VaadinIcon.CHECK.create()); + var cancel = new Button("Cancel"); + var delete = new Button("Delete", VaadinIcon.TRASH.create()); - add(firstName, lastName, actions); + binder.forField(firstName).bind(Employee::getFirstName, Employee::setFirstName); + binder.forField(lastName).bind(Employee::getLastName, Employee::setLastName); - binder.bindInstanceFields(this); + save.addThemeVariants(ButtonVariant.LUMO_PRIMARY); + save.addClickListener(e -> save()); + save.addClickShortcut(Key.ENTER); - setSpacing(true); + delete.addThemeVariants(ButtonVariant.LUMO_ERROR); + delete.addClickListener(e -> deleteListener.onDelete(employee)); - save.getElement().getThemeList().add("primary"); - delete.getElement().getThemeList().add("error"); + cancel.addClickListener(e -> cancelListener.onCancel()); - addKeyPressListener(Key.ENTER, e -> save()); + getContent().add(firstName, lastName, new HorizontalLayout(save, cancel, delete)); +} - save.addClickListener(e -> save()); - delete.addClickListener(e -> delete()); - cancel.addClickListener(e -> editEmployee(employee)); - setVisible(false); - } + private void save() { + // Save the form into a new instance of Employee + var updated = new Employee(); + updated.setId(employee.getId()); - void delete() { - repository.delete(employee); - changeHandler.onChange(); - } - - void save() { - repository.save(employee); - changeHandler.onChange(); - } - - public interface ChangeHandler { - void onChange(); - } - - public final void editEmployee(Employee c) { - if (c == null) { - setVisible(false); - return; + if (binder.writeBeanIfValid(updated)) { + saveListener.onSave(updated); } - final boolean persisted = c.getId() != null; - if (persisted) { - employee = repository.findById(c.getId()).get(); - } else { - employee = c; - } - - cancel.setVisible(persisted); - binder.setBean(employee); - setVisible(true); - firstName.focus(); } - public void setChangeHandler(ChangeHandler h) { - changeHandler = h; + public void setEmployee(Employee employee) { + this.employee = employee; + binder.readBean(employee); + } + + public void setSaveListener(SaveListener saveListener) { + this.saveListener = saveListener; + } + + public void setDeleteListener(DeleteListener deleteListener) { + this.deleteListener = deleteListener; + } + + public void setCancelListener(CancelListener cancelListener) { + this.cancelListener = cancelListener; } } diff --git a/vaadin/src/main/java/com/baeldung/spring/EmployeesView.java b/vaadin/src/main/java/com/baeldung/spring/EmployeesView.java new file mode 100644 index 0000000000..8b78b1b1c5 --- /dev/null +++ b/vaadin/src/main/java/com/baeldung/spring/EmployeesView.java @@ -0,0 +1,95 @@ +package com.baeldung.spring; + +import com.baeldung.data.Employee; +import com.baeldung.data.EmployeeRepository; + +import com.vaadin.flow.component.button.Button; +import com.vaadin.flow.component.grid.Grid; +import com.vaadin.flow.component.icon.VaadinIcon; +import com.vaadin.flow.component.orderedlayout.HorizontalLayout; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.component.textfield.TextField; +import com.vaadin.flow.data.value.ValueChangeMode; +import com.vaadin.flow.router.Route; + +@Route("employees") +public class EmployeesView extends VerticalLayout { + + private final EmployeeRepository employeeRepository; + + private final TextField filter; + private final Grid grid; + private final EmployeeEditor editor; + + + public EmployeesView(EmployeeRepository repo) { + employeeRepository = repo; + + // Create components + var addButton = new Button("New employee", VaadinIcon.PLUS.create()); + filter = new TextField(); + grid = new Grid<>(Employee.class); + editor = new EmployeeEditor(); + + // Configure components + configureEditor(); + + addButton.addClickListener(e -> editEmployee(new Employee())); + + filter.setPlaceholder("Filter by last name"); + filter.setValueChangeMode(ValueChangeMode.EAGER); + filter.addValueChangeListener(e -> updateEmployees(e.getValue())); + + grid.setHeight("200px"); + grid.asSingleSelect().addValueChangeListener(e -> editEmployee(e.getValue())); + + // Compose layout + var actionsLayout = new HorizontalLayout(filter, addButton); + add(actionsLayout, grid, editor); + + // List customers + updateEmployees(""); + } + + private void configureEditor() { + editor.setVisible(false); + + editor.setSaveListener(employee -> { + var saved = employeeRepository.save(employee); + updateEmployees(filter.getValue()); + editor.setEmployee(null); + grid.asSingleSelect().setValue(saved); + }); + + editor.setDeleteListener(employee -> { + employeeRepository.delete(employee); + updateEmployees(filter.getValue()); + editEmployee(null); + }); + + editor.setCancelListener(() -> { + editEmployee(null); + }); + } + + private void editEmployee(Employee employee) { + editor.setEmployee(employee); + + if (employee != null) { + editor.setVisible(true); + } else { + // Deselect grid + grid.asSingleSelect().setValue(null); + editor.setVisible(false); + } + + } + + private void updateEmployees(String filterText) { + if (filterText.isEmpty()) { + grid.setItems(employeeRepository.findAll()); + } else { + grid.setItems(employeeRepository.findByLastNameStartsWithIgnoreCase(filterText)); + } + } +} From d46ff97367b32ecab01f7dc0f7efda13373cc4c0 Mon Sep 17 00:00:00 2001 From: Marcus Hellberg Date: Tue, 2 Apr 2024 10:02:00 -0700 Subject: [PATCH 5/5] Change form biding to use BeanValidationBinder --- .../src/main/java/com/baeldung/spring/EmployeeEditor.java | 7 ++++--- .../src/main/java/com/baeldung/spring/EmployeesView.java | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/vaadin/src/main/java/com/baeldung/spring/EmployeeEditor.java b/vaadin/src/main/java/com/baeldung/spring/EmployeeEditor.java index 0bc2c61e20..7984ecce05 100644 --- a/vaadin/src/main/java/com/baeldung/spring/EmployeeEditor.java +++ b/vaadin/src/main/java/com/baeldung/spring/EmployeeEditor.java @@ -9,6 +9,7 @@ import com.vaadin.flow.component.icon.VaadinIcon; import com.vaadin.flow.component.orderedlayout.HorizontalLayout; import com.vaadin.flow.component.orderedlayout.VerticalLayout; import com.vaadin.flow.component.textfield.TextField; +import com.vaadin.flow.data.binder.BeanValidationBinder; import com.vaadin.flow.data.binder.Binder; public class EmployeeEditor extends Composite { @@ -31,7 +32,7 @@ public class EmployeeEditor extends Composite { private DeleteListener deleteListener; private CancelListener cancelListener; - private final Binder binder = new Binder<>(Employee.class); + private final Binder binder = new BeanValidationBinder<>(Employee.class); public EmployeeEditor() { var firstName = new TextField("First name"); @@ -41,8 +42,8 @@ public EmployeeEditor() { var cancel = new Button("Cancel"); var delete = new Button("Delete", VaadinIcon.TRASH.create()); - binder.forField(firstName).bind(Employee::getFirstName, Employee::setFirstName); - binder.forField(lastName).bind(Employee::getLastName, Employee::setLastName); + binder.forField(firstName).bind("firstName"); + binder.forField(lastName).bind("lastName"); save.addThemeVariants(ButtonVariant.LUMO_PRIMARY); save.addClickListener(e -> save()); diff --git a/vaadin/src/main/java/com/baeldung/spring/EmployeesView.java b/vaadin/src/main/java/com/baeldung/spring/EmployeesView.java index 8b78b1b1c5..edb1f7a75b 100644 --- a/vaadin/src/main/java/com/baeldung/spring/EmployeesView.java +++ b/vaadin/src/main/java/com/baeldung/spring/EmployeesView.java @@ -37,7 +37,7 @@ public class EmployeesView extends VerticalLayout { addButton.addClickListener(e -> editEmployee(new Employee())); filter.setPlaceholder("Filter by last name"); - filter.setValueChangeMode(ValueChangeMode.EAGER); + filter.setValueChangeMode(ValueChangeMode.LAZY); filter.addValueChangeListener(e -> updateEmployees(e.getValue())); grid.setHeight("200px");