GWT TabLayoutPanel внутри ScrollPanel

Question

Я очень стараюсь понять систему макетов GWT, которую они представили в версии 2.0. Предполагается, что это рекомендуется, но, похоже, это намного сложнее, чем по-старому.

Что я хочу сделать (это, по моему мнению, очень простой дизайн) - это создание приложения с заголовком, левым вертикальным меню, нижним колонтитулом и секцией прокрутки контента.

Таким образом, чтобы сделать это, вы делаете это:

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: вяжущее, у меня есть:

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

So 2 вещи здесь.

1. Я не хочу устанавливать высоту. Я хочу, чтобы панель вкладок была такой же большой, как контент. Я не понимаю, почему вам нужно устанавливать высоту в этом «лучшем» методе размещения вашего приложения.

2. Он по-прежнему не отображается на экране вообще. Я предполагаю, потому что он привязан к ScrollPanel. Что меня смущает, так это то, что ScrollPanel действительно реализует RequiresSize и ProvidesResize, так разве это не допустимая LayoutPanel? Это буквально все LayoutPanel. Это ComplexPanel, который реализует эти интерфейсы

Когда я осмотреть страницу, и наведите курсор мыши, где TabLayoutPanel должно быть, я получаю голубой блик (в Chrome), как если бы он был там, но мне кажется,

<g:layer> 

, который обертывает его, не имеет высоты, поэтому он скрывает TabLayoutPanel. Фактически, если я редактирую его в средстве просмотра, чтобы иметь высоту, TabLayoutPanel показывает.

Я делаю что-то принципиально неправильно здесь? Я очень хотел бы сделать:

RootLayoutPanel> DockLayoutPanel> ScrollPanel> * Некоторые Container> TabLayoutPanel

И для вещей просто ... работы. Я пытаюсь преобразовать свое текущее приложение в этот новый материал макета, чтобы избавиться от всех таблиц, которые генерируются под капотом, но, похоже, это создает больше проблем, чем исправляет.

* Этот контейнер есть вещи выше и ниже Tab Panel

Answer 1

ScrollPanel в предлагаемом макете будет занимать пространство, данное ему DockLayoutPanel. Если «Some Container» никогда не больше пространства, выделенного ScrollPanel, ScrollPanel никогда не будет прокручиваться. Если «Some Container» может стать больше (т.необходимость прокрутки), то этот контейнер не может получить свой размер от ScrollPanel - его высота должна быть либо явно задана, либо должна быть регулярной FlowPanel, которая растет с ее содержимым. В обоих случаях этот «Some Container» не сможет обеспечить размер своих детей, включая TabLayoutPanel.

Трудно дать совет, не видя требований, но если вам нужно включить TabLayoutPanel внутри панели, которая растет с собственным контентом, вы должны сами установить ее высоту - в коде или CSS.