Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Possibilites to manipulate client side rendered HTML code without breaking
Hello,
as far as I understood Vaadin doesn't generate HTML code on the server side.
Instead a state is sent from server to client which is rendered on the client side (so in the web browser) to HTML code.
I now want to understand, how a state change on client or server side is detected and send to server or client.
Im currently thinking about implementing an XSL transformation which removes some
unnecessary "<div>" elements from client side generated HTML code.
The Layout is looking like that
div.v-horizontallayout
div.v-slot
div.v-horizontallayout
div.v-slot
div (with form elements)
What happens if i delete through my xsl code all horizontal layout container elements?
I want to have HTML code like that:
div (with form elements)
If i now fill out the form and submit it, will the synchronisation between client
and server still work?
And if serverside validation fails, can the server still generate a valid shared state
and send to the client?
What items are part of the synchronisation - all Layout and UI Components or only
UI Components?
How does the connection between client and server work - on basis of generated Ids
on Layout and UI components - like in JSF see http://illegalargumentexception.blogspot.de/2009/02/jsf-working-with-component-ids.html
As far as i found out, there are two ways of communicating a state change from client to server and from server to client:
- an RPC call which communicate a stateless event like a button click from client to server
see https://vaadin.com/docs/-/part/framework/gwt/gwt-rpc.html
- a shared state which is send from server to client and which should be considered on the client-side widget as read-only
see https://vaadin.com/docs/-/part/framework/gwt/gwt-shared-state.html
Thanks for your help in advance!
Hi,
The Vaadin runtime relies on the fact that DOM structure of the Vaadin widgets have a certain form. Changing it behind the scenes will almost certainly break something. The client-server communication should work regardless, but fetching data from layouts and updating the client-side in response to this commucation will probably not work.
The two communcations forms you mention are the ones supported by the Framework. Components on the server-side have a connector on the client-side. The connector then has a reference to a gwt-widget, which represents a DOM subtree.
A better solution than removing stuff from the constructed DOM would be to use simpler layouts e.g. the CssLayout, which is essentially just a div.
Hope this answer helps
-Pontus
Hello Mr Boström,
thanks a lot for this quick and detailed answear.
Very good to know, that manipulation of gwt-widget DOM subtree can break the synchronisation.
Best regards
Frank