CustomComponent vs CustomLayout

New to Vaadin (using last version), I read the doc and I was wondering when to choose a CustomComponent instead of a CustomLayout is it just a question of choice or is there a technical reason to choose one vs the other.
The exemple showed for CustomLayout shows a LoginLayout but it can be done with CustomComponent too.


it’s different technologies behind each, so it’s kind of an apples vs. oranges situation. A CustomLayout is basically a HTML template that you can embed on your page with components placed at desired points. A CustomComponent allows you to make compositions of server-side components. You can even make a CustomComponent that uses a CustomLayout as its root. I personally don’t use CustomLayouts that much, but they can be useful if you have very specific layouting needs. CustomComponents on the other hand are, IMO, very useful, especially for creating reusable compositions of components like dialogs with confirm and cancel buttons and so on.


Thanks for the answer, it’s now clearer.

You’re welcome; if you have any further questions, just ask!

(sorry for threadjacking)

Another question I’ve sometimes wondered about is what is the difference in using a CustomComponent vs just extending the class you would pass on to setCompositionRoot?

For this one I had the answer in the doc : “The benefit of wrapping a layout composite in CustomComponent is mainly encapsulation” :smiley:

Yeah, but that’s a bit vague. Kind of like saying “nest your CustomComponent into another CustomComponent for added encapsulation” :wink:

I guess it’s something like this: If you extend a GridLayout, all of HL’s constructors and methods are available to the users of MyCustomComponent
Later on, you realize you should have used a CssLayout instead. You’re out of luck, people are already using newLine and other methods that can’t be found in CssLayout. Use CustomComponent that has a composition root and you’re safe from API-breaking changes if you decide to use a different layout as the base .

Ah, OK. That makes sens