Construir Aplicaciones Web Modernas con Java

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

  8. None
  9. Quienes usan Vaadin?

  10. None
  11. Aplicaciones Web Modernas

  12. 12

  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

  41. None