java - 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 中的新布局面板之一