Nicolas Frankel is an IT consultant with 10 years experience in Java / JEE environments. He likes his job so much he writes technical articles on his blog and reviews technical books in his spare time. He also tries to find other geeks like him in universities, as a part-time lecturer. Nicolas is a DZone MVB and is not an employee of DZone and has posted 228 posts at DZone. You can read more from them at their website. View Full User Profile

Integrating Vaadin into Legacy Applications

04.30.2012
| 3030 views |
  • submit to reddit

Though embedding Vaadin parts in legacy applications was covered in Learning Vaadin, you may feel the need to go further toward this goal.

The description I made works, but your user interface has to be neatly separated into different rectangular zones for Vaadin-served iframes or divs to take place. This clearly won't achieve the best integration results: we can do better with the ExternalLayout add-on. It let you compose Vaadin components in your legacy application, irrelevant of where your Vaadin div is located on it: use-cases include a search box, a shopping cart, a menu bar, you name it!

In this article, we'll focus on a menu bar, situated at the top of the page while the main Vaadin application consists of a form located just under the title of a page (see below mockup).

The form creation is easy enough and out of the scope of this article. What we want, however, is to have both the menu bar and the form to be served by the same Vaadin application so as to have possible integration between them.

Here comes the external layout add-on; when embedding a Vaadin application inside a web page, we can put any Vaadin component on any placeholder inside this page, regardless of the position of the embedded application.

Detailed instructions for embedding an application can be found in Learning Vaadin. In order to use the add-on, here are the necessary steps:

  1. Get the library, either as a download or by using the following Maven dependency:
    <dependency>
       <groupId>org.vaadin.addons</groupId>
       <artifactId>externallayout</artifactId>
       <version>1.0</version>
    </dependency>
  2. Create the external layout by supplying both the placeholder's id and the desired component:
    ExternalLayout elayout = new ExternalLayout("menu", new EclipseMenuBar());
  3. Finally, add the layout as a component to the window:
    wnidow.addComponent(elayout);

That's it! If you provide a simple HTML page with a div which id matches "menu", the menu bar will be rendered on it.

Complete sources for this article can be found on GitHub.

Published at DZone with permission of Nicolas Frankel, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)