Vaadin

https://vaadin.com/docs/latest/
Admin
Vaadin is a framework for building scalable, full-stack business applications with Java and modern...
Tokens:2,504,531
Snippets:16,537
Trust Score:10
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### CollaborationListExample.java - Full example of list operations

Source: https://vaadin.com/docs/latest/tools/collaboration/advanced/collaboration-list

Complete example showing how to open a topic connection, get a named list, insert items, replace and get items by key, and use conditional operations (insertLast, insertBefore, insertBetween) with ifLast and key checks.

```java
package com.vaadin.demo.collaboration;

import com.vaadin.collaborationengine.CollaborationEngine;
import com.vaadin.collaborationengine.CollaborationList;
import com.vaadin.collaborationengine.ListOperation;
import com.vaadin.collaborationengine.ListOperationResult;
import com.vaadin.collaborationengine.ListKey;
import com.vaadin.collaborationengine.UserInfo;
import com.vaadin.flow.component.UI;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;

public class CollaborationListExample extends VerticalLayout {

    public CollaborationListExample() {
        // NOTE: Use the user id of the logged-in user
        // instead
        String userId = System.identityHashCode(UI.getCurrentOrThrow()) + "";
        UserInfo localUser = new UserInfo(userId, "User " + userId);
        CollaborationEngine.getInstance().openTopicConnection(this, "my-topic",
                localUser, connection -> {
                    CollaborationList list = connection.getNamedList("my-list");
                    ListOperationResult<Void> result = list.insertLast("foo");
                    result.getCompletableFuture().thenAccept(v -> {
                        // do something when the insertion completes
                    });
                    ListKey key = result.getKey();

                    // Replace an item using its key
                    list.set(key, "bar");

                    // Get an item value using its key
                    String bar = list.getItem(key, String.class);

                    // Insert an item at the end of the list
                    // Only succeeds if key is currently last
                    ListOperation operation1 = ListOperation.insertLast("baz")
                            .ifLast(key);
                    ListOperationResult<Boolean> result1 = list
                            .apply(operation1);
                    ListKey key1 = result1.getKey();

                    // Insert an item before key1
                    // Only succeeds if key1 is currently last
                    ListOperation operation2 = ListOperation
                            .insertBefore(key1, "qux").ifLast(key1);
                    ListOperationResult<Boolean> result2 = list
                            .apply(operation2);
                    ListKey key2 = result2.getKey();

                    // Insert an item between two keys
                    // Only succeeds if the keys are consecutive
                    ListOperation operation3 = ListOperation.insertBetween(key2,
                            key1, "xyz");
                    ListOperationResult<Boolean> result3 = list
                            .apply(operation3);
                });
    }
}
```

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

### Start the Development Server with npm run dspublisher:start

Source: https://vaadin.com/docs/latest/contributing/docs/dspublisher/devmode

Run this command in the project root folder to start the Design System Publisher development server. The first run downloads the package and installs dependencies, so it may take a while; subsequent starts are quicker. Once started, a browser opens automatically at http://localhost:8000.

```terminal
npm run dspublisher:start
```

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

### CollaborationListExample.java - Full example of storing ordered values

Source: https://vaadin.com/docs/latest/tools/collaboration/advanced/collaboration-list

Complete example showing how to open a topic connection, get a named list, insert, replace, get, conditionally insert, and remove items. Uses the logged-in user's ID and a fixed topic name 'my-topic' and list name 'my-list'. Demonstrates conditional operations like ifLast and insertBetween.

```java
package com.vaadin.demo.collaboration;

import com.vaadin.collaborationengine.CollaborationEngine;
import com.vaadin.collaborationengine.CollaborationList;
import com.vaadin.collaborationengine.ListOperation;
import com.vaadin.collaborationengine.ListOperationResult;
import com.vaadin.collaborationengine.ListKey;
import com.vaadin.collaborationengine.UserInfo;
import com.vaadin.flow.component.UI;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;

public class CollaborationListExample extends VerticalLayout {

    public CollaborationListExample() {
        // NOTE: Use the user id of the logged-in user
        // instead
        String userId = System.identityHashCode(UI.getCurrentOrThrow()) + "";
        UserInfo localUser = new UserInfo(userId, "User " + userId);
        CollaborationEngine.getInstance().openTopicConnection(this, "my-topic",
                localUser, connection -> {
                    CollaborationList list = connection.getNamedList("my-list");
                    ListOperationResult<Void> result = list.insertLast("foo");
                    result.getCompletableFuture().thenAccept(v -> {
                        // do something when the insertion completes
                    });
                    ListKey key = result.getKey();

                    // Replace an item using its key
                    list.set(key, "bar");

                    // Get an item value using its key
                    String bar = list.getItem(key, String.class);

                    // Insert an item at the end of the list
                    // Only succeeds if key is currently last
                    ListOperation operation1 = ListOperation.insertLast("baz")
                            .ifLast(key);
                    ListOperationResult<Boolean> result1 = list
                            .apply(operation1);
                    ListKey key1 = result1.getKey();

                    // Insert an item before key1
                    // Only succeeds if key1 is currently last
                    ListOperation operation2 = ListOperation
                            .insertBefore(key1, "qux").ifLast(key1);
                    ListOperationResult<Boolean> result2 = list
                            .apply(operation2);
                    ListKey key2 = result2.getKey();

                    // Insert an item between two keys
                    // Only succeeds if the keys are consecutive
                    ListOperation operation3 = ListOperation.insertBetween(key2,
                            key1, "xyz");
                    ListOperationResult<Boolean> result3 = list
                            .apply(operation3);

                    // Remove an item using its key
                    list.remove(key);
                    return null;
                });
    }
}

```

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

### Configure Vaadin security with VaadinSecurityConfigurer

Source: https://vaadin.com/docs/latest/upgrading

Example security configuration using VaadinSecurityConfigurer. It configures HTTP security, CSRF protection, login view, and in-memory users. Note that VaadinSecurityConfigurer.vaadin() must be called after any custom authorizeHttpRequests matchers because it adds a final anyRequest matcher.

```Java
@EnableWebSecurity
@Configuration
public class SecurityConfig {

    @Bean
    SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        /**
         * Delegating the responsibility of general configuration
         * of HTTP security to the VaadinSecurityConfigurer.
         *
         * It's configuring the following:
         * - Vaadin's CSRF protection by ignoring internal framework requests,
         * - default request cache,
         * - ignoring public views annotated with @AnonymousAllowed,
         * - restricting access to other views/endpoints, and
         * - enabling ViewAccessChecker authorization.
         */

        // You can add any possible extra configurations of your own
        // here - the following is just an example:
        http.rememberMe(customizer -> customizer.alwaysRemember(false));

        // Configure your static resources with public access before calling
        // VaadinSecurityConfigurer.vaadin() as it adds final anyRequest matcher
        http.authorizeHttpRequests(auth -> {
            auth.requestMatchers("/admin-only/**").hasAnyRole("admin")
            .requestMatchers("/public/**").permitAll();
        });

        http.with(VaadinSecurityConfigurer.vaadin(), configurer -> {
            // This is important to register your login view to the
            // view access checker mechanism:
            configurer.loginView(LoginView.class);
        });

        return http.build();
    }

    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }

    /**
     * Demo UserDetailsManager which only provides two hardcoded
     * in-memory users and their roles.
     * This shouldn't be used in real-world applications.
     */
    @Bean
    public UserDetailsService userDetailsService(
            PasswordEncoder passwordEncoder) {
        InMemoryUserDetailsManager manager = new InMemoryUserDetailsManager();
        manager.createUser(User.withUsername("user")
                .password(passwordEncoder.encode("userPass"))
                .roles("USER").build());
        manager.createUser(User.withUsername("admin")
                .password(passwordEncoder.encode("adminPass"))
                .roles("USER", "ADMIN").build());
        return manager;
    }
}
```

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

### Navigation denial message for unannotated layout

Source: https://vaadin.com/docs/latest/upgrading

Example navigation denial message shown when a layout lacks an access annotation. The message suggests adding @AnonymousAllowed, @PermitAll, or @RolesAllowed to the layout.

```text
Denied access to view 'DashboardView' due to layout 'MainLayout' access rules.
Consider adding one of the following annotations to make the layout accessible:
@AnonymousAllowed, @PermitAll, or @RolesAllowed.
```

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

### Use Lumo JavaScript mixin in LitElement

Source: https://vaadin.com/docs/latest/upgrading

Lumo JavaScript mixins are still available and can be used to inject common styles into custom components. This example shows using the `inputField` mixin in a LitElement's styles.

```js
import { inputField } from '@vaadin/vaadin-lumo-styles/mixins/input-field-shared.js';

class MyInputField extends LitElement {
  static get styles() {
    return [
      inputField,
      css`...`
    ];
  }
}
```

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

### Get item index or path for TreeGrid scrolling

Source: https://vaadin.com/docs/latest/upgrading

Two Java methods that compute the index or path of an item in a TreeGrid data provider, depending on the HierarchyFormat. The first method (getIndexPath) works with HierarchyFormat.NESTED, building a hierarchical path of indexes. The second method (getFlatIndex) works with HierarchyFormat.FLATTENED, returning the flat index. Both use the dataCommunicator's buildQuery and the data provider's getItemIndex methods.

```java
// By default, the data provider implements HierarchyFormat.NESTED,
// meaning each request returns only the direct children of a parent.
// In this format, items are identified by their hierarchical path,
// a list of indexes from the root to the item. This path can then
// be passed to `TreeGrid#scrollToIndex` to scroll to that item, for
// example.

public List<Integer> getIndexPath(T item) {
    List<Integer> path = new LinkedList<>();
    do {
        var parent = dataCommunicator.getDataProvider().getParent(item);
        var query = dataCommunicator.buildQuery(parent, 0, Integer.MAX_VALUE);
        var index = dataCommunicator.getDataProvider().getItemIndex(item, query);
        path.addFirst(index);
        item = parent;
    } while (item != null);
    return path;
}
```

```java
// When the data provider implements HierarchyFormat.FLATTENED,
// each request returns all descendants of a parent item in a
// single flat list. In this format, items are identified by
// their index in that list, which is called "flat index".
// This index can then be passed to `TreeGrid#scrollToIndex`
// to scroll to that item, for example.

public int getFlatIndex(T item) {
    var query = dataCommunicator.buildQuery(0, Integer.MAX_VALUE);
    return dataCommunicator.getDataProvider().getItemIndex(item, query);
}
```

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

### Run the Docker deployment example with docker-compose up

Source: https://vaadin.com/docs/latest/contributing/docs/dspublisher/production

Runs the simplified hosting example using Docker to test the build output. Execute this command inside the dspublisher/deployment-example-docker directory after the build process finishes and artifacts are in their default location. Open http://localhost:8080 to view the site.

```terminal
docker-compose up
```

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

### 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();
```

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

### OverlayExampleView.java - Complete example with ConfirmDialog, Dialog, and Popover

Source: https://vaadin.com/docs/latest/building-apps/ui-basics/add-dialogs-popovers

A self-contained view that demonstrates all three overlay components. Use this as a copy-paste starting point for your project. The view is routed at 'overlay-example' and includes a ConfirmDialog for confirmation, a Dialog with a text field and footer buttons, and a Popover anchored to an info button.

```java
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.confirmdialog.ConfirmDialog;
import com.vaadin.flow.component.dialog.Dialog;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.popover.Popover;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;

@Route("overlay-example")
public class OverlayExampleView extends VerticalLayout {

    public OverlayExampleView() {
        // Confirm Dialog — quick confirmation with predefined buttons
        Button deleteButton = new Button("Delete item", event -> {
            ConfirmDialog confirmDialog = new ConfirmDialog();
            confirmDialog.setHeader("Delete Item");
            confirmDialog.setText("This action cannot be undone.");
            confirmDialog.setCancelable(true);
            confirmDialog.setConfirmText("Delete");
            confirmDialog.setConfirmButtonTheme("error primary");
            confirmDialog.addConfirmListener(e ->
                    Notification.show("Item deleted"));
            confirmDialog.open();
        });

        // Dialog — custom content in a centered overlay
        Button editButton = new Button("Edit name", event -> {
            Dialog dialog = new Dialog();
            dialog.setHeaderTitle("Edit Name");
            TextField nameField = new TextField("Name");
            dialog.add(nameField);
            dialog.getFooter().add(
                    new Button("Cancel", e -> dialog.close()),
                    new Button("Save", e -> {
                        Notification.show("Saved: " + nameField.getValue());
                        dialog.close();
                    }));
            dialog.open();
        });

        // Popover — content anchored to a target element
        Button infoButton = new Button(VaadinIcon.INFO_CIRCLE.create());
        infoButton.setAriaLabel("More info");
        Popover popover = new Popover();
        popover.setTarget(infoButton);
        popover.add(new Span("This action removes the item permanently."));

        add(deleteButton, editButton, infoButton);
    }
}
```

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

### Install owasp-password-strength-test dependency

Source: https://vaadin.com/docs/latest/hilla/guides/forms/binder-validation

Installs the `owasp-password-strength-test` library and its TypeScript type definitions as dependencies for the custom password validator example.

```terminal
npm install --save owasp-password-strength-test
npm install --save-dev @types/owasp-password-strength-test
```

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

### Install Linux dependencies for Design System Publisher

Source: https://vaadin.com/docs/latest/contributing/docs/dspublisher/troubleshooting

Installs necessary dependencies on Linux to ensure the application starts correctly.

```terminal
sudo apt install build-essential autoconf automake libtool pkg-config libpng-dev nasm zlib1g-dev
```

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

### Run the application with Maven wrapper

Source: https://vaadin.com/docs/latest/tools/modernization-toolkit/swing-bridge/netbeans-rcp/quick-start

Runs the application on macOS/Linux and Windows. After starting, open the browser and navigate to the view's route (e.g., /desktop). The first session pays a one-time cold-start cost of roughly 5–8 seconds; concurrent cold boots are serialized.

```terminal
./mvnw spring-boot:run
```

```terminal
mvnw.cmd spring-boot:run
```

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

### Load all frontend resources with DOCS_IMPORT_EXAMPLE_RESOURCES

Source: https://vaadin.com/docs/latest/contributing/docs/dspublisher/editing

Sets the `DOCS_IMPORT_EXAMPLE_RESOURCES` environment variable to `true` before starting the DSPublisher. This loads all frontend resources up front, so you can include a Java example without a hidden TypeScript counterpart.

```terminal
DOCS_IMPORT_EXAMPLE_RESOURCES="true" npm run dspublisher:start
```

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

### 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
```

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

### Lit: DateTimePicker range with min binding

Source: https://vaadin.com/docs/latest/components/date-time-picker

Lit example for a date time range picker using two vaadin-date-time-picker components. The end picker's min property is bound to the start picker's value, disabling earlier dates. The full component includes LitElement setup, state properties, and imports.

```ts
<vaadin-form-layout auto-responsive column-width="20rem">
  <vaadin-date-time-picker
    label="Start date and time"
    .value="${this.startDateTime}"
    @value-changed="${(event: DateTimePickerValueChangedEvent) => { this.startDateTime = event.detail.value; }}"
  ></vaadin-date-time-picker>
  <vaadin-date-time-picker
    label="End date and time"
    .min="${this.startDateTime}"
    .value="${this.endDateTime}"
    @value-changed="${(event: DateTimePickerValueChangedEvent) => { this.endDateTime = event.detail.value; }}"
  ></vaadin-date-time-picker>
</vaadin-form-layout>
```

```ts
import '@vaadin/date-time-picker';
import '@vaadin/form-layout';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import type { DateTimePickerValueChangedEvent } from '@vaadin/date-time-picker';
import { applyTheme } from 'Frontend/demo/theme';

const initialStartValue = '2020-08-25T20:00';
const initialEndValue = '2020-09-01T20:00';

@customElement('date-time-picker-range')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  @state()
  private startDateTime = initialStartValue;

  @state()
  private endDateTime = initialEndValue;

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-form-layout auto-responsive column-width="20rem">
        <vaadin-date-time-picker
          label="Start date and time"
          .value="${this.startDateTime}"
          @value-changed="${(event: DateTimePickerValueChangedEvent) => { this.startDateTime = event.detail.value; }}"
        ></vaadin-date-time-picker>
        <vaadin-date-time-picker
          label="End date and time"
          .min="${this.startDateTime}"
          .value="${this.endDateTime}"
          @value-changed="${(event: DateTimePickerValueChangedEvent) => { this.endDateTime = event.detail.value; }}"
        ></vaadin-date-time-picker>
      </vaadin-form-layout>
      <!-- end::snippet[] -->
    `;
  }
}
```

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

### Full Java Example for Column Span

Source: https://vaadin.com/docs/latest/components/form-layout

Full Java example for the column span feature, including imports, route, and layout setup.

```java
package com.vaadin.demo.component.formlayout; import com.vaadin.flow.component.formlayout.FormLayout; import com.vaadin.flow.component.formlayout.FormLayout.FormRow; import com.vaadin.flow.component.html.Div; import com.vaadin.flow.component.splitlayout.SplitLayout; import com.vaadin.flow.component.textfield.TextField; import com.vaadin.flow.router.Route; @Route("form-layout-colspan") public class FormLayoutColspan extends Div { public FormLayoutColspan() { // tag::snippet[] TextField streetAddress = new TextField("Street address"); TextField postalCode = new TextField("Postal code"); TextField city = new TextField("City/Town"); TextField country = new TextField("Country"); FormLayout formLayout = new FormLayout(); formLayout.setAutoResponsive(true); formLayout.setExpandFields(true); formLayout.setColumnWidth("8em"); FormRow firstRow = new FormRow(); firstRow.add(streetAddress, 3); // colspan 3 FormRow secondRow = new FormRow(); secondRow.add(postalCode); secondRow.add(city, 2); // colspan 2 FormRow thirdRow = new FormRow(); thirdRow.add(country, 2); // colspan 2 formLayout.add(firstRow, secondRow, thirdRow); // end::snippet[] formLayout.setWidthFull(); SplitLayout splitLayout = new SplitLayout(formLayout, new Div()); add(splitLayout); } }
```

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

### 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);
```

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

### Startup message

Source: https://vaadin.com/docs/latest/building-apps/agentic-development/mcp/self-hosting

The server prints this line when it starts successfully.

```text
ready. License valid until 2027-04-30.
```

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

### Output of kubectl get svc hazelcast-service

Source: https://vaadin.com/docs/latest/tools/kubernetes/getting-started

Example output from 'kubectl get svc hazelcast-service'. The EXTERNAL-IP may be <pending> until the load balancer is provisioned.

```text
NAME                TYPE           CLUSTER-IP      EXTERNAL-IP   PORT(S)          AGE
hazelcast-service   LoadBalancer   10.96.178.190   <pending>     5701:31516/TCP   18h
```

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

### Upload with Start button (React and Lit)

Source: https://vaadin.com/docs/latest/components/upload

Shows the Start button that appears when a file is queued (auto-upload disabled). The example provides a fake file with status 'Queued' and held: true to trigger the Start button.

```tsx
<Upload files={files.value} />
```

```tsx
import React from 'react'; import { useComputed } from '@vaadin/hilla-react-signals'; import { Upload } from '@vaadin/react-components/Upload.js'; import { createFakeUploadFiles } from './upload-demo-helpers'; function createFakeFiles() { return createFakeUploadFiles([ { name: 'Workflow.pdf', status: 'Queued', held: true, }, ]); } function Example() { const files = useComputed(createFakeFiles); return ( // tag::snippet[] <Upload files={files.value} /> // end::snippet[] ); } 
```

```ts
import '@vaadin/upload'; import { html, LitElement } from 'lit'; import { customElement } from 'lit/decorators.js'; import { applyTheme } from 'Frontend/demo/theme'; function createFakeFiles() { return createFakeUploadFiles([ { name: 'Workflow.pdf', status: 'Queued', held: true, }, ]); } @customElement('upload-start-button') export class Example extends LitElement { protected override createRenderRoot() { const root = super.createRenderRoot(); applyTheme(root); return root; } protected override render() { return html`<vaadin-upload .files="${createFakeFiles()}"></vaadin-upload>`; } }
```

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

### Initialize a new Design System Publisher project

Source: https://vaadin.com/docs/latest/contributing/docs/dspublisher/start

Run this command to create a new design system website project. The tool will ask for the name of your design system and a folder name for the website project. The initialization script takes about a minute to finish and uses Git for version control.

```terminal
npx @vaadin/cli@2.7.0 dsp-init
```

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

### Full Range Slider Example Files

Source: https://vaadin.com/docs/latest/components/slider

Full component implementations for the basic range slider example in Java, React, and Lit. Each file includes the necessary imports and routing or component setup to run the example.

```java
package com.vaadin.demo.component.slider;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.slider.IntegerRangeSlider;
import com.vaadin.flow.component.slider.IntegerRangeSliderValue;
import com.vaadin.flow.router.Route;
@Route("range-slider-basic")
public class RangeSliderBasic extends Div {
  public RangeSliderBasic() {
    // tag::snippet[]
    IntegerRangeSlider rangeSlider = new IntegerRangeSlider("Price range", 0, 1000);
    rangeSlider.setValue(new IntegerRangeSliderValue(200, 800));
    add(rangeSlider);
    // end::snippet[]
  }
}
```

```tsx
import React from 'react';
import { RangeSlider } from '@vaadin/react-components/RangeSlider.js';
function Example() {
  return (
    // tag::snippet[]
    <RangeSlider label="Price range" min={0} max={1000} value={[200, 800]} />
    // end::snippet[]
  );
}
```

```ts
import '@vaadin/slider/vaadin-range-slider.js';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';
@customElement('range-slider-basic')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }
  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-range-slider label="Price range" min="0" max="1000" .value="${[200, 800]}" ></vaadin-range-slider>
      <!-- end::snippet[] -->
    `;
  }
}
```

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

### Full Java example for basic context menu

Source: https://vaadin.com/docs/latest/components/context-menu

Full Java example for the basic context menu. It creates a Grid with sample data and attaches a context menu with View, Edit, and Delete items. The route is 'context-menu-basic'.

```java
package com.vaadin.demo.component.contextmenu;

import com.vaadin.demo.domain.DataService;
import com.vaadin.demo.domain.Person;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.grid.contextmenu.GridContextMenu;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.router.Route;
import java.util.List;

@Route("context-menu-basic")
public class ContextMenuBasic extends Div {

    private List<Person> people = DataService.getPeople(5);

    public ContextMenuBasic() {
        Grid<Person> grid = new Grid();
        grid.setAllRowsVisible(true);
        grid.setItems(people);
        grid.addColumn(person -> person.getFirstName()).setHeader("First name");
        grid.addColumn(person -> person.getLastName()).setHeader("Last name");
        grid.addColumn(person -> person.getEmail()).setHeader("Email");
        grid.addColumn(person -> person.getAddress().getPhone())
                .setHeader("Phone number");

        // tag::snippet[]
        GridContextMenu<Person> menu = grid.addContextMenu();
        menu.addItem("View", event -> { });
        menu.addItem("Edit", event -> { });
        menu.addItem("Delete", event -> { });
        // end::snippet[]
        add(grid);
    }
}
```

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

### Create a Line Chart with Vaadin Flow (ChartType.LINE)

Source: https://vaadin.com/docs/latest/components/charts/charttypes/line-and-spline

Creates a Vaadin Flow line chart (ChartType.LINE) with a title, subtitle, Y-axis label, vertical legend on the right, and five ListSeries data series. The PlotOptionsSeries sets the starting point for the x-axis to 2010. The full example includes the required imports, a @Route annotation, and the component setup.

```java
Chart chart = new Chart(ChartType.LINE);
Configuration configuration = chart.getConfiguration();
configuration.setTitle("Solar Employment Growth by Sector, 2010-2016");
configuration.setSubTitle("Source: thesolarfoundation.com");
YAxis yAxis = configuration.getyAxis();
yAxis.setTitle("Number of Employees");
Legend legend = configuration.getLegend();
legend.setLayout(LayoutDirection.VERTICAL);
legend.setVerticalAlign(VerticalAlign.MIDDLE);
legend.setAlign(HorizontalAlign.RIGHT);
PlotOptionsSeries plotOptionsSeries = new PlotOptionsSeries();
plotOptionsSeries.setPointStart(2010);
configuration.setPlotOptions(plotOptionsSeries);
configuration.addSeries(new ListSeries("Installation", 43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175));
configuration.addSeries(new ListSeries("Manufacturing", 24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434));
configuration.addSeries(new ListSeries("Sales & Distribution", 11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387));
configuration.addSeries(new ListSeries("Project Development", null, null, 7988, 12169, 15112, 22452, 34400, 34227));
configuration.addSeries(new ListSeries("Other", 12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111));
```

```java
package com.vaadin.demo.component.charts.charttypes;

import com.vaadin.flow.component.charts.Chart;
import com.vaadin.flow.component.charts.model.ChartType;
import com.vaadin.flow.component.charts.model.Configuration;
import com.vaadin.flow.component.charts.model.HorizontalAlign;
import com.vaadin.flow.component.charts.model.LayoutDirection;
import com.vaadin.flow.component.charts.model.Legend;
import com.vaadin.flow.component.charts.model.ListSeries;
import com.vaadin.flow.component.charts.model.PlotOptionsSeries;
import com.vaadin.flow.component.charts.model.VerticalAlign;
import com.vaadin.flow.component.charts.model.YAxis;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route("chart-type-line")
public class ChartTypeLine extends Div {

    public ChartTypeLine() {
        // tag::snippet[]
        Chart chart = new Chart(ChartType.LINE);
        Configuration configuration = chart.getConfiguration();
        configuration.setTitle("Solar Employment Growth by Sector, 2010-2016");
        configuration.setSubTitle("Source: thesolarfoundation.com");
        YAxis yAxis = configuration.getyAxis();
        yAxis.setTitle("Number of Employees");
        Legend legend = configuration.getLegend();
        legend.setLayout(LayoutDirection.VERTICAL);
        legend.setVerticalAlign(VerticalAlign.MIDDLE);
        legend.setAlign(HorizontalAlign.RIGHT);
        PlotOptionsSeries plotOptionsSeries = new PlotOptionsSeries();
        plotOptionsSeries.setPointStart(2010);
        configuration.setPlotOptions(plotOptionsSeries);
        configuration.addSeries(new ListSeries("Installation", 43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175));
        configuration.addSeries(new ListSeries("Manufacturing", 24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434));
        configuration.addSeries(new ListSeries("Sales & Distribution", 11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387));
        configuration.addSeries(new ListSeries("Project Development", null, null, 7988, 12169, 15112, 22452, 34400, 34227));
        configuration.addSeries(new ListSeries("Other", 12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111));
        // end::snippet[]
        add(new VerticalLayout(chart));
    }
}
```

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

### Start local Jetty server with Maven

Source: https://vaadin.com/docs/latest/building-apps/components/package-component

Starts a local Jetty server using the starter's configured default goal jetty:run. The server runs with the test classpath, making classes in src/test/java available as routes.

```terminal
mvn
```

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

### Flow: ButtonIcons.java (full example)

Source: https://vaadin.com/docs/latest/components/button

Complete Java class for the button icons example, including imports, route annotation, and layout setup. The snippet is embedded within the class.

```java
package com.vaadin.demo.component.button;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.router.Route;

@Route("button-icons")
public class ButtonIcons extends Div {

    public ButtonIcons() {
        // tag::snippet[]
        // Icon button using an aria-label to provide a textual alternative // to screen readers
        Button plusButton = new Button(new Icon(VaadinIcon.PLUS));
        plusButton.setAriaLabel("Add item");
        // Icon button using a tooltip to provide textual description // of the action that it triggers
        Button closeButton = new Button(new Icon(VaadinIcon.CLOSE_SMALL));
        closeButton.setAriaLabel("Close");
        closeButton.setTooltipText("Close the dialog");
        Button arrowLeftButton = new Button("Left", new Icon(VaadinIcon.ARROW_LEFT));
        Button arrowRightButton = new Button("Right", new Icon(VaadinIcon.ARROW_RIGHT));
        arrowRightButton.setIconAfterText(true);
        // end::snippet[]

        HorizontalLayout horizontalLayout = new HorizontalLayout(plusButton, closeButton, arrowLeftButton, arrowRightButton);
        add(horizontalLayout);
    }
}
```

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

### Complete MyServlet Example for Sending System Messages

Source: https://vaadin.com/docs/latest/tools/collaboration/advanced/integrating-external-servlets

Complete MyServlet example that retrieves the CollaborationEngine from the servlet context, handles a POST request, and sends a message to a topic as a system message. It includes error handling for when the Collaboration Kit hasn't been initialized and closes the MessageManager after submission.

```java
package com.vaadin.demo.collaboration;

import java.io.IOException;

import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import com.vaadin.collaborationengine.CollaborationEngine;
import com.vaadin.collaborationengine.MessageManager;
import com.vaadin.collaborationengine.SystemConnectionContext;
import com.vaadin.collaborationengine.UserInfo;

public class MyServlet extends HttpServlet {
    private final UserInfo systemUser = new UserInfo("system");
    private final String topicId = "topic";

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        CollaborationEngine ce = (CollaborationEngine) getServletContext()
                .getAttribute(CollaborationEngine.class.getName());
        if (ce == null) {
            resp.sendError(500,
                    "Collaboration Kit has not yet been initialized");
            return;
        }
        // Retrieve message that was sent in this POST request
        String userMessage = req.getParameter("message");
        String message = "An anonymous user posted the following message: "
                + userMessage;
        sendMessageToTopic(ce, message);
        resp.setStatus(202);
    }

    public void sendMessageToTopic(CollaborationEngine ce, String message) {
        // Get SystemConnectionContext from Collaboration Kit
        SystemConnectionContext systemConnectionContext = ce.getSystemContext();

        MessageManager messageManager = new MessageManager(
                systemConnectionContext, systemUser, topicId, () -> ce);

        messageManager.submit(message) // Send message to topic
                .whenComplete((a, t) -> {
                    // Close the message manager when done
                    messageManager.close();
                });
    }
}
```

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

### Integer Field Example (Flow, React, Lit)

Source: https://vaadin.com/docs/latest/components/number-field

Shows how to create an Integer Field in Vaadin Flow, React, and Lit. The Flow example uses IntegerField with labels and values, and the React and Lit examples use the corresponding components. The full Flow example includes the route annotation and layout setup.

```java
IntegerField xField = new IntegerField();
xField.setLabel("X");
xField.setValue(-1284);
IntegerField yField = new IntegerField();
yField.setLabel("Y");
yField.setValue(3910);
add(xField, yField);
```

```java
package com.vaadin.demo.component.numberfield;

import com.vaadin.flow.component.formlayout.FormLayout;
import com.vaadin.flow.component.textfield.IntegerField;
import com.vaadin.flow.router.Route;

@Route("number-field-integer")
public class NumberFieldInteger extends FormLayout {

  public NumberFieldInteger() {
    setAutoResponsive(true);
    setAutoRows(true);

    // tag::snippet[]
    IntegerField xField = new IntegerField();
    xField.setLabel("X");
    xField.setValue(-1284);

    IntegerField yField = new IntegerField();
    yField.setLabel("Y");
    yField.setValue(3910);

    add(xField, yField);
    // end::snippet[]
  }
}
```

```tsx
<IntegerField label="X" value="-1284" />
<IntegerField label="Y" value="3910" />
```

```tsx
import React from 'react';
import { FormLayout, IntegerField } from '@vaadin/react-components';

function Example() {
  return (
    <FormLayout autoResponsive autoRows>
      {/* tag::snippet[] */}
      <IntegerField label="X" value="-1284" />
      <IntegerField label="Y" value="3910" />
      {/* end::snippet[] */}
    </FormLayout>
  );
}
```

```html
<vaadin-integer-field label="X" value="-1284"></vaadin-integer-field>
<vaadin-integer-field label="Y" value="3910"></vaadin-integer-field>
```

```ts
import '@vaadin/form-layout';
import '@vaadin/integer-field';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('number-field-integer')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <vaadin-form-layout auto-responsive auto-rows>
        <!-- tag::snippet[] -->
        <vaadin-integer-field label="X" value="-1284"></vaadin-integer-field>
        <vaadin-integer-field label="Y" value="3910"></vaadin-integer-field>
        <!-- end::snippet[] -->
      </vaadin-form-layout>
    `;
  }
}
```

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

### Run the application with Maven wrapper

Source: https://vaadin.com/docs/latest/hilla/guides/reactive-services

Commands to start the application on Windows and macOS/Linux using the Maven wrapper.

```terminal
mvnw
```

```terminal
./mvnw
```

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

### 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
```

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

### Binder setup and service call

Source: https://vaadin.com/docs/latest/hilla/lit/guides/forms/vaadin-components

Imports the service and entity model, instantiates the binder, and reads the entity in firstUpdated.

```TypeScript
import { MyService } from 'Frontend/generated/MyService';
import MyEntityModel from 'Frontend/generated/com/example/MyEntityModel';
...
const binder = new Binder(this, MyEntityModel);
...
async firstUpdated(arg: any) {
  super.firstUpdated(arg);
  this.binder.read(await MyService.getMyEntity());
}
```

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

### Example page-title front matter attribute

Source: https://vaadin.com/docs/latest/contributing/docs

Example of the 'page-title' front matter attribute. Should include the keyword 'Vaadin', be 50-60 characters, use '|' as a divider, and start with 'How to' when fitting.

```yaml
page-title: How to contribute to Vaadin Documentation
```

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

### React Grid basic example with imports

Source: https://vaadin.com/docs/latest/flow/components/grid

Full React component with imports and theme setup for the basic Grid example. Includes the same logic as the snippet-only version, wrapped in a function component.

```tsx
import React, { useEffect } from 'react';
import { useSignal } from '@vaadin/hilla-react-signals';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';

function Example() {
  // tag::snippet[]
  const items = useSignal<Person[]>([]);
  useEffect(() => {
    getPeople().then(({ people }) => {
      items.value = people;
    });
  }, []);

  return (
    <Grid items={items.value}>
      <GridColumn path="firstName" />
      <GridColumn path="lastName" />
      <GridColumn path="email" />
      <GridColumn path="profession" />
    </Grid>
  );
  // end::snippet[]
}
```

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

### Output of terraform init showing backend configuration

Source: https://vaadin.com/docs/latest/tools/azure-cloud/getting-started

Example output from `terraform init` showing module initialization, the prompt for the storage account name, and successful backend configuration. The output confirms the backend "azurerm" is configured and that Terraform will use it unless the backend configuration changes.

```text
    Initializing modules...
    - acr in modules/acr
    - aks in modules/aks
    - keyvault in modules/keyvault
    - network in modules/network

    Initializing the backend...
    storage_account_name
    The name of the storage account.

    Enter a value: <enter storageaccount name>

    Successfully configured the backend "azurerm"! Terraform will automatically
    use this backend unless the backend configuration changes.

    Initializing provider plugins...
    ...
```

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

### GridDragRowsBetweenGrids.java full example

Source: https://vaadin.com/docs/latest/components/grid/drag-drop

Full Java component class for the drag-between-grids example. Includes the route annotation, data setup, grid configuration, and styling methods. The snippet is marked with tag::snippet[] and end::snippet[].

```java
package com.vaadin.demo.component.grid;

import com.vaadin.demo.domain.DataService;
import com.vaadin.demo.domain.Person;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.grid.dataview.GridListDataView;
import com.vaadin.flow.component.grid.dnd.GridDropMode;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.router.Route;

import java.util.ArrayList;
import java.util.List;

@Route("grid-drag-rows-between-grids")
public class GridDragRowsBetweenGrids extends Div {

    private Person draggedItem;

    public GridDragRowsBetweenGrids() {
        List<Person> people = DataService.getPeople(10);
        ArrayList<Person> people1 = new ArrayList<>(people.subList(0, 5));
        ArrayList<Person> people2 = new ArrayList<>(people.subList(5, 10));

        // tag::snippet[]
        Grid<Person> grid1 = setupGrid();
        Grid<Person> grid2 = setupGrid();
        GridListDataView<Person> dataView1 = grid1.setItems(people1);
        GridListDataView<Person> dataView2 = grid2.setItems(people2);

        grid1.setRowsDraggable(true);
        grid1.addDragStartListener(e -> {
            draggedItem = e.getDraggedItems().get(0);
            grid1.setDropMode(GridDropMode.ON_GRID);
            grid2.setDropMode(GridDropMode.ON_GRID);
        });
        grid1.addDropListener(e -> {
            dataView2.removeItem(draggedItem);
            dataView1.addItem(draggedItem);
        });
        grid1.addDragEndListener(e -> {
            draggedItem = null;
            grid1.setDropMode(null);
            grid2.setDropMode(null);
        });

        grid2.setRowsDraggable(true);
        grid2.addDragStartListener(e -> {
            draggedItem = e.getDraggedItems().get(0);
            grid1.setDropMode(GridDropMode.ON_GRID);
            grid2.setDropMode(GridDropMode.ON_GRID);
        });
        grid2.addDropListener(e -> {
            dataView1.removeItem(draggedItem);
            dataView2.addItem(draggedItem);
        });
        grid2.addDragEndListener(e -> {
            draggedItem = null;
            grid1.setDropMode(null);
            grid2.setDropMode(null);
        });
        // end::snippet[]

        Div container = new Div(grid1, grid2);
        setContainerStyles(container);
        add(container);
    }

    private static Grid<Person> setupGrid() {
        Grid<Person> grid = new Grid<>(Person.class, false);
        grid.addColumn(Person::getFullName).setHeader("Full name");
        grid.addColumn(Person::getProfession).setHeader("Profession");
        setGridStyles(grid);
        return grid;
    }

    private static void setGridStyles(Grid<Person> grid) {
        grid.getStyle().set("width", "300px").set("height", "300px")
                .set("margin-left", "0.5rem").set("margin-top", "0.5rem")
                .set("align-self", "unset");
    }

    private static void setContainerStyles(Div container) {
        container.getStyle().set("display", "flex").set("flex-direction", "row")
                .set("flex-wrap", "wrap");
    }
}
```

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

### 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());
```

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

### Button Basic Example (Java Flow)

Source: https://vaadin.com/docs/latest/components/button

Java Flow example showing a button with a click listener that increments a counter and updates a paragraph. The full class includes imports, a @Route annotation, and layout setup.

```java
Button button = new Button("Button");
Paragraph info = new Paragraph(infoText());
button.addClickListener(clickEvent -> {
    counter += 1;
    info.setText(infoText());
});
```

```java
package com.vaadin.demo.component.button;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.router.Route;

@Route("button-basic")
public class ButtonBasic extends Div {

    private int counter = 0;

    public ButtonBasic() {
        // tag::snippet[]
        Button button = new Button("Button");
        Paragraph info = new Paragraph(infoText());
        button.addClickListener(clickEvent -> {
            counter += 1;
            info.setText(infoText());
        });
        // end::snippet[]

        HorizontalLayout horizontalLayout = new HorizontalLayout(button, info);
        horizontalLayout.setAlignItems(FlexComponent.Alignment.BASELINE);
        add(horizontalLayout);
    }

    private String infoText() {
        return String.format("Clicked %d times", counter);
    }
}
```
Tokens:
Raw