ComponentEvent : Need more clarity about client/server

Flow
1

I am using an AppLayout which has the Avatar + Sign out and other menus in it
UseCase: When the user changes the display name from my custom ProfileView, I want to update the Avatar accordingly.

For this I need an event bus and looks like ComponentEvent will suit my requirement perfectly.
However, I am not sure I understand one part.

As per the API docs,

    /**
     * Creates a new event using the given source and indicator whether the
     * event originated from the client side or the server side.
     *
     * @param source
     *            the source component
     * @param fromClient
     *            <code>true</code> if the event originated from the client
     *            side, <code>false</code> otherwise
     */
    public ComponentEvent(T source, boolean fromClient) {
        super(source);
        this.fromClient = fromClient;
    }

What exactly does the fromClientdo and what is it used for?
Since the ComponentEvent requires a Component source, it makes sense for my view to fire the event. So fromClient should be true.
But then, everything is being rendered from the server so does it mean it should be false?

Can someone please clear this confusion?
More importantly, how does Vaadin internally use this value and why is it required in the first place?

Thank you.

2

Hi!

Think of it as “fromUser” instead.

Some component events, e.g. typically value change events may trigger also as side efect of something your code does (e.g. calling setValue for initial value). In this kind of situation it can be handy to separate events that actually originate from a user action.

Cheers, matti

1 Like
3

One example is for the TextField:

  • from the client side = a user is updating field in the browser.
  • from the server side = textfield.setValue(“test”)

How it’s used:

  • in addvaluechangelistener you can check if the change is coming from the user or the server.
        actualCosts.addValueChangeListener(e -> {
            if (e.isFromClient()) {
                // do something
            }
        });

It helps a lot to avoid cascade changes. In your case, it’s probably not really useful.

I don’t think it’s used internally in the framework, but I might be wrong.

1 Like