A component created by the wizard and later managed by the visual editor has a very specific structure that allows you to insert your user interface logic in the component while keeping a minimal amount of code off-limits. You need to know what you can edit yourself and what exactly is managed by the editor. The managed member variables and methods are marked with the AutoGenerated annotation, as you can see later.

A visually editable component consists of:

  • Member variables containing sub-component references

  • Sub-component builder methods

  • The constructor

The structure of a composite component is hierarchical, a nested hierarchy of layout components containing other layout components as well as regular components. The root layout of the component tree, or the composition root of the CustomComponent, is named mainLayout. See Section 5.23, “Component Composition with CustomComponent for a detailed description of the structure of custom (composite) components.

When you create a new composite component using the wizard, it will create a constructor for the component and fill its basic content.

    public MyComponent() {
        buildMainLayout();
        setCompositionRoot(mainLayout);

        // TODO add user code here
    }

The most important thing to do in the constructor is to set the composition root of the CustomComponent with the setCompositionRoot() (see Section 5.23, “Component Composition with CustomComponent for more details on the composition root). The generated constructor first builds the root layout of the composite component with buildMainLayout() and then uses the mainLayout reference.

The editor will not change the constructor afterwards, so you can safely change it as you want. The editor does not allow changing the member variable holding a reference to the root layout, so it is always named mainLayout.