blob: 63f62bcd631c3c2da74f29c9157ad57348b7a620 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
---
title: Client-Side Engine
order: 3
layout: page
---
[[architecture.client-side]]
= Client-Side Engine
((("Client-Side
Engine")))
The user interface of a server-side Vaadin application is rendered in the
browser by the Vaadin Client-Side Engine. It is loaded in the browser when the
page with the Vaadin UI is opened. The server-side UI components are rendered
using __widgets__ (as they are called in GWT) on the client-side.
The client-side engine is illustrated in <<figure.architecture.client-side>>.
[[figure.architecture.client-side]]
.Vaadin Client-Side Engine
image::img/clientside-arch.png[width=80%, scaledwidth=100%]
The client-side framework includes two kinds of built-in widgets: GWT widgets
and Vaadin-specific widgets. The two widget collections have significant
overlap, where the Vaadin widgets provide a bit different features than the GWT
widgets. In addition, many add-on widgets and their server-side counterparts
exist, and you can easily download and install them, as described in
<<dummy/../../../framework/addons/addons-overview.asciidoc#addons.overview,"Using
Vaadin Add-ons">>. You can also develop your own widgets, as described in
<<dummy/../../../framework/clientside/clientside-overview.asciidoc#clientside.overview,"Client-Side
Vaadin Development">>.
The rendering with widgets, as well as the communication to the server-side, is
handled in the [classname]#ApplicationConnection#. Connecting the widgets with
their server-side counterparts is done in __connectors__, and there is one for
each widget that has a server-side counterpart. The framework handles
serialization of component state transparently, and includes an RPC mechanism
between the two sides. Integration of widgets with their server-side counterpart
components is described in
<<dummy/../../../framework/gwt/gwt-overview.asciidoc#gwt.overview,"Integrating
with the Server-Side">>.
|
