CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/maven-com-vaadin--vaadin-core

Vaadin Platform (vaadin-core) - Core component of the Vaadin web framework platform

Overview
Eval results
Files

core-framework.mddocs/

Core Framework

The Vaadin Flow framework provides the foundation for building web applications, including routing, component lifecycle, server configuration, and frontend integration.

Quick links: Component Base Classes | Routing | Server Configuration | Page Interaction | Frontend Integration

Component Base Classes

Core classes that all Vaadin components extend from.

/**
 * Base class for all Vaadin UI components.
 * Provides common functionality for visibility, styling, element access, and UI access.
 */
abstract class Component {
    /**
     * Sets the component's id attribute
     * @param id - Component identifier
     */
    void setId(String id);

    /**
     * Gets the component's id
     * @return Optional containing id if set
     */
    Optional<String> getId();

    /**
     * Sets whether component is visible
     * @param visible - true to show, false to hide
     */
    void setVisible(boolean visible);

    /**
     * Checks if component is visible
     * @return true if visible
     */
    boolean isVisible();

    /**
     * Adds CSS class name to component
     * @param className - CSS class name
     */
    void addClassName(String className);

    /**
     * Removes CSS class name from component
     * @param className - CSS class name to remove
     */
    void removeClassName(String className);

    /**
     * Sets CSS class names, replacing previous classes
     * @param className - CSS class name(s)
     */
    void setClassName(String className);

    /**
     * Gets underlying DOM element
     * @return Element instance
     */
    Element getElement();

    /**
     * Gets UI instance this component belongs to
     * @return Optional containing UI if attached
     */
    Optional<UI> getUI();

    /**
     * Adds listener for attach events
     * @param listener - Attach event listener
     * @return Registration for removing listener
     */
    Registration addAttachListener(ComponentEventListener<AttachEvent> listener);

    /**
     * Adds listener for detach events
     * @param listener - Detach event listener
     * @return Registration for removing listener
     */
    Registration addDetachListener(ComponentEventListener<DetachEvent> listener);
}

/**
 * Base class for custom composite components
 */
abstract class Composite<T extends Component> extends Component {
    /**
     * Gets the composed content component
     * @return Content component
     */
    protected abstract T initContent();

    /**
     * Gets the content component
     * @return Content component instance
     */
    protected T getContent();
}

/**
 * Interface for components that can contain other components
 */
interface HasComponents {
    /**
     * Adds components to this container
     * @param components - Components to add
     */
    void add(Component... components);

    /**
     * Removes components from this container
     * @param components - Components to remove
     */
    void remove(Component... components);

    /**
     * Removes all components from this container
     */
    void removeAll();

    /**
     * Adds component at specific index
     * @param index - Index position
     * @param component - Component to add
     */
    void addComponentAtIndex(int index, Component component);
}

/**
 * Interface for components with styling capabilities
 */
interface HasStyle {
    /**
     * Adds CSS class name(s)
     * @param className - CSS class name(s)
     */
    void addClassName(String className);

    /**
     * Removes CSS class name(s)
     * @param className - CSS class name(s)
     */
    void removeClassName(String className);

    /**
     * Sets CSS class name(s), replacing previous
     * @param className - CSS class name(s)
     */
    void setClassName(String className);

    /**
     * Gets style object for inline styles
     * @return Style instance
     */
    Style getStyle();
}

/**
 * Interface for components with size configuration
 */
interface HasSize {
    /**
     * Sets width
     * @param width - Width value with unit (e.g., "200px", "50%")
     */
    void setWidth(String width);

    /**
     * Sets height
     * @param height - Height value with unit
     */
    void setHeight(String height);

    /**
     * Sets min width
     * @param minWidth - Minimum width value with unit
     */
    void setMinWidth(String minWidth);

    /**
     * Sets max width
     * @param maxWidth - Maximum width value with unit
     */
    void setMaxWidth(String maxWidth);

    /**
     * Sets width to 100%
     */
    void setWidthFull();

    /**
     * Sets height to 100%
     */
    void setHeightFull();

    /**
     * Sets both width and height to 100%
     */
    void setSizeFull();
}

/**
 * Interface for components that can be enabled/disabled
 */
interface HasEnabled {
    /**
     * Sets whether component is enabled
     * @param enabled - true to enable, false to disable
     */
    void setEnabled(boolean enabled);

    /**
     * Checks if component is enabled
     * @return true if enabled
     */
    boolean isEnabled();
}

/**
 * Interface for input components with values
 */
interface HasValue<E extends HasValueChangeEvent<V>, V> extends HasEnabled {
    /**
     * Sets the value
     * @param value - New value
     */
    void setValue(V value);

    /**
     * Gets the current value
     * @return Current value
     */
    V getValue();

    /**
     * Adds value change listener
     * @param listener - Value change listener
     * @return Registration for removing listener
     */
    Registration addValueChangeListener(ValueChangeListener<? super E> listener);

    /**
     * Sets whether component is read-only
     * @param readOnly - true for read-only
     */
    void setReadOnly(boolean readOnly);

    /**
     * Checks if component is read-only
     * @return true if read-only
     */
    boolean isReadOnly();

    /**
     * Sets whether component is required
     * @param required - true if required
     */
    void setRequiredIndicatorVisible(boolean required);
}

Routing

Declarative and programmatic routing system for navigation.

/**
 * Annotation to mark a class as a routable view
 */
@Target(ElementType.TYPE)
@Retention(RetentionPolicy.RUNTIME)
@interface Route {
    /**
     * URL path for this route
     * @return URL path (empty string for root)
     */
    String value() default "";

    /**
     * Parent layout class
     * @return Layout class
     */
    Class<? extends RouterLayout> layout() default UI.class;
}

/**
 * Annotation to set page title
 */
@Target(ElementType.TYPE)
@Retention(RetentionPolicy.RUNTIME)
@interface PageTitle {
    /**
     * Page title text
     * @return Title string
     */
    String value();
}

/**
 * Annotation for route prefix on layouts
 */
@Target(ElementType.TYPE)
@Retention(RetentionPolicy.RUNTIME)
@interface RoutePrefix {
    /**
     * URL prefix for all child routes
     * @return URL prefix
     */
    String value();
}

/**
 * Annotation for menu integration (Vaadin 24+)
 */
@Target(ElementType.TYPE)
@Retention(RetentionPolicy.RUNTIME)
@interface Menu {
    /**
     * Menu item title
     * @return Menu title
     */
    String title() default "";

    /**
     * Menu item order
     * @return Order value (lower values first)
     */
    double order() default Integer.MAX_VALUE;
}

/**
 * Component for navigation links
 */
class RouterLink extends Component {
    /**
     * Creates router link
     */
    RouterLink();

    /**
     * Creates router link with text and target
     * @param text - Link text
     * @param navigationTarget - Target view class
     */
    RouterLink(String text, Class<? extends Component> navigationTarget);

    /**
     * Sets link text
     * @param text - Link text
     */
    void setText(String text);

    /**
     * Sets navigation target
     * @param navigationTarget - Target view class
     */
    void setRoute(Class<? extends Component> navigationTarget);
}

/**
 * Interface for route enter lifecycle
 */
interface BeforeEnterObserver {
    /**
     * Called before entering a route
     * @param event - Before enter event
     */
    void beforeEnter(BeforeEnterEvent event);
}

/**
 * Event fired before entering a route
 */
class BeforeEnterEvent {
    /**
     * Gets navigation location
     * @return Location instance
     */
    Location getLocation();

    /**
     * Reroutes to different view
     * @param navigationTarget - Target view class
     */
    void rerouteTo(Class<? extends Component> navigationTarget);

    /**
     * Forwards to error view
     * @param exception - Exception to display
     */
    void rerouteToError(Exception exception);
}

/**
 * Interface for route leave lifecycle
 */
interface BeforeLeaveObserver {
    /**
     * Called before leaving a route
     * @param event - Before leave event
     */
    void beforeLeave(BeforeLeaveEvent event);
}

/**
 * Event fired before leaving a route
 */
class BeforeLeaveEvent {
    /**
     * Postpones navigation
     * @return ContinueNavigationAction for resuming
     */
    ContinueNavigationAction postpone();
}

/**
 * Interface for routes with URL parameters
 */
interface HasUrlParameter<T> {
    /**
     * Sets parameters from URL
     * @param event - Before enter event
     * @param parameter - URL parameter
     */
    void setParameter(BeforeEvent event, T parameter);
}

/**
 * Utility for query parameters
 */
class QueryParameters {
    /**
     * Gets query parameters from map
     * @param parameters - Parameter map
     * @return QueryParameters instance
     */
    static QueryParameters simple(Map<String, String> parameters);

    /**
     * Gets parameter values
     * @param name - Parameter name
     * @return List of values
     */
    List<String> getParameters(String name);
}

/**
 * Main UI class
 */
class UI extends Component {
    /**
     * Gets current UI instance
     * @return Optional containing current UI
     */
    static Optional<UI> getCurrent();

    /**
     * Navigates to view
     * @param navigationTarget - Target view class
     */
    void navigate(Class<? extends Component> navigationTarget);

    /**
     * Navigates to view with parameters
     * @param navigationTarget - Target view class
     * @param parameter - URL parameter
     */
    <T> void navigate(Class<? extends Component> navigationTarget, T parameter);

    /**
     * Navigates to URL
     * @param url - URL string
     */
    void navigate(String url);

    /**
     * Gets page object
     * @return Page instance
     */
    Page getPage();
}

Examples:

// Basic view with routing
@Route("dashboard")
@PageTitle("Dashboard")
public class DashboardView extends VerticalLayout {
    public DashboardView() {
        add(new H1("Dashboard"));
        // Add components
    }
}

// Navigation with RouterLink
VerticalLayout menu = new VerticalLayout();
menu.add(
    new RouterLink("Home", HomeView.class),
    new RouterLink("Products", ProductsView.class),
    new RouterLink("About", AboutView.class)
);

// Programmatic navigation
Button goToDetails = new Button("View Details", event -> {
    UI.getCurrent().navigate(DetailsView.class);
});

// With parameters
Button goToProduct = new Button("View Product", event -> {
    UI.getCurrent().navigate(ProductView.class, productId);
});

// Route lifecycle hooks
@Route("editor")
public class EditorView extends VerticalLayout
        implements BeforeLeaveObserver {

    @Override
    public void beforeLeave(BeforeLeaveEvent event) {
        if (hasUnsavedChanges()) {
            event.postpone();
            ConfirmDialog dialog = new ConfirmDialog(
                "Unsaved Changes",
                "Do you want to discard changes?",
                "Discard",
                confirmEvent -> event.getContinueNavigationAction().proceed(),
                "Cancel",
                cancelEvent -> {}
            );
            dialog.open();
        }
    }
}

// Custom composite component
public class UserCard extends Composite<Div> {
    private final Avatar avatar = new Avatar();
    private final Span name = new Span();
    private final Span email = new Span();

    @Override
    protected Div initContent() {
        Div card = new Div();
        card.addClassName("user-card");
        card.add(avatar, name, email);
        return card;
    }

    public void setUser(User user) {
        avatar.setName(user.getName());
        name.setText(user.getName());
        email.setText(user.getEmail());
    }
}

Server and Configuration

Server-side configuration and application lifecycle.

/**
 * Main Vaadin servlet
 */
class VaadinServlet extends HttpServlet {
    /**
     * Creates Vaadin servlet
     */
    VaadinServlet();
}

/**
 * Vaadin service singleton
 */
class VaadinService {
    /**
     * Gets current service instance
     * @return Current VaadinService
     */
    static VaadinService getCurrent();
}

/**
 * User session
 */
class VaadinSession {
    /**
     * Gets current session
     * @return Optional containing current session
     */
    static Optional<VaadinSession> getCurrent();

    /**
     * Sets session attribute
     * @param name - Attribute name
     * @param value - Attribute value
     */
    void setAttribute(String name, Object value);

    /**
     * Gets session attribute
     * @param name - Attribute name
     * @return Attribute value
     */
    Object getAttribute(String name);
}

/**
 * Annotation for Progressive Web App configuration
 */
@Target(ElementType.TYPE)
@Retention(RetentionPolicy.RUNTIME)
@interface PWA {
    /**
     * Application name
     * @return App name
     */
    String name();

    /**
     * Short application name
     * @return Short name
     */
    String shortName() default "";

    /**
     * App description
     * @return Description
     */
    String description() default "";
}

/**
 * Interface for application shell configuration
 */
interface AppShellConfigurator {
}

/**
 * Annotation for server push configuration
 */
@Target(ElementType.TYPE)
@Retention(RetentionPolicy.RUNTIME)
@interface Push {
    /**
     * Push mode
     * @return PushMode enum value
     */
    PushMode value() default PushMode.AUTOMATIC;
}

enum PushMode {
    DISABLED, MANUAL, AUTOMATIC
}

/**
 * Annotation for theme selection
 */
@Target(ElementType.TYPE)
@Retention(RetentionPolicy.RUNTIME)
@interface Theme {
    /**
     * Theme name or class
     * @return Theme identifier
     */
    String value() default "";

    /**
     * Theme variant (e.g., "dark")
     * @return Variant name
     */
    String variant() default "";
}

Examples:

// Progressive Web App configuration
import com.vaadin.flow.component.page.AppShellConfigurator;
import com.vaadin.flow.server.PWA;
import com.vaadin.flow.theme.Theme;
import com.vaadin.flow.theme.lumo.Lumo;

@Theme(value = Lumo.class)
@PWA(
    name = "My Application",
    shortName = "MyApp",
    description = "My awesome Vaadin application"
)
public class AppShell implements AppShellConfigurator {
}

// Session attributes
VaadinSession.getCurrent().ifPresent(session -> {
    session.setAttribute("userId", user.getId());
    Object userId = session.getAttribute("userId");
});

Page and Browser Interaction

Interaction with browser page and JavaScript execution.

/**
 * Represents the browser page
 */
class Page {
    /**
     * Executes JavaScript in browser
     * @param expression - JavaScript expression
     * @return PendingJavaScriptResult for handling result
     */
    PendingJavaScriptResult executeJs(String expression, Serializable... parameters);

    /**
     * Sets page title
     * @param title - Page title
     */
    void setTitle(String title);

    /**
     * Opens URL in new window/tab
     * @param url - URL to open
     */
    void open(String url);

    /**
     * Adds browser window resize listener
     * @param listener - Resize listener
     * @return Registration for removing listener
     */
    Registration addBrowserWindowResizeListener(ComponentEventListener<BrowserWindowResizeEvent> listener);
}

/**
 * Result of JavaScript execution
 */
interface PendingJavaScriptResult {
    /**
     * Handles result as string
     * @param handler - Result handler
     */
    void then(SerializableConsumer<String> handler);

    /**
     * Handles result as JSON
     * @param handler - Result handler
     * @param errorHandler - Error handler
     */
    void then(SerializableConsumer<JsonValue> handler, SerializableConsumer<String> errorHandler);
}

Examples:

Page page = UI.getCurrent().getPage();

// Simple execution
page.executeJs("console.log('Hello from Java')");

// With parameters
page.executeJs("console.log($0)", "Parameter value");

// Handle result
page.executeJs("return window.innerWidth")
    .then(Integer.class, width -> {
        Notification.show("Window width: " + width);
    });

// Set page title
page.setTitle("My Application - Dashboard");

// Open URL in new window
page.open("https://vaadin.com");

Frontend Integration

Annotations for CSS and JavaScript module imports.

/**
 * Annotation for importing CSS files
 */
@Target({ElementType.TYPE})
@Retention(RetentionPolicy.RUNTIME)
@interface CssImport {
    /**
     * CSS file path
     * @return Path to CSS file
     */
    String value();

    /**
     * Theme for CSS (e.g., "lumo")
     * @return Theme name
     */
    String themeFor() default "";

    /**
     * Include parameter for conditional imports
     * @return Include parameter
     */
    String include() default "";
}

/**
 * Annotation for importing JavaScript modules
 */
@Target({ElementType.TYPE})
@Retention(RetentionPolicy.RUNTIME)
@interface JsModule {
    /**
     * JavaScript module path
     * @return Path to JS module
     */
    String value();
}

/**
 * Annotation for NPM package dependencies
 */
@Target({ElementType.TYPE})
@Retention(RetentionPolicy.RUNTIME)
@interface NpmPackage {
    /**
     * NPM package name
     * @return Package name
     */
    String value();

    /**
     * Package version
     * @return Version string
     */
    String version();
}

Examples:

// Custom CSS import
@Route("styled")
@CssImport("./styles/custom-styles.css")
public class StyledView extends VerticalLayout {
    // View implementation
}

// Scoped CSS for component
@CssImport(
    value = "./styles/grid-custom.css",
    themeFor = "vaadin-grid"
)
public class GridView extends VerticalLayout {
    // Grid with custom styling
}

// JavaScript module import
@Route("custom")
@JsModule("./scripts/custom-component.js")
public class CustomView extends VerticalLayout {
}

// NPM package dependency
@NpmPackage(value = "lodash", version = "^4.17.21")
public class UtilityView extends VerticalLayout {
}

Install with Tessl CLI

npx tessl i tessl/maven-com-vaadin--vaadin-core@24.9.1

docs

advanced.md

components.md

core-framework.md

data-integration.md

index.md

layouts.md

security.md

themes-styling.md

tile.json