Construir Aplicaciones Web Modernas con Java

Construir Aplicaciones Web Modernas con Java

Transcript

1. Construir Aplicaciones Web Moderna con Java Geovanny Mendoza @geovanny0401
2. Acerca de mí Jug Leander 12+ de experiencia Ing. Sistemas Especialista en Ing. Software Desarrollador BackEnd en S4N Certificado en Vaadin 14 Professional Certificado en Vaadin 14 Developer Blog: http://geovanny0401.blogspot.com/
3. Agenda Introducción a Vaadin Quien usa Vaadin? Muéstrame el código! Características de Vaadin Demo
4. Vaadin es una plataforma de código abierto que simplifica el desarrollo de Aplicaciones Web
5. Más de 30 Componentes Integrados UI - WEB (1/2) Fuente: https://vaadin.com/components
6. Más de 30 Componentes Integrados UI - WEB (2/2) Fuente: https://vaadin.com/components
7. Más de 1700 complementos de terceros Fuente: https://vaadin.com/directory
9. Quienes usan Vaadin?
11. Aplicaciones Web Modernas
13. 26/04/19 13 public class MainView extends VerticalLayout { public MainView() { add(new H1("Hola Mundo" )); } }
14. 26/04/19 14 public class MainView extends VerticalLayout { public MainView() { add(new H1("Hola Mundo" ); } } hello-world.component.ts hello-world.component.html
15. Forms
16. 16 public class Persona { @Pattern(regexp= "Tadeo", message="Hola Mundo") private String nombre; @Email(message= "Email no valido" ) private String email; // getters & setters } Persona.java @Component public class Servicio { private String getPersona(){ return new Persona(); } private String Insertar(Persona persona){ // Guardar en BD } } Servicio.java Persona.ts backend.servicio.ts
17. 17 public class FormView extends VerticalLayout { TextField nombre = new TextField("Nombre"); EmailField email = new EmailField("Email"); public FormView(Service service) { Person model = service.getPerson(); Binder<Person> binder = new BeanValidationBinder<>(Person.class); // Binds view fields to the model based on name binder.bindInstanceFields(this); binder.readBean(model); Button saveButton = new Button("Guardar", e -> { if (binder.writeBeanIfValid(model)) { service.savePerson(model); } }); add(firstName, email, saveButton); } } FormView.java form.component.ts
18. 18 nombre-equals.directive.ts form.component.html public class FormView extends VerticalLayout { TextField nombre = new TextField("Nombre"); EmailField email = new EmailField("Email"); public FormView(Service service) { Person model = service.getPerson(); Binder<Person> binder = new BeanValidationBinder<>(Person.class); // Binds view fields to the model based on name binder.bindInstanceFields(this); binder.readBean(model); Button saveButton = new Button("Save", e -> { if (binder.writeBeanIfValid(model)) { service.savePerson(model); } }); add(firstName, email, saveButton); } } FormView.java Fuente: https://vaadin.com/comparison
19. Muéstrame el código!
20. Starter 20
21. @Route("saludar") public class HolaMundo extends VerticalLayout { public HolaMundo() { TextField textField = new TextField("Nombre"); Button button = new Button("Saludar"); button.add ClickListener(event -> add(new Span("Hola, " + textField.getValue()))); add(textField, button); } } 21
22. Web Server (Payara, WildFly, Tomcat, Jetty, Glassfish, Weblogic…) app.war @Route("saludar") public class HolaMundo extends VerticalLayout { public HolaMundo() { TextField textField = new TextField("Nombre"); Button button = new Button("Saludar"); button.add ClickListener(event -> add(new Span("Hola, " + textField.getValue()))); add(textField, button); } } 22
23. @Route("saludar") public class HolaMundo extends VerticalLayout { public HolaMundo() { TextField textField = new TextField("Nombre"); Button button = new Button("Saludar"); button.add ClickListener(event -> add(new Span("Hola, " + textField.getValue()))); add(textField, button); } } 23
24. @Route("saludar") public class HolaMundo extends VerticalLayout { public HolaMundo() { TextField textField = new TextField("Nombre"); Button button = new Button("Saludar"); button.add ClickListener(event -> add(new Span("Hola, " + textField.getValue()))); add(textField, button); } } 24
25. @Route("saludar") public class HolaMundo extends VerticalLayout { public HolaMundo() { TextField textField = new TextField("Nombre"); Button button = new Button("Saludar"); button.add ClickListener(event -> add(new Span("Hola, " + textField.getValue()))); add(textField, button); } } 25
26. @Route("saludar") public class HolaMundo extends VerticalLayout { public HolaMundo() { TextField textField = new TextField("Nombre"); Button button = new Button("Saludar"); button.add ClickListener(event -> add(new Span("Hola, " + textField.getValue()))); add(textField, button); } } 26
27. @Route("saludar") public class HolaMundo extends VerticalLayout { public HolaMundo() { TextField textField = new TextField("Nombre"); Button button = new Button("Verde"); button.add ClickListener(event -> add(new Span("Hola, " + textField.getValue()))); add(textField, button); } } 27
28. @Route("saludar") public class HolaMundo extends VerticalLayout { public HolaMundo() { TextField textField = new TextField("Nombre"); Button button = new Button("Verde"); button.add ClickListener(event -> add(new Span("Hola, " + textField.getValue()))); add(textField, button); } } 28
29. @Route("saludar") public class HolaMundo extends VerticalLayout { public HolaMundo() { TextField textField = new TextField("Nombre"); Button button = new Button("Verde"); button.add ClickListener(event -> add(new Span("Hola, " + textField.getValue()))); add(textField, button); } } 29
30. @Route("saludar") public class HolaMundo extends VerticalLayout { public HolaMundo() { TextField textField = new TextField("Nombre"); Button button = new Button("Verde"); button.add ClickListener(event -> add(new Span("Hola, " + textField.getValue()))); add(textField, button); } } 30
31. Lumo permite personalizar los estilos de todo los componentes a través de las propiedades CSS Lumo Theme
32. @Route("") @Theme(value = Lumo.class, variant = Lumo.DARK) public class MainView extends VerticalLayout { ... } Lumo Theme 32
33. Características de Vaadin
34. Soporta todos los navegadores modernos con polyfills Compatibilidad con navegadores móviles para iOS y Android Aplicaciones de escritorio que utilizan navegadores integrados 1. Compatibilidad con todos los navegadores 34
35. 2. Diseño Responsivo Adaptación automática a diferentes tamaños de pantalla Utilice CSS o Java para cambiar el comportamiento 35
36. 3. Progressive web applications (PWA) Instalar aplicaciones web en su escritorio o dispositivo Experiencia de usuario de tipo nativo 36
37. 4. Diseñador Vaadin Crear IU Vaadin usando arrastrar y soltar 37
38. Referencias http://vaadin.com/tutorials/ http://alejandrodu.com/ http://geovanny0401.blogspot.com https://github.com/Geovanny0401/charlas/tree/master/elsalvador 38
39. Codificar con Vaadin Vaadin - Spring Data JPA - DBMS Mysql
40. Gracias