Vaadin is Java framework for rapid development of highly interactive HTML5-based web applications. Because of server-driven nature Vaadin can easily be integrated with server-side Java EE features such as EJBs and JPA. During this speech we will look in detail on how multi-view Vaadin applications are built and coupled with Java EE based business systems using Context and Dependency Injection (CDI). Important topics covered within the session are the best practices of developing Model-View-Presenter (MVP) based Vaadin views as well as the as pointers and guidelines on how to use Vaadin with Java EE. Attending the speech does not require thorough understanding of Java EE or web technologies in general.

1. Vaadin
7Enterprise integration
Peter Lehto
Vaadin Expert

2. MVP
pattern
Structuring
Vaadin
Application
Views with
Vaadin
Navigator

3. UIProvider
CDIViewProvider
Vaadin-CDI
@Inject, @EJB

4. How to
get started?
QA
Context and
Scope
Authentication
and
Authorization

5. MVP
pattern

6. Do you like
spaghetti?
MVP
pattern

7. What is MVP?
MVP
pattern

8. Originally
Model-View-Controller
Originates from late 70’s
SmallTalk-80
Controller is mediator between
end user and application
Model notifies about changes
with Observer pattern
MVP
pattern

9. Taligent
Model-View-Presenter
Influenced by SmallTalk-80
Model, View, Presenter, Interactors,
Commands, Selections
Presenter orchestrates the
structure, not the input
MVP
pattern

10. Dolphin Smalltalk
Model-View-Presenter
Simplified Taligent MVP
Views handle input events initially
Model may fire events
Presenter handles the logic, not
the user input control
MVP
pattern

11. Model-View-Presenter
Presenter
View Model
Direct Association
Indirect Association
MVP
pattern

12. “That’s not how you use
MVP!”
MVP
pattern

13. Model-View-Presenter
Presenter
Model
View Impl
View
MVP
pattern

14. What is the role
of the Presenter?
MVP
pattern

15. Structuring
Vaadin
Application

16. Example
EditorView
- Button saveButton;!
- Button cancelButton;!
- FieldGroup personFieldGroup;
- saveButtonClicked()!
- cancelButtonClicked()
ClickListener
+ buttonClicked()
Structuring
Vaadin
Application

17. EditorView
- Button saveButton;!
- Button cancelButton;!
- FieldGroup personFieldGroup;
ClickListener
Presenter
+ saveButtonClicked()!
+ cancelButtonClicked()!
+ buttonClicked()
+ commitChanges()!
+ discardChanges()
ExampleStructuring
Vaadin
Application

18. EditorView
+ commitChanges()!
+ discardChanges()
Example
EditorView
- Button saveButton;!
- Button cancelButton;!
- FieldGroup personFieldGroup;
ClickListener
Presenter
+ saveButtonClicked()!
+ cancelButtonClicked()!
+ buttonClicked()
+ commitChanges()!
+ discardChanges()
Structuring
Vaadin
Application

19. Benefits of MVP
Allows you to create unit and
integration tests for your UI logic
Abstracts your code to be more
reusable
Your UI logic is separated from
the UI implementation
Structuring
Vaadin
Application

20. Views with
Vaadin
Navigator

21. Navigator
Support for bookmarkable views
and browser navigation
Automatic URI fragment
handling
Built-in switching between views
Views with
Vaadin
Navigator

22. public class DashboardView extends
CustomComponent implements
com.vaadin.navigator.View
Views with
Vaadin
Navigator

23. public class MyNavigatorUI extends UI{!
! @Override!
! Protected void init(VaadinRequest request){!
! ! Navigator navigator = new Navigator(this, this); !
! ! navigator.addView(“dashboard”, new DashboardView());!
! } !
}!
Views with
Vaadin
Navigator

24. Activating a view
programmatically
UI.getCurrent().getNavigator().navigateTo("customers");
Views with
Vaadin
Navigator

25. http://localhost:8080/vaadin/#!customers
!
#! : Navigator identifier
customers : View name
Navigating to a view via URL
Views with
Vaadin
Navigator

26. ...but where is the
view rendered?
Views with
Vaadin
Navigator

27. Views with
Vaadin
Navigator

28. public Navigator(UI ui, ComponentContainer container)
public Navigator(UI ui, SingleComponentContainer container)
public Navigator(UI ui, ViewDisplay viewDisplay)
Views with
Vaadin
Navigator

29. Vaadin-CDI

30. Context and
Dependency Injection
(JSR-299)
Vaadin-CDI

31. Injection
!
Context and Scope
!
Events
!
Decoupling
CDIVaadin-CDI

32. Features
Vaadin UI based context scope
!
Vaadin Navigator Integration
!
Easy JAAS Integration
!
Role Based View Management
Vaadin-CDI

33. @CDIUI
public class MyVaadinUI extends UI
Vaadin-CDI
http://localhost:8080/vaadin/

34. @CDIUI(“myui”)
public class MyVaadinUI extends UI
Vaadin-CDI
http://localhost:8080/vaadin/myui

35. @CDIUI
public class MyVaadinUI extends UI {
@Inject
private MyBean bean;
…
}
Vaadin-CDI

36. @CDIUI
public class MyVaadinUI extends UI {
!
@EJB
private MyServiceEJB service;
…
}
Vaadin-CDI

37. @CDIUI
public class MyVaadinUI extends UI {
!
@Inject
private javax.enterprise.event.Event<MyEvent> myEvent;
…
myEvent.fire(new MyEvent());
}
Vaadin-CDI

38. @CDIUI
public class MyVaadinUI extends UI {
…
!
protected void onMyEvent(@Observes
MyEvent myEvent) {
}
}
Vaadin-CDI

39. @CDIView(“customers”)
public class CustomerView extends
CustomComponent implements View
Vaadin-CDI
http://localhost:8080/vaadin/#!customers

40. UIProvider
CDIViewProvider

41. @CDIUI
public class MyVaadinUI extends UI {
!
@Inject
private CDIViewProvider viewProvider;
…
navigator.addProvider(viewProvider);
}
UIProvider
CDIViewProvider

42. UIProvider
CDIViewProvider
public class CDIViewProvider implements ViewProvider {
!
@Inject
private BeanManager beanManager;
!
@Inject
private AccessControl accessControl;
!
…
!
public String getViewName(String) { … }
public View getView(String) { … }
}

43. UIProvider
CDIViewProvider
public class CDIUIProvider extends DefaultUIProvider {
!
public UI createInstance(UICreateEvent event) {
…
}
public Class<? extends UI> getUIClass
(UIClassSelectionEvent event) {
…
}
}

44. UIProvider
CDIViewProvider
ContextDeployer
@WebListener
!
Is capable of bootstrapping Vaadin
Servlet with CDIUIProvider
!
Will validate deployment

45. Context and
Scope

46. Context and
Scope VaadinServlet
HttpSession VaadinSession
UI
1
n
1 1
1
n
1
*
EJB
1
*
View/Presenter
1
*

47. Context and
Scope
UIScope
Necessary to acquire UI specific
component injections
!
CDI context to map beans per UI
instance
!
@UIScoped

48. Context and
Scope
UIScope
@CDIUI and @CDIView are
@Stereotypes with @UIScoped
!
CDI events are sent within the
scope
!
MVP Presenters and UI specific
resources are marked as
@UIScoped

49. Authentication
and
Authorization

50. Authentication
and
Authorization
com.vaadin.cdi.access.
AccessControl
@RolesAllowed
!
isUserSignedIn(),
isUserInRole(String),
getPrincipalName()
!
Can be replaced with @Alternative

51. How to
get started?

52. <dependency
<groupId>com.vaadin</groupId>
<artifactId>vaadin-cdi</artifactId>
<version>1.0.0.alpha2</version>
</dependency>
!
<dependency org="com.vaadin" name="vaadin-cdi”
rev=“1.0.0.alpha2” conf="default->default" />
How to
get started?

53. Eclipse
Download plugin
from Martketplace
How to
get started?

54. IntelliJ IDEA
Built-in support
How to
get started?

55. Netbeans
Download plugin
Netbeans Plugin Portal
How to
get started?

56. mvn archetype:generate
-DarchetypeGroupId=
com.vaadin
-DarchetypeArtifactId=
vaadin-archetype-application
-DarchetypeVersion=
7.1.15
Maven
How to
get started?

57. Questions or
Comments?

58. peter@vaadin.com
Questions or
Comments?