Docs

Docs

Adding Legacy Components in a Flow Layout

As shown in the Adding Legacy components to Flow layouts tutorial, you can use the LegacyWrapper class to wrap up any legacy component and add it to a Flow layout. In this tutorial, we’re going to explore different ways of adding Components and how to customize them.

LegacyWrapper

The LegacyWrapper class is the most direct way of adding legacy components to your Flow application. You can add any Components, Containers or Views this way. But keep in mind that this wrapper class also creates a wrapping div around the component on the client-side.

Button button = new Button("Legacy button");
add(new LegacyWrapper(button));

By default, the style of this wrapper div has display: inline-block, and width and height set to inherit. This means that the LegacyWrapper component uses whatever size is defined on its parent element to determine its own size.

However, since LegacyWrapper is a Flow component, you can customize it as much as needed. For example, you can set it to have full size, to better accommodate some legacy framework layout:

// Vaadin 7 or 8 VerticalLayout
VerticalLayout legacyLayout = new VerticalLayout();
LegacyWrapper wrapper = new LegacyWrapper(legacyLayout);
wrapper.setSizeFull();
add(wrapper);

HasLegacyComponents

In most of the cases, there’s no need to customize the LegacyWrapper at all. In these situations you can use a Flow component that implements the HasLegacyComponents mixin interface, and use the add method directly for both Flow and legacy components, without having to wrap the components (the wrapping is done automatically for you).

// Flow layout
public class MainLayout extends Div implements HasLegacyComponents {

    public MainLayout() {
        Button button = new Button("Legacy button");
        add(button); // no wrapping is needed
    }
}

The HasLegacyComponents interface also brings methods to remove legacy components, without having to deal with the wrappers.

Back to Overview

2823B693-3F8E-4664-B50A-901B45AD4933