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

6.
Server driven UI
framework for rich
web applications

7.
User Interface
Components

8.
User Interface
Components

9.
Developer
Productivity
Rich
UX

10.
Server side UI
How?

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

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

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

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

15.
Java
Enterprise Edition 7

16.
Collection of Java Specification
Requests (JSRs)

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

18.
Do you know some
Java EE specs?

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

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

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

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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
APIs that form your technology stack
Which APIs should I know?

33.
Java Persistence API 2.1
(JPA)

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

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.
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.
Enterprise Java Beans 3.2
(EJB)

38.
Business layer services
Enterprise Java Beans

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

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

41.
(UI)
CustomerView

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

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

44.
(DB)
Customer
Database

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

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.
Context and
Dependency
Injection 1.2 (CDI)

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

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

50.
Object references by scopes
Context and Dependency
Injection

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

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

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

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

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.
Integration to EE through
Vaadin CDI

57.
Managed UI with @CDIUI

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

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

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

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.
@UIScoped
AppUI
_____________________________
@Inject
private MainMenu menu;
@Inject
private ViewManager viewMgr;
@Inject
private User loggedInUser;
<<UIScope>>
MainMenu
ViewManager
<<SessionScope>>
User

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

65.
VaadinServlet
HttpSession
1
n

66.
VaadinServlet
HttpSession VaadinSession
1
n
1 1
1
n

67.
VaadinServlet
HttpSession VaadinSession
UI
1
n
1 1
1
n
1
n

68.
@UIScoped

69.
@UIScoped
UI specific bean references

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

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

72.
@UIScoped
public class MainMenu extends CustomComponent {
}

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

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

75.
Structuring Vaadin App with
Model View Presenter

76.
Do you like
spaghetti?

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

78.
History behind MVP

79.
Late
1970s

80.
Late
1970s
Originally Model-View-Controller

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

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

83.
1980s

84.
1980s
Taligent Model-View-Presenter

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

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

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

88.
late
1980s

89.
late
1980s
Dolphin-Smalltalk MVP

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

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

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.
late
1980s
Simplified Taligent MVP
View handles events by notifying
presenter
Dolphin-Smalltalk MVP
Presenter handles the logic,
not the user input control

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

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

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

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

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

99.
Dependency Inversion principle
Depend on abstraction, not concretions

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

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

102.
Model-View-Presenter
Presenter
View Model

103.
Model-View-Presenter
Presenter
View Model

104.
View Impl
Model-View-Presenter
Presenter
View Model

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

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

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

108.
Benefits of MVP

109.
Benefits of MVP
Simpler classes by SRP

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

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

112.
Application
Architecture

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

114.
Client
Browser
View
Server-side-UI

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

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

117.
Client
Browser
View
Server-side-UI
Presenter

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

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

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.
Client
Browser
View
<<EJB>>
Business
Logic
Server-side-UI
Presenter
Business

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

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.
Client
Browser
View
<<EJB>>
Business
Logic
Server-side-UI
Presenter
<<JPA>>
Persistency
Business Persistency

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.
<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.
How to
Get Started?

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.
Eclipse
Download plugin
from Martketplace

130.
IntelliJ IDEA
Built-in support

131.
Netbeans
Download plugin
Netbeans Plugin Portal

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

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

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

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

136.
What did we learn today?

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

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.
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.
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.
Get the book!
vaadin.com/book
PDF, ePub, HTML
Vol 1
288 pages
Vol 2
434 pages

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

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