Custom components

The easiest way to create a custom component is by extending some existing component. For example, we can extend Label to automatically add some custom styles, and set a default caption shown as follows:

class MyFancyLabel extends Label {
  public MyFancyLabel() {
    addStyleName("my-fancy-label");
    setCaption("Fancy default caption");
  }
}

Most of the time, we will need a mixture of UI components, so extending a unique component won't work in these situations. CustomComponent to the rescue. The previous MyFancyLabel could be implemented like this:

class MyFancyLabel extends CustomComponent {
  public MyFancyLabel() {
    Label label = new Label("Fancy default caption");
    label.addStyleName("my-fancy-label");
    setCompositionRoot(label);
  }
}

CustomComponent defines the setCompositionRoot method which allows us to define which component will act as the root of our composition. We could create a component hierarchy and then call the setCompositionRoot method passing...