Integration of a Vaadin theme into a Liferay theme

Integration of a Vaadin theme into a Liferay theme

In this post, we will see how to create a Liferay theme with an embedded Vaadin theme. With this solution, it's possible to have serveral Vaadin theme deployed in a Liferay portal.

This solution is validated with Liferay 6.1.1, Vaadin 6.7.4 and Maven 3.0.4

Create a Liferay theme with maven

You must have Liferay installed in your Maven repository (Liferay portal and Liferay plugin)

Step 1 - Execute the Maven command to create a project

             mvn archetype:generate
                          -DarchetypeGroupId=com.liferay.maven.archetypes
                          -DarchetypeArtifactId=liferay-theme-archetype
                          -DarchetypeVersion=6.1.1
                          -DgroupId=MyGroupId
                          -DartifactId=ThemeName            
                          -Dversion=1.0.0-SNAPSHOT

with
             archetypeVersion: the version of your Liferay environment
             groupId: Group Id of the theme
             artifactId: Name of the theme
             version: version of your project

Maven create a empty project.
You have now the project structure:

             ThemeName
             |--src
             | `--main
             | |--resources
             | `--webapp
             | `--WEB-INF
             | |--liferay-plugin-package.properties
             | `-- web.xml
             `--pom.xml

Step 2 - Add a new file liferay-look-and-feel.xml into the WEB-INF folder with the following contents:
 
             <?xml version="1.0"?>             
             <!DOCTYPE look-and-feel PUBLIC "-//Liferay//DTD Look and Feel 6.0.0//EN" "http://www.liferay.com/dtd/liferay-look-and-feel_6_0_0.dtd">              
             <look-and-feel>
                          <compatibility> 
                                       <version>6.1.1+</version>
                          </compatibility>                          
                          <theme id="ThemeName" name="ThemeName" />
             </look-and-feel>

Adapt the theme id and the theme name to yours
 
The Liferay theme is empty but ready to deploy.

Step 3 - You can build and deploy the theme with:

             mvn clean install liferay:deploy

Add a Vaadin theme into our Liferay theme

In this post, we shall not create theme, we will just download an existing Vaadin theme.
  
Step 5 - Add a new folder into our Liferay Theme, at this place, we will put the Vaadin theme.

              src\main\webapp\css\vaadin


Step 6 - You can download an Vaadin theme from the Vaadin site.

For our example,
             https://vaadin.com/directory#addon/morktheme
  
Step 7  -  Unzip the content of this theme into src\main\webapp\css\vaadin

This Vaadin theme has dependencies on the other standard Vaadin themes. So we have to add the other themes. 

Step 8 - Copy the base and the runo themes. You can find them in Liferay

Now your Liferay theme has to look like this.

Now, we need a CSS file into our theme.

Step 9 - Create a file main.css into the folder src\main\webapp\css

Step 10 - Add a line to import the morktheme.

             @import url(vaadin/styles.css);

Our Liferay theme is ready. We can deploy it

Step 11 - Deploy the Liferay theme

             mvn clean install liferay:deploy

If you activate the theme on a portal page with a Vaadin portlet. The Vaadin theme will not work.

Liferay integrate natively some Vaadin themes. In Liferay, the CSS cascading respects the following hierarchy:

Our Liferay theme is in last position and the embedded Vaadin theme in Liferay hide our theme.

The solution is to build a empty Vaadin theme in Liferay. In this case all the styles of our theme will be used.

It's possible to specify a Vaadin theme to load for all the Vaadin portlets with a parameter into the file portal-ext.properties. In this case all the Vaadin portlets will use the same Vaadin theme.

             vaadin.theme=liferay

Create a empty Vaadin theme in Liferay

Step 12 - Create a folder void into your Liferay at Liferay.war\html\VAADIN\themes 

Step 13 - Add an empty file styles.css into this folder

Step 14 - Activate this new Vaadin theme in Liferay.

Edit the portal-ext.properties and add

             vaadin.theme=void

Step 15 - Restart your application server

Now, if you return on the portal page with Vaadin portlets, you will see that the Vaadin theme is active.

It's possible to deploy different Liferay themes with different Vaadin Themes.