Add-ons, Integrations and Tools

Maven Plugin

There is a Maven Plugin available for Vaadin platform. It handles transpilation, minification and bundling of the front-end resources for the production version of the application. This is only necessary for when you take the application for production, or want to test it with IE11.

There are no custom widgetsets or Sass themes that need compilation for development time in Vaadin platform. The plugin is thus not needed during development, except when testing with IE11.

Maven Archetypes

There are no archetypes available for Vaadin platform. Please visit vaadin.com/start for available starting points. There you can find Maven-based example applications and project bases available for Vaadin platform.

Using Vaadin with Spring

Vaadin platform has an integration for using it with Spring. The concept is mostly the same, but some features like the @ViewScope have been removed. Also there are currently no specific Spring Security support, but it can still be integrated manually. The Bakery App Starter for Flow and Spring shows an example of this.

CDI Support

There is a CDI Add-on enabling JEE features. This is currently part of Vaadin platform starting with V12 and also compatible with V10.

Vaadin Designer

In Vaadin 8, Designer was used to edit declarative files with a .html suffix. Despite the file format suffix, the declarative format was a generic XML syntax that mapped directly into a tree of Vaadin components on the server side. The XML was read by Vaadin at runtime on the server, and was never sent to the client. It’s important to note that the syntax only allowed component declarations.

In Vaadin platform the high level concept is the same. There are still HTML files that can be edited with Designer to declaratively compose views. But as with Vaadin platform in general, the underlying technology has completely changed. In Vaadin platform the HTML files are valid HTML. More specifically, they are DOM modules. The modules define templates and are rendered by the browser, and allow using encapsulated CSS, HTML, Web Components and JavaScript. Using this new format allows Designer to do a couple of new things. First, any template can be rendered inside one another. And as templates are themselves Web Components, custom components are fully supported by the new Designer as well. On the other hand, HTML as a syntax is flexible enough that Designer might not work with templates created in other ways.

Some features of Designer are only available for Vaadin platform and other features can only be used when editing Vaadin 8 layouts. See the Release Notes for an overview of the feature-level differences.

Migrating from Vaadin 8 Designs

As the underlying technology has been completely changed, Vaadin 8 Designs are not compatible with Flow applications. There are two paths to migration; either use the upcoming Multiplatform Runtime from the Prime subscription to run a Vaadin 8 application inside a Vaadin platform application, or migrate the HTML files manually. When migrating manually, the declarative component tree should be copied inside the <template> in a blank Vaadin platform design, and then modified to fit the new element API’s.

Version Support

The new Designer plugin will support editing both Vaadin 8 and Vaadin platform designs. Regardless whether you are working with Vaadin 8 or Vaadin platform, you should always update to the latest version of Designer to receive the latest bugfixes and enhancements.

Vaadin TestBench

The same features exist in TestBench for Vaadin platform as in TestBench for Vaadin Framework 8 but the API has been tweaked in many places to be in sync with corresponding changes to the components/elements and the features they offer.

The ElementQuery operation $ no longer has methods such as caption() as there is no generic "caption" concept in Vaadin platform. On the other hand, there is instead a generic attribute(String key, String value) method which can be used to find elements based on any HTML attribute.

The element classes have been moved to a sub package of the component, e.g. com.vaadin.flow.component.textfield.testbench.TextFieldElement instead of com.vaadin.testbench.elements.TextFieldElement.

If any API is missing, there are low level helper methods available such as TestBenchElement.getProperty(String name) and TestBenchElement.callFunction(String name) which makes it easy to interact with any web component with a public JavaScript API.

Vaadin Charts

Vaadin Charts 6 shares a lot of the Java API from Charts 4 even though the underlying technology has been changed. However, almost all of the styling related Java API has been replaced with an ability to style charts using CSS. See list of breaking changes from Charts 4 to Charts 6.

Vaadin Board

Vaadin Board for Vaadin platform contains the same API as Vaadin Board for Framework 8 but the API has been adapted to follow Flow/Vaadin platform conventions, e.g. Row contains add(Component… component) instead of addComponent(Component) and addComponents(Component…).

Vaadin Spreadsheet

Currently we don’t have a version of Vaadin Spreadsheet for Vaadin platform.

Are you planning on migrating your application? Get help from Vaadin experts.

Open in a
new tab
export class RenderBanner extends HTMLElement {
  connectedCallback() {
    this.renderBanner();
  }

  renderBanner() {
    let bannerWrapper = document.getElementById('tocBanner');

    if (bannerWrapper) {
      return;
    }

    let tocEl = document.getElementById('toc');

    // Add an empty ToC div in case page doesn't have one.
    if (!tocEl) {
      const pageTitle = document.querySelector(
        'main > article > header[class^=PageHeader-module--pageHeader]'
      );
      tocEl = document.createElement('div');
      tocEl.classList.add('toc');

      pageTitle?.insertAdjacentElement('afterend', tocEl);
    }

    // Prepare banner container
    bannerWrapper = document.createElement('div');
    bannerWrapper.id = 'tocBanner';
    tocEl?.appendChild(bannerWrapper);

    // Banner elements
    const text = document.querySelector('.toc-banner-source-text')?.innerHTML;
    const link = document.querySelector('.toc-banner-source-link')?.textContent;

    const bannerHtml = `<div class='toc-banner'>
          <a href='${link}'>
            <div class="toc-banner--img"></div>
            <div class='toc-banner--content'>${text}</div>
          </a>
        </div>`;

    bannerWrapper.innerHTML = bannerHtml;

    // Add banner image
    const imgSource = document.querySelector('.toc-banner-source .image');
    const imgTarget = bannerWrapper.querySelector('.toc-banner--img');

    if (imgSource && imgTarget) {
      imgTarget.appendChild(imgSource);
    }
  }
}