GWT 질문입니다. 이런 종류의 탭 패널 또는 도킹 스테이션 패널을 구현하는 방법

Question

복잡한 GWT 질문이 있습니다. 누군가가 내게 몇 가지 조언을 줄 수 있기를 바랍니다.

다음과 같이 보이는 패널을 만들려고합니다 (왼쪽 내용 및 오른쪽 가운데 부분 (탭) 또는 오른쪽 상단 부분) (첫 번째 그림 참조)

첫째, 나는 탭 패널을 고려했다.하지만 탭 패널은 상단에 수평 탭이 있습니다. 내가 타사 라이브러리를 사용하지 않는 그래서이 작동하지 않습니다. 그리고

나는 피곤 docklayoutpanel.하지만 몇 가지 문제가 있습니다 나는 중간에 내용을 넣고 동쪽에 텍스트가있는 레이블을 붙인다. 탭의 높이는 내용의 높이와 같을 것이다. (두 번째 그림 참조) 나는 이것을 좋아하지 않는다. 나는 원하지 않는다. 공백이 나타납니다.

누구나 이런 종류의 패널을 구현하는 방법에 대해 좋은 생각이 있습니까?

고마워요.

감사합니다.

1 포토

|-------------------------| 

|------- content ---------|---------| 

|-------------------------|---tab---| 

|-------------------------|---------| 

| ------------------------| 

---

또한, 두번째 방법의 경우는 I docklayoutpanel 동부 지역을 설정하려고

|-------------------------|white space| 

|------- content ---------|-----------| 

|-------------------------|----tab----| 

|-------------------------|-----------| 

| ------------------------|white space| 

두번째 그림은 투명한한다. 그러나 나는 이것을하는 방법을 몰랐다. 공백 영역을 제거 할 지 확신하지 못합니다.

Answer 1

height: 100% 인 "동쪽"패널에 탭을 놓고 원하는 배경색을 지정하십시오. 메인 컨텐츠를 "중앙"패널에 배치하십시오. "북쪽"또는 "남쪽"을 사용하지 마십시오.

탭에 대해 세로 가운데 맞춤을 사용하려는 경우 가장 쉬운 방법은 VerticalPanel을 verticalAlignment="MIDDLE"과 함께 사용하는 것입니다.

<ui:style> 
    .centerPanel { background-color: royalblue; } 
    .eastPanel { background-color: lightblue; width: 100%; height: 100%; } 
</ui:style> 

<g:DockLayoutPanel unit="EM"> 

    <g:center> 
    <g:FlowPanel addStyleNames="{style.centerPanel}"> 
     <g:Label>Content</g:Label> 
    </g:FlowPanel> 
    </g:center> 

    <g:east size="8"> 
    <g:VerticalPanel addStyleNames="{style.eastPanel}" 
        verticalAlignment="MIDDLE"> 
     <g:FlowPanel> 
     <g:Label>Tab1</g:Label> 
     <g:Label>Tab2</g:Label> 
     </g:FlowPanel> 
    </g:VerticalPanel> 
    </g:east> 

</g:DockLayoutPanel> 

결과는 다음과 같습니다