soft-shake.ch - rich portlets in liferay 6 with vaadin
DESCRIPTION
Sami EkbladOpen-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.htmlTRANSCRIPT
![Page 1: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/1.jpg)
cocktail d’expérience informatiquesGenève 3 & 4 octobre 2011
Seconde édition
Track
Auteur
Session
Java
Sami EKBLAD
Rich Portlets inLiferay 6 with Vaadin
soft-shake.ch
![Page 2: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/2.jpg)
![Page 3: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/3.jpg)
vaadin.com / sami
Rich Portlets in Liferay 6 with Vaadin
![Page 4: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/4.jpg)
?
![Page 5: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/5.jpg)
![Page 6: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/6.jpg)
![Page 7: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/7.jpg)
Vaadin is a UI framework
for desktop-like web apps
![Page 8: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/8.jpg)
UI components
![Page 9: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/9.jpg)
![Page 10: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/10.jpg)
![Page 11: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/11.jpg)
![Page 12: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/12.jpg)
New configs, taglibs and syntax!?!
JavaScript,DOM, Applet,plugins?
![Page 13: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/13.jpg)
![Page 14: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/14.jpg)
htmljava
![Page 15: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/15.jpg)
This is Java.Nothing else.
![Page 16: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/16.jpg)
How does it work?
![Page 17: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/17.jpg)
• Rich user experience• No plugins needed• Automatic state
synchronization (XHR)
• UI composition• Event handling & Data
Binding• Full Java API
Vaadin UI component architecture
HTTP(S) “Widget”Client-side peer for the component.
“UI Component”Server-side peer with state. (Button, Table, Tree, ...)
![Page 18: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/18.jpg)
Vaadin UI component architecture
• Rich user experience• No plugins needed• Automatic state
synchronization (XHR)
• UI composition• Synchronous event
handling• Full Java API
HTTP(S) “Widget”Client-side peer for the component.
“UI Component”Server-side peer with state. (Button, Table, Tree, ...)
![Page 19: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/19.jpg)
Vaadin UI component architecture
Vaadin Add-onThis is simply a jar
Reuse in any Vaadin application
ServletPortlet GAE
![Page 20: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/20.jpg)
Leverageexisting Java skills
![Page 21: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/21.jpg)
Manage large application projects
![Page 22: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/22.jpg)
Vaadin Component Architecture
Powerful add-on packaging. Puts everything in reuse
Designers can use CSS and web design tools
Full benefit from object oriented language
Designed for development teams
![Page 23: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/23.jpg)
Liferay Portal
![Page 24: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/24.jpg)
![Page 25: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/25.jpg)
!"#$%&'()*+",-./0+1-)• Cross Promotion • Categories View
• Functionality • Certified • Price
![Page 26: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/26.jpg)
Liferay IDE
![Page 27: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/27.jpg)
Vaadin Control Panel
![Page 28: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/28.jpg)
Vaadin Plugin for Eclipse
![Page 29: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/29.jpg)
... and more
WSRP support
Liferay IPC plugin
Liferay application theme
![Page 30: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/30.jpg)
Demo:Optimize theCode-Deploy-Test Cycle
![Page 31: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/31.jpg)
Vaadin in Liferay - what you need?
Vaadin Plugin for Eclipse w/ visual editor(get it from vaadin.com/eclipse)
Vaadin Control Panel portlet(get it from vaadin.com/directory)
Liferay IDE 1.3 for portlet development
![Page 32: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/32.jpg)
3 Vaadin: A Familiar Way to Build Web Apps with Java
DZone, Inc. | www.dzone.com
Figure 4: The Class Diagram presents all user interface component classes and the most important interfaces, relationships, and methods.
You are here
![Page 33: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/33.jpg)
...
![Page 34: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/34.jpg)
Developer Productivity
Design, package and reuse UI components as Vaadin Add-ons.
Optimize the deployment cycle using hot-code replacement.
Develop in single programming language as much as possible.
![Page 35: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/35.jpg)
Vaadin Directory
![Page 36: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/36.jpg)
Screen shot 2011-04-14 at 12.46.14.png
![Page 37: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/37.jpg)
Calendar
view and manage events in a monthly or a weekly view.
![Page 38: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/38.jpg)
IE6Crash
make the world more compatible.
![Page 39: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/39.jpg)
Vaadin TouchKit 2.0
building mobile web applications with Vaadin
![Page 40: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/40.jpg)
Visualizations
powerful charts for all data visualization needs
![Page 41: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/41.jpg)
Learn more?
![Page 42: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/42.jpg)
Book ofVaadin
Onlin
e
![Page 43: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/43.jpg)
Get
Mo
re R
efca
rdz!
Vis
it r
efca
rdz.
com
#148M
aste
ring
Po
rtal
UI
Dev
elo
pm
ent
Wit
h V
aad
in a
nd L
ifer
ay
By Sami Ekblad, James Falkner
Mastering Portal UI Development With Vaadin and Liferay
The open source Liferay Portal has become a popular way of implementing enterprise websites. Providing an integrated platform for application development and deployment, Liferay has also become an environment for running business applications. For application development, Liferay Portal includes Vaadin as a pre-packaged framework for developing attractive, easy-to-use applications.
About this Refcard This Refcard gives a quick overview of the user interface development with Vaadin on Liferay. It covers topics like portlet setup, configuration, inter-portlet communication (IPC), UI composition, and theming. To get a more general understanding of Liferay Portal and Vaadin framework, see the Refcards “Liferay Essentials” and “Vaadin: A Familiar Way to Build Web Apps With Java”.
STARTING THE DEVELOPMENT
Strategies for Portal User Interface Portlets are small web applications written in Java. They run in a piece of a web user interface within a portal. Portal manages the lifecycle and aggregation of portlets to a single visible web page. When designing a user interface for a portal, there are a few strategies based on UI granularity:
JavaServerFaces Server-side user interface component framework based on JSP and tag libraries.
Java, XML, JSP
.
Spring MVC Action oriented Model-View-Controller framework for web pages.
Java, XML, JSP
Struts 2 Action oriented Model-View-Controller framework for web pages.
Java, XML, JSP
Vaadin A rich Java-only component framework based on Ajax/GWT
Java
Apache Wicket Server-side component framework based on Java and HTML.
Java, HTML
Different portlets can use different frameworks to implement the user interface.
PORTLET DEVELOPMENT WITH VAADIN
Vaadin is a server- and component-oriented user interface framework for Java web applications. Vaadin applications can be hosted as standalone web applications as well as portlets in portals like Liferay. Vaadin is a good choice for building complete applications that use Liferay as a platform.
Portlets created with Vaadin are essentially Ajax web applications that can be considered single-page applications. This means that the page is not reloaded after it is opened initially; rather, it communicates user interaction with the server through Ajax communications.
brought to you by...
CONTENTS INCLUDE:Starting the Development
Portlet Development with VaadinTools for Vaadin DevelopmentComposing the User Interface with VaadinTheming Vaadin ApplicationsInter-Portlet Communication (IPC)
![Page 44: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/44.jpg)
Get
Mo
re R
efca
rdz!
Vis
it r
efca
rdz.
com
#85 A
Fam
iliar
Way
to
Bui
ld W
eb A
pp
s w
ith
Java
CONTENTS INCLUDE:
About VaadinCreating an ApplicationComponentsLayout ComponentsThemesData Binding and more... By Marko Grönroos
Vaadin: A Familiar Way to Build Web Apps with Java
ABOUT VAADIN
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 1: Vaadin Client-Server Architecture
If the built-in selection of components is not enough, you can develop new components with the Google Web Toolkit (GWT) in Java.
The application can change the components and the layout dynamically according to the user input.
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.
Event ListenersIn the event-driven model, user interaction with user interface components triggers server-side events, which you can handle
brought to you by...
![Page 45: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/45.jpg)
Great Community Forums
![Page 46: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/46.jpg)
![Page 47: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/47.jpg)
![Page 48: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/48.jpg)
![Page 49: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/49.jpg)
Vaadin 6.7is “Geneva”
Today
![Page 50: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/50.jpg)
vaadin.com/download
![Page 51: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/51.jpg)
TreeTable
build hierarchical tables
![Page 52: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/52.jpg)
Chameleon Theme
color theme designer
![Page 53: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/53.jpg)
SQLContainer
quick SQL binding
![Page 54: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/54.jpg)
Liferay ControlPanel 1.0
Manage Vaadin applications in a portal
![Page 55: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/55.jpg)
+ 108 other enhancementsand fixes
![Page 56: soft-shake.ch - Rich Portlets in Liferay 6 with Vaadin](https://reader034.vdocuments.us/reader034/viewer/2022050808/5465f832b4af9f4e3f8b52c8/html5/thumbnails/56.jpg)
Questions?