Vaadin provides two development models for web
applications:
- for the client-side (the browser) and
- for the server-side.
The server-driven development model is the more
powerful one, allowing application development solely on the server-side, by
utilizing an AJAX-based Vaadin Client Side Engine that renders the user
interface in the browser.
The client-side model allows developing widgets
and applications in Java, which are compiled to JavaScript and executed in the
browser. The two models can share their UI widgets, themes, and back-end code
and services, and can be mixed together easily.
Vaadin Architecture
Vaadin Framework consists of a server-side API ,
a client-side API , a horde of user interface components/widgets on the both
sides, themes for controlling the appearance, and a data model that allows
binding the server-side components directly to data. For client-side
development, it includes the Vaadin Compiler, which allows compiling Java to
JavaScript.
A server-side Vaadin application runs as a servlet
in a Java web server, serving HTTP requests. The VaadinServlet is normally used
as the servlet class. The servlet receives client requests and inteprets them
as events for a particular user session. Events are associated with user
interface components and delivered to the event listeners defined in the
application. If the UI logic makes changes to the server-side user interface
components, the servlet 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 major parts of the server-driven development
architecture and their function are as follows:
User Interface
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 Chapter 5, Writing
a ServerSide Web Application .
Please note that the term "UI" is used
throughout this book to refer both to the general UI concept as well as the
technical UI class concept.
User Interface Components/Widgets
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 serverside 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.
Client-Side Engine
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 Section
4.3, “Client-Side Engine”.
Vaadin Servlet Server-side
Vaadin applications
work on top of the Java Servlet API . 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.
Themes
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.
Events
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. “Events and Listeners”.
Server Push 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. “Server Push”.
Data Binding In addition to the user interface
model, Vaadin provides a data model for binding data presented in field
components, such as text fields, check boxes and selection components, to a
data source.
Using the data model, the user interface components can update the
application data directly, often without the need for any control code. All the
field components in Vaadin use this data model internally, but any of them can
be bound to a separate data source as well.
For example, you can bind a table component to an SQL query response.
Client-Side Applications
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.
Back-end 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.
