Desarrollo rápido de aplicaciones web en Vaadin y Spring Boot

El propósito de este artículo es sistematizar el proceso de desarrollo de una aplicación web en Vaadin 14 usando Spring Boot.

Antes de leer este artículo, recomiendo leer el siguiente material:

• Introducción a Spring Boot
• Spring data jpa
• Lombok devuelve la grandeza de Java
• Vaadin Flow - un extraño ciervo

Impresiones

Vaadin 14 es una herramienta bastante conveniente para diseñar aplicaciones web, antes de conocerla, desarrolló interfaces gráficas solo en JavaFX, Android e incluso J2ME, y al mismo tiempo evitó el desarrollo frontend (el conocimiento básico de HTML, CSS, JS está disponible) porque no pensaba mio

Descargo de responsabilidad

Aquellos que aún no han trabajado con Spring Boot recomiendan omitir un inicio rápido usando Spring Initializr, volver al material recomendado e intentar configurar todo usted mismo, habiendo encontrado muchos problemas diferentes, de lo contrario en el futuro habrá lagunas en la comprensión de varias cosas.

Inicio rápido

Cree un proyecto para nuestra aplicación web utilizando Spring Initializr , las dependencias necesarias para nuestra pequeña aplicación web:

• Spring Data JPA (para trabajar con la base de datos)
• Vaadin (para desarrollo de aplicaciones web)
• Lombok (para reducir el código de placa de caldera)
• Controlador MySQL (uso mariadb, en spring initializr'e no lo es)

Establecer application.properties y base de datos

El proyecto creado en Spring Initializr está casi listo para ejecutarse, solo tenemos que configurar application.properties especificando la ruta de la base de datos, nombre de usuario y contraseña

spring.datasource.url = jdbc:mariadb://127.0.0.1:3306/test spring.datasource.username=user spring.datasource.password=password spring.jpa.hibernate.ddl-auto=update 

Con el conjunto de valores ddl-auto: update, hibernate crea automáticamente una tabla en la base de datos basada en nuestra esencia, porque hacemos una libreta de direcciones simple y luego creamos una clase de contacto.

 @Entity(name = "Contacts") @Getter @Setter @EqualsAndHashCode public class Contact { @Id @GeneratedValue(strategy = GenerationType.AUTO) private int id; private String firstName; private String secondName; private String fatherName; private String numberPhone; private String email; } 

Creemos una interfaz para trabajar con la base de datos y agreguemos un método que devuelva Lista desde Spring Data JPA por defecto devuelve Iterable en lugar de List.

 public interface ContactRepository extends CrudRepository<Contact, Integer> { List<Contact> findAll(); } 

El desarrollo de la interfaz en Vaadin incluye agregar componentes de entrada, visualización y formas de interacción a los objetos de diseño para el posicionamiento necesario de los elementos. Se puede encontrar una lista de todos los componentes en el sitio web oficial del marco.

La página principal de nuestra aplicación será ContactList. Heredaremos todos los objetos de las páginas creadas de AppLayout ; este es un diseño típico de una aplicación web que consiste en:

• Barra de navegación (encabezado)
• Cajón (barra lateral)
• Contenido
  Al mismo tiempo, los componentes se agregan a Navbar y Drawer, y un componente se establece en Contenido como Contenido, por ejemplo, VerticalLayout en el que los elementos de usuario se colocarán en una disposición vertical.

La página para editar y crear contactos será ManageContact, e implementaremos la interfaz HasUrlParameter para transferir la identificación del contacto, cuando esta interfaz está activada, el parámetro debe pasarse a la página.
Para vincular una página a una URL específica, se utiliza la anotación de ruta:

 @Route("contacts") public class ContactList extends AppLayout {} @Route("manageContact") public class ManageContact extends AppLayout implements HasUrlParameter<Integer> {} 

Crea una lista de contactos

En el constructor del objeto ContactList, especifique los componentes utilizados al convertirlos primero en los campos del objeto. Como los datos se tomarán de la base de datos, es necesario conectar el repositorio al campo de objeto.

 @Route("contacts") public class ContactList extends AppLayout { VerticalLayout layout; Grid<Contact> grid; RouterLink linkCreate; @Autowired ContactRepository contactRepository; public ContactList(){ layout = new VerticalLayout(); grid = new Grid<>(); linkCreate = new RouterLink(" ",ManageContact.class,0); layout.add(linkCreate); layout.add(grid); addToNavbar(new H3(" ")); setContent(layout); } } 

 ContactRepository contactRepository; @Autowired public ContactList(ContactRepository contactRepository){ this.contactRepository = contactRepository; 

El componente VerticalLayout se ha agregado a la clase ContactList para la disposición vertical de los elementos en el contenido, le agregaremos RouterLink (para ir a la página de creación de contactos) y Grid para mostrar la tabla. La cuadrícula está escrita por el objeto Contact para que podamos cargar datos de la lista y que se activen automáticamente cuando se llama al método setItems ();

 Grid<Contact> grid; public ContactList(){ grid = new Grid<>(); //      grid = new Grid<>(Contact.class); //      ,       } 

El comportamiento de la creación automática de columnas no nos interesa, porque En el marco del artículo, vale la pena mostrar la adición de columnas y la visualización de botones para eliminar o editar contactos.

Para llenar la tabla, obtendremos los datos de contactRepository, para esto crearemos un método con la anotación PostConstruct

  @PostConstruct public void fillGrid(){ List<Contact> contacts = contactRepository.findAll(); if (!contacts.isEmpty()){ //     grid.addColumn(Contact::getFirstName).setHeader(""); grid.addColumn(Contact::getSecondName).setHeader(""); grid.addColumn(Contact::getFatherName).setHeader(""); grid.addColumn(Contact::getNumberPhone).setHeader(""); grid.addColumn(Contact::getEmail).setHeader("E-mail"); //     grid.addColumn(new NativeButtonRenderer<Contact>("", contact -> { UI.getCurrent().navigate(ManageContact.class,contact.getId()); })); grid.addColumn(new NativeButtonRenderer<Contact>("", contact -> { Dialog dialog = new Dialog(); Button confirm = new Button(""); Button cancel = new Button(""); dialog.add("     ?"); dialog.add(confirm); dialog.add(cancel); confirm.addClickListener(clickEvent -> { contactRepository.delete(contact); dialog.close(); Notification notification = new Notification(" ",1000); notification.setPosition(Notification.Position.MIDDLE); notification.open(); grid.setItems(contactRepository.findAll()); }); cancel.addClickListener(clickEvent -> { dialog.close(); }); dialog.open(); })); grid.setItems(contacts); } } 

NativeButtonRenderer se usa para agregar columnas con botones de edición y eliminación, pasamos el nombre del botón a los argumentos del constructor y un controlador de clic de botón.

 grid.addColumn(new NativeButtonRenderer<Contact>("", contact -> { //DO SOMETHING })); grid.addColumn(new NativeButtonRenderer<Contact>("", new ClickableRenderer.ItemClickListener<Contact>() { @Override public void onItemClicked(Contact contact) { //DO SOMETHING }})); 

Crear una página de edición de contactos

La página de edición de contactos acepta el parámetro como la identificación de contacto, por lo que debemos implementar el método setParameter ():

  @Override public void setParameter(BeforeEvent beforeEvent, Integer contactId) { id = contactId; if (!id.equals(0)){ addToNavbar(new H3(" ")); } else { addToNavbar(new H3(" ")); } fillForm(); //  } 

Agregar componentes es similar a ContactList, solo en este caso no usamos VerticalLayout, sino que utilizamos marcado especial FormLayout para mostrar dichos formularios. Rellenamos el formulario con datos que ya no usan el método con la anotación PostConstruct, pero después de obtener el número de contacto de la URL, porque la cadena: Constructor de objetos -> @PostConstruct -> Override

 @Route("manageContact") public class ManageContact extends AppLayout implements HasUrlParameter<Integer> { Integer id; FormLayout contactForm; TextField firstName; TextField secondName; TextField fatherName; TextField numberPhone; TextField email; Button saveContact; @Autowired ContactRepository contactRepository; public ManageContact(){ //    contactForm = new FormLayout(); firstName = new TextField(""); secondName = new TextField(""); fatherName = new TextField(""); numberPhone = new TextField(" "); email = new TextField(" "); saveContact = new Button(""); //     contactForm.add(firstName, secondName,fatherName,numberPhone,email,saveContact); setContent(contactForm); } @Override public void setParameter(BeforeEvent beforeEvent, Integer contactId) { id = contactId; if (!id.equals(0)){ addToNavbar(new H3(" ")); } else { addToNavbar(new H3(" ")); } fillForm(); } public void fillForm(){ if (!id.equals(0)){ Optional<Contact> contact = contactRepository.findById(id); contact.ifPresent(x -> { firstName.setValue(x.getFirstName()); secondName.setValue(x.getSecondName()); fatherName.setValue(x.getFatherName()); numberPhone.setValue(x.getNumberPhone()); email.setValue(x.getEmail()); }); } saveContact.addClickListener(clickEvent->{ //       Contact contact = new Contact(); if (!id.equals(0)){ contact.setId(id); } contact.setFirstName(firstName.getValue()); contact.setSecondName(secondName.getValue()); contact.setFatherName(fatherName.getValue()); contact.setEmail(email.getValue()); contact.setNumberPhone(numberPhone.getValue()); contactRepository.save(contact); Notification notification = new Notification(id.equals(0)? "  ":"  ",1000); notification.setPosition(Notification.Position.MIDDLE); notification.addDetachListener(detachEvent -> { UI.getCurrent().navigate(ContactList.class); }); contactForm.setEnabled(false); notification.open(); }); } } 

Resultados: Vaadin 14 es un marco bastante conveniente para crear aplicaciones web simples, al usarlo puede crear rápidamente una aplicación con solo conocimiento de Java en el equipaje, y funcionará. Pero desafortunadamente, toda la interfaz se crea en el lado del servidor y los recursos son mucho más necesarios que usar HTML5 + JS. Este marco es más adecuado para pequeños proyectos que deben realizarse rápidamente sin estudiar las tecnologías front-end.

Este artículo mostró cómo puede crear rápida y fácilmente una aplicación web sin diseñar previamente una base de datos, evitar configuraciones xml largas y qué tan rápido puede desarrollar una interfaz web. En su mayor parte, Spring Boot y Spring Data JPA facilitan la vida de los desarrolladores y simplifican el desarrollo. El artículo no revelará nada nuevo para los desarrolladores ya establecidos, pero ayudará al principiante a comenzar a dominar el marco de Spring.

Repositorio con proyecto

Los errores de gramática y puntuación son posibles en el artículo; luego de la detección, envíe un mensaje personal