Vaadin for Liferay developers

Single-page portlets written in plain Java

Vaadin is a UI library that helps you build your Liferay portlets with minimal effort and maximum user experience. With it, you'll create a modern looking HTML5 single-page application, that is fast and easy to use, while at the same time you'll save development time building your portlet from components with a Java API.

Vaadin is also forward compatible with the upcoming, highly modular OSGi based Liferay 7 release.

 
Full of features

Vaadin comes built-in with components, such as data grids, charts and all standard widgets and layouts that help you build business-grade portlets, all the while you don't need to worry about underlying technologies such as AJAX, WebSockets, JSON or DTOs. All communication between the browser and the server, as well as rendering inside the end-users browser (both desktop and mobile), is handled by Vaadin.

A proven combination

Vaadin has for a long time been a proven tool to build portlets with highly dynamic user interfaces. For example, in the 2014 Liferay Marketplace App Contest , 2 out of 4 Grand Prize winner portlets were based on Vaadin: the Tori forum, used by vaadin.com/forum, was a winner in the free portlet class and Vahtie EE - Survey and Insight won the class for commercial portlets. There are also several other Vaadin success stories that are running on Liferay.

Getting started with Liferay + Vaadin

As a pure Java library, Vaadin can be used in dozens of ways in your Liferay portlet. Our suggested method is to use Maven built projects with Liferay IDE.

1. Install Liferay 6.2

You'll most likely want to have a local liferay installation for testing and debugging. A Liferay portal can be downloaded from the Liferay website. If you are not sure what distribution you should choose, just grab the one bundled with Tomcat.

2. Install Liferay IDE or download the plugin from Eclipse Marketplace

Liferay IDE is an Eclipse distribution with pre-installed Liferay plugins. Alternatively you can just install Liferay IDE plugins to your standard Eclipse using Eclipse via "Help->Eclipse Marketplace". Let all the default modules be installed.

3. Define Liferay as a new server

Go to the "Servers" view and define a new server that points to your Liferay installation.

4. Create new plugin project

Be sure to choose "New->Liferay->Liferay Plugin project" to get started on the right track.

Choosing a generic portlet or Vaadin Liferay Portlet will create you a legacy style Vaadin 6 portlet. On the first wizard page, choose "Maven" as your build type. Also create and/or choose a Maven profile that points to your Liferay installation and choose "Portlet" as your plugin type. If you don't have an existing "liferay" Maven profile, Liferay IDE can generate it for you using the rightmost  button. It is most often a better option to save your profile to settings.xml than pom.xml to make your project's build more portable.

On the second page, choose Vaadin as your portlet framework. You can explicitly define the archetype as com.vaadin:vaadin-archetype-liferay-portlet:7.5.9 to get the latest version of Vaadin.

The wizard generates a full project with an example UI and a production ready build script. Make a priming build using "Right click on your project->Run as -> Maven Install" or the same via the command line "mvn install -P liferay". Refresh the project (F5) to ensure Eclipse detects all generated files. After that it can deployed to the Liferay portal either from the context menu "Run As -> Run on server…" or using the Liferay maven target "liferay:deploy".

Congratulations! You have your first Vaadin portlet ready.

Now learn more about Vaadin at vaadin.com/learn

Speed up development with Vaadin Designer

Vaadin designer allows you to create the UI of your portlet with a simple drag and drop interface. See the example portlet built with Vaadin Designer.

Try out Vaadin Designer Sign up for a free 30-day trial Vaadin Designer is part of Vaadin Pro Tools. Available for $39/month with a subscription.
Built for Enterprise

Vaadin has helped companies succeed in their projects since 2001 by providing toolstraining, consultation and support for development teams.

Want help getting your project started? Set up a free kickoff consultation.

See also

Technical resources

vaadin.com/learn The entry to Vaadin related documentation: book, JavaDocs, wiki ...

Using Spring Data with Liferay portlets A tutorial to use Spring, Spring Data and standard JPA in your Vaadin based Liferay portlet. An architectural approach to consider for your next portlet!

Valo theme Adapting Valo theme to fit the Liferay 6.2 defaults

Double 7 Liferay 7 & Vaadin 7 - Sampsa Sohlman's example how to use Vaadin 7 in upcoming OSGi based Liferay 7

Self-contained approach Using "self-contained" approach to package Vaadin portlets

Book: Portal integration some generic portal integration documentation in the Book of Vaadin

Book: Vaadin ICP Smooth inter-portlet communication for Vaadin portlets

Fix the height! A simple trick to make small Vaadin portlets load smoother

Vaadin 7 control panel for Liferay A handy helper to maintain common widgetsets and themes when using "shared library" approach instead of "self-contained"

Mastering portal UI DZone Refcard for using Vaadin in Liferay