GWT 페이지 하단의 TabLayoutPanel

Question

GWT의 페이지 맨 아래에 TabLayoutPanel을 넣을 수 있는지 알고 싶습니다. 불행히도 온라인 설명서가 거의 없습니다.

Answer 1

예 가능합니다. 가장 쉬운 방법은 DockLayoutPanel 영역을 사용하는 것입니다. 다른 LayoutPanel에 TabLayoutPanel을 래핑하여 내용이 올바르게 표시되도록해야합니다. 그렇지 않으면 TabLayoutPanel에 높이를 추가해야합니다. 나는 이것을 메모리에서 입력했지만 구문은 정확해야합니다.

<DockLayoutPanel unit="PX"> 
    <g:south size="200"> 
    <g:TabLayoutPanel barHeight="30" barUnit="PX"> 
     <g:tab> 
      <g:header>Tab 1</g:header> 
      <g:Label> Tab 1 content</g:Label> 
     </g:tab> 
     <g:tab> 
      <g:header>Tab 2</g:header> 
      <g:Label>Tab 2 content</g:Label> 
     </g:tab> 
    </g:TabLayoutPanel> 
    </g:south> 
    <g:center> 
    <g:FlowPanel> 
     <g:Label>Main page content</g:Label> 
    </g:FlowPanel> 
    <g:center> 
</DockLayoutPanel> 

Answer 2

매우 우아하지,하지만 작동 : CSS에서

public class BottomLabLayoutPanel extends TabLayoutPanel 
{ 
    public BottomLabLayoutPanel(double barHeight, Unit barUnit) 
    { 
     super(barHeight, barUnit); 

     LayoutPanel panel = (LayoutPanel)getWidget(); 
     if (panel.getWidgetCount() >= 2) 
     { 
      Widget w1 = panel.getWidget(0); 
      Widget w2 = panel.getWidget(1); 
      Element e1 = w1.getElement().getParentElement(); 
      Element e2 = w2.getElement().getParentElement(); 
      if (e1 != null) 
       e1.setClassName("BottomTabLayoutPanel TabPanel"); 
      if (e2 != null) 
       e2.setClassName("BottomTabLayoutPanel ContentPanel"); 
     } 
    } 
} 

:

.BottomTabLayoutPanel.TabPanel 
{ 
    top: auto !important; 
    bottom: 0px !important; 
} 

.BottomTabLayoutPanel.ContentPanel 
{ 
    top: 0px !important; 
    margin-bottom: 35px !important; 
}