Overview

Vaadin applications provide a user interface for the user to interface with the business logic and data of the application. At technical level, the UI is realized as a UI class that extends com.vaadin.ui.UI. Its main task is to create the initial user interface out of UI components and set up event listeners to handle user input. The UI can then be loaded in the browser using an URL, or can be embedded to any HTML page. For detailed information about implementing a UI, see "Writing a Server-Side Web Application".

The user interface of a Vaadin application consists of components that are created and laid out by the application. Each server-side component has a client-side counterpart, a widget, by which it is rendered in the browser and with which the user interacts. The client-side widgets can also be used by client-side applications. The server-side components relay these events to the application logic. Field components that have a value, which the user can view or edit, can be bound to a data source (see below). For a more detailed description of the UI component architecture, see "User Interface Components".

The Client-Side Engine of Vaadin manages the rendering of the UI in the web browser by employing various client-side widgets, counterparts of the server-side components. It communicates user interaction to the server-side, and then again renders the changes in the UI. The communications are made using asynchronous HTTP or HTTPS requests. See "Client-Side Engine".

Server-side Vaadin applications work on top of the Java Servlet API (see "Java Servlets"). The Vaadin servlet, or more exactly the VaadinServlet class, receives requests from different clients, determines which user session they belong to by tracking the sessions with cookies, and delegates the requests to their corresponding sessions. You can customize the Vaadin servlet by extending it.

Vaadin makes a separation between the appearance and component structure of the user interface. While the UI logic is handled as Java code, the presentation is defined in themes as CSS or Sass. Vaadin provides a number of default themes. User themes can, in addition to style sheets, include HTML templates that define custom layouts and other resources, such as images and fonts. Themes are discussed in detail in "Themes".

Interaction with user interface components creates events, which are first processed on the client-side by the widgets, then passed all the way through the HTTP server, Vaadin servlet, and the user interface components to the event listeners defined in the application. See "Events and Listeners".

In addition to the event-driven programming model, Vaadin supports server push, where the UI changes are pushed directly from the server to the client without a client request or an event. This makes it possible to update UIs immediately from other threads and other UIs, without having to wait for a request. See "Server Push".

In addition to the user interface model, Vaadin provides a data binding API for associating data presented in field components, such as text fields, check boxes and selection components, with a data source. Using data binding, the user interface components can update the application data directly, often without the need for any control code. For example, you can bind a data grid component to a backend query response. For a complete overview of the data binding model, please refer to "Binding Components to Data".

In addition to server-side web applications, Vaadin supports client-side application modules, which run in the browser. Client-side modules can use the same widgets, themes, and back-end services as server-side Vaadin applications. They are useful when you have a need for highly responsive UI logic, such as for games or for serving a large number of clients with possibly stateless server-side code, and for various other purposes, such as offering an off-line mode for server-side applications. Please see "Client-Side Applications" for further details.

Vaadin is meant for building user interfaces, and it is recommended that other application layers should be kept separate from the UI. The business logic can run in the same servlet as the UI code, usually separated at least by a Java API, possibly as EJBs, or distributed to a remote back-end service. The data storage is usually distributed to a database management system, and is typically accessed through a persistence solution, such as JPA.