This section gives an overview of the client-side architecture of Vaadin. Knowledge of the client-side technologies is generally not needed unless you develop or use custom GWT components. The client-side engine is based on Google Web Toolkit (GWT), which allows the development of the engine and client-side components solely with Java.
Chapter 11, Developing New Components provides information about the integration of GWT-based user interface components with Vaadin.
Figure 3.2, “Architecture of Vaadin Client-Side Engine” illustrates the architecture
of the client-side engine using a button component as an example. The user
interface is managed by the ApplicationConnection
class, which handles AJAX requests to the server and renders the user
interface according to responses. Communications are done over HTTP(S) using
the JSON data interchange format and the User Interface Definition Language
(UIDL). In the server-side application, the button is used with the
Button
class of Vaadin. On the client-side, the user
interface consists of various GWT components that inherit
Widget
class. In the figure above, the GWT class
Button
is used to render the button in the browser (the
inheritance of Button
is simplified in the
figure). Vaadin provides an VButton
class, which
implements the Paintable
interface needed for rendering
the component with GWT.
The actual initial web page that is loaded in the browser is an empty page
that loads the JavaScript code of the Vaadin Client-Side Engine.
After it is loaded and started, it handles the AJAX requests to the
server. All server communications are done through the
ApplicationConnection
class.
The communication with the server is done as UIDL (User Interface Definition Language) messages using the JSON message interchange format over a HTTP(S) connection. UIDL is described in Appendix A, User Interface Definition Language (UIDL) and JSON in Section 3.2.3, “JSON” and Section A.2, “JSON Rendering”.