DocumentationCreating UICreating ComponentsUsing Events

Flow
21

(as opposed to the Vaadin Button component, which is Button in Flow)

22

So can I change the behavior of events for nativeButton?

23

or how?

24

well there’s no behavior per se out of the box – you define what should happen on click in the clicklistener, like so:

NativeButton btn = new NativeButton("Click me");
btn.addClickListener(e->{
  //whatever you want to happen
});```
25

But there is no need to do anything with @DomEvent("click") etc to do that

26

That whole docs section called “Creating Components” is about creating your own custom components, and you’re more likely to need to define custom events when doing that, but even then it’s relatively rare.

27

last question about @EventData(“event.button”) in the example above

28

what it represents and a minimal example if it’s not difficult or long

29

the native clientside event contains a bunch of data, properties like which button was used to click the element.
So the @EventData annotation is a way to bring that data to the server side.

30

This example in the docs

    public ClickEvent(NativeButton source,
            boolean fromClient,
            @EventData("event.button") int button) {
        super(source, fromClient);
        this.button = button;
    }```
defines a custom event type called `ClickEvent` that automatically reads the `button` property of the clientside click and stores it in an int called `button` as defined above: `private final int button;`

The custom event class also defines a method that returns that value:
```java
    public int getButton() {
        return button;
    }```

So you can then write code that inspects an instance of that type of event, and checks which button was pressed, so you can do different things depending on whether it was left or right button.

Let's say that you have a custom listener class that listens to `ClickEvent`s, it can do `event.getButton()` to get that value.
31

@DomEvent("click") public class ClickEvent extends ComponentEvent<NativeButton> { private final int button; public ClickEvent(NativeButton source, boolean fromClient, @EventData("event.button") int button) { super(source, fromClient); this.button = button; } public int getButton() { return 123; } }

32

`//////////the code I’m calling NativeButton nativeButton = new NativeButton();
nativeButton.addClickListener(click → {
Notification.show(click.getButton() + “”);
});

    return new Div(block1, block2, block3, textField, textField2, textField3, numericField, textField1, nativeButton);`
33

in Notification I always get 0 and not 123

34

that’s because NativeButton doesn’t actually use that custom ClickEvent you defined. It uses its own built-in ClickEvent.

35

This stuff is for creating custom stuff that is not built-in. That <NativeButton>
part in the ComponentEvent does not make NativeButtons use that click event instead of the built-in one.

36

Here’s an example of how you’d use a custom event type. It defines a custom UI component called MyComponent that has its own special click event called CustomClickEvent:

Here’s an example:

// My custom UI component
public class MyComponent extends Component {

    // Defines a custom click event:
    @DomEvent("click")
    public static class CustomClickEvent extends ComponentEvent<MyComponent> {
        private int button;

        public CustomClickEvent(
          MyComponent source, boolean fromClient,
          @EventData("event.button") int button) {
            super(source, fromClient);
            this.button = button;
        }

        public int getButton() {
            return this.button;
        }
    }

    // Method for registering a listener to custom click events:
    public Registration addCustomClickListener(
        ComponentEventListener<CustomClickEvent> listener) {
            return addListener(CustomClickEvent.class, listener);
    }

}
37

And you would then use that custom component, and the custom event type, like this:

// New custom component instance:
MyComponent mc = new MyComponent();

// Register a listener for custom clicks
// that does different things depending on the button
mc.addCustomClickListener(e->{
    if (e.getButton() == 1) {
    // left click, do one thing
    } else {
    // right or middle click, do something else
    }
});```
38

so as you can see I have ComponentEvent<MyComponent> there, which defines that the type of component that is the source of this type of event is a MyComponent. That’s useful because I can then check which instance of MyComponent triggered the event like this, and for example hide it:

mc.addCustomClickListener(e->{
    MyComponent theTrigger = e.getSource();
    theTrigger.setVisibility(false);
});```
39

But none of this is needed unless you’re

  • building your own custom UI component type, and/or
  • listening to client side events that don’t already have built-in listeners on the server side
40

here, as I understand it, the Tag(“button”) annotation is missing to make it work, here is the error → “There was an exception while trying to navigate to ‘scope’ with the root cause ‘java.lang.IllegalStateException: MyComponent (or a super class) must be annotated with @com.vaadin.flow.component.Tag if the default constructor is used.’”