Docs

You are viewing documentation for an older Vaadin version. View latest documentation

Docs

Step 5 - Adding legacy components to Flow layouts

At this stage have everything you need to make a Vaadin 7 or 8 application to run inside a Flow application.

And since this is a Flow application, you can add Flow components to the layout alongside the legacy components. You can also create legacy components and add them dynamically, for example:

add(new com.vaadin.flow.component.html.NativeButton(
        "Flow button that adds a FW7 Label", e -> {
            add(new LegacyWrapper(
                    new com.vaadin.ui.Label("Legacy label")));
        }));
add(new LegacyWrapper(new com.vaadin.ui.NativeButton(
        "Legacy button that adds a Flow Label", e -> {
            add(new com.vaadin.flow.component.html.Label("Flow label"));
        })));

(Fully qualified names were used in this example just to make it clear which class comes from which framework)

Check the Adding Legacy Components in a Flow Layout tutorial for more details.

Adding new views to your application

We highly recommend that the new views added to the application follow the Flow’s routing system. In Flow, "Views" are called "RouteTargets", and are managed by primarily by the @Route annotation. For details on the differences in navigation between Flow and previous Vaadin versions, check the Routing and Navigation migration guide.

For more about Flow’s navigation mechanism, check the Routing Annotation tutorial.

Run in production mode

After your application is built and it’s running with MPR, you should consider packaging it for production. Check the Setting up production mode tutorial for details.

3C399A47-5DF2-41EA-BD10-9DCBFC3C4F14