Vaadin with Java EE 7

4,242 views

Published on

How to integrate Vaadin UI framework with JavaEE stack? This presentation will tell you all about it including intro to Vaadin and EE as well as to VaadinCDI addon.

Published in: Technology

Vaadin with Java EE 7

  1. 1. Vaadin with Java EE 7 Peter Lehto @peter_lehto Expert & trainer / Vaadin
  2. 2. Vaadin with Java EE 7 Peter Lehto @peter_lehto Expert & trainer / Vaadin
  3. 3. What is Vaadin? Java EE 7
  4. 4. Vaadin CDI Addon Structuring Vaadin App
  5. 5. How to get started QA Application architecture
  6. 6. Server driven UI framework for rich web applications
  7. 7. User Interface Components
  8. 8. User Interface Components
  9. 9. Developer Productivity Rich UX
  10. 10. Server side UI How?
  11. 11. • Loader page • CSS Theme • Images • JavaScript
  12. 12. • Loader page • CSS Theme • Images • JavaScript 135k Compressed & reduced thin client
  13. 13. • name=”Joonas” • button clicked 261 bytes

  14. 14. • name=”Joonas” • button clicked 261 bytes • Add notification 267 bytes

  15. 15. Java Enterprise Edition 7
  16. 16. Collection of Java Specification Requests (JSRs)
  17. 17. Collection of Java Specification Requests (JSRs) Implemented by app servers
  18. 18. Do you know some Java EE specs?
  19. 19. Java Persistence API 2.1 (JPA) (JSR-338)
  20. 20. Java Persistence API 2.1 (JPA) (JSR-338) Enterprise Java Beans 3.2 (EJB) (JSR-345)
  21. 21. Java Persistence API 2.1 (JPA) (JSR-338) Enterprise Java Beans 3.2 (EJB) (JSR-345) Java Servlet 3.1 (JSR-340)
  22. 22. Java Persistence API 2.1 (JPA) (JSR-338) Enterprise Java Beans 3.2 (EJB) (JSR-345) Java Servlet 3.1 (JSR-340) Java Message Service 2.0 (JMS) (JSR-343)
  23. 23. Java Persistence API 2.1 (JPA) (JSR-338) Enterprise Java Beans 3.2 (EJB) (JSR-345) Java Servlet 3.1 (JSR-340) Java Message Service 2.0 (JMS) (JSR-343) Context and Dependency Injection 1.1 (CDI) (JSR-340)
  24. 24. Java Persistence API 2.1 (JPA) (JSR-338) Enterprise Java Beans 3.2 (EJB) (JSR-345) Java Servlet 3.1 (JSR-340) Java Message Service 2.0 (JMS) (JSR-343) Context and Dependency Injection 1.1 (CDI) (JSR-340) Java Server Faces 2.2 (JSF) (JSR-344)
  25. 25. Java Persistence API 2.1 (JPA) (JSR-338) Enterprise Java Beans 3.2 (EJB) (JSR-345) Java Servlet 3.1 (JSR-340) Java Message Service 2.0 (JMS) (JSR-343) Context and Dependency Injection 1.1 (CDI) (JSR-340) Java Server Faces 2.2 (JSF) (JSR-344) Java Server Pages 2.3 (JSP) (JSR-245)
  26. 26. Java Persistence API 2.1 (JPA) (JSR-338) Enterprise Java Beans 3.2 (EJB) (JSR-345) Java Servlet 3.1 (JSR-340) Java Message Service 2.0 (JMS) (JSR-343) Context and Dependency Injection 1.1 (CDI) (JSR-340) Java Server Faces 2.2 (JSF) (JSR-344) Java Server Pages 2.3 (JSP) (JSR-245) Bean Validation 1.1 (JSR-349)
  27. 27. Java Persistence API 2.1 (JPA) (JSR-338) Enterprise Java Beans 3.2 (EJB) (JSR-345) Java Servlet 3.1 (JSR-340) Java Message Service 2.0 (JMS) (JSR-343) Context and Dependency Injection 1.1 (CDI) (JSR-340) Java Server Faces 2.2 (JSF) (JSR-344) Java Server Pages 2.3 (JSP) (JSR-245) Bean Validation 1.1 (JSR-349)Interceptors 1.2 (JSR-318)
  28. 28. Java Persistence API 2.1 (JPA) (JSR-338) Enterprise Java Beans 3.2 (EJB) (JSR-345) Java Servlet 3.1 (JSR-340) Java Message Service 2.0 (JMS) (JSR-343) Context and Dependency Injection 1.1 (CDI) (JSR-340) Java Server Faces 2.2 (JSF) (JSR-344) Java Server Pages 2.3 (JSP) (JSR-245) Bean Validation 1.1 (JSR-349)Interceptors 1.2 (JSR-318) Java Transaction API 1.2 (JTA) (JSR-907)
  29. 29. Java Persistence API 2.1 (JPA) (JSR-338) Enterprise Java Beans 3.2 (EJB) (JSR-345) Java Servlet 3.1 (JSR-340) Java Message Service 2.0 (JMS) (JSR-343) Context and Dependency Injection 1.1 (CDI) (JSR-340) Java Server Faces 2.2 (JSF) (JSR-344) Java Server Pages 2.3 (JSP) (JSR-245) Bean Validation 1.1 (JSR-349)Interceptors 1.2 (JSR-318) Java Transaction API 1.2 (JTA) (JSR-907) Java API for RESTful Web Services 2.0 (JAX-RS) (JSR-907)
  30. 30. Java Persistence API 2.1 (JPA) (JSR-338) Enterprise Java Beans 3.2 (EJB) (JSR-345) Java Servlet 3.1 (JSR-340) Java Message Service 2.0 (JMS) (JSR-343) Context and Dependency Injection 1.1 (CDI) (JSR-340) Java Server Faces 2.2 (JSF) (JSR-344) Java Server Pages 2.3 (JSP) (JSR-245) Bean Validation 1.1 (JSR-349)Interceptors 1.2 (JSR-318) Java Transaction API 1.2 (JTA) (JSR-907) Java API for RESTful Web Services 2.0 (JAX-RS) (JSR-907) Java API for XML based Web Services 2.2 (JAX-WS) (JSR-907)
  31. 31. Java Persistence API 2.1 (JPA) (JSR-338) Enterprise Java Beans 3.2 (EJB) (JSR-345) Java Servlet 3.1 (JSR-340) Java Message Service 2.0 (JMS) (JSR-343) Context and Dependency Injection 1.1 (CDI) (JSR-340) Java Server Faces 2.2 (JSF) (JSR-344) Java Server Pages 2.3 (JSP) (JSR-245) Bean Validation 1.1 (JSR-349)Interceptors 1.2 (JSR-318) Java Transaction API 1.2 (JTA) (JSR-907) Java API for RESTful Web Services 2.0 (JAX-RS) (JSR-907) Java API for XML based Web Services 2.2 (JAX-WS) (JSR-907) Java Architecture for XML Binding 2.2 
 (JAX-B) (JSR-222)
  32. 32. APIs that form your technology stack Which APIs should I know?
  33. 33. Java Persistence API 2.1 (JPA)
  34. 34. Customer @Entity ______________________________ @Id @AutoGenerated Long id; @Column(nullable = false) String name; Date birthdate;
  35. 35. Customer @Entity ______________________________ Customer Id name birthdate 1 Alex 07.02.1984 2 John 18.2.1992 @Id @AutoGenerated Long id; @Column(nullable = false) String name; Date birthdate;
  36. 36. Customer @Id @AutoGenerated Long id; @Column(nullable = false) String name; Date birthdate; @OneToMany(mappedBy=“customer”) List<Invoice> invoices; @Entity ______________________________ Customer Id name birthdate 1 Alex 07.02.1984 2 John 18.2.1992 Invoice Id customer number 1 1 123 2 1 124
  37. 37. Enterprise Java Beans 3.2 (EJB)
  38. 38. Business layer services Enterprise Java Beans
  39. 39. Business layer services @local and @remote Enterprise Java Beans
  40. 40. Business layer services @local and @remote Enterprise Java Beans Transaction boundaries
  41. 41. (UI) CustomerView
  42. 42. (@Remote) CustomerService (UI) CustomerView @Remote @Local
  43. 43. (@Remote) CustomerService (UI) CustomerView (@Stateless) CustomerService Bean @Remote @Local @Stateless @Stateful @Singleton (@Stateless) CustomerService Bean (@Stateless) CustomerService Bean
  44. 44. (DB) Customer Database
  45. 45. @Local public interface CustomerService { void storeCustomers(Collection<Customer> customers); void removeCustomers(Collection<Customer> customers); Collection<Customer> getAllCustomers() Optional<Customer> getCustomerByName(String name); }
  46. 46. @Stateless public class CustomerServiceBean implements CustomerService { @PersistenceContext private EntityManager em; public void storeCustomers(Collection<Customer> cu) { cu.forEach(c -> storeCustomer(c)); } public void storeCustomer(Customer c) { em.merge(c); } }
  47. 47. Context and Dependency Injection 1.2 (CDI)
  48. 48. Instead of saying new say @Inject Context and Dependency Injection
  49. 49. Instead of saying new say @Inject Decouples code and lets container manage dependencies Context and Dependency Injection
  50. 50. Object references by scopes Context and Dependency Injection
  51. 51. @ApplicationScoped @SessionScoped @RequestScoped Context and Dependency Injection Object references by scopes
  52. 52. @UIScoped @ViewScoped Context and Dependency Injection @ApplicationScoped @SessionScoped @RequestScoped Object references by scopes
  53. 53. @Stateless CustomerService _________________ @UIScoped AppUI _________________ @EJB CustomerService service;
  54. 54. @Stateless InvoiceService @Stateless CustomerService _________________ @EJB InvoiceService invoices; @UIScoped AppUI _________________ @EJB CustomerService service;
  55. 55. @Stateless CustomerService _________________ @EJB InvoiceService invoices; @UIScoped AppUI _________________ @EJB CustomerService service; @Inject MainMenu mainMenu; @Inject User currentUser; @UIScoped MainMenu _________________ @Inject Event<MenuEvent> menuEventSource; @Stateless InvoiceService
  56. 56. Integration to EE through Vaadin CDI
  57. 57. Managed UI with @CDIUI
  58. 58. Managed UI with @CDIUI Allows injection with @Inject and @EJB
  59. 59. Easily reference EE objects Allows injection with @Inject and @EJB Managed UI with @CDIUI
  60. 60. @CDIUI(“”) public class AppUI extends UI { }
  61. 61. @CDIUI(“”) public class AppUI extends UI { @Inject private MainMenu mainMenu; @Inject private User currentUser; @Inject private ViewManager viewManager; public void init(VaadinRequest request) { VerticalLayout layout = new VerticalLayout(); layout.addComponent(mainMenu); setContent(layout); } }
  62. 62. @UIScoped AppUI _____________________________ @Inject private MainMenu menu; @Inject private ViewManager viewMgr; @Inject private User loggedInUser; <<UIScope>> MainMenu ViewManager <<SessionScope>> User
  63. 63. <<UIScope>> MenuBar Footer ViewManager <<SessionScope>> User @UIScoped AppUI _____________________________ @Inject private MenuBar menu; @Inject private ViewManager viewMgr; @Inject private User loggedInUser; <<UIScope>> MenuBar Footer ViewManager <<UIScope>> MenuBar Footer ViewManager <<UIScope>> MenuBar ViewManager
  64. 64. VaadinServlet
  65. 65. VaadinServlet HttpSession 1 n
  66. 66. VaadinServlet HttpSession VaadinSession 1 n 1 1 1 n
  67. 67. VaadinServlet HttpSession VaadinSession UI 1 n 1 1 1 n 1 n
  68. 68. @UIScoped
  69. 69. @UIScoped UI specific bean references
  70. 70. @UIScoped UI specific bean references CDI context for mapping beans per UI
  71. 71. @UIScoped UI specific bean references CDI context for mapping beans per UI @UIScoped
  72. 72. @UIScoped public class MainMenu extends CustomComponent { }
  73. 73. @UIScoped public class MainMenu extends CustomComponent { @Inject private Event<NavigationEvent> eventSource; protected void onMenuItemClicked(MenuItem item) { eventSource.fireEvent(new NavigationEvent(item)); } }
  74. 74. @CDIUI(“”) public class AppUI extends UI { … protected void onNavigationEvent(@Observes NavigationEvent event) { viewMgr.navigateTo(event.getView()); } }
  75. 75. Structuring Vaadin App with Model View Presenter
  76. 76. Do you like spaghetti?
  77. 77. Do you like spaghetti? Let’s clean it!
  78. 78. History behind MVP
  79. 79. Late 1970s
  80. 80. Late 1970s Originally Model-View-Controller
  81. 81. Late 1970s SmallTalk-80 Originally Model-View-Controller
  82. 82. Late 1970s SmallTalk-80 Controller is mediator between end user and application Originally Model-View-Controller
  83. 83. 1980s
  84. 84. 1980s Taligent Model-View-Presenter
  85. 85. 1980s Influenced by SmallTalk-80 Taligent Model-View-Presenter
  86. 86. 1980s Influenced by SmallTalk-80 Model, View, Presenter, Interactors, Commands, Selections Taligent Model-View-Presenter
  87. 87. 1980s Influenced by SmallTalk-80 Model, View, Presenter, Interactors, Commands, Selections Taligent Model-View-Presenter Presenter orchestrates the structure, not the input
  88. 88. late 1980s
  89. 89. late 1980s Dolphin-Smalltalk MVP
  90. 90. late 1980s Simplified Taligent MVP Dolphin-Smalltalk MVP
  91. 91. late 1980s Simplified Taligent MVP View handles events by notifying presenter Dolphin-Smalltalk MVP
  92. 92. late 1980s Simplified Taligent MVP View handles events by notifying presenter Dolphin-Smalltalk MVP Presenter handles the logic, not the user input control
  93. 93. late 1980s Simplified Taligent MVP View handles events by notifying presenter Dolphin-Smalltalk MVP Presenter handles the logic, not the user input control
  94. 94. UI layer MVP targets Clean code best practices like…
  95. 95. Single responsibility principle Class should have only one reason to change
  96. 96. Image credit: http://lostechies.com/derickbailey/2009/02/11/solid-development-principles-in-motivational-pictures/
  97. 97. Open closed principle Open for extension, closed for change
  98. 98. Image credit: http://lostechies.com/derickbailey/2009/02/11/solid-development-principles-in-motivational-pictures/
  99. 99. Dependency Inversion principle Depend on abstraction, not concretions
  100. 100. Image credit: http://lostechies.com/derickbailey/2009/02/11/solid-development-principles-in-motivational-pictures/
  101. 101. Today many MVP variations exists Here’s one…
  102. 102. Model-View-Presenter Presenter View Model
  103. 103. Model-View-Presenter Presenter View Model
  104. 104. View Impl Model-View-Presenter Presenter View Model
  105. 105. Example EditorView - Button saveButton; - Button cancelButton; - FieldGroup personFieldGroup; - saveButtonClicked() - cancelButtonClicked() ClickListener + buttonClicked()
  106. 106. Presenter + saveButtonClicked() + cancelButtonClicked() EditorView - Button saveButton; - Button cancelButton; - FieldGroup personFieldGroup; + commitChanges() + discardChanges() ClickListener + buttonClicked() Example
  107. 107. + commitChanges() + discardChanges() Presenter + saveButtonClicked() + cancelButtonClicked() EditorViewImpl - Button saveButton; - Button cancelButton; - FieldGroup personFieldGroup; + commitChanges() + discardChanges() ClickListener + buttonClicked() Example EditorView
  108. 108. Benefits of MVP
  109. 109. Benefits of MVP Simpler classes by SRP
  110. 110. Benefits of MVP Simpler classes by SRP Complex UI logic separated from rendering
  111. 111. Benefits of MVP Simpler classes by SRP Complex UI logic separated from rendering Logic becomes easier to test by DIP
  112. 112. Application Architecture
  113. 113. Client Browser View <<EJB>> Business Logic Server-side-UI Presenter <<JPA>> Persistency Business Persistency
  114. 114. Client Browser View Server-side-UI
  115. 115. public interface CustomerView extends ApplicationView<CustomerViewPresenter> { }
  116. 116. public interface CustomerView extends ApplicationView<CustomerViewPresenter> { void populateCustomers(Collection<Customer> customers); void openEditorFor(Customer customer); void closeEditor(); void removeTableSelection(); }
  117. 117. Client Browser View Server-side-UI Presenter
  118. 118. @ViewScoped public class CustomerViewPresenter extends AbstractPresenter<CustomerView> { }
  119. 119. @ViewScoped public class CustomerViewPresenter extends AbstractPresenter<CustomerView> { @EJB private CustomerService customerService; @Override protected void onViewEnter() { getView().populateCustomers(customerService.getAllCustomers()); } }
  120. 120. @ViewScoped public class CustomerViewPresenter extends AbstractPresenter<CustomerView> { @EJB private CustomerService customerService; @Override protected void onViewEnter() { getView().populateCustomers(customerService.getAllCustomers()); } public void onCustomerSaved(@Observes CustomerSavedEvent event) { … } public void onCustomerRemoved(@Observes CustomerRemovedEvent event) { … } public void onCustomerSelected(@Observes CustomerSelectedEvent event) { … } }
  121. 121. Client Browser View <<EJB>> Business Logic Server-side-UI Presenter Business
  122. 122. @Local public interface CustomerService { void storeCustomers(Collection<Customer> customers); void removeCustomers(Collection<Customer> customers); Collection<Customer> getAllCustomers(); Optional<Customer> getCustomerByUsername(String username); }
  123. 123. Application Architecture @Stateless @TransactionAttribute(TransactionAttributeType.REQUIRED) public class CustomerServiceBean implements CustomerService { @PersistenceContext(unitName = "appUnit") private EntityManager entityManager; @Override public void storeCustomers(Collection<Customer> customers) { customers.forEach(cu -> entityManager.merge(cu)); } @Override public Collection<Customer> getAllCustomers() { return entityManager.createQuery(query).getResultList(); } … }
  124. 124. Client Browser View <<EJB>> Business Logic Server-side-UI Presenter <<JPA>> Persistency Business Persistency
  125. 125. Application Architecture @Entity public class Customer { @Id @AutoGenerated private Long id; private String name; @Temporal(DATE) private Date birthDate; public boolean isPersisted() { return id != null; } … }
  126. 126. <persistence-unit name="appUnit" transaction-type="JTA"> <jta-data-source>jdbc/app-backend</jta-data-source> <class>org.vaadin.example.backend.entity.Customer</class> <properties> <property name="…" … /> </properties> </persistence-unit>
  127. 127. How to Get Started?
  128. 128. <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-cdi</artifactId> <version>1.0.2</version> </dependency> <repository> <id>vaadin-addons</id> <url>http://maven.vaadin.com/vaadin-addons</url> </repository>
  129. 129. Eclipse Download plugin from Martketplace
  130. 130. IntelliJ IDEA Built-in support
  131. 131. Netbeans Download plugin Netbeans Plugin Portal
  132. 132. slides slideshare.net/PeterLehto Peter Lehto @peter_lehto Vaadin Expert & trainer Example App github.com/peterl1084/cdiexample
  133. 133. slides slideshare.net/PeterLehto Peter Lehto @peter_lehto Vaadin Expert & trainer Example App github.com/peterl1084/cdiexample
  134. 134. slides slideshare.net/PeterLehto Peter Lehto @peter_lehto Vaadin Expert & trainer Thank you!
  135. 135. slides slideshare.net/PeterLehto Peter Lehto @peter_lehto Vaadin Expert & trainer Thank you!
  136. 136. What did we learn today?
  137. 137. What did we learn today? 1. Java EE contains tons of specifications for enterprise apps
  138. 138. What did we learn today? 1. Java EE contains tons of specifications for enterprise apps 2. Vaadin is a great way to assemble UIs with components
  139. 139. What did we learn today? 1. Java EE contains tons of specifications for enterprise apps 2. Vaadin is a great way to assemble UIs with components 3. Combining Vaadin with Java EE works best through CDI
  140. 140. What did we learn today? 1. Java EE contains tons of specifications for enterprise apps 2. Vaadin is a great way to assemble UIs with components 3. Combining Vaadin with Java EE works best through CDI 4. Write maintainable code by following best practices
  141. 141. Get the book! vaadin.com/book PDF, ePub, HTML Vol 1 288 pages Vol 2 434 pages
  142. 142. Rate the presentation gwtcreate.com/agenda Peter Lehto @peter_lehto Vaadin Expert & trainer
  143. 143. Rate the presentation gwtcreate.com/agenda Peter Lehto @peter_lehto Vaadin Expert & trainer

×