Forcing Vaadin Component to occupy it’s space in invisible state

The article “Forcing Vaadin Component to occupy it’s space in invisible state” is in regard of a programming problem which I faced while writing a Vaadin application.

Below is the problem description:

I have a ProgressIndicator, a Label and a Tree added to a CSSLayout. Initially the ProgressIndicator and the message Label visibility is set to false. If a component in the tree is clicked the action listener changes the ProgressIndicator and the Label visibility to true. Consequently the whole tree shifted down by the height of the components whose property got changed to visible.

I want a solution where even the invisible components occupy there space and when they are turned to visible, they do not disturb the other components.

Solution:
Vaadin doesn’t support this, any component which is invisible is not rendered.
So the solution is to create a Label of the same size, as the component which causes the shifting of the tree, and add it to the tree. In this case a Label of height equal to the combined height of ProgressIndicator and the message Label will be required to replace the invisible components.

Also, it is a must to make either of these two components visible at a time.

Below is an example code:

The dummyLabel in the above code is visible in the beginning.

Below is the code which changes the visibility of all the above components:

Again to make the connectLabel and progressIndicator invisible we have to set the visibility of dummyLabel to true.

Hope this helps. I have a question in StackOverFlow for the same. You can find it Forcing Vaadin Component to occupy it’s space in invisible state.

Also, there is a question asked by me in Vaadin forums. Lets hope they include this feature in the new versions of Vaadin.
Just for information, this feature already exists in adobe flex 3 and above. TO know more about flex please see Adobe Flex

Flex has a setVisible and a setRendered method. THe setVisible takes care of the visibility and setRendered takes care of rendering the component.
If the visibility of the component is false and rendered is true the component occupies its space but will not be visible in UI.

Hope this helps. Stay connected and stay Subscribed