- Rich Portlets in Liferay 6 with Vaadin


Published on

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.

Published in: Technology, Education
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide - Rich Portlets in Liferay 6 with Vaadin

  1. 1. cocktail d’expérience informatiques Genève 3 & 4 octobre 2011 Seconde édition soft-shake.chAuteur Sami EKBLAD Track JavaSession Rich Portlets in Liferay 6 with Vaadin
  2. 2. Rich Portlets inLiferay 6 with Vaadin / sami
  3. 3. ?
  4. 4. Vaadin is a UI frameworkfor desktop-like web apps
  5. 5. UI components
  6. 6. New configs,taglibs andsyntax!?!JavaScript,DOM, Applet,plugins?
  7. 7. java html
  8. 8. This is Java.Nothing else.
  9. 9. How does itwork?
  10. 10. Vaadin UI componentarchitecture HTTP(S)“UI Component” “Widget”Server-side peer with Client-side peer for thestate. (Button, Table, component.Tree, ...) • UI composition • Rich user experience • Event handling & Data • No plugins needed Binding • Automatic state • Full Java API synchronization (XHR)
  11. 11. Vaadin UI componentarchitecture HTTP(S)“UI Component” “Widget”Server-side peer with Client-side peer for thestate. (Button, Table, component.Tree, ...) • UI composition • Rich user experience • Synchronous event • No plugins needed handling • Automatic state • Full Java API synchronization (XHR)
  12. 12. Vaadin UI componentarchitectureVaadin Add-on Reuse in anyThis is simply a jar Vaadin application Portlet Servlet GAE
  13. 13. LeverageexistingJava skills
  14. 14. Manage largeapplicationprojects
  15. 15. Designed fordevelopment teams Full benefit from object oriented languageVaadinComponent Designers can use CSSArchitecture and web design tools Powerful add-on packaging. Puts everything in reuse
  16. 16. LiferayPortal
  17. 17. Liferay IDE
  18. 18. Vaadin Control Panel
  19. 19. Vaadin Plugin for Eclipse
  20. 20. ... and more Liferay application theme Liferay IPC plugin WSRP support
  21. 21. Demo:Optimize theCode-Deploy-Test Cycle
  22. 22. Vaadin in Liferay - whatyou need? Liferay IDE 1.3 for portlet development Vaadin Control Panel portlet (get it from Vaadin Plugin for Eclipse w/ visual editor (get it from
  23. 23. You are here
  24. 24. ...
  25. 25. 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.
  26. 26. Vaadin Directory
  27. 27. Screen shot 2011-04-14 at 12.46.14.png
  28. 28. Calendarview and manageevents in a monthlyor a weekly view.
  29. 29. IE6Crashmake the world morecompatible.
  30. 30. VaadinTouchKit 2.0building mobile webapplications withVaadin
  31. 31. Visualizationspowerful charts for alldata visualizationneeds
  32. 32. Learnmore?
  33. 33. Book ofVaadin e l in n F O D P
  34. 34. brought to you by...#148 Get More Refcardz! Visit 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
  35. 35. brought to you by...#85Get More Refcardz! Visit 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)
  36. 36. Great Community Forums
  37. 37. Vaadin 6.7is “Geneva” Today
  38. 38.
  39. 39. TreeTablebuild hierarchicaltables
  40. 40. ChameleonThemecolor theme designer
  41. 41. SQLContainerquick SQL binding
  42. 42. LiferayControlPanel1.0Manage Vaadinapplications in aportal
  43. 43. + 108 otherenhancementsand fixes
  44. 44. Questions?