Docs

Vaadin 8 reached End of Life on February 21, 2022. Discover how to make your Vaadin 8 app futureproof →

Docs

Advanced Client-Side Topics

In the following, we mention some topics that you may encounter when integrating widgets.

Client-Side Processing Phases

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, @StyleSheet or @HtmlImport 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. State objects are updated, but no state change event is fired yet.

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

  5. 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.

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

  7. @DelegateToWidget is handled for all changed state objects using the annotation.

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

  9. updateFromUIDL() is called for legacy connectors.

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

  11. Connectors that are no longer included in the hierarchy are unregistered. This calls onUnregister() on the Connector.

  12. 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.