Coming from the world of Flex, there is an idea of modularity which allows an application to be broken into smaller chunks, loaded only when needed. This is great as it allows large applications to load quickly. I do not believe there is a 1:1 comparison for Vaadin, however, it seems addComponent(), removeComponent(), and setVisible() could achieve the same effect when treating top-level components as modules.
For example, consider a TabSheet where each tab (component) is a view (module) of the application. With the selected tab set to visible, only its content is present in the DOM. As new tabs are selected, a listener method sets non-selected tabs visibility to false - removing existing markup, and the new component’s markup would be requested from the server and added to the DOM.
My assumption is that Vaadin only provides the HTML for visible, present components; the un-rendered components markup is only sent upon request. Is this assumption correct?
If Im correct, regarding the TabSheet example, it is lazy until tabs are opened for the first time. Once you open the tab - it loads its content. But once content for tabs are loaded, invisible tab DOM part is not removed but just marked as hidden.
The same is trur when you call setVisible ( true | false ) for any component - it remains in the DOM but just marked as hidden.
But if you remove the component, then its data is also removed from a client’s DOM tree. So in order to achieve the functionality you mentioned, use add/emoveComponent instead of setVisible(true|false). You can also use pre-build view controllers from various addons, such as AppFoundation, TPT, Navigator which already provides classes for management of views switching
Yes, this is correct for the current TabSheet implementation. However, the API documentation (IIRC) does not specify this and at least I would consider this to be an internal implementation detail, so this might change in future versions.
This, too, only applies to the current implementation:
If a component has never been painted to the UI before calling setVisible(false), only an empty placeholder with no content is sent to the UI. If a component which has been visible is made invisible, the client side implementation of the component may choose either to simply hide it but keep it in the DOM or to remove it from DOM. If I recall correctly, no content updates are sent to invisible components.