Documentation

You are viewing documentation for Vaadin 23. View latest documentation

Documentation

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 to make it clear which class comes from which framework)

See 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 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, see the Upgrading Guide.

For more information about Flow’s navigation mechanism, see Routing and Navigation.

Run in production mode

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

E954A5AC-5915-46A4-A2C4-08E9A2F229A1