Vaadin Flow

https://vaadin.com/docs/latest/flow
Admin
Vaadin Flow is a Java framework for building full-stack web applications entirely in Java,...
Tokens:649,519
Snippets:4,694
Trust Score:10
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### CDI integration: MainView and GreetService

Source: https://vaadin.com/docs/latest/flow/integrations

CDI starter example: the main view injects GreetService with @Inject, and the service is scoped to the Vaadin session using @VaadinSessionScoped, so each user session gets its own instance.

```java
public class MainView extends VerticalLayout {
    @Inject
    private GreetService greetService;
```

```java
@VaadinSessionScoped
public class GreetService {
    public String greet(String name) {
        if (name == null || name.isEmpty()) {
            return "Hello anonymous user";
        } else {
            return "Hello " + name;
        }
    }
}
```

--------------------------------

### Async setup with cleanup in addJsInitializer

Source: https://vaadin.com/docs/latest/flow/component-internals/element-api/calling-javascript

Handles asynchronous setup by keeping a reference to the pending work and returning an async cleanup function that awaits it before destroying the widget. This ensures the resource is torn down even if cleanup runs before the asynchronous setup finishes, preventing leaks from slow imports.

```java
getElement().addJsInitializer("""
        const widgetPromise = import('./my-widget.js')
                .then((module) => module.create(this));
        return async () => (await widgetPromise).destroy();
        """);
```

--------------------------------

### ShoppingCartSignals class setup and subtotal computed signal

Source: https://vaadin.com/docs/latest/flow/ui-state/usage-examples/shopping-cart-example

Full class header and constructor for the ShoppingCartSignals example. It defines records for Product, CartItem, DiscountCode, and ShippingOption, creates ListSignal and ValueSignal instances for cart state, and computes the subtotal signal from the cart items.

```java
package com.vaadin.demo.flow.signals;

import com.vaadin.flow.router.Route;
import java.math.BigDecimal;
import java.math.RoundingMode;
import java.util.List;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.H3;
import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.IntegerField;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.signals.Signal;
import com.vaadin.flow.signals.local.ListSignal;
import com.vaadin.flow.signals.local.ValueSignal;

@Route("shopping-cart-with-signals")
public class ShoppingCartSignals extends VerticalLayout {

    record Product(String id, String name, BigDecimal price) {
    }

    record CartItem(Product product, int quantity) {
        CartItem withQuantity(int newQuantity) {
            return new CartItem(this.product, newQuantity);
        }
    }

    record DiscountCode(String code, BigDecimal percentage) {
    }

    enum ShippingOption {
        STANDARD, EXPRESS, OVERNIGHT
    }

    public ShoppingCartSignals() {
        // Create signals for cart state
        ListSignal<CartItem> cartItemsSignal = new ListSignal<>();
        ValueSignal<String> discountCodeSignal = new ValueSignal<>("");
        ValueSignal<ShippingOption> shippingOptionSignal = new ValueSignal<>(
                ShippingOption.STANDARD);

        // Computed signal for subtotal
        Signal<BigDecimal> subtotalSignal = Signal.computed(
                () -> cartItemsSignal.get().stream().map(ValueSignal::get)
                        .map(item -> item.product().price()
                                .multiply(BigDecimal.valueOf(item.quantity())))
                        .reduce(BigDecimal.ZERO, BigDecimal::add));
```

--------------------------------

### The same example as the previous one, expressed as HTML

Source: https://vaadin.com/docs/latest/flow/component-internals/element-api/properties-attributes

Shows the equivalent HTML markup for the input element with the attributes set in the previous example.

```html
<input id="nameField" placeholder="John Doe" autofocus>
```

--------------------------------

### Use npm and npx from automatic Node.js installation on Windows

Source: https://vaadin.com/docs/latest/flow/configuration/development-mode/node-js

Shows how to run npm and npx directly from the automatically installed Node.js distribution under %USERPROFILE%\.vaadin\ on Windows.

```terminal
%USERPROFILE%\.vaadin\node-v24.14.0\npm.cmd install some-package
%USERPROFILE%\.vaadin\node-v24.14.0\npx.cmd some-tool
```

--------------------------------

### Install dev CLI without HotswapAgent (bash)

Source: https://vaadin.com/docs/latest/flow/configuration/live-reload/dev-loop-cli

Installs the project files alone when the machine has no network. This skips the HotswapAgent download, but the first start will then need network to download the agent itself.

```bash
mvn vaadin:install-dev-cli -Dvaadin.devcli.skipHotswapAgent=true
```

--------------------------------

### Use npm and npx from automatic Node.js installation on Unix

Source: https://vaadin.com/docs/latest/flow/configuration/development-mode/node-js

Shows how to run npm and npx directly from the automatically installed Node.js distribution under ~/.vaadin/ on Unix systems.

```terminal
~/.vaadin/node-v24.14.0/bin/npm install some-package
~/.vaadin/node-v24.14.0/bin/npx some-tool
```

--------------------------------

### Visa Application Form: Setup and Conditional Visibility

Source: https://vaadin.com/docs/latest/flow/ui-state/usage-examples/conditional-visibility

The first snippet shows the setup of binder, data bean, and signals for conditional visibility. The second is the full class including the setup and the beginning of the visa application form constructor, with the reactive binding for the needsVisa checkbox.

```Java
// Create binder and data bean
Binder<VisaApplicationData> binder = new Binder<>(
        VisaApplicationData.class);
VisaApplicationData data = new VisaApplicationData();
binder.setBean(data);

// Create signals for conditional visibility
ValueSignal<Boolean> needsVisaSignal = new ValueSignal<>(false);
ValueSignal<VisaType> visaTypeSignal = new ValueSignal<>(VisaType.H1B);
ValueSignal<Boolean> hasH1BPreviouslySignal = new ValueSignal<>(false);
```

```Java
package com.vaadin.demo.flow.signals;

import com.vaadin.flow.component.checkbox.Checkbox;
import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.data.binder.Binder;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.signals.local.ValueSignal;

@Route("conditional-visibility-with-signals")
public class ConditionalVisibility extends VerticalLayout {

    enum VisaType {
        H1B, L1, O1
    }

    static class VisaApplicationData {
        private Boolean needsVisa;
        private VisaType visaType;
        private String currentVisaStatus;
        private Boolean hasH1BPreviously;
        private String previousEmployer;

        // getters and setters omitted for brevity
        public Boolean getNeedsVisa() {
            return needsVisa;
        }

        public void setNeedsVisa(Boolean needsVisa) {
            this.needsVisa = needsVisa;
        }

        public VisaType getVisaType() {
            return visaType;
        }

        public void setVisaType(VisaType visaType) {
            this.visaType = visaType;
        }

        public String getCurrentVisaStatus() {
            return currentVisaStatus;
        }

        public void setCurrentVisaStatus(String currentVisaStatus) {
            this.currentVisaStatus = currentVisaStatus;
        }

        public Boolean getHasH1BPreviously() {
            return hasH1BPreviously;
        }

        public void setHasH1BPreviously(Boolean hasH1BPreviously) {
            this.hasH1BPreviously = hasH1BPreviously;
        }

        public String getPreviousEmployer() {
            return previousEmployer;
        }

        public void setPreviousEmployer(String previousEmployer) {
            this.previousEmployer = previousEmployer;
        }
    }

    public ConditionalVisibility() {
        // Create binder and data bean
        Binder<VisaApplicationData> binder = new Binder<>(
                VisaApplicationData.class);
        VisaApplicationData data = new VisaApplicationData();
        binder.setBean(data);

        // Create signals for conditional visibility
        ValueSignal<Boolean> needsVisaSignal = new ValueSignal<>(false);
        ValueSignal<VisaType> visaTypeSignal = new ValueSignal<>(VisaType.H1B);
        ValueSignal<Boolean> hasH1BPreviouslySignal = new ValueSignal<>(false);

        // Base question: needs visa sponsorship
        Checkbox needsVisaCheckbox = new Checkbox(
                "Do you require visa sponsorship?");
        binder.forField(needsVisaCheckbox).bind(
                VisaApplicationData::getNeedsVisa,
                VisaApplicationData::setNeedsVisa);
        needsVisaCheckbox.bindValue(needsVisaSignal, needsVisaSignal::set);

        // Level 1: Visa-related fields (shown when needsVisa is true)
        VerticalLayout visaSection = new VerticalLayout();
```

--------------------------------

### apply output example

Source: https://vaadin.com/docs/latest/flow/configuration/live-reload/dev-loop-cli

Example output from the `apply` command showing the phase line and per-part lines. `Stable` means the change is live and the application is consistent.

```text
compiling → runtime → Stable   (1.2s)
hmr: 1 resource(s) copied, pushed 1 stylesheet(s) in place
hot-reload: redefineClasses(1); onHotswap completed=true
```

--------------------------------

### nginx base configuration with placeholder for example snippet

Source: https://vaadin.com/docs/latest/flow/production/reverse-proxy

Base nginx configuration file structure. The example snippets are meant to be placed inside the http block.

```nginx
user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;

http {

    ## Example snippet goes here

}
```

--------------------------------

### gcloud init Configuration Prompt Output

Source: https://vaadin.com/docs/latest/flow/production/cloud-providers/google

Example output from `gcloud init` showing the configuration selection prompt. Enter '1' to use the default configuration.

```text
Settings from your current configuration [default] are:
accessibility:
  screen_reader: 'False'
core:
  account: john.doe@gmail.com
  disable_usage_reporting: 'True'

Pick configuration to use:
 [1] Re-initialize this configuration [default] with new settings
 [2] Create a new configuration
Please enter your numeric choice:  1
```

--------------------------------

### Chain Queries with thenOn()

Source: https://vaadin.com/docs/latest/flow/testing/browserless/component-query

Use thenOn() to chain a new query starting from a component found by the current query. The example searches for VerticalLayouts, takes the second one, filters for disabled TextFields, and gets the last one.

```Java
// Search for all 'VerticalLayout's in the view
TextField textField = findInView(VerticalLayout.class)
        // take the second one and start searching for 'TextField's
        .thenOn(2, TextField.class)
        // filter for disabled 'TextField's
        .withCondition(tf -> !tf.isEnabled())
        // and get the last one
        .last();
```

--------------------------------

### Basic Chart AI Setup

Source: https://vaadin.com/docs/latest/flow/ai-support/ai-powered-chart

Creates a Chart, a MessageInput, a DatabaseProvider, and a ChartAIController, then builds an AIOrchestrator with the provider and system prompt, wires the controller and message input, and adds the chart and input to the UI.

```Java
Chart chart = new Chart();
MessageInput messageInput = new MessageInput();

DatabaseProvider databaseProvider = new JdbcDatabaseProvider(dataSource);
ChartAIController controller = new ChartAIController(chart, databaseProvider);

AIOrchestrator.builder(provider, systemPrompt)
        .withInput(messageInput)
        .withController(controller)
        .build();

add(messageInput, chart);
```

--------------------------------

### Set up a grid to display items and manage selection

Source: https://vaadin.com/docs/latest/flow/ui-state/usage-examples/crud-editor

Creates a Grid for the Item class, sets the columns to 'product' and 'category', and populates it with a list of items. This is the initial step for the CRUD editor example.

```java
Grid<Item> itemGrid = new Grid<>(Item.class);
itemGrid.setColumns("product", "category");
itemGrid.setItems(listItems());
```

--------------------------------

### AIOrchestratorProgrammaticPrompt.java full example

Source: https://vaadin.com/docs/latest/flow/ai-support/tool-calling

Complete Java class for a Vaadin route that demonstrates programmatic prompts. It includes the necessary imports, a @Route annotation, and a getLLMProvider() method returning a MockLLMProvider. The example shows the full component setup with a button that triggers orchestrator.prompt().

```java
package com.vaadin.demo.flow.aicomponents;

import com.vaadin.flow.component.ai.orchestrator.AIOrchestrator;
import com.vaadin.flow.component.ai.provider.LLMProvider;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.messages.MessageList;
import com.vaadin.flow.router.Route;

@Route("ai-components-programmatic-prompt")
public class AIOrchestratorProgrammaticPrompt extends Div {

    public AIOrchestratorProgrammaticPrompt() {
        MessageList messageList = new MessageList();

        LLMProvider provider = getLLMProvider();

        AIOrchestrator orchestrator = AIOrchestrator
                .builder(provider, "You are a helpful assistant.")
                .withMessageList(messageList).build();

        Button button = new Button("Summarize",
                event -> orchestrator.prompt("Summarize the key features"));

        add(button, messageList);

    }

    private LLMProvider getLLMProvider() {
        return new MockLLMProvider();
    }

}
```

--------------------------------

### SignalOperation result() example

Source: https://vaadin.com/docs/latest/flow/ui-state/transactions

Shows how to obtain and inspect the result of a signal operation. The result is a CompletableFuture that resolves when the operation completes, and you can check its status with isDone() and retrieve the result with get().

```Java
SignalOperation<String> op = stringSignal.set("new value");

// Get the result as a CompletableFuture
CompletableFuture<SignalOperation.ResultOrError<String>> result = op.result();

// Check if the operation has completed
if (result.isDone()) {
    // Get the result (blocks if not yet complete)
    SignalOperation.ResultOrError<String> resultOrError = result.get();
    if (resultOrError.successful()) {
        System.out.println("Operation completed successfully");
    }
}
```

--------------------------------

### Create search text signal

Source: https://vaadin.com/docs/latest/flow/ui-state/building-ui

Creates a ValueSignal for search text, used as a starting point for deriving visibility from other signal types using map(). The example is incomplete in the source.

```java
ValueSignal<String> searchText = new ValueSignal<>("");
```

--------------------------------

### Configure screenshot error directory with Parameters.setScreenshotErrorDirectory

Source: https://vaadin.com/docs/latest/flow/testing/end-to-end/screenshots

Configure the directory where failure screenshots are written by setting the `screenshotErrorDirectory` parameter in the test setup. The screenshots are saved to the specified path, for example `screenshots/errors`.

```java
@Before
public void setUp() throws Exception {
    Parameters.setScreenshotErrorDirectory("screenshots/errors");
    ...
}
```

--------------------------------

### Creating Users and Windows

Source: https://vaadin.com/docs/latest/flow/testing/browserless/multi-user

Documentation for creating users and windows in browserless testing, and the window-scoped testing DSL methods.

```APIDOC
## newUser()

### Description
Creates a fresh `BrowserlessUserContext` with its own `VaadinSession`, representing a new user with an independent session.

### Method
newUser()

### Parameters
None.

### Returns
- **BrowserlessUserContext** - A new user context with an independent session.

## newWindow()

### Description
Creates a new `UI` for the current user. Different windows of the same user share a session but have independent `UI` instances.

### Method
newWindow()

### Parameters
None.

### Returns
- **UI** - A new UI instance for the current user.

## window.navigate(…)

### Description
Navigates the window to a view.

### Method
navigate(…)

### Parameters
- **view** (unknown) - Required - The target view to navigate to.

## window.findButton()

### Description
Typed locator entry point that combines a filter chain with the component's tester actions in one fluent expression.

### Method
findButton()

### Parameters
None.

### Returns
- **Typed locator** - A fluent expression for locating and testing a button.

## window.findTextField()

### Description
Typed locator entry point that combines a filter chain with the component's tester actions in one fluent expression.

### Method
findTextField()

### Parameters
None.

### Returns
- **Typed locator** - A fluent expression for locating and testing a text field.

## window.findGrid(Class<V>)

### Description
Typed locator entry point that combines a filter chain with the component's tester actions in one fluent expression.

### Method
findGrid(Class<V>)

### Parameters
- **gridClass** (Class<V>) - Required - The grid component class.

### Returns
- **Typed locator** - A fluent expression for locating and testing a grid.

## window.find(Class)

### Description
Locates components in this window. Returns a `ComponentQuery`.

### Method
find(Class)

### Parameters
- **componentClass** (Class) - Required - The component class to locate.

### Returns
- **ComponentQuery** - A query for locating components.

## window.findInView(Class)

### Description
Locates components in this window. Returns a `ComponentQuery`.

### Method
findInView(Class)

### Parameters
- **componentClass** (Class) - Required - The component class to locate.

### Returns
- **ComponentQuery** - A query for locating components.

## window.test(component)

### Description
Wraps a component in a tester that simulates user actions like `click()` and `setValue()`. Returns a typed tester matched to the component's type.

### Method
test(component)

### Parameters
- **component** (unknown) - Required - The component to wrap.

### Returns
- **Typed tester** - A tester matched to the component's type.

## window.test(MyTester.class, component)

### Description
Wraps a component in a tester of a specific type, for example a custom tester.

### Method
test(MyTester.class, component)

### Parameters
- **testerClass** (Class) - Required - The specific tester class to use.
- **component** (unknown) - Required - The component to wrap.

### Returns
- **Typed tester** - A tester of the specified type.

## window.fireShortcut(Key, KeyModifier…)

### Description
Simulates a keyboard shortcut in the window, mirroring `fireShortcut()` on `BrowserlessTest`.

### Method
fireShortcut(Key, KeyModifier…)

### Parameters
- **key** (Key) - Required - The key to simulate.
- **modifiers** (KeyModifier…) - Optional - Additional key modifiers.

## window.runPendingSignalsTasks()

### Description
Processes pending signal effects before asserting.

### Method
runPendingSignalsTasks()

### Parameters
None.

## window.getCurrentView()

### Description
Convenience accessor that mirrors its `BrowserlessTest` counterpart.

### Method
getCurrentView()

### Parameters
None.

### Returns
- **Current view** - The current view of the window.

## window.roundTrip()

### Description
Convenience accessor that mirrors its `BrowserlessTest` counterpart.

### Method
roundTrip()

### Parameters
None.

### Returns
- **Round trip result** - The result of the round trip.
```

--------------------------------

### InsertOperation signal() example

Source: https://vaadin.com/docs/latest/flow/ui-state/transactions

Shows how to use InsertOperation to get immediate access to the signal for a newly inserted list item. This is useful when you need to reference the inserted item right after insertion.

```Java
SharedListSignal<Todo> todoList = new SharedListSignal<>(Todo.class);

InsertOperation<SharedValueSignal<Todo>> op = todoList.insertLast(new Todo("New task", false));

// Get the signal for the inserted item immediately
SharedValueSignal<Todo> insertedSignal = op.signal();

// You can start working with the signal right away
insertedSignal.update(todo -> new Todo(todo.text(), true));
```

--------------------------------

### Record a single test class with Maven command line

Source: https://vaadin.com/docs/latest/flow/testing/load-testing

Run the loadtest:record goal from the command line for a single test class. CLI parameters are prefixed with k6., so use -Dk6.testClass=HelloWorldIT.

```bash
mvn loadtest:record -Dk6.testClass=HelloWorldIT
```

--------------------------------

### Create signals for cart state

Source: https://vaadin.com/docs/latest/flow/ui-state/usage-examples/shopping-cart-example

Initializes the three signals that track cart state: a ListSignal for cart items, a ValueSignal for the discount code, and a ValueSignal for the shipping option. This snippet is the core state setup used throughout the example.

```java
// Create signals for cart state
ListSignal<CartItem> cartItemsSignal = new ListSignal<>();
ValueSignal<String> discountCodeSignal = new ValueSignal<>("");
ValueSignal<ShippingOption> shippingOptionSignal = new ValueSignal<>(
        ShippingOption.STANDARD);
```

--------------------------------

### Tracking Window Size with Page.windowSizeSignal()

Source: https://vaadin.com/docs/latest/flow/ui-state/building-ui

Uses Page.windowSizeSignal() to get a read-only signal tracking the browser window size. The signal provides a WindowSize record with width() and height() in pixels. It is lazily initialized, has correct values from the start, and updates automatically on resize.

```java
Signal<WindowSize> windowSize = UI.getCurrentOrThrow().getPage().windowSizeSignal();

Span dimensions = new Span();
dimensions.bindText(windowSize.map(ws ->
    String.format("Window: %d x %d", ws.width(), ws.height())));

// Create a responsive layout
VerticalLayout content = new VerticalLayout();
content.bindClassName("mobile-layout", windowSize.map(ws -> ws.width() < 768));
```

--------------------------------

### Enable frontend.hotdeploy via system property

Source: https://vaadin.com/docs/latest/flow/configuration/development-mode

Pass this system property to the JVM to enable the frontend development server.

```bash
-Dvaadin.frontend.hotdeploy=true
```

--------------------------------

### CrudEditorExample with Grid, ValueSignal, and Binder

Source: https://vaadin.com/docs/latest/flow/ui-state/usage-examples/crud-editor

Full example class that sets up a Grid, a ValueSignal for the selected item, and a Binder for the form fields. The grid selection listener updates the signal, and a Signal.effect keeps the grid selection in sync when the signal changes programmatically.

```java
package com.vaadin.demo.flow.signals.usecase;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.component.formlayout.FormLayout;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.notification.NotificationVariant;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.data.binder.Binder;
import com.vaadin.flow.data.binder.ValidationException;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.signals.Signal;
import com.vaadin.flow.signals.local.ValueSignal;
import org.jspecify.annotations.NonNull;

import java.util.List;

@Route("crud-editor-with-signals")
public class CrudEditorExample extends VerticalLayout {

    static private final Item NEW_ITEM = new Item();

    public CrudEditorExample() {
        Grid<Item> itemGrid = new Grid<>(Item.class);
        itemGrid.setColumns("product", "category");
        itemGrid.setItems(listItems());

        ValueSignal<Item> selectedItemSignal = new ValueSignal<>(NEW_ITEM);
        // Update signal when user selects an item in the grid
        itemGrid.addSelectionListener((event) -> selectedItemSignal
                .set(event.getFirstSelectedItem().orElse(NEW_ITEM)));

        // Keep grid selection in sync with the signal (if signal changes
        // programmatically)
        Signal.effect(this, () -> itemGrid.select(selectedItemSignal.get()));

        add(itemGrid);

        Binder<Item> itemBinder = new Binder<>();

        TextField productNameField = new TextField("Product");
        itemBinder.forField(productNameField).bind(Item::getProduct,
                Item::setProduct);

        ComboBox<String> categoryField = new ComboBox<>("Category");
        categoryField.setItems(List.of("Office", "Tech", "Stationery"));
        itemBinder.forField(categoryField).bind(Item::getCategory,
                Item::setCategory);
```

--------------------------------

### Initialize SimpleDatePicker by extending AbstractField

Source: https://vaadin.com/docs/latest/flow/binding-data/field

Starts implementing a component that extends AbstractField and passes the default value (null) to its constructor. The type parameters are the same as for AbstractSinglePropertyField: the getSource() type for the value-change event and the value type. Later steps add setup and property-change handling.

```java
@Tag("simple-date-picker")
public class SimpleDatePicker
    extends AbstractField<SimpleDatePicker, LocalDate> {

    public SimpleDatePicker() {
        super(null);
    }
}
```

--------------------------------

### Override onAttach() to get a session attribute in UserNameLabel.java

Source: https://vaadin.com/docs/latest/flow/component-internals/basic

Override onAttach() to perform initialization that requires the component to be attached to a UI. This example retrieves a session attribute and sets the element's text. The default implementation is empty, so super.onAttach() is not required unless extending another component class.

```java
package com.vaadin.demo.reference.componentinternals.basics;

import com.vaadin.flow.component.AttachEvent;
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Tag;

@Tag("div")
public class UserNameLabel extends Component {

    @Override
    protected void onAttach(AttachEvent attachEvent) {
        // This assumes the username has been stored in the session after login
        String userName = (String) attachEvent.getSession()
                .getAttribute("username");
        getElement().setText("Hello %s, weclome back!".formatted(userName));
    }
}
```

--------------------------------

### JUnit 4 Parameterized Tests on Multiple Remote Browsers

Source: https://vaadin.com/docs/latest/flow/testing/end-to-end/advanced-concepts

JUnit 4 example for running parameterized tests on multiple remote browsers. The base class is annotated with @RunWith(Parameterized.class) and @RunOnHub. Subclasses use @RunLocally annotations, though the source shows them with @RunLocally despite the remote setup.

```Java
@RunWith(Parameterized.class)
@RunOnHub("hub.testgrid.mydomain.com")
abstract class AbstractParameterizedTest extends ParallelTest {

    @Parameterized.Parameters
    public static Iterable<String> data() {
        return List.of("first", "second");
    }

    @Parameterized.Parameter(0)
    public String parameter;

    @Test
    public void myTestMethod() {
        getDriver().get("http://localhost:8080/" + parameter);
    }

}

@RunLocally(Browser.CHROME)
class ChromeParameterizedIT extends AbstractParameterizedTest {

}

@RunLocally(Browser.FIREFOX)
class FirefoxParameterizedIT extends AbstractParameterizedTest {

}
```

--------------------------------

### Basic GridAIController setup with AIOrchestrator

Source: https://vaadin.com/docs/latest/flow/ai-support/ai-powered-grid

Sets up an AI-powered Grid: create a Grid<AIDataRow>, a MessageInput, a JdbcDatabaseProvider, and a GridAIController, then attach them to an AIOrchestrator. The grid itself is the output surface; no message list is required.

```Java
Grid<AIDataRow> grid = new Grid<>();
MessageInput messageInput = new MessageInput();

DatabaseProvider databaseProvider = new JdbcDatabaseProvider(dataSource);
GridAIController controller = new GridAIController(grid, databaseProvider);

AIOrchestrator.builder(provider, systemPrompt)
        .withInput(messageInput)
        .withController(controller)
        .build();

add(messageInput, grid);
```

--------------------------------

### Create order summary and options layout with signal bindings

Source: https://vaadin.com/docs/latest/flow/ui-state/usage-examples/shopping-cart-example

Builds the options section with a discount code TextField and shipping ComboBox, then creates an order summary with subtotal, discount, shipping, tax, and total labels. Uses bindValue and bindText to connect signals to UI components, and bindVisible to hide the discount label when the discount is zero.

```java
        // Options section
        HorizontalLayout optionsLayout = new HorizontalLayout();
        optionsLayout.setWidthFull();

        TextField discountField = new TextField("Discount Code");
        discountField.setPlaceholder("Enter SAVE10 or SAVE20");
        discountField.bindValue(discountCodeSignal, discountCodeSignal::set);

        ComboBox<ShippingOption> shippingSelect = new ComboBox<>(
                "Shipping Method", ShippingOption.values());
        shippingSelect.setValue(ShippingOption.STANDARD);
        shippingSelect.bindValue(shippingOptionSignal,
                shippingOptionSignal::set);

        optionsLayout.add(discountField, shippingSelect);

        // Totals display
        Div totalsBox = new Div();

        H3 summaryTitle = new H3("Order Summary");

        Span subtotalLabel = new Span();
        subtotalLabel.bindText(subtotalSignal.map(total -> "Subtotal: $"
                + total.setScale(2, RoundingMode.HALF_UP)));

        Span discountLabel = new Span();
        discountLabel.bindText(discountSignal.map(discount -> "Discount: -$"
                + discount.setScale(2, RoundingMode.HALF_UP)));
        discountLabel.bindVisible(
                discountSignal.map(d -> d.compareTo(BigDecimal.ZERO) > 0));

        Span shippingLabel = new Span();
        shippingLabel.bindText(shippingSignal.map(shipping -> "Shipping: $"
                + shipping.setScale(2, RoundingMode.HALF_UP)));

        Span taxLabel = new Span();
        taxLabel.bindText(taxSignal.map(
                tax -> "Tax (8%): $" + tax.setScale(2, RoundingMode.HALF_UP)));

        Span totalLabel = new Span();
        totalLabel.bindText(totalSignal.map(
                total -> "Total: $" + total.setScale(2, RoundingMode.HALF_UP)));

        totalsBox.add(summaryTitle, subtotalLabel, discountLabel, shippingLabel,
                taxLabel, totalLabel);

        add(productsTitle, productsContainer, cartTitle, cartItemsContainer,
                optionsLayout, totalsBox);
    }
```

--------------------------------

### Java: Get menu entries and create Anchor menu

Source: https://vaadin.com/docs/latest/flow/routing/menu-configuration

Use MenuConfiguration.getMenuEntries() to retrieve a List<MenuEntry> and add Anchor components to a layout for each entry. The list is sorted by order found, then by path alphabetically and locale. This example creates a simple menu using the entry's path and title.

```java
List<MenuEntry> menuEntries = MenuConfiguration.getMenuEntries();
menuEntries.forEach(entry -> layout.add(new Anchor(entry.path(), entry.title())));
```

--------------------------------

### Retrieve route with aliases and template parameters using RouteParameters

Source: https://vaadin.com/docs/latest/flow/routing/retrieving-routes

Demonstrates retrieving a route for a navigation target registered with multiple templates (main route and aliases) and a route prefix. The parameter values are matched against all route templates starting with the main route until one succeeds. The generated URL in this example is `component/button/api/com/vaadin/flow/button`.

```Java
@Route(value = ":path*")
@RouteAlias(value = ":tab(api)/:path*")
@RouteAlias(value = ":tab(overview|samples|links|reviews|discussions)")
@RoutePrefix("component/:identifier")
public static class ComponentView extends Component {
}

public class MenuView extends Div {

    private void addButtonApiLink() {
        String url = routeConfiguration.getUrl(
                ComponentView.class,
                new RouteParameters(
                        new RouteParam("identifier", "button"),
                        new RouteParam("tab", "api"),
                        new RouteParam("path", "com/vaadin/flow/button")));

        // The generated url is `component/button/api/com/vaadin/flow/button`
        Anchor link = new Anchor(url, "Button Api");
        add(link);
    }
}
```

--------------------------------

### Build and run with Maven: mvn spring-boot:run

Source: https://vaadin.com/docs/latest/flow/testing/end-to-end/getting-started

Starts a Vaadin application created with the Spring Boot starter from start.vaadin.com. Run this before launching the integration test so the server is available at the URL the test expects.

```bash
mvn spring-boot:run
```

--------------------------------

### List Sample Items for the Grid

Source: https://vaadin.com/docs/latest/flow/ui-state/usage-examples/crud-editor

Provides a static list of sample Item objects to populate the grid. Includes items with IDs, product names, and categories.

```java
static private List<Item> listItems() {
    return List.of(new Item(1, "Laptop", "Tech"),
            new Item(2, "Desk Chair", "Office"),
            new Item(3, "Monitor", "Tech"), new Item(4, "Keyboard", "Tech"),
            new Item(5, "Mouse Pad", "Office"),
            new Item(6, "Printer Paper", "Office"),
            new Item(7, "Stapler", "Office"),
            new Item(8, "Desk", "Stationary"),
            new Item(9, "Notebook", "Office"),
            new Item(10, "Pen Set", "Office"),
            new Item(11, "Cable Ties", "Tech"),
            new Item(12, "Extension Cord", "Tech"));
}
```

--------------------------------

### Docker-based Selenium Grid setup with docker-compose

Source: https://vaadin.com/docs/latest/flow/testing/end-to-end/test-grid

Defines a Selenium Grid with one Chrome node and one Firefox node plus a hub, then starts the entire grid. The grid runs on http://localhost:4444 with the console at http://localhost:4444/grid/console, allowing tests to run on the hub using @RunOnHub("localhost").

```yaml
version: '2'
services:
  firefox:
    image: selenium/node-firefox:3.9.1-actinium
    volumes:
      - /dev/shm:/dev/shm
    depends_on:
      - hub
    environment:
      HUB_HOST: hub

  chrome:
    image: selenium/node-chrome:3.9.1-actinium
    volumes:
      - /dev/shm:/dev/shm
    depends_on:
      - hub
    environment:
      HUB_HOST: hub

  hub:
    image: selenium/hub:3.9.1-actinium
    ports:
      - "4444:4444"

```

```bash
docker-compose up

```

--------------------------------

### Verify session ID rotation after login

Source: https://vaadin.com/docs/latest/flow/testing/browserless/spring-security

Use this snippet to verify that the session ID changes after a login flow, which is part of session fixation protection. The example gets the current session ID before login, performs the login, and asserts that the ID has changed. This works because the mocked request rotates the session ID instead of refusing it.

```java
String idBeforeLogin = VaadinSession.getCurrent().getSession().getId();

// Log in through the application's own flow

Assertions.assertNotEquals(idBeforeLogin,
        VaadinSession.getCurrent().getSession().getId());
```

--------------------------------

### Output of apply command

Source: https://vaadin.com/docs/latest/flow/configuration/live-reload/dev-loop-cli

Example output showing the change-set, compilation, hot-reload, and completion status.

```bash
change-set: 2 file(s): src/main/java/com/example/TaskListView.java, src/main/frontend/themes/app/styles.css
compiling → runtime → Stable   (1.2s)
hot-reload: redefineClasses(1); onHotswap completed=true
```

--------------------------------

### Configure input event with LEADING and INTERMEDIATE debounce

Source: https://vaadin.com/docs/latest/flow/component-internals/events

Configures an input event for both the LEADING phase (immediately when the burst starts) and the INTERMEDIATE phase (while the burst is ongoing) with a 500 ms timeout. Combining INTERMEDIATE and TRAILING phases would cause the final event to be sent twice, so this example uses LEADING and INTERMEDIATE instead.

```java
package com.vaadin.demo.reference.componentinternals.events.dom;

import com.vaadin.flow.component.ComponentEvent;
import com.vaadin.flow.component.DebounceSettings;
import com.vaadin.flow.component.DomEvent;
import com.vaadin.flow.component.EventData;
import com.vaadin.flow.dom.DebouncePhase;

@DomEvent(
    value = "input",
    debounce = @DebounceSettings(
        timeout = 500,
        phases = {
            DebouncePhase.LEADING,
            DebouncePhase.INTERMEDIATE
        }
    )
)
public class ContinuousInputEvent extends ComponentEvent<TextField> {

    private final String value;

    public ContinuousInputEvent(TextField source, boolean fromClient,
            @EventData("element.value") String value) {
        super(source, fromClient);
        this.value = value;
    }

    public String getValue() {
        return value;
    }
}
```

--------------------------------

### Plain Java servlet integration: MainView and GreetService

Source: https://vaadin.com/docs/latest/flow/integrations

Plain Java servlet example: the main view manually creates a GreetService instance and uses a TextField and Button with a lambda expression; the service is an ordinary object without annotations.

```java
public class MainView extends VerticalLayout {

    public MainView() {
        // Use TextField for standard text input
        TextField textField = new TextField("Your name");

        // Button click listeners can be defined as lambda expressions
        GreetService greetService = new GreetService();
        Button button = new Button("Say hello",
            e -> Notification.show(greetService.greet(textField.getValue())));
```

```java
public class GreetService {
    public String greet(String name) {
        if (name == null || name.isEmpty()) {
            return "Hello anonymous user";
        } else {
            return "Hello " + name;
        }
    }
}
```

--------------------------------

### Install AWS Elastic Beanstalk CLI

Source: https://vaadin.com/docs/latest/flow/production/cloud-providers/aws

Install the AWS Elastic Beanstalk CLI. Requires Python to be installed on your machine.

```terminal
pip install awsebcli --upgrade
```

--------------------------------

### Install Heroku Java Plugin

Source: https://vaadin.com/docs/latest/flow/production/cloud-providers/heroku

Installs Heroku's Java plugin, which is needed for deploying Java applications.

```terminal
heroku plugins:install java
```

--------------------------------

### Enable metrics collection via command line (bash)

Source: https://vaadin.com/docs/latest/flow/testing/load-testing

Runs the loadtest:run goal with the -Dk6.collectVaadinMetrics=true flag to enable metrics collection from the command line.

```bash
mvn loadtest:run -Dk6.collectVaadinMetrics=true
```
Tokens:
Raw