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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
---
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.
The component hierarchy of Vaadin is presented in the next four diagrams:
* <<figure.uicomponents>>
illustrates the inheritance
hierarchy of the UI component classes and interfaces not bound directly to
business objects.
* <<figure.uifields>>
presents fields bound to single values
* <<figure.uiselects>>
presents components that show a list of data and allow selection
* <<figure.uicontainers>>
layouts and other component containers
Interfaces are displayed
with a dotted outline, abstract classes in gray, and regular classes in blue.
////
TODO outdated information. Uncomment when fixed.
An annotated
version of the diagram is featured in the __Vaadin Cheat Sheet__.
////
[[figure.uicomponents]]
.Basic Components
image::img/component-class-hierarchy.png[width=100%, scaledwidth=100%]
[[figure.uifields]]
.Field Components
image::img/field-class-hierarchy.png[width=100%, scaledwidth=100%]
[[figure.uiselects]]
.Selection Components
image::img/selects-class-hierarchy.png[width=100%, scaledwidth=100%]
[[figure.uicontainers]]
.Layouts and Component Containers
image::img/component-container-class-hierarchy.png[width=100%, scaledwidth=100%]
((("[classname]#Component#")))
The [classname]#Component# is interface implemented by all components.
((("[classname]#AbstractComponent#")))
In practice, all components extend the [classname]#AbstractComponent#
abstract class.
((("[classname]#AbstractField#")))
((("[classname]#AbstractComponentContainer#")))
((("[classname]#AbstractListing#")))
There are three more specific types of components.
Field Components:: allow user to edit a value in the UI. All extend [classname]#AbstractField#. Field components are described in detail in
<<dummy/../../../framework/component/components-fields.asciidoc#components.fields,"Field Components">>.
Selection Component:: show a list of data that the user can select from. All extend [classname]#AbstractListing#. Selection components are described in detail in
<<dummy/../../../framework/component/components-selection.asciidoc#components.selection,"Selection Components">>.
Layouts and Component Containers:: Components that can contain other components. All layouts and containers implement the [interfacename]#HasComponents# interface. Layout components are described in detail in
<<dummy/../../../framework/layout/layout-overview.asciidoc#layout.overview,"Managing
Layout">>.
((("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">>.
////
TODO outdated information. Uncomment when fixed.
[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.
====
////
|
