GWT TextArea в ScrollPanel в TabLayoutPanel - как взять 100% высоты?

Question

Здесь показан пользовательский интерфейс, демонстрирующий мою проблему.Это обычный шаблон UIBinder, плюс три виджета: TabLayoutPanel, ScrollPanel, TextArea.Я хочу, чтобы TextArea занимала все доступное пространство вкладки, и я хочу, чтобы на ней была полоса прокрутки, если она не помещается.Но этот код возвращает TextArea, длина которого составляет две строки.Как вы это исправите?Почему игнорируется высота?

В файле ui.xml:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui">
  <ui:style>           
        .scrollPanel {
            height: 100%;
        }
        .textArea {
            height: 100%;
        }
      </ui:style>
  <g:TabLayoutPanel barHeight="20" barUnit='PX'>
     <g:tab>
       <g:header>Text Area</g:header>
       <g:ScrollPanel styleName='{style.scrollPanel}'>
         <g:TextArea ui:field='textArea' styleName='{style.textArea}'></g:TextArea>
       </g:ScrollPanel>
     </g:tab>
  </g:TabLayoutPanel>
</ui:UiBinder> 

И в файле Java:

package com....client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.ResizeComposite;
import com.google.gwt.user.client.ui.TextArea;
import com.google.gwt.user.client.ui.Widget;

public class BugDemoLayout extends ResizeComposite {

    private static BugDemoLayoutUiBinder uiBinder = GWT.create(BugDemoLayoutUiBinder.class);

    interface BugDemoLayoutUiBinder extends UiBinder<Widget, BugDemoLayout> {}

    @UiField TextArea textArea;

    public BugDemoLayout() {
        initWidget(uiBinder.createAndBindUi(this));
        StringBuilder junk = new StringBuilder();
        for (int i=1; i<300; i++) {
            junk.append("Line " + i + "\n");            
        }
        textArea.setText(junk.toString());
    }
}

Файл модуля просто добавляет пользовательский интерфейс в корень:

public void onModuleLoad() {       
   BugDemoLayout bd = new BugDemoLayout();
   RootLayoutPanel.get().add(bd);

Answer 1

TabLayoutPanel и ScrollPanel оба реализуют интерфейс RequireResize и автоматически изменяют размер до доступного пространства, используя абсолютное позиционирование.
Вы указали относительную высоту (100%) для содержимого внутри ScrollPanel.Это не работает, потому что размер в родительском элементе явно не установлен (см. здесь для более подробной информации).

Таким образом, вы можете:

1. Установить явный размер в ScrollPanel в пикселях, а затем установить для высоты Textarea значение 100%.
2. Расширить TextArea и реализоватьинтерфейс RequiresResize (реализуйте метод onResize (), в котором вы устанавливаете высоту / ширину TextArea

. Второй подход - более чистый, рекомендуемый, так как он также изменяет размер TextArea, когдаВы изменяете размер окна браузера. Это будет выглядеть примерно так:

TextArea:

public class ResizableTextArea extends TextArea implements RequiresResize {

     public void onResize() {

         int height = getParent().getOffsetHeight();
         int width = getParent().getOffsetWidth();
         setSize(width+"px",height+"px");
     }
}

Вы должны поместить TabLayoutPanel в RootLayoutPanel. Это обеспечитнепрерывная цепочка LayoutPanels или виджетов, которые реализуют интерфейсы RequiresResize / ProvidesResize вплоть до вашей пользовательской TextArea.

Answer 2

Я собираюсь пропустить часть определения размера этого вопроса, но отвечу на прокручиваемую часть (как это никогда не казалось решенным?).

У меня была такая же проблема, поэтому я поместил ScrollPanel внутри вкладки и вложил в нее HTMLPanel, размером до 100% ширины и высоты родительского элемента ScrollPanel.Затем я использовал panel.add( new HTML("my text" ) );, чтобы заполнить его.

Я также заменил "\n" на "<br />" в моей реальной длинной текстовой строке.(Это было применимо для моих нужд).

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

Answer 3

Вы размещаете TextArea внутри ScrollPanel, но ScrollPanel не требуется, так как TextArea уже имеет встроенную прокручиваемость.Если вы достанете ScrollPanel, он должен работать нормально (в моем тестировании это работает).