Vaadin Core

Vaadin Core is a comprehensive Java web framework platform that enables developers to build modern, full-stack web applications entirely in Java without writing HTML, CSS, or JavaScript directly. It provides a rich set of UI components (40+ components including buttons, grids, forms, charts, and layouts), themes (Lumo and Material), data binding capabilities, server-side rendering with Flow, client-side support with Lit templates and React integration, and push notification capabilities for real-time updates.

Package Information

• Package Name: vaadin-core
• Maven Group ID: com.vaadin
• Maven Artifact ID: vaadin-core
• Package Type: maven
• Language: Java (with JavaScript/TypeScript frontend components)
• Version: 24.9.4
• Java Version Requirement: Java 17+
• Installation: Add to Maven pom.xml:

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

Spring Boot Integration

Vaadin has first-class Spring Boot support. Add the Spring Boot starter:

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-spring-boot-starter</artifactId>
</dependency>

Then use Spring annotations in views:

@Route("dashboard")
@SpringComponent
@UIScope
public class DashboardView extends VerticalLayout {
    @Autowired
    public DashboardView(UserService userService) {
        // Service injection
    }
}

Core Imports

Vaadin uses package-based imports. The main packages developers interact with:

// Component base classes
import com.vaadin.flow.component.*;
import com.vaadin.flow.component.orderedlayout.*;
import com.vaadin.flow.component.html.*;

// Routing
import com.vaadin.flow.router.*;

// Common components
import com.vaadin.flow.component.button.*;
import com.vaadin.flow.component.textfield.*;
import com.vaadin.flow.component.grid.*;
import com.vaadin.flow.component.dialog.*;
import com.vaadin.flow.component.notification.*;

// Data binding
import com.vaadin.flow.data.binder.*;
import com.vaadin.flow.data.provider.*;

Quick Start

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.component.textfield.TextField;
import com.vaadin.flow.router.Route;

@Route("")
public class HelloWorldView extends VerticalLayout {
    public HelloWorldView() {
        TextField nameField = new TextField("Your name");
        Button greetButton = new Button("Say hello", event -> {
            String name = nameField.getValue();
            Notification.show("Hello, " + name + "!");
        });

        add(nameField, greetButton);
    }
}

Architecture

Vaadin Core is built around several key architectural layers:

• Flow Framework - Server-side Java framework that manages UI state, handles events, and synchronizes with the browser
• Component System - Hierarchical component model where all UI elements extend from Component base class
• Router - Declarative routing system using @Route annotations for navigation
• Data Binding - Binder class provides two-way data binding between UI components and Java beans
• Data Providers - Abstract backend data access for grids, lists, and other data-bound components
• Themes - Lumo (default) and Material Design themes with CSS custom properties
• Server Push - WebSocket-based server push for real-time updates
• Frontend Integration - Support for Lit templates and React components

Documentation

• Core Framework - Routing, components, lifecycle, configuration
• Components - UI components: inputs, displays, navigation, dialogs, HTML elements
• Data Integration - Data binding, providers, forms
• Layouts - Layout components and organization
• Themes & Styling - Theming, CSS, customization
• Security - Authentication, authorization, Spring Security
• Advanced - Collaboration, login, messages, frontend integration

Quick Component Reference

Input Components

Display Components

Navigation Components

Dialog & Overlay Components

Layout Components

HTML Components

Data Integration

Advanced Components

Framework & Routing

Common Patterns

Creating Views with Routing

@Route("products")
@PageTitle("Products")
public class ProductsView extends VerticalLayout {
    public ProductsView() {
        add(new H1("Products"));
        // View content
    }
}

Form Binding

Binder<Person> binder = new Binder<>(Person.class);
TextField firstName = new TextField("First Name");
TextField lastName = new TextField("Last Name");
EmailField email = new EmailField("Email");

binder.forField(firstName)
    .asRequired("First name is required")
    .bind(Person::getFirstName, Person::setFirstName);
binder.forField(lastName)
    .bind(Person::getLastName, Person::setLastName);
binder.forField(email)
    .bind(Person::getEmail, Person::setEmail);

binder.setBean(person);

Grid with Data Provider

Grid<Customer> grid = new Grid<>(Customer.class);
grid.setColumns("name", "email", "status");
grid.setDataProvider(DataProvider.fromCallbacks(
    query -> customerService.fetch(query.getOffset(), query.getLimit()).stream(),
    query -> customerService.count()
));

Event Handling

Button button = new Button("Save", event -> {
    // Handle click event
    Notification.show("Saved!");
});

textField.addValueChangeListener(event -> {
    String oldValue = event.getOldValue();
    String newValue = event.getValue();
    // Handle value change
});

Key Features

• Type-Safe: All UI code is Java with compile-time checking
• Server-Side Rendering: UI state managed on server, automatic synchronization with browser
• Real-Time Updates: Built-in server push via WebSocket
• Responsive: Components adapt to screen size automatically
• Accessible: WCAG 2.1 compliant components
• Themeable: Lumo and Material themes with CSS custom properties
• Progressive Web App: Built-in PWA support
• Security: Integration with Spring Security and Jakarta EE security
• Testing: TestBench library for end-to-end UI testing

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Additional Resources

• Official Documentation: https://vaadin.com/docs/latest/
• API JavaDoc: https://vaadin.com/api/
• Component Examples: https://vaadin.com/docs/latest/components
• GitHub Repository: https://github.com/vaadin/platform