Possibilites to manipulate client side rendered HTML code without breaking

Vaadin 6 / 7 / 8
1

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 “

” 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:

Thanks for your help in advance!

2

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

3

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