Advanced Client-Side Topics

    Vaadin’s client-side engine reacts to changes from the server in a number of phases, the order of which can be relevant for a connector. The processing occurs in the handleUIDLMessage() method in ApplicationConnection, but the logic can be quite overwhelming, so we describe the phases in the following summary.

    1. Any dependencies defined by using @JavaScript or @StyleSheet on the server-side class are loaded. Processing does not continue until the browser confirms that they have been loaded.

    2. New connectors are instantiated and init() is run for each Connector.

    3. The connector hierarchy is updated, but no hierarchy change event is fired yet. setParent() and setChildren() are run in this phase.

    4. Hierarchy change events are fired. This means that all state objects and the entire hierarchy are already up to date when this happens. The DOM hierarchy should in theory be up to date after all hierarchy events have been handled, although there are some built-in components that for various reasons do not always live up to this promise.

    5. Captions are updated, causing updateCaption() to be invoked on layouts as needed.

    6. State change events are fired for all changed state objects.

    7. updateFromUIDL() is called for legacy connectors.

    8. All RPC methods received from the server are invoked.

    9. The layout phase starts, first checking the sizes and positions of all elements, and then notifying any ElementResizeListener#s, as well as calling the appropriate layout method for the connectors that implement either [classname]#SimpleManagedLayout or DirectionalManagedLayout interface.