vaadinvaadin10vaadin-flow

Difference between annotating with @Tag(Tag.DIV) and extending from Div class


I'm learning Vaadin 11 and I have a question. What is the difference between this:

public class MyClass extends Div { /... }

...and this?:

@Tag(Tag.DIV)
public class MyClass { /** }

According to the documentation:

Div class: Component representing a <div> element.

Tag annotation: Defines the tag to use for the root element for a component created using the default Component constructor.

Looks like they do the same thing: making a class to represent a root element. Is that so?


Solution

  • The difference is the server-side API. The Div class is really trivial by itself, but it does implement some helpful mixin interfaces through its parents, like HasSize and HasStyle. This means that you can e.g. call myClass.setHeight("500px") if you're extending Div.

    On the other hand, if you use the @Tag annotation to tell that your MyComponent class has the div tag on the client, you don't expose any server-side methods in addition to what you decide to provide yourself. Whether this is a good thing or a bad thing depends on what kinds of features you want to provide to your class's users.