Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Possibilites to manipulate client side rendered HTML code without breaking
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 (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
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
- a shared state which is send from server to client and which should be considered on the client-side widget as read-only
Thanks for your help in advance!
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
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.