This chapter provides an introduction to the architecture of Vaadin at somewhat technical level.

In Chapter 1, Introduction, we gave a short introduction to the general architecture of Vaadin. Let us now look deeper into it. Figure 3.1, “Vaadin Architecture” gives a basic illustration of the architecture.

Vaadin consists of a web application API, a horde of user interface components, themes for controlling the appearance, and a data model that allows binding the user interface components directly to data. Behind the curtains it also employs a terminal adapter to receive requests from web browsers and make responses by rendering the pages.

An application that uses Vaadin runs as a servlet in a Java web server, serving HTTP requests. The terminal adapter receives client requests through the web server's Java Servlet API, and inteprets them to user events for a particular session. Sessions are tracked using cookies. Events are associated with UI components and delivered to the application, which handles them with listeners. If the application logic makes changes to the server-side UI components, the terminal adapter renders them in the web browser by generating a response. The client-side engine running in the browser receives the responses and uses them to make any necessary changes to the page in the browser.

The top level of a user application consists of an application class that inherits com.vaadin.Application. It creates the UI components (see below) it needs, receives events regarding them, and makes necessary changes to the components. For detailed information about inheriting the Application, see Chapter 4, Writing a Web Application.

The major parts of the architecture and their function are as follows:

User Interface Components

The user interface consists of UI components that are created and laid out by the application. Each server-side component has a client-side counterpart, with which the user interacts. The server-side components can serialize themselves over the client connection using a terminal adapter. The client-side components, in turn, can serialize user interaction back to the application, which is received in the server-side components as events. The components relay these events to the application logic. Most components are bound to a data source (see below). For a complete description of UI component architecture, see Chapter 5, User Interface Components.

Client-Side Engine

The Client-Side Engine of Vaadin manages the rendering in the web browser using Google Web Toolkit (GWT). It communicates user interaction and UI changes with the server-side Terminal Adapter using the User Interface Definition Language (UIDL), a JSON-based language. The communications are made using asynchronous HTTP or HTTPS requests. See Section 3.4, “Client-Side Engine”.

Terminal Adapter

The UI components do not render themselves directly as a web page, but use a Terminal Adapter. This abstraction layer allows users to use Vaadin applications with practically any web browser. Releases 3 and 4 of IT Mill Toolkit supported HTML and simple AJAX based rendering, while Vaadin Release 5 supports advanced AJAX-based rendering using Google Web Toolkit (GWT). You could imagine some other browser technology, not even based on HTML, and you - or we for that matter - could make it work just by writing a new adapter. Your application would still just see the Vaadin API. To allow for this sort of abstraction, UI components communicate their changes to the Terminal Adapter, which renders them for the user's browser. When the user does something in the web page, the events are communicated to the terminal adapter (through the web server) as asynchronous AJAX requests. The terminal adapter delivers the user events to the UI components, which deliver them to the application's UI logic.

Themes

The user interface separates between presentation and logic. While the UI logic is handled as Java code, the presentation is defined in themes as CSS. Vaadin provides a default themes. User themes can, in addition to style sheets, include HTML templates that define custom layouts and other resources, such as images. Themes are discussed in detail in Chapter 8, Themes.

UIDL

The Terminal Adapter draws the user interface to the web page and any changes to it using a special User Interface Definition Language (UIDL). The UIDL communications are done using JSON (JavaScript Object Notation), which is a lightweight data interchange format that is especially efficient for interfacing with JavaScript-based AJAX code in the browser. See Section 3.2.3, “JSON” and Appendix A, User Interface Definition Language (UIDL) for details.

Events

User interaction with UI components creates events, which are first processed on the client-side with JavaScript and then passed all the way through the HTTP server, terminal adapter, and user component layers to the application. See Section 3.5, “Events and Listeners”.

Data Model

In addition to the user interface model, Vaadin provides a data model for interfacing data presented in UI components. Using the data model, the user interface components can update the application data directly, without the need for any control code. All the UI components use this data model internally, but they can be bound to a separate data source as well. For example, you can bind a table component to an SQL query response. For a complete overview of the Vaadin Data Model, please refer to Chapter 9, Binding Components to Data.