Using Vaadin Components

There is a set of pre-built server-side components with Java API for Vaadin Web Components, such as Button, TextField and so on. Those components are part of the Vaadin platform, and are included as dependencies in the platform together with Flow.

The platform has the following components with Java API available:

• Button - Demos, Javadoc, sources and issue tracking

• CheckBox - Demos, Javadoc, sources and issue tracking

• ComboBox - Demos, Javadoc, sources and issue tracking

• DatePicker - Demos, Javadoc, sources and issue tracking

• Dialog - Demos, Javadoc, sources and issue tracking

• FormLayout - Demos, Javadoc, sources and issue tracking

• Grid - Demos, Documentation, Javadoc, sources and issue tracking

• Icons - Demos, Documentation, Javadoc, sources and issue tracking

• IronList - Javadoc, examples, sources and issue tracking

• ListBox - Demos, Javadoc, sources and issue tracking

• Notification - Demos, Javadoc, sources and issue tracking

• HorizontalLayout & VerticalLayout & FlexLayout - Demos, Javadoc, sources and issue tracking

• ProgressBar - Demos, Javadoc, sources and issue tracking

• RadioButton - Demos, Javadoc, sources and issue tracking

• SplitLayout - Demos, Javadoc, sources and issue tracking

• Tabs - Demos, Javadoc, sources and issue tracking

• TextField & TextArea & PasswordField - Demos, Javadoc, sources and issue tracking

• Upload - Demos, Documentation, Javadoc, sources and issue tracking

When you use the Vaadin 10 platform dependency, you automatically get ALL available components. Using the platform dependency guarantees that you’ll get versions of Flow and the components that are compatible together.

XML

<repositories>
    <repository>
        <id>vaadin-prereleases</id>
        <url>https://maven.vaadin.com/vaadin-prereleases</url>
    </repository>
</repositories>
<dependencies>
    <!-- other dependencies -->
    <!-- component dependency -->
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin</artifactId>
        <version>${vaadin.platform.version}</version>
    </dependency>
</dependencies>

The platform also contains ready made theming for the components that help you tweak and tune the look and feel of the components. See the Using Component Themes for more info.

For more ready-made Java APIs for Web Components, you should check the Vaadin Directory.

Flow Component Package Contents Explained

A Flow component package consists of two main sections:

• Java API classes

• Web Components’ files (html, js, css etc)

All sections are used by Flow to display the components in web pages correctly. By default, both sections are provided in the same jar.

Web components’ files are provided as webjars – jar files that contain webcomponents’ files, heavily influenced by current Polymer package manager: bower (not developed or maintained by Vaadin)

Webjars are designed to replace bower usage by using Maven for the same purposes.

Flow is able to resolve requests into webjars’ contents (if intended by request), imitating the regular web component’s files.

Although currently enabled by default, webjars do not restrict users from using external web components’ files:

• webjar resolving can be turned off

• if no suitable webjar is found, request resolving falls back to configured external web components’ locations

Maven configuration to use only single components

If you don’t want to take everything provided by the com.vaadin:vaadin dependency, you can also optionally declare single components as dependencies.

The first step is to add the bom and the wanted flow-component (e.g. vaadin-button-flow) package to your project dependencies.

When using Maven you can add a the button component into your pom.xml as this:

XML

<repositories>
    <repository>
        <id>vaadin-prereleases</id>
        <url>https://maven.vaadin.com/vaadin-prereleases</url>
    </repository>
</repositories>
<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-bom</artifactId>
            <version>${vaadin.platform.version}</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
    </dependencies>
</dependencyManagement>
<dependencies>
    <!-- other dependencies -->
    <!-- component dependency -->
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-button-flow</artifactId>
    </dependency>
    <!-- other dependencies -->
</dependencies>

Maven configuration to exclude webjars

If webjar dependencies are not needed, they can be excluded from the project using standard Maven mechanism:

XML

<!-- No webjars == no bom needed and no extra repo needed, but you have to get webjars' files into the build yourself -->
<dependencies>
    <!-- other dependencies -->
    <!-- the dependency with webjars excluded -->
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-button-flow</artifactId>
        <version>1.0-SNAPSHOT</version>
        <exclusions>
            <exclusion>
                <groupId>org.webjars.bowergithub.vaadin</groupId>
                <artifactId>*</artifactId>
            </exclusion>
        </exclusions>
    </dependency>
    <!-- other dependencies -->
</dependencies>