ScrollPanel中的GWT TabLayoutPanel

Question

我正在努力理解他們在2.0中引入的GWT布局系統。 有人建議這樣做，但它似乎比舊方法復雜得多。

我想做的（我認為這是一個非常基本的設計）是構建一個帶有標題，左側垂直菜單，頁腳和滾動內容部分的應用程序。

因此，為此，您可以執行以下操作：

DockLayoutPanel panel = new DockLayoutPanel();

FlowPanel header = new FlowPanel();
FlowPanel menu = new FlowPanel();
FlowPanel footer = new FlowPanel();

ScrollPanel content = new ScrollPanel();

panel.addNorth(header);
panel.addWest(menu);
panel.addSouth(footer);

panel.add(content);

RootLayoutPanel.get().add(panel);

那很好。 除此之外，ScrollPanel（所有內容都存放在其中）顯然中斷了布局流程。 因此，在我的活動中，我有：

@Override
public void start(AcceptsOneWidget panel, EventBus eventBus)
{
    FlowPanel viewPanel = new FlowPanel();

    panel.add(viewPanel);
}

如果將TabLayoutPanel添加到viewPanel，它將無法正確顯示。 我必須將其添加到附加到LayoutPanel的LayoutPanel的LayoutPanel上，一直到RootLayoutPanel。

因此，我嘗試這樣做：

@Override
public void start(AcceptsOneWidget panel, EventBus eventBus)
{
    LayouPanel viewPanel = new LayoutPanel();

    panel.add(viewPanel);
}

在我的ui：binder中，我有：

<g:LayoutPanel>
    <g:layer>
        <g:TabLayoutPanel barHeight="3.33" barUnit="EM" height="500px">
            <!-- tabs go here -->
        </g:TabLayoutPanel>
    </g:layer>
</g:LayoutPanel>

所以這里有兩件事。

1. 我不想設定高度。 我希望選項卡面板與內容一樣大。 我不明白為什么您必須使用這種“更好的”布局應用程序的方法來設置高度。

2. 它仍然完全不顯示在屏幕上。 我假設是因為它被附加到ScrollPanel。 令我困惑的是ScrollPanel確實實現了RequiresSize和ProvidesResize，因此它不是有效的LayoutPanel嗎？ 這實際上就是LayoutPanel所做的所有事情。 這是一個實現這些接口的ComplexPanel

當我檢查頁面時，將鼠標懸停在TabLayoutPanel應該位於的位置上時，我會看到一個藍色的高光（在Chrome中），好像它在那里一樣，但是似乎

<g:layer> 

包裝它的沒有高度，因此它隱藏了TabLayoutPanel。 實際上，如果我在查看器中對其進行編輯以使其具有高度，則TabLayoutPanel確實會顯示。

我在這里做錯了什么嗎？ 我非常想做：

RootLayoutPanel> DockLayoutPanel> ScrollPanel> *某些容器> TabLayoutPanel

而為了……工作。 我正在嘗試將當前的應用程序轉換為這種新的布局內容，以擺脫所有在后台生成的表，但是這似乎會導致更多的問題而不是解決的。

*此容器在“標簽”面板上方和下方都有內容

Answer 1

建議布局中的ScrollPanel將占據DockLayoutPanel為其分配的空間。 如果“某些容器”從不大於分配給ScrollPanel的空間，則ScrollPanel將永遠不會滾動。 如果“某些容器”可能變大（即需要滾動），則此容器無法從ScrollPanel獲得其大小-應該明確設置其高度，或者應該是隨其內容增長的常規FlowPanel。 在這兩種情況下，此“某些容器”將無法為其子級提供任何大小，包括TabLayoutPanel。

不看需求就很難給出建議，但是如果您需要在隨其自身內容而增長的面板中包括TabLayoutPanel，則必須自己設置其高度-使用代碼或CSS。