documentation/components/components-overview.asciidoc


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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

---
title: Overview
order: 1
layout: page
---

[[components.overview]]
= Overview

Vaadin provides a comprehensive set of user interface components and allows you
to define custom components. <<figure.uicomponents>> illustrates the inheritance
hierarchy of the UI component classes and interfaces. Interfaces are displayed
in gray, abstract classes in orange, and regular classes in blue. An annotated
version of the diagram is featured in the __Vaadin Cheat Sheet__.

[[figure.uicomponents]]
.User Interface Component Class Hierarchy
image::img/component-diagram-hi.png[]

((("[classname]#Component#")))
At the top of the interface hierarchy, we have the [classname]#Component#
interface.
((("[classname]#AbstractComponent#")))
At the top of the class hierarchy, we have the [classname]#AbstractComponent#
class.
((("[classname]#AbstractField#")))
((("[classname]#AbstractComponentContainer#")))
It is inherited by two other abstract classes: [classname]#AbstractField#,
inherited further by field components, and
[classname]#AbstractComponentContainer#, inherited by various container and
layout components. Components that are not bound to a content data model, such
as labels and links, inherit [classname]#AbstractComponent# directly.

((("layout")))
((("[classname]#Layout#")))
The layout of the various components in a window is controlled, logically, by
layout components, just like in conventional Java UI toolkits for desktop
applications. In addition, with the [classname]#CustomLayout# component, you can
write a custom layout as an HTML template that includes the locations of any
contained components. Looking at the inheritance diagram, we can see that layout
components inherit the [classname]#AbstractComponentContainer# and the
[classname]#Layout# interface. Layout components are described in detail in
<<dummy/../../../framework/layout/layout-overview.asciidoc#layout.overview,"Managing
Layout">>.

((("[classname]#Window#")))
Looking at it from the perspective of an object hierarchy, we would have a
[classname]#Window# object, which contains a hierachy of layout components,
which again contain other layout components, field components, and other visible
components.

((("Sampler")))
((("JavaDoc")))
You can browse the built-in UI components of Vaadin library in the Sampler
application of the Vaadin Demo. The Sampler shows a description, JavaDoc
documentation, and a code samples for each of the components.

In addition to the built-in components, many components are available as
add-ons, either from the Vaadin Directory or from independent sources. Both
commercial and free components exist. The installation of add-ons is described
in
<<dummy/../../../framework/addons/addons-overview.asciidoc#addons.overview,"Using
Vaadin Add-ons">>.


[NOTE]
.Vaadin Cheat Sheet and Refcard
====
<<figure.uicomponents>> is included in the Vaadin Cheat Sheet that illustrates
the basic relationship hierarchy of the user interface components and data
binding classes and interfaces. You can download it at http://vaadin.com/book.

The diagram is also included in the six-page DZone Refcard, which you can find
at https://vaadin.com/refcard.

====