DocumentationCreating UICreating ComponentsUsing Events

I don’t understand the documentation at all, there is always some kind of nonsense, unrelated pieces of code that are not clear how to use, this can only be understood by someone who has been working with the framework for 5+ years and not by someone reading it for the first time, for example, it is not clear how to call events from the server side, with client side, how to add data to events? What is NativeBotton, is it a standard class? Or do you need to create one and then use it? please provide brief examples so that any user can understand

Can anyone show examples of using all this? I just can’t find it anywhere, thanks

I can recommend the Tutorial (https://vaadin.com/docs/latest/tutorial) as the best place to start when getting started.

I completed the tutorial easily and without problems

nothing is written here about events

There is some stuff there about events too, but perhaps not the kind you’re looking for? What exactly do you need?

How do client-side events work? on the server side? how to add data to an event? and how to get them? (I was able to somehow launch “on the client side, but when I pressed f12 in Chrome, I saw data being sent, I didn’t understand how it worked at all, I couldn’t launch it on the server side at all)

I didn’t read the rest of the documentation because I’m trying to understand it all

Most of the client-server communication is abstracted away by the framework, so you don’t need to understand how it works in much detail.

Like, say, to do something when a button is clicked, you just add a ClickListener to the button, and then do something in the listener. It’s pretty rare to have to create your own events for example, so the stuff on the https://vaadin.com/docs/latest/create-ui/creating-components/events page is not something you’d typically need unless you’re doing something a bit more advanced.

like this for example:

btn.addClickListener(e->{
   //does something
});```

That's all server-side code, and the framework takes care of generating an event on the clientside that automatically triggers an even on the server side, and that `e->{....}` implicitly defines a listener in which you can define what should happen.

Yes, this is clear to me(btn.addClickListener…), okay, I understand, I think I’ll skip this topic for now and come back later

can you help me with this example?

in dock

'@DomEvent(“click”)
public class ClickEvent
extends ComponentEvent {
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 button;
}

}’

Right, so that defines a custom click event, and I think that example in the doc is just there to give a simple example of how you’d go about doing that, but it’s not something you’d typically need to do.

Like I said, you don’t typically need to defined custom even types.

ClickEvent there is a class representing a custom serverside event type, and the @DomEvent("click") annotation says that it should be triggered by the normal native clientside “click” event. It’s perhaps not the best example in the sense that the framework already has click events for components, so there’s no need to do that per se. It demonstrates the concept of creating a custom even though.

it can come in handy if you want to listen to some event that the framework doesn’t provide a built-in server-side API for

in vaadin there is a class NativeButton, and in this case NativeBotton is a class from the project or vadin?

it’s a class in Vaadin Flow representing a native html <button>