TabLayoutPanel 中 ScrollPanel 中的 GWT TextArea - 如何获取 100% 的高度？答案

【问题标题】：GWT TextArea in ScrollPanel in TabLayoutPanel - how to take 100% of height?TabLayoutPanel 中 ScrollPanel 中的 GWT TextArea - 如何获取 100% 的高度？
【发布时间】：2012-01-14 02:03:30
【问题描述】：

这是一个展示我的问题的最小 UI。它是通常的 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());
    }
}

模块文件只是将ui添加到根目录：

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

【问题讨论】：

标签： gwt layout

【解决方案1】：

TabLayoutPanel 和ScrollPanel 都实现了RequireResize 接口，并使用绝对定位自动调整到可用空间。
您为 ScrollPanel 中的内容指定了相对高度 (100%)。这不起作用，因为父级中的大小未明确设置（有关更多详细信息，请参阅here）。

所以你可以：

在 ScrollPanel 中设置显式大小（以像素为单位），然后将 Textarea 高度设置为 100%。
扩展 TextArea 并实现 RequiresResize 接口（实现 onResize() 方法，您可以在其中设置 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。

【讨论】：

我喜欢这个，它几乎可以工作。问题是初始布局。起初 UI 看起来像以前，但是当我调整窗口大小以触发 onResize() 时，自定义 TextArea 会根据需要展开。如何在一开始就获得正确的布局？在将所有内容添加到 RootLayoutPanel 后，我尝试手动调用 onResize - 不起作用。显然有一些延迟，因为如果我将相同的调用放在延迟计时器中，它会起作用......但这一切都变得丑陋了。
通常RootLayoutPanel 应该负责在渲染/构造时在实现RequiresResize 接口的子小部件上调用onResize()。这实际上应该处理初始布局。我很惊讶它在你的情况下不起作用。您如何构建 TabLayoutPanel？手动调用 onResize() 将不起作用，因为小部件尚未附加到 DOM。（有关详细信息，请参阅here）。您可以尝试在TabLayoutPanel 上调用foreceLayout()，这应该可以解决它。
设置我的测试应用程序的代码很简单，我稍后会添加到问题中。它创建小部件并将其添加到RootLayoutPanel。
forceLayout() 也不起作用，除非我稍后用Timer 运行它。如果我在将 UI 添加到 RootLayoutPanel 后立即调用它，getParent().getOffsetHeight() 返回 0，如您评论中的链接中所述。
您的代码看起来不错，初始布局应该可以正常工作。您可以尝试删除所有 CSS 属性，并在各种 onResize() 函数（TextArea、TabLayoutPanel）中设置断点，并查看是否调用了 onResize 以及 getParent().getOFFsetHeight() 返回的值。我有类似的布局，它们无需任何额外代码即可工作。

【解决方案2】：

您将 TextArea 放置在 ScrollPanel 中，但 ScrollPanel 不是必需的，因为 TextArea 已经内置了可滚动性。如果您取出 ScrollPanel，它应该可以正常工作（在我的测试中可以正常工作）。

【讨论】：

这对我不起作用。也许这取决于浏览器和操作系统。我在 OS X 10.7，Chrome 上。 textarea 不滚动，查看后面几行的唯一方法是将光标放在 textarea 中并用箭头键向下移动。看起来 GWT 布局面板在 textarea 上设置了溢出：隐藏。
可能，但我的测试在 Windows 7 上的 Chrome 和 Firefox 中都有效，所以如果 Mac 上的 Chrome 在这方面表现不同，那就太奇怪了。也许您可以最小化您的代码示例并将其发布，以便我们可以看到问题可能出在哪里？
我在我的问题中完全使用了最小化的代码示例，除了我在 ui.xml 文件中注释掉了 2 行 - 的开始和结束标记。因此，正如您所建议的，TextArea 直接位于选项卡内。没有滚动。

【解决方案3】：

我将跳过这个问题的大小部分，但回答滚动部分（因为这似乎从未得到解决？）。

我遇到了同样的问题，所以我在选项卡内放置了一个ScrollPanel，并在其中嵌套了一个HTMLPanel，大小为父ScrollPanel 的宽度和高度的100%。然后，我使用panel.add( new HTML("my text" ) ); 填充它。

我还在我的实际长文本字符串中将"\n" 替换为"<br />"。（这适用于我的需要）。

当然，这与TextArea 不太一样，但它确实允许您在TabLayoutPanel 内显示长时间运行的滚动文本。

【讨论】：