Vaadin 구성 요소가 보이지 않는 상태에서 공간을 차지하도록합니다.

Question

Vaadin 표시기에 레이블과 Progess Indicator가 있습니다. 동적으로 UI에 표시됩니다. 이 진행 표시기 아래에는 트리가 있습니다.

프로그램이 동적으로 진행률 표시기의 표시를 true로 설정하면 트리가 이동하고 이동으로 인해 UI가 흔들립니다.

보이지 않는 경우에도 Vaadin 구성 요소가 공간을 차지하게 만들 수있는 방법이 있습니까? 따라서 가시적 인 경우 다른 UI 구성 요소와 공간을 빌려서는 안됩니다.

내가 찾고있는 기능은 flex 및 actionscript 프로그래밍에서 setRendered (true)와 비슷한 기능입니다.

도움 주셔서 감사합니다.

Answer 1

마지막으로 내 질문에 대한 답변을 얻었습니다. 방금 보이지 않는 구성 요소를 텍스트가없는 더미 표시 레이블로 교체했습니다.

그리고 눈에 보이거나 보이지 않게 전환하는 데 사용됩니다.

I에게 asked the question in the Vaadin forum을, 여기가 Kim Leppanen에서 내가 가진 응답 : 당신이 false로 구성 요소의 가시성을 설정 한 경우 만약 angel (7)와

는 다음 구성 요소의 정보를 모든 브라우저로 전송되지 않습니다 - 그것은 구성 요소가 레이아웃에 전혀 존재하지 않는 것과 같습니다.

두 가지 해결책을 신속하게 찾을 수 있습니다. 가시성을 전환하려는 구성 요소의 크기를 알고있는 경우 레이블과 같은 자리 표시 자 구성 요소를 사용할 수 있습니다. 올바른 크기의 레이블을 구성 요소가있는 위치에 놓으십시오. 구성 요소를 가시적으로 설정하려면 레이블을 실제 구성 요소로 바꾸십시오.

두 번째 옵션은 CSS를 사용하는 것입니다. 숨기려는 구성 요소에 대해 css 속성 "visibility : hidden"을 적용하십시오. 구성 요소가 "진정으로"숨겨지지 않습니다. 버튼이라고 가정 해 봅시다. 사용자는 여전히 DOM 트리를 검사하고 코드의 버튼을보고 클라이언트 측에서 구성 요소의 가시성을 변경 한 다음 (예 : 개발자 도구 또는 방화 광을 사용하여) 레이아웃에서 볼 수있는 것처럼 버튼을보고 사용할 수 있습니다 .

여기에 사람들이 좀 더 유용한 답변을 추가 할 수 있기 때문에 여기에 올리고 있습니다. 자세한 내용은 this을 참조하십시오.

Answer 2

사용하면 눈에 보이지 않는 설정하지만 점유 공간을 유지하려는 기기에이 다음 예 :

Image home = new Image(); 
home.setSource(HOME); 
home.addStyleName("visibility: hidden"); 

또는

home.addStyleName("visibility: collapse");