Flow

Flow is a Java web framework for building modern web apps in Java. You can create UIs in pure Java, or use HTML templates to create the UI, and then bind it to any backend using Java.

The basic features in Flow are:

  • An architecture that lets you concentrate on the UI. No need to think about client-server communication.

  • A set of carefully crafted UI components that focus on both the end-user and developer experience.

  • Powerful abstraction layers to build your own reusable UI components with either Java or HTML templates.

  • Data binding API to connect UI components to any backend using type-safe Java.

  • Router API to create hierarchical page structures for the user to navigate.

For example, you can create a UI in Java as follows:

// Create an HTML element
Div layout = new Div();

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

// Button click listeners can be defined as lambda expressions
Button button = new Button("Say hello",
          e -> Notification.show("Hello!"));

// Add the web components to the HTML element
layout.add(textField, button);

When using the Flow Java API, the components control their JavaScript counterparts in the browser, and you do not need know anything about the HTML or JavaScript that runs under the hood.

Topics

The Flow documentation is arranged in the following sections and we recommend reading it in this order.

Creating a Flow Application

Basics of creating an application using Flow.

Routing and Navigation

Vaadin applications consist of one or more views and routing defines how URL addresses are mapped to those views. Navigating around the application works together with routing.

Using Vaadin Components

Vaadin comes with a rich set of user interface components, which you can use both in Flow and Fusion views. This section describes their basic functionalities and how to use them in Flow applications.

Binding Data to Components

You can bind data sources directly to components so that if the data changes, the components are automatically updated, and vice versa, when the user changes the values in the input components, the values are automatically updated to the data source. This is handled by the Binder and some assisting classes.

Creating Components

In addition to using Vaadin components, you can create your own. At simplest it is done by composition from existing components. That is in fact how you create a view in Flow applications. You can also create a component by binding it to a custom JavaScript/TypeScript component.

Manipulating DOM with Element API

You can control the HTML DOM in the browser from the server-side using the Element API. This enables one way to make new components purely in server-side Java.

Integrating Web Components

The most advanced way to create a component is to integrate a JavaScript web component.

Using Templates

In addition to imperative Java code, you can build views declaratively using templates. The components in such a template can be bound directly to data items.

Drag and Drop

Vaadin allows drag-and-drop between components as well as between the UI and the operating system.

Integrations

You can integrate Vaadin with many other Java application technologies, such as Spring, CDI, OSGi, and Karaf. You can also embed Vaadin applications in other applications or web pages.

Advanced Topics

This is a collection of miscellaneous important topics and features that you may need in Vaadin applications.