GWT TabLayoutPanel 无法正确显示

Question

我必须扩展一个给定的 GWT 项目（我们称之为 X）并想添加一个窗口，我可以在其中可视化我的东西。因为我是 GWT 的新手，所以我创建了一个测试项目并尝试创建一个 TabLayoutPanel。在这个测试项目中，TabLayoutPanel 应按原样显示，但在 X 中却不是：

http://abload.de/img/tablayoutpanelc1svz.png

TabLayoutPanel 的代码来自 GWT 教程

uiBinder

<!-- HelloWidgetWorld.ui.xml -->
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<g:TabLayoutPanel ui:field='tabLayoutPanel' barUnit='EM' barHeight='3'>
    <g:tab>
        <g:header size='7'><b>HTML</b> header</g:header>
        <g:Label>able</g:Label>
    </g:tab>
    <g:tab>
        <g:customHeader size='7'>
            <g:Label>Custom header</g:Label>
        </g:customHeader>
        <g:Label>baker</g:Label>
    </g:tab>
</g:TabLayoutPanel>
</ui:UiBinder>

Java

public class HelloWidgetWorld extends Composite 
{
    interface IuiBinder extends UiBinder<Widget, HelloWidgetWorld> {}
    private static IuiBinder uiBinder = GWT.create(IuiBinder.class);

    @UiField TabLayoutPanel tabLayoutPanel;

    public HelloWidgetWorld()
    {
        initWidget(uiBinder.createAndBindUi(this));
    }   
}

在我的测试项目中使用它的代码是

public class Test implements EntryPoint 
{
    private Window HelloWidgetWorldWindow;
    public void onModuleLoad() 
    {
        RootLayoutPanel.get().add(new HelloWidgetWorld());
    }
}

通过尝试缩小问题范围，我最终在 X 中使用完全相同的代码，但仍然存在问题。所以我把这段代码复制到 X 中，所以 onModuleLoad() 代码是一样的。我还将测试项目中的 css 和 html 文件复制到 X 中，但面板看起来仍然不正常。

既然代码现在都是一样的，那它可以是其他项目文件或设置中的东西吗？

现在花了 5 个小时修好那个，但没有成功，我真的希望你能帮助我！

/编辑

我现在正在尝试重建给定的项目 X，从一个新项目开始，然后导入代码、库、js、css、*.xml 等。在每一步之后，我都会检查我的最小示例是否有效。也许这样我可以追踪哪个组件破坏了 TabLayoutPanel 可视化。我会在这里更新结果。

Answer 1

1. 在任何小部件（垂直/水平/...）面板中添加 TabLayoutPanel

2. 标签不显示，因为 TabLayoutPanel 没有任何高度或宽度（主要是百分比不起作用，您必须使用不同的单位）。

3. 检查您正在使用 GWT 2.5 中的新布局面板之一