Sami Ekblad Open-source Vaadin Framework provides a desktop-like programming model on the server for creating Rich Internet Applications (RIAs) in plain Java - without the need for HTML, XML, plug-ins or JavaScript. For enterprise application development, Liferay 6 open-source portal includes Vaadin as one of its pre-packaged frameworks for developing attractive, easy-to-use applications. With Vaadin developers can leverage Liferay as an as an application platform for both intranet and extranet web applications. This is an introduction to Vaadin on Liferay, and related developer tools. Attend the session to hear about the latest Vaadin trends and see a live demo what kind of applications you can create and deploy to Liferay in just a few minutes. http://soft-shake.ch/2011/conference/sessions/java/2011/08/23/vaadin.html

1. cocktail d’expérience informatiques
Genève 3 & 4 octobre 2011
Seconde édition
soft-shake.ch
Auteur Sami EKBLAD
Track Java
Session Rich Portlets in
Liferay 6 with
Vaadin

3. Rich Portlets in
Liferay 6 with Vaadin
vaadin.com / sami

4. ?

7. Vaadin is a
UI framework
for desktop-like
web apps

8. UI components

12. New configs,
taglibs and
syntax!?!
JavaScript,
DOM, Applet,
plugins?

14. java html

15. This is Java.
Nothing else.

16. How does it
work?

17. Vaadin UI component
architecture
HTTP(S)
“UI Component” “Widget”
Server-side peer with Client-side peer for the
state. (Button, Table, component.
Tree, ...)
• UI composition • Rich user experience
• Event handling & Data • No plugins needed
Binding • Automatic state
• Full Java API synchronization (XHR)

18. Vaadin UI component
architecture
HTTP(S)
“UI Component” “Widget”
Server-side peer with Client-side peer for the
state. (Button, Table, component.
Tree, ...)
• UI composition • Rich user experience
• Synchronous event • No plugins needed
handling • Automatic state
• Full Java API synchronization (XHR)

19. Vaadin UI component
architecture
Vaadin Add-on Reuse in any
This is simply a jar Vaadin
application
Portlet Servlet GAE

20. Leverage
existing
Java skills

21. Manage large
application
projects

22. Designed for
development teams
Full benefit from object
oriented language
Vaadin
Component Designers can use CSS
Architecture and web design tools
Powerful add-on packaging.
Puts everything in reuse

23. Liferay
Portal

26. Liferay IDE

27. Vaadin Control Panel

28. Vaadin Plugin for Eclipse

29. ... and more
Liferay application theme
Liferay IPC plugin
WSRP support

30. Demo:
Optimize the
Code-Deploy-
Test Cycle

31. Vaadin in Liferay - what
you need?
Liferay IDE 1.3 for portlet development
Vaadin Control Panel portlet
(get it from vaadin.com/directory)
Vaadin Plugin for Eclipse w/ visual editor
(get it from vaadin.com/eclipse)

32. You are
here

33. ...

34. Developer Productivity
Develop in single programming
language as much as possible.
Optimize the deployment cycle using
hot-code replacement.
Design, package and reuse UI
components as Vaadin Add-ons.

35. Vaadin Directory

36. Screen shot 2011-04-14 at 12.46.14.png

37. Calendar
view and manage
events in a monthly
or a weekly view.

38. IE6Crash
make the world more
compatible.

39. Vaadin
TouchKit 2.0
building mobile web
applications with
Vaadin

40. Visualizations
powerful charts for all
data visualization
needs

41. Learn
more?

42. Book of
Vaadin
e
l in
n F
O D
P

43. brought to you by...
#148
Get More Refcardz! Visit refcardz.com
CONTENTS INCLUDE:
Starting the Development
Portlet Development with Vaadin Mastering Portal UI Development
Tools for Vaadin Development
Composing the User Interface with Vaadin
Theming Vaadin Applications
With Vaadin and Liferay
Inter-Portlet Communication (IPC) By Sami Ekblad, James Falkner
The open source Liferay Portal has become a popular way of JavaServerFaces Server-side user interface component Java, XML, JSP
framework based on JSP and tag libraries.
implementing enterprise websites. Providing an integrated
platform for application development and deployment, Liferay has
also become an environment for running business applications. Spring MVC Action oriented Model-View-Controller Java, XML, JSP
framework for web pages.
For application development, Liferay Portal includes Vaadin as a
Struts 2 Action oriented Model-View-Controller Java, XML, JSP
pre-packaged framework for developing attractive, easy-to-use framework for web pages.
applications.
Vaadin A rich Java-only component framework based Java
on Ajax/GWT
About this Refcard Apache Wicket Server-side component framework based on Java, HTML
This Refcard gives a quick overview of the user interface Java and HTML.
development with Vaadin on Liferay. It covers topics like portlet .
setup, configuration, inter-portlet communication (IPC), UI Different portlets can use different frameworks to implement the user
composition, and theming. To get a more general understanding interface.
of Liferay Portal and Vaadin framework, see the Refcards “Liferay
Essentials” and “Vaadin: A Familiar Way to Build Web Apps With PORTLET DEVELOPMENT WITH VAADIN
Java”.
din and Liferay
STARTING THE DEVELOPMENT Vaadin is a server- and component-oriented user interface framework
for Java web applications. Vaadin applications can be hosted as
Strategies for Portal User Interface standalone web applications as well as portlets in portals like Liferay.
Vaadin is a good choice for building complete applications that use
Portlets are small web applications written in Java. They run in
Liferay as a platform.
a piece of a web user interface within a portal. Portal manages
the lifecycle and aggregation of portlets to a single visible web Portlets created with Vaadin are essentially Ajax web applications
page. When designing a user interface for a portal, there are a few that can be considered single-page applications. This means
strategies based on UI granularity: that the page is not reloaded after it is opened initially; rather,
it communicates user interaction with the server through Ajax

44. brought to you by...
#85
Get More Refcardz! Visit refcardz.com
Vaadin: A Familiar Way to
CONTENTS INCLUDE:
About Vaadin
Creating an Application
Build Web Apps with Java
Components
Layout Components
Themes
Data Binding and more...
By Marko Grönroos
The application can change the components and the layout
ABOUT VAADIN dynamically according to the user input.
Vaadin is a server-side Ajax web application development
framework that allows you to build web applications just as you
would with traditional desktop frameworks, such as AWT or Swing.
An application is built from user interface components contained
hierarchically in layout components.
In the server-driven model, the application code runs on a server,
while the actual user interaction is handled by a client-side engine
running in the browser. The client-server communications and any
client-side technologies, such as HTML and JavaScript, are invisible
to the developer. As the client-side engine runs as JavaScript in the
browser, there is no need to install plug-ins.
Figure 2: Architecture for Vaadin Applications
You can create a Vaadin application project easily with the Vaadin
Plugin for Eclipse, with NetBeans, with Maven or with Spring Roo.
h Java
Figure 1: Vaadin Client-Server Architecture
Event Listeners
If the built-in selection of components is not enough, you can In the event-driven model, user interaction with user interface
develop new components with the Google Web Toolkit (GWT)

45. Great Community Forums

49. Vaadin 6.7
is “Geneva”
Today

50. vaadin.com/
download

51. TreeTable
build hierarchical
tables

52. Chameleon
Theme
color theme designer

53. SQLContainer
quick SQL binding

54. Liferay
ControlPanel
1.0
Manage Vaadin
applications in a
portal

55. + 108 other
enhancements
and fixes

56. Questions?