b u i l d i n g r e a c t i v e w e b a p p s i n j a v a
play

B U I L D I N G R E A C T I V E W E B A P P S I N J A V A @ M A - PowerPoint PPT Presentation

Dec 22, 2022 •667 likes •1.27k views

B U I L D I N G R E A C T I V E W E B A P P S I N J A V A @ M A R C U S H E L L B E R G @marcushellberg T O D A Y Quick intro to Vaadin, Spring & Project Reactor Hands-on programming public class MainView extends

  1. B U I L D I N G R E A C T I V E W E B A P P S I N J A V A � @ M A R C U S H E L L B E R G

  2. � @marcushellberg

  3. T O D A Y ⚡ Quick intro to Vaadin, Spring & Project Reactor 🙍 Hands-on programming

  5. public class MainView extends VerticalLayout { private MessageBean bean = new MessageBean(); public MainView() { Button button = new Button("Click me", e �-? Notification.show(bean.getMessage())); add(button); } }

  6. public class MainView extends VerticalLayout { public MainView(@Autowired MessageBean bean) { Button button = new Button("Click me", e �-? Notification.show(bean.getMessage())); add(button); } }

  7. public class MainView extends VerticalLayout { public MainView(MessageBean bean) { Button button = new Button("Click me", e �-? Notification.show(bean.getMessage())); add(button); } }

  8. mvn spring-boot:run

  9. PROJECT REACTOR

  10. public class MainView extends VerticalLayout { public MainView() { getMessages().forEach(System.out �:; println); } public List<ChatMessage> getMessages() { ��../ } }

  11. Guest 1: Hello there? Guest 2: Hi! Guest 3: Hi there! Guest 3: How's it going? Guest 1: Pretty good. Nice weather outside! Guest 2: It's raining here...

  12. public class MainView extends VerticalLayout { public MainView() { getMessages().subscribe(System.out �:; println); } public Flux<ChatMessage> getMessages() { return null; } }

  13. Guest 1: Hello there? Guest 2: Hi! Guest 3: Hi there! Guest 3: How's it going? Guest 1: Pretty good. Nice weather outside! Guest 2: It's raining here...

  14. V A A D I N

  15. C O M P O N E N T S A N D T O O L S F O R B U I L D I N G W E B A P P S I N J A V A

  16. F O C U S O N P R O D U C T I V I T Y

  17. G R E AT U X T H R O U G H G R E AT D X

  18. J A V A ♥ W E B

  20. S TA N D A R D S - B A S E D W E B C O M P O N E N T S <vaadin-combo-box> 
 </vaadin-combo-box>

  21. new ComboBox(); J A V A F R A M E W O R K

  22. V A A D I N U I C O M P O N E N T S C O M P O N E N T S V A A D I N J A V A A P I F L O W VAADIN 8 VAADIN 10+

  23. O P E N S O U R C E Apache 2.0

  24. C O R E C O N C E P T S

  25. new Button("I'm a button") new DatePicker("Select a date") new ComboBox �<? ("Select an option") new Span("I'm a <span>")

  26. new VerticalLayout( new Button("I'm a button"), new DatePicker("Select a date"), new ComboBox �<? ("Select an option"), new Span("I'm a <span>") );

  27. var nameField = new TextField("Name"); var button = new Button("Click me"); button.addClickListener(click �-? { add(new Span(nameField.getValue())); });

  28. @Route("demo") public class Demo extends VerticalLayout { ��../ }

  29. public class SignupForm extends VerticalLayout { static class Person { @NotEmpty private String name; @Email @NotEmpty private String email; } private TextField name = new TextField("Name"); private TextField email = new TextField("Email"); private Person person = new Person(); public SignupForm() { Binder<Person> binder = new BeanValidationBinder �<? (Person.class); binder.bindInstanceFields(this); binder.setBean(person); Button save = new Button("Save"); add(name, email, save); } }

  30. public Demo(PersonService service) { Grid<Person> grid = new Grid �<? (); grid.setItems(service.getPeople()); grid.addColumn(Person �:; getName) .setHeader("Name"); grid.addColumn(Person �:; getAge) .setHeader("Age"); }

  31. 🔦 D E M O T I M E 🔦

  33. � github.com/marcushellberg/vaadin-chat

  34. TextField name = new TextField(); Button button = new Button("Greet"); layout.addComponents(name, button); button.addClickListener(click -> { Notification.show("Hi, " + name.getValue()); });

  35. Initial HTML CSS JavaScript

  37. {name: {value: 'Marcus'}, button: {event: 'clicked'}} 261 bytes 


  38. TextField name = new TextField(); Button button = new Button("Greet"); layout.add(name, button); button.addClickListener(click -> { Notification.show("Hi, " + name.getValue()); });

  39. {name: {value: 'Marcus'}, button: {event: 'clicked'}} 261 bytes 
 {updates: [ {notification: 'Hi, Marcus'} ]} 267 bytes 


  40. F E AT U R E S

  41. A U T O M AT E D C O M M U N I C AT I O N @Push @Route("") public class MainView extends Div { ... } ui.access(() -> Notification.show("Alert!"));

  42. P W A S U P P O R T @PWA(name = "Vaadin Chat", shortName = "Chat") public class MainView extends Div { ... }

  43. new VerticalLayout( new TextField("Text Field"), new Button("Button") ) <vaadin - vertical - layout> <vaadin - text - field label="Text Field"> �<0 vaadin - text - field> <vaadin - button>Button �<0 vaadin - button> �<0 vaadin - vertical - layout>

  45. A C C E S S I B L E �

  46. S T R O N G S E C U R I T Y �

  47. � S TA B L E A P I

  48. ♥ T H E J V M

  49. � � � �

  50. E X T E N D A B L E �

  53. Always happy to help you.

  54. $

  55. $

  56. � vaadin.com/start

  57. 🤕

  58. T H A N K S � @ M A R C U S H E L L B E R G

Recommend

More recommend