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
|
---
title: Composition with CustomComponent
order: 31
layout: page
---
[[components.customcomponent]]
= Composition with CustomComponent
The ease of making new user interface components is one of the core features of
Vaadin. Typically, you simply combine existing built-in components to produce
composite components. In many applications, such composite components make up
the majority of the user interface.
As described earlier in
<<dummy/../../../framework/application/application-architecture#application.architecture.composition,"Compositing
Components">>, you have two basic ways to create a composite - either by
extending a layout component or the [classname]#CustomComponent#, which
typically wraps around a layout component. The benefit of wrapping a layout
composite in [classname]#CustomComponent# is mainly encapsulation - hiding the
implementation details of the composition. Otherwise, a user of the composite
could rely on implementation details, which would create an unwanted dependency.
To create a composite, you need to inherit the [classname]#CustomComponent# and
set the __composition root__ component in the constructor. The composition root
is typically a layout component that contains other components.
For example:
[source, java]
----
class MyComposite extends CustomComponent {
public MyComposite(String message) {
// A layout structure used for composition
Panel panel = new Panel("My Custom Component");
VerticalLayout panelContent = new VerticalLayout();
panel.setContent(panelContent);
// Compose from multiple components
Label label = new Label(message);
panelContent.addComponent(label);
panelContent.addComponent(new Button("Ok"));
// Set the size as undefined at all levels
panelContent.setSizeUndefined();
panel.setSizeUndefined();
setSizeUndefined();
// The composition root MUST be set
setCompositionRoot(panel);
}
}
----
Take note of the sizing when trying to make a customcomponent that shrinks to
fit the contained components. You have to set the size as undefined at all
levels; the sizing of the composite component and the composition root are
separate.
You can use the component as follows:
[source, java]
----
MyComposite mycomposite = new MyComposite("Hello");
----
The rendered component is shown in <<figure.components.customcomponent>>.
[[figure.components.customcomponent]]
.A custom composite component
image::img/customcomponent-example1.png[width=25%, scaledwidth=40%]
You can also inherit any other components, such as layouts, to attain similar
composition.
((("Google Web Toolkit")))
Even further, you can create entirely new low-level components, by integrating
pure client-side components or by extending the client-side functionality of
built-in components. Development of new components is covered in
<<dummy/../../../framework/gwt/gwt-overview.asciidoc#gwt.overview,"Integrating
with the Server-Side">>.
|
