Vaadin for Early Birds

Introduction

Fall 2010, we were faced with the requirement of adding a custom GUI to Magnolia. Our customers need to be able to create Magnolia-Users by drawing on the different LDAP Datasources they have. Never mind the details, our problem was the following:

• We need to create a GUI, but Magnolia's current adminCentral is not that nice to program GUIs in.
• Magnolia 5.0 with Vaadin based GUIs is announced for 2011. If we write the GUI the old way now, we'll have to rewrite in just a few months time.

Because of this, we decided to write the GUI in Vaadin right away. While the integration in Magnolia will not be the "final way", there is justified hope that the adaptations for Magnolia 5.0 will be comparatively minimal. Certainly not a rewrite.

The following describes a bit how I did it.

The Solution

I use Eclipse, so the following description focusses on that IDE. Generally it should be no problem to accomplish the same thing in any other IDE.

I created the GUI outside of Magnolia initially. This allowed me to use the standard Eclipse Vaadin plugin, which requires a "Dynamic Web Project". Once the GUI was working as a standard Vaadin project, I set about integrating it into a magnolia module. This was easier than expected.

I create the magnolia-module as a standard Java project in eclipse, and add the Vaadin and GWT JARs to the classpath. Next I added the GUI classes from the other project, and the other classes for my module.

In terms of resources, the VAADIN folder goes into the "mgnl-resources" folder of the magnolia module.

Within the VAADIN folder, you need the themes and widgetset folders. The themes folder can just be copied from the other project, the widgetset folder needs to be generated by GWT. I attach an ANT buildfile that shows how this can be done outside a Vaadin project. (See attachments to this wiki-page!)

Special Note: extract the themes (base, default, runo and reindeer) from the vaadin JAR file, and also put these themes within your VAADIN/themes directory. This is needed for vaadin to find the default themes, in my setup vaadin couldn't find them in the JAR.

Integrating Vaadin in Magnolia

The Vaadin and GWT JARs go into WEB-INF/lib.

The custom magnolia-module gets installed the normal way.

Next, configure the Vaadin servlet under configuration->server->filters->servlet, as shown in the picture below:

Next, add a menu-item for your Vaadin app as shown below:

Hey presto, Vaadin should be working and accessible via your new Menu-Item!

Summary

So doing a pre-integration of Vaadin was actually pretty easy.

Working with Vaadin was very easy - the documentation is pretty good, the APIs are quite clean. It really is a big improvement on the current GUI tools of Magnolia! So I am excited to see the new adminCentral in magnolia 5.0!

Things to watch for:

• Each servlet instance can only handle one application --> so if you need multiple Vaadin components, you'll need to think about how to show the right component depending on some parameter or the context. Or you could install the servlet multiple times, but I find that a bit ugly.
• Remember to copy the standard themes from the Vaadin JAR to your own theme folder.
• Remember to build the widget-set

---- And remember: the early bird gets the worm, or in this case, the bug