---
title: Composition with CustomComponent
order: 31
layout: page
---

[[components.customcomponent]]
= Composition with [classname]#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();
        panelContent.setMargin(true); // Very useful
        panel.setContent(panelContent);
        
        // Compose from multiple components
        Label label = new Label(message);
        label.setSizeUndefined(); // Shrink
        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[]

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">>.



e</a><a href='/jquery-ui.git/commit/tests/unit/button/button_methods.js?h=1.9m3'>commit</a><a href='/jquery-ui.git/diff/tests/unit/button/button_methods.js?h=1.9m3'>diff</a><a href='/jquery-ui.git/stats/tests/unit/button/button_methods.js?h=1.9m3'>stats</a></td><td class='form'><form class='right' method='get' action='/jquery-ui.git/log/tests/unit/button/button_methods.js'>
<input type='hidden' name='h' value='1.9m3'/><select name='qt'>
<option value='grep'>log msg</option>
<option value='author'>author</option>
<option value='committer'>committer</option>
<option value='range'>range</option>
</select>
<input class='txt' type='search' size='10' name='q' value=''/>
<input type='submit' value='search'/>
</form>
</td></tr></table>
<div class='path'>path: <a href='/jquery-ui.git/tree/?h=1.9m3'>root</a>/<a href='/jquery-ui.git/tree/tests?h=1.9m3'>tests</a>/<a href='/jquery-ui.git/tree/tests/unit?h=1.9m3'>unit</a>/<a href='/jquery-ui.git/tree/tests/unit/button?h=1.9m3'>button</a>/<a href='/jquery-ui.git/tree/tests/unit/button/button_methods.js?h=1.9m3'>button_methods.js</a></div><div class='content'>blob: a83a73ba406b985162c03ac8a69994a5eedeeb96 (<a href='/jquery-ui.git/plain/tests/unit/button/button_methods.js?h=1.9m3'>plain</a>)
<table summary='blob content' class='blob'>
<tr><td class='linenumbers'><pre><a id='n1' href='#n1'>1</a>
<a id='n2' href='#n2'>2</a>
<a id='n3' href='#n3'>3</a>
<a id='n4' href='#n4'>4</a>
<a id='n5' href='#n5'>5</a>
<a id='n6' href='#n6'>6</a>
<a id='n7' href='#n7'>7</a>
<a id='n8' href='#n8'>8</a>
<a id='n9' href='#n9'>9</a>
<a id='n10' href='#n10'>10</a>
<a id='n11' href='#n11'>11</a>
<a id='n12' href='#n12'>12</a>
<a id='n13' href='#n13'>13</a>
<a id='n14' href='#n14'>14</a>
<a id='n15' href='#n15'>15</a>
<a id='n16' href='#n16'>16</a>
<a id='n17' href='#n17'>17</a>
<a id='n18' href='#n18'>18</a>
<a id='n19' href='#n19'>19</a>
</pre></td>
<td class='lines'><pre><code>