Introduction
Many of you do not know that Vaadin’s development was initially started as an adapter. It was first released in the year 2002. It led to the introduction of a client-communication and rendering engine based on Ajax. This concept’s development started as a commercial product separately in 2006. It was previously named IT Mill Toolkit.
In May 2009, its founders changed its name to Vaadin Framework, and from that time onwards, that name never changed; it is still known as Vaadin. In 2010, they opened a directory in the name of Vaadin and added a channel.
There are several tools of Vaadin which make it quite easy to operate. Therefore, it is now one of the most preferred platforms used for web development. In this blog, we will discuss one such tool of Vaadin, Multiplatform Runtime, in detail.
Multiplatform Runtime
The name Multiplatform Runtime suggests the involvement of multiple platforms. It allows components and applications written inside lower versions of Vaadin to run inside its higher versions. That is, any component inside Vaadin 7 will be able to run inside Vaadin 10+ application.
We will discuss the process of implying the Multiplatform Runtime tool step by step. Here, we have referred to Vaadin version 7. The process is similar for Vaadin version 8.
Step 1: pom.xml configuration for Vaadin 7
The pom.xml configuration for Vaadin 7 is the first step in setting up the Vaadin 7 application. After completing the process, the application will be able to run inside Vaadin 10+ versions.
Firstly, you need to set up Maven. For that, define the platform version using the XML code given below.
<dependencyManagement>
<dependencies>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-bom</artifactId>
<type>pom</type>
<scope>import</scope>
<version>23.2.1</version>
</dependency>
</dependencies>
</dependencyManagement>
Then, declare the vaadin-core and mpr-v7 attributes using the XML code below.
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-core</artifactId>
</dependency>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>mpr-v7</artifactId>
</dependency>
For successful configuration, follow the steps further.
🍂 Framework Dependency
You can use the code below to define the required framework dependencies needed for the configuration. The minimum version mandatory for Vaadin 7 is 7.7.14 or newer.
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-server</artifactId>
<version>7.7.17</version>
<exclusions>
<exclusion>
<groupId>org.jsoup</groupId>
<artifactId>jsoup</artifactId>
</exclusion>
<exclusion>
<groupId>com.google.gwt</groupId>
<artifactId>gwt-elemental</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-themes</artifactId>
<version>7.7.17</version>
</dependency>
🍂 Maven Plugins
The Maven Plugins are added in the build section. It helps the configuration to manage the custom legacy widgetset. Here, we have referred to Vaadin version 7.7.14. The process is similar to other Vaadin versions.
You can use the following XML code to induce Maven Plugins.
<build>
<plugins>
<plugin>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-maven-plugin</artifactId>
<version>7.7.17</version>
<executions>
<execution>
<goals>
<goal>resources</goal>
<goal>update-widgetset</goal>
<goal>compile</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
🍂 Logging
We should add any slf4j dependency to the project to display flow application logs. You can use the XML code below to do it most easily.
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-simple</artifactId>
<version>1.7.25</version>
</dependency>Step 2: Removing Legacy Servlets
The Multiplatform Runtime tool manages the VaadinServlets to ensure that requests are routed to the appropriate frameworks. For that, it removes all legacy VaadinServlets, which may hamper its performance.
You can use the VaadinServlet provided by Vaadin flow in case you want some customized functionality.
Step 3: Converting UIs
You can replace the UI Class with a Vaadin Flow component when not using a navigator. We can do this by changing init(VaadinRequest) to a constructor and having UI.setContent be added in (new LegacyWrapper(content)).
Refer to the Java code example below for a better understanding.
From this:
@Theme("valo")
public class AddressbookUI extends UI
{
private HorizontalLayout content = new HorizontalLayout();
@Override
protected void init(VaadinRequest vaadinRequest)
{
content.setSizeFull();
setContent(content);
}
}
To this:
@Route("")
public class AddressbookLayout extends Div
{
private HorizontalLayout content = new HorizontalLayout();
public AddressbookLayout()
{
content.setSizeFull();
add(new LegacyWrapper(content));
}
}
You can use the HasLegacyComponents interface, so you do not need to use the new LegacyWrapper class. This makes the code look easier.
@Route("")
public class AddressbookLayout extends Div implements HasLegacyComponents
{
private HorizontalLayout content = new HorizontalLayout();
public AddressbookLayout()
{
content.setSizeFull();
add(content);
}
}Step-4: Converting UI parameters
This step is completely dependent on your original UI. So, the configuration one will have to perform is decided by their choice. The list of choices that one could opt for is mentioned below.
- Using a Custom Widgetset
- Using a Custom Theme
- Using Push
- Managing the VaadinSessions
-
Using an advanced custom UI logic
Other Parameters
There are two other parameters that one should take into consideration. Both of these are explained briefly below.
@Title: For this parameter, you must use @PageTitle from the com.vaadin.flow.router package.
@Viewport: For this parameter, you must use @ViewPort from com.vaadin.flow.component.page package.
After you are done with the conversion, proceed to the next step.
Step-5: Adding Legacy Components
You have everything required to make a Vaadin 7 or 8 application run inside Vaadin 10+ versions. Since it is a flow application, you can add legacy components to the layout along with flow components. You need to create them and add them dynamically.
You can use the following example Java code for your reference.
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"));
})));
Adding new views
Views are managed by the @Route annotation primarily. These are also known as RouteTargets. It is advisable to add new views added to the application must follow Vaadin’s routing system. For more information on this topic, please refer to our blog on Routing and Navigation.
You are done with building the application and running it with Multiplatform Runtime. Next, you must consider packaging it for production ahead.
34+ registered 
