The document discusses Java Enterprise Edition 7 and the Java APIs that comprise it, including Java Persistence API, Enterprise JavaBeans, Context and Dependency Injection, and more. It then covers using these technologies with Vaadin, including managing user interfaces with CDI and structuring Vaadin apps using the Model-View-Presenter pattern. The MVP pattern aims to separate complex UI logic from rendering for cleaner code and easier testing.

1. Vaadin with
Java EE 7
Peter Lehto
@peter_lehto
Expert & trainer / Vaadin

2. Vaadin with
Java EE 7
Peter Lehto
@peter_lehto
Expert & trainer / Vaadin

3. What is
Vaadin?
Java EE 7

4. Vaadin
CDI
Addon
Structuring
Vaadin
App

5. How to
get started
QA
Application
architecture

8. Server driven UI
framework for rich
web applications

9. User Interface
Components

10. User Interface
Components

11. Developer
Productivity
Rich
UX

12. Server side UI
How?

14. • Loader page
• CSS Theme
• Images
• JavaScript

15. • Loader page
• CSS Theme
• Images
• JavaScript
135k
Compressed &
reduced
thin client

18. • name=”Joonas”
• button clicked
261 bytes

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

21. Java
Enterprise Edition 7

22. Collection of Java Specification
Requests (JSRs)

23. Collection of Java Specification
Requests (JSRs)
Implemented by app servers

26. Do you know some
Java EE specs?

27. Java Persistence
API 2.1 (JPA)
(JSR-338)

28. Java Persistence
API 2.1 (JPA)
(JSR-338)
Enterprise Java
Beans 3.2 (EJB)
(JSR-345)

29. Java Persistence
API 2.1 (JPA)
(JSR-338)
Enterprise Java
Beans 3.2 (EJB)
(JSR-345)
Java Servlet 3.1
(JSR-340)

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)

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)

32. 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)

33. 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)

34. 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)

35. 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)

36. 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)

37. 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)

38. 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)

39. 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)

40. APIs that form your technology stack
Which APIs should I know?

41. Java Persistence API 2.1
(JPA)

42. Customer
@Entity
______________________________
@Id
@AutoGenerated
Long id;
@Column(nullable = false)
String name;
Date birthdate;

43. 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;

44. 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

45. Enterprise Java Beans 3.2
(EJB)

46. Business layer services
Enterprise Java Beans

47. Business layer services
@local and @remote
Enterprise Java Beans

48. Business layer services
@local and @remote
Enterprise Java Beans
Transaction boundaries

49. (UI)
CustomerView

50. (@Remote)
CustomerService
(UI)
CustomerView
@Remote
@Local

51. (@Remote)
CustomerService
(UI)
CustomerView
(@Stateless)
CustomerService
Bean
@Remote
@Local
@Stateless
@Stateful
@Singleton
(@Stateless)
CustomerService
Bean
(@Stateless)
CustomerService
Bean

52. (DB)
Customer
Database

53. @Local
public interface CustomerService {
void storeCustomers(Collection<Customer> customers);
void removeCustomers(Collection<Customer> customers);
Collection<Customer> getAllCustomers()
Optional<Customer> getCustomerByName(String name);
}

54. @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);
}
}

55. Context and
Dependency
Injection 1.2 (CDI)

56. Instead of saying new say @Inject
Context and Dependency
Injection

57. Instead of saying new say @Inject
Decouples code and lets container
manage dependencies
Context and Dependency
Injection

58. Object references by scopes
Context and Dependency
Injection

59. @ApplicationScoped
@SessionScoped
@RequestScoped
Context and Dependency
Injection
Object references by scopes

60. @UIScoped
@ViewScoped
Context and Dependency
Injection
@ApplicationScoped
@SessionScoped
@RequestScoped
Object references by scopes

61. @Stateless
CustomerService
_________________
@UIScoped
AppUI
_________________
@EJB
CustomerService service;

62. @Stateless
InvoiceService
@Stateless
CustomerService
_________________
@EJB
InvoiceService invoices;
@UIScoped
AppUI
_________________
@EJB
CustomerService service;

63. @Stateless
CustomerService
_________________
@EJB
InvoiceService invoices;
@UIScoped
AppUI
_________________
@EJB
CustomerService service;
@Inject
MainMenu mainMenu;
@Inject
User currentUser;
@UIScoped
MainMenu
_________________
@Inject
Event<MenuEvent> menuEventSource;
@Stateless
InvoiceService

64. Integration to EE through
Vaadin CDI

65. Managed UI with @CDIUI

66. Managed UI with @CDIUI
Allows injection with @Inject and @EJB

67. Easily reference EE objects
Allows injection with @Inject and @EJB
Managed UI with @CDIUI

68. @CDIUI(“”)
public class AppUI extends UI {
}

69. @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);
}
}

70. @UIScoped
AppUI
_____________________________
@Inject
private MainMenu menu;
@Inject
private ViewManager viewMgr;
@Inject
private User loggedInUser;
<<UIScope>>
MainMenu
ViewManager
<<SessionScope>>
User

71. <<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

72. VaadinServlet

73. VaadinServlet
HttpSession
1
n

74. VaadinServlet
HttpSession VaadinSession
1
n
1 1
1
n

75. VaadinServlet
HttpSession VaadinSession
UI
1
n
1 1
1
n
1
n

76. @UIScoped

77. @UIScoped
UI specific bean references

78. @UIScoped
UI specific bean references
CDI context for mapping beans per UI

79. @UIScoped
UI specific bean references
CDI context for mapping beans per UI
@UIScoped

80. @UIScoped
public class MainMenu extends CustomComponent {
}

81. @UIScoped
public class MainMenu extends CustomComponent {
@Inject
private Event<NavigationEvent> eventSource;
protected void onMenuItemClicked(MenuItem item) {
eventSource.fireEvent(new NavigationEvent(item));
}
}

82. @CDIUI(“”)
public class AppUI extends UI {
…
protected void onNavigationEvent(@Observes
NavigationEvent event) {
viewMgr.navigateTo(event.getView());
}
}

83. Structuring Vaadin App with
Model View Presenter

84. Do you like
spaghetti?

85. Do you like
spaghetti?
Let’s clean it!

86. History behind MVP

87. Late
1970s

88. Late
1970s
Originally Model-View-Controller

89. Late
1970s
SmallTalk-80
Originally Model-View-Controller

90. Late
1970s
SmallTalk-80
Controller is mediator between
end user and application
Originally Model-View-Controller

91. 1980s

92. 1980s
Taligent Model-View-Presenter

93. 1980s
Influenced by SmallTalk-80
Taligent Model-View-Presenter

94. 1980s
Influenced by SmallTalk-80
Model, View, Presenter,
Interactors, Commands, Selections
Taligent Model-View-Presenter

95. 1980s
Influenced by SmallTalk-80
Model, View, Presenter,
Interactors, Commands, Selections
Taligent Model-View-Presenter
Presenter orchestrates the
structure, not the input

96. late
1980s

97. late
1980s
Dolphin-Smalltalk MVP

98. late
1980s
Simplified Taligent MVP
Dolphin-Smalltalk MVP

99. late
1980s
Simplified Taligent MVP
View handles events by notifying
presenter
Dolphin-Smalltalk MVP

100. late
1980s
Simplified Taligent MVP
View handles events by notifying
presenter
Dolphin-Smalltalk MVP
Presenter handles the logic,
not the user input control

101. late
1980s
Simplified Taligent MVP
View handles events by notifying
presenter
Dolphin-Smalltalk MVP
Presenter handles the logic,
not the user input control

102. UI layer MVP targets
Clean code best practices
like…

103. Single responsibility principle
Class should have only one reason to change

104. Image credit: http://lostechies.com/derickbailey/2009/02/11/solid-development-principles-in-motivational-pictures/

105. Open closed principle
Open for extension, closed for change

106. Image credit: http://lostechies.com/derickbailey/2009/02/11/solid-development-principles-in-motivational-pictures/

107. Dependency Inversion principle
Depend on abstraction, not concretions

108. Image credit: http://lostechies.com/derickbailey/2009/02/11/solid-development-principles-in-motivational-pictures/

109. Today
many MVP variations exists
Here’s one…

110. Model-View-Presenter
Presenter
View Model

111. Model-View-Presenter
Presenter
View Model

112. View Impl
Model-View-Presenter
Presenter
View Model

113. Example
EditorView
- Button saveButton;
- Button cancelButton;
- FieldGroup personFieldGroup;
- saveButtonClicked()
- cancelButtonClicked()
ClickListener
+ buttonClicked()

114. Presenter
+ saveButtonClicked()
+ cancelButtonClicked()
EditorView
- Button saveButton;
- Button cancelButton;
- FieldGroup personFieldGroup;
+ commitChanges()
+ discardChanges()
ClickListener
+ buttonClicked()
Example

115. + commitChanges()
+ discardChanges()
Presenter
+ saveButtonClicked()
+ cancelButtonClicked()
EditorViewImpl
- Button saveButton;
- Button cancelButton;
- FieldGroup personFieldGroup;
+ commitChanges()
+ discardChanges()
ClickListener
+ buttonClicked()
Example
EditorView

116. Benefits of MVP

117. Benefits of MVP
Simpler classes by SRP

118. Benefits of MVP
Simpler classes by SRP
Complex UI logic separated from
rendering

119. Benefits of MVP
Simpler classes by SRP
Complex UI logic separated from
rendering
Logic becomes easier to test by DIP

120. Application
Architecture

121. Client
Browser
View
<<EJB>>
Business
Logic
Server-side-UI
Presenter
<<JPA>>
Persistency
Business Persistency

122. Client
Browser
View
Server-side-UI

123. public interface CustomerView extends
ApplicationView<CustomerViewPresenter> {
}

124. public interface CustomerView extends
ApplicationView<CustomerViewPresenter> {
void populateCustomers(Collection<Customer> customers);
void openEditorFor(Customer customer);
void closeEditor();
void removeTableSelection();
}

125. Client
Browser
View
Server-side-UI
Presenter

126. @ViewScoped
public class CustomerViewPresenter extends AbstractPresenter<CustomerView> {
}

127. @ViewScoped
public class CustomerViewPresenter extends AbstractPresenter<CustomerView> {
@EJB
private CustomerService customerService;
@Override
protected void onViewEnter() {
getView().populateCustomers(customerService.getAllCustomers());
}
}

128. @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) { … }
}

129. Client
Browser
View
<<EJB>>
Business
Logic
Server-side-UI
Presenter
Business

130. @Local
public interface CustomerService {
void storeCustomers(Collection<Customer> customers);
void removeCustomers(Collection<Customer> customers);
Collection<Customer> getAllCustomers();
Optional<Customer> getCustomerByUsername(String username);
}

131. 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();
}
…
}

132. Client
Browser
View
<<EJB>>
Business
Logic
Server-side-UI
Presenter
<<JPA>>
Persistency
Business Persistency

133. 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;
}
…
}

134. <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>

135. How to
Get Started?

136. <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>

137. Eclipse
Download plugin
from Martketplace

138. IntelliJ IDEA
Built-in support

139. Netbeans
Download plugin
Netbeans Plugin Portal

140. slides
slideshare.net/PeterLehto
Peter Lehto
@peter_lehto
Vaadin Expert & trainer
Example App
github.com/peterl1084/cdiexample

141. slides
slideshare.net/PeterLehto
Peter Lehto
@peter_lehto
Vaadin Expert & trainer
Example App
github.com/peterl1084/cdiexample

142. slides
slideshare.net/PeterLehto
Peter Lehto
@peter_lehto
Vaadin Expert & trainer
Thank you!

143. slides
slideshare.net/PeterLehto
Peter Lehto
@peter_lehto
Vaadin Expert & trainer
Thank you!

144. What did we learn today?

145. What did we learn today?
1. Java EE contains tons of specifications for enterprise apps

146. 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

147. 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

148. 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

149. Get the book!
vaadin.com/book
PDF, ePub, HTML
Vol 1
288 pages
Vol 2
434 pages

150. Rate the
presentation
gwtcreate.com/agenda
Peter Lehto
@peter_lehto
Vaadin Expert & trainer

151. Rate the
presentation
gwtcreate.com/agenda
Peter Lehto
@peter_lehto
Vaadin Expert & trainer