Vaadin 7 Custom Widget - How to update the state client side to prevent dat

Hi Everyone :slight_smile:

I’ve got a Vaadin widget I’ve coded up which is an “editor” as such. It is in javascript, not GWT, as it wraps an existing Javascript component.

On “Saving”, the editor sends it’s data as an event to the server. The server then updates the state of the component with the new data. So in the event of a page reload or change in navigation, etc, the widget is reinitialised in the state in which it was left.

The problem I am having is that this can be a large amount of data. And when I update the state, it is first sent in the event to the server, then it is “synced” back to the client. So it essentially doubles the amount of data transfer.

Is there a way I can just update the client side state directly, or mark this particular state parameter as not requiring syncing, ONLY when the widget is first attached?

The only other way I can think of is to remove this field from the state, and then call an RPC method “onAttach” to send the data initially. I just felt like this information was more “state” than RPC though.

Anyway, advice appreciated :).

Just as a side note: I ignore changes in state in the client on that parameter after it has loaded, otherwise the delay in sending to the server and syncing the state can overwrite any more recent client side changes.

The only other way I can think of is to remove this field from the state, and then call an RPC method “onAttach” to send the data initially. I just felt like this information was more “state” than RPC though.

Yes, RPC is the way to go. Updating shared state from the server works only to client direction, not otherway round. Also you can create your custom RPC interface for your own messaging

See here example how to register RPC in server side and how String is received from client in onChange

https://github.com/TatuLund/grid-renderers-collection-addon/blob/vaadin8/grid-renderers-collection-addon/src/main/java/org/vaadin/grid/cellrenderers/editable/TextFieldRenderer.java

Which is defined by this interface (https://github.com/TatuLund/grid-renderers-collection-addon/blob/vaadin8/grid-renderers-collection-addon/src/main/java/org/vaadin/grid/cellrenderers/client/editable/TextFieldRendererServerRpc.java)

And here is the client implementation (see the creation of RPC proxy and adding onChange handler)

https://github.com/TatuLund/grid-renderers-collection-addon/blob/vaadin8/grid-renderers-collection-addon/src/main/java/org/vaadin/grid/cellrenderers/client/editable/TextFieldRendererConnector.java

I hope this helps to get the idea of the pattern to use. This example is Grid Renderer, but same pattern applies to any component Connector server side pair.

Thank you :slight_smile:

Just 1 quick question. I have @PreserveOnRefresh. How does this behave with the onChange function?. I am concerned that if the user refreshes the browser, the onChange will not be triggered and the data is not sent to the client.

Thanks, Ryan