Getting Started with Vaadin

Vaadin is an open-source Java framework for building modern web applications. It provides a rich set of components and tools to create user interfaces using Java and HTML. In this tutorial, we’ll explore the basics of Vaadin and how to create a simple web application using Vaadin Flow, the latest version of the framework.

Table of Contents

1. Introduction to Vaadin
2. Setting Up a Vaadin Project
3. Creating a Simple UI
4. Adding Components
5. Event Handling
6. Navigation
7. Styling
8. Conclusion

1. Introduction to Vaadin

Vaadin allows you to build web applications entirely in Java, without the need for writing HTML, CSS, or JavaScript. It follows the component-based approach, where you assemble the UI using pre-built components.

Key features of Vaadin:

• Component-based architecture
• Automatic client-server communication
• Built-in data binding
• Responsive and mobile-friendly components
• Support for server-side Java code

2. Setting Up a Vaadin Project

To get started with Vaadin, you can use the Vaadin Starter, which is an online tool to create a new Vaadin project with all the necessary configurations.

1. Go to Vaadin Starter.
2. Select “Vaadin Flow” as the version.
3. Choose a project base package and name.
4. Add any additional dependencies or features you need.
5. Click “Generate Project” to download the project zip file.

Alternatively, you can set up a Vaadin project manually:

Maven Setup

Add the Vaadin dependencies to your pom.xml:

<dependencies>
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-core</artifactId>
        <version>22.0.6</version>
    </dependency>
</dependencies>

Gradle Setup

Add the Vaadin dependencies to your build.gradle:

dependencies {
    implementation 'com.vaadin:vaadin-core:22.0.6'
}

3. Creating a Simple UI

Vaadin Main UI

Create a main UI class that extends VerticalLayout:

import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route("")
public class MainView extends VerticalLayout {

    public MainView() {
        // Constructor
    }
}

Main Entry Point (MainLayout)

In your main class, set up the main entry point for the application:

import com.vaadin.flow.server.startup.ServletContextListeners;

public class Main {
    public static void main(String[] args) {
        Vaadin.startup(MainView.class, new ServletContextListeners());
    }
}

4. Adding Components

Let’s add some components to the MainView:

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route("")
public class MainView extends VerticalLayout {

    public MainView() {
        Button button = new Button("Click me",
                event -> Notification.show("Button clicked!"));

        add(button);
    }
}

5. Event Handling

You can handle events such as button clicks:

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route("")
public class MainView extends VerticalLayout {

    public MainView() {
        Button button = new Button("Click me",
                event -> Notification.show("Button clicked!"));

        add(button);
    }
}

6. Navigation

You can set up navigation between different views using @Route annotations:

Create Another View

import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route("second")
public class SecondView extends VerticalLayout {

    public SecondView() {
        // Constructor for the second view
    }
}

Navigation Menu

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.router.RouterLink;

@Route("")
public class MainView extends VerticalLayout {

    public MainView() {
        Button button = new Button("Click me",
                event -> Notification.show("Button clicked!"));

        RouterLink link = new RouterLink("Second View", SecondView.class);

        add(button, link);
    }
}

7. Styling

You can style components using either inline styles or by adding CSS classes:

Inline Styles

Button button = new Button("Click me",
        event -> Notification.show("Button clicked!"));
button.getStyle().set("background-color", "blue");
button.getStyle().set("color", "white");

CSS Classes

Button button = new Button("Click me",
        event -> Notification.show("Button clicked!"));
button.addClassNames("primary-button", "large-button");

8. Conclusion

Vaadin’s component-based approach and server-side Java make it easy to build modern web applications without dealing with complex client-side code.

Additional Resources:

• Vaadin Documentation
• Vaadin Component API
• Vaadin on GitHub