{"id":4268,"date":"2012-03-27T13:15:22","date_gmt":"2012-03-27T11:15:22","guid":{"rendered":"http:\/\/blog.dutchworks.nl\/?p=4268"},"modified":"2012-03-27T13:15:22","modified_gmt":"2012-03-27T11:15:22","slug":"vaadin-portlets-with-add-ons-in-liferay","status":"publish","type":"post","link":"https:\/\/trifork.nl\/blog\/vaadin-portlets-with-add-ons-in-liferay\/","title":{"rendered":"Vaadin portlets with add-ons in Liferay"},"content":{"rendered":"

The Vaadin<\/a> web framework has been around for quite some time now, and for a couple of years it also supports portlet development. This is particularly the case for the Liferay portal, where some integration work has already been done for you. Using Vaadin to build Liferay portlets is rather nice, because until you actually become dependent on the Liferay API, your Vaadin project can still run stand-alone, giving you quick feedback during development without having to redeploy the portlet.<\/p>\n

Working with Liferay is, like most things in Vaadin, well documented in the \u201cBook of Vaadin\u201d, in chapter 13<\/a>, but there are some complications. As Vaadin uses GWT<\/a> under the hood, an application needs a GWT widget set. If you just use standard Vaadin components, the widget set is prepackaged in the war file, but if you start using Vaadin add-ons or custom built components, you need to recompile the widget set. A limitation of running Vaadin portlets is that the widget set needs to be available centrally in the Liferay web application and is shared by all Vaadin portlets. This means that you\u2019ll have to update this widget set in Liferay while your project grows.<\/p>\n

The bits of information needed to put this all together are available on the web, but sadly scattered over reference manuals, wikis, blogs and forum posts. In this blog I’ll go through it incrementally. Probably you know most of the steps already, but then again, if you knew them all you wouldn\u2019t be here \ud83d\ude09<\/p>\n

<\/p>\n

Creating a basic Vaadin application<\/h2>\n

Setting up a basic Vaadin application is of course quite easy. I don\u2019t know any another framework that needs such little configuration.<\/p>\n

Firstly, create a basic maven web project. Add the latest Vaadin dependency to your pom.xml.<\/p>\n

\n<?xml version="1.0" encoding="UTF-8"?>\n<project xmlns="http:\/\/maven.apache.org\/POM\/4.0.0"\n         xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance"\n         xsi:schemaLocation="http:\/\/maven.apache.org\/POM\/4.0.0 http:\/\/maven.apache.org\/xsd\/maven-4.0.0.xsd">\n    <modelVersion>4.0.0<\/modelVersion>\n\n    <groupId>nl.dutchworks.demo<\/groupId>\n    <artifactId>vaadin-demo-portlet<\/artifactId>\n    <version>1.0<\/version>\n    <packaging>war<\/packaging>\n\n    <properties>\n        <project.build.sourceEncoding>UTF-8<\/project.build.sourceEncoding>\n    <\/properties>\n\n    <dependencies>\n        <dependency>\n            <groupId>com.vaadin<\/groupId>\n            <artifactId>vaadin<\/artifactId>\n            <version>6.7.5<\/version>\n        <\/dependency>\n    <\/dependencies>\n    <build>\n        <plugins>\n            <plugin>\n                <groupId>org.apache.maven.plugins<\/groupId>\n                <artifactId>maven-compiler-plugin<\/artifactId>\n                <version>2.3.2<\/version>\n                <configuration>\n                    <source>1.6<\/source>\n                    <target>1.6<\/target>\n                <\/configuration>\n            <\/plugin>\n        <\/plugins>\n    <\/build>\n<\/project>\n<\/pre>\n
Now create a basic Vaadin \u201cHello world\u201d type of application; extend the com.vaadin.Application class and override the init() method.<\/p>\n
\npackage nl.dutchworks.demo;\n\nimport com.vaadin.Application;\nimport com.vaadin.ui.Label;\nimport com.vaadin.ui.Window;\n\npublic class DemoApplication extends Application {\n    @Override\n    public void init() {\n        Window mainWindow = new Window("Vaadin Demo Application");\n        Label label = new Label("Hello Vaadin!");\n        mainWindow.addComponent(label);\n        setMainWindow(mainWindow);\n    }\n}\n<\/pre>\n
Like most Java web frameworks, Vaadin supplies a servlet as the starting point for the web application. The fully qualified class name of your subclassed application goes in the \u201capplication\u201d init-param. The web.xml should look like this:<\/p>\n
\n<?xml version="1.0" encoding="UTF-8"?>\n<web-app id="WebApp_ID" version="2.4" xmlns="http:\/\/java.sun.com\/xml\/ns\/j2ee"\n         xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance"\n         xsi:schemaLocation="http:\/\/java.sun.com\/xml\/ns\/j2ee http:\/\/java.sun.com\/xml\/ns\/j2ee\/web-app_2_4.xsd">\n    <display-name>Vaadin Demo Application<\/display-name>\n    <context-param>\n        <description>Vaadin production mode<\/description>\n        <param-name>productionMode<\/param-name>\n        <param-value>false<\/param-value>\n    <\/context-param>\n    <servlet>\n        <servlet-name>vaadin servlet<\/servlet-name>\n        <servlet-class>com.vaadin.terminal.gwt.server.ApplicationServlet<\/servlet-class>\n        <init-param>\n            <description>Vaadin Application<\/description>\n            <param-name>application<\/param-name>\n            <param-value>nl.dutchworks.demo.DemoApplication<\/param-value>\n        <\/init-param>\n    <\/servlet>\n    <servlet-mapping>\n        <servlet-name>vaadin servlet<\/servlet-name>\n        <url-pattern>\/*<\/url-pattern>\n    <\/servlet-mapping>\n<\/web-app>\n<\/pre>\n
Your project directory structure should be looking something like this:<\/p>\n
\"\"<\/a><\/p>\n
When you build your project with maven and run it on a tomcat configured in your IDE, the output is, unsurprisingly, this:<\/p>\n
\"\"<\/a><\/p>\n
Using a Vaadin add-on<\/h2>\n
Now, to add a vaadin add-on let\u2019s take the Event Timeline component.<\/p>\n
Firstly, we add the dependency to the pom.xml file:<\/p>\n
\n<dependency>\n   <groupId>org.vaadin.addons<\/groupId>\n   <artifactId>event-timeline<\/artifactId>\n   <version>0.5.1<\/version>\n<\/dependency>\n<\/pre>\n
Don\u2019t forget to add the Vaadin add-on maven repository to your artifactory, settings.xml or pom.xml:<\/p>\n
\n<repository>\n   <id>vaadin-addons<\/id>\n   <url>http:\/\/maven.vaadin.com\/vaadin-addons<\/url>\n<\/repository>\n<\/pre>\n
Now, i use the example code provided on the Event Timeline add-on page in the application:<\/p>\n
\npublic class DemoApplication extends Application {\n    @Override\n    public void init() {\n        Window mainWindow = new Window("Vaadin Demo Application");\n        \/\/Label label = new Label("Hello Vaadin!");\n        \/\/mainWindow.addComponent(label);\n        setMainWindow(mainWindow);\n\n        EventTimeline timeline = new EventTimeline("Our event timeline");\n        timeline.setHeight("500px");\n        timeline.setWidth("100%");\n\n        \/\/ set the visible time range\n        Calendar cal = Calendar.getInstance();\n        Date start = cal.getTime();\n        cal.add(Calendar.HOUR_OF_DAY, 24);\n        Date end = cal.getTime();\n        timeline.setVisibleDateRange(start, end);\n\n        \/\/ add our data sources\n        timeline.addEventBand("Band", createEventProvider(end));\n\n        \/\/ Add some zoom levels\n        timeline.addZoomLevel("Hour", 60 * 60 * 1000L);\n        timeline.addZoomLevel("Day", 86400000L);\n\n        mainWindow.addComponent(timeline);\n    }\n\n    public TimelineEventProvider createEventProvider(final Date end) {\n        BasicEventProvider provider = new BasicEventProvider();\n\n        \/\/ get events for a whole day\n        Calendar cal = Calendar.getInstance();\n        cal.add(Calendar.HOUR, 1);\n        int idx = 0;\n        while (cal.getTime().before(end)) {\n            \/\/ create a simple event\n            BasicEvent event = new BasicEvent();\n            event.setEventId(String.valueOf(idx));\n\n            \/\/ set the timestamp property\n            event.setStart(cal.getTime());\n            cal.add(Calendar.MINUTE, 10);\n            event.setEnd(cal.getTime());\n            \/\/ set the caption\n            event.setCaption("Event");\n            \/\/ style the event\n            event.setStyleName("color1");\n\n            provider.addEvent(event);\n            cal.add(Calendar.MINUTE, 30);\n            idx++;\n        }\n\n        return provider;\n    }\n}\n<\/pre>\n
Of course, running this doesn\u2019t work yet:<\/p>\n
\"\"<\/a><\/p>\n
Recompiling the widget set<\/h2>\n
We can fix this by recomping the widget set. For this, we need a couple of steps. The pom.xml file needs quite some additions: We need the gwt-user dependency:<\/p>\n
\n<dependency>\n            <groupId>com.google.gwt<\/groupId>\n            <artifactId>gwt-user<\/artifactId>\n            <version>2.3.0<\/version>\n            <scope>provided<\/scope>\n        <\/dependency>\n<\/pre>\n
And then we need to add some plugins.<\/p>\n
\n<plugin>\n                <groupId>com.vaadin<\/groupId>\n                <artifactId>vaadin-maven-plugin<\/artifactId>\n                <version>1.0.2<\/version>\n                <executions>\n                    <execution>\n                        <phase>generate-resources<\/phase>\n                        <configuration>\n                            <!-- if you don't specify any modules, the plugin will find them -->\n                            <!-- <modules> <module>${package}.gwt.MyWidgetSet<\/module> <\/modules> -->\n                        <\/configuration>\n                        <goals>\n                            <goal>update-widgetset<\/goal>\n                        <\/goals>\n                    <\/execution>\n                <\/executions>\n            <\/plugin>\n            <!-- Compiles your custom GWT components with the GWT compiler -->\n            <plugin>\n                <groupId>org.codehaus.mojo<\/groupId>\n                <artifactId>gwt-maven-plugin<\/artifactId>\n                <version>2.3.0-1<\/version>\n                <configuration>\n                    <!-- if you don't specify any modules, the plugin will find them -->\n                     <webappDirectory>src\/main\/webapp\/VAADIN\/widgetsets<\/webappDirectory>\n                    <extraJvmArgs>-Xmx512M -Xss1024k<\/extraJvmArgs>\n                    <runTarget>clean<\/runTarget>\n                    <hostedWebapp>${project.build.directory}\/${project.build.finalName}<\/hostedWebapp>\n                    <noServer>true<\/noServer>\n                    <port>8080<\/port>\n                <\/configuration>\n                <executions>\n                    <execution>\n                        <phase>generate-resources<\/phase>\n                        <goals>\n                            <goal>resources<\/goal>\n                            <goal>compile<\/goal>\n                        <\/goals>\n                    <\/execution>\n                <\/executions>\n            <\/plugin>\n<\/pre>\n
Then we add a widget set file called VaadinDemoWidgetSet.gwt.xml to our resources directory:<\/p>\n
\"\"<\/a><\/p>\n
The widgetfile will contain a reference to the default widget set and to the widget set of the add-on (this can be found by inspecting the dependency jar of the add-on).<\/p>\n
\n<?xml version="1.0" encoding="UTF-8"?>\n<!DOCTYPE module PUBLIC\n        "-\/\/Google Inc.\/\/DTD Google Web Toolkit 2.3.0\/\/EN"\n        "http:\/\/google-web-toolkit.googlecode.com\/svn\/tags\/2.3.0\/distro-source\/core\/src\/gwt-module.dtd">\n<module>\n    <inherits name="com.vaadin.terminal.gwt.DefaultWidgetSet"\/>\n    <inherits name="com.spaceapplications.vaadin.addon.eventtimeline.gwt.EventTimelineWidgetSet" \/>\n<\/module>\n<\/pre>\n
Now all that remains to be done is tell Vaadin to actually use the newly generated widget set for this application. This is done by adding an init-param to the servlet definition in the web.xml file:<\/p>\n
\n<servlet>\n        <servlet-name>vaadin servlet<\/servlet-name>\n        <servlet-class>com.vaadin.terminal.gwt.server.ApplicationServlet<\/servlet-class>\n        <init-param>\n            <description>Vaadin Application<\/description>\n            <param-name>application<\/param-name>\n            <param-value>nl.dutchworks.demo.DemoApplication<\/param-value>\n        <\/init-param>\n        <init-param>\n            <param-name>widgetset<\/param-name>\n            <param-value>nl.dutchworks.demo.VaadinDemoWidgetSet<\/param-value>\n        <\/init-param>\n    <\/servlet>\n<\/pre>\n
Building the project with maven and running it now produces the desired result:<\/p>\n
\"\"<\/a><\/p>\n
Preparing Liferay<\/h2>\n
The next step is to turn this project into a portlet. For that, we first need to prepare our Liferay instance. Because of the shared nature of widget sets by multiple portlets, the preferred way to use Vaadin in Liferay is with a centralised vaadin.jar and all add-on jar files in the \/\/webapps\/ROOT\/WEB-INF\/lib dir.
\nTo get all the right files in there, and to be able to compile the widget set for the portal, the easiest way is to download and install the Vaadin control panel for Liferay<\/a>. This portlet installs like all other portlets in liferay.<\/p>\n