How does Component.setVisible() method work?

Question

I have some experience with GWT . In GWT , widget.setVisible() method will add style="display:none" style to widget. But component of vaadin wouldn't . I checked with firebug , I can't see my component while set component's visible to false. Why ?

I think that should be also have hidden style instead of not containing. I reallize that vaadin's codes were server side. But sometimes , if I would like to just hidden (set style display to none) , has there anyway to accomplish this instead of using css ?

I don't understand concept of what different between without adding component and setVisible(false) ?

Answer 1

As you already noticed, an invisible component is not transferred from server to browser, and from browser's point of view the component doesn't exist. This approach has to benefits:

1. Less data to transfer from server to client
2. Security: User cannot inspect invisible components' generated HTML with tools like Firebug because those doesn't exist on the browser.

So basically from browser's point of view it's the same thing that you don't add it to the UI at all. But usually it's just easier to toggle component's visibility instead of adding and removing it from its parent.

If you want to hide components with CSS, you can do it by defining your own theme and adding a style for that there. Then just apply the style for the component you want to hide by using the addStyleName method.

Answer 2

SETVISIBLE Sets the visibility of the component.

Visible components are drawn in the user interface, while invisible ones are not. The effect is not merely a cosmetic CSS change - no information about an invisible component will be sent to the client. The effect is thus the same as removing the component from its parent.

So as the documentation says invisible components are not not visible.