在浏览器中看不到带有SimplePanel的LayoutPanel

Question

我正在使用以下gwt代码来试验GWT的LayoutPanel和SimplePanel组件，但是当我运行以下示例时，我在网页中看不到任何内容，但是当我在bweoser（Chrome）中检查webapge时，我可以浏览所有dom布局面板。如果代码有任何问题，有人可以帮我解决。我还附上了用于参考的镀铬dom检查UI的快照。

package im.sma.gwt.samples.layoutpannels.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.LayoutPanel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class Sma_LayoutPanels implements EntryPoint {

    public void onModuleLoad() {
        SimplePanel west = new SimplePanel();
        SimplePanel east = new SimplePanel();
        SimplePanel middle = new SimplePanel();

        west.add(new Label("WEST"));
        east.add(new Label("EAST"));
        middle.add(new Label("Middle"));

        west.getElement().getStyle().setBackgroundColor("blue");
        east.getElement().getStyle().setBackgroundColor("pink");
        east.getElement().getStyle().setBackgroundColor("yellow");


        LayoutPanel holder = new LayoutPanel();
        holder.add(west);
        holder.add(east);
        holder.add(middle);

        holder.setWidgetLeftWidth(west, 0, Unit.PCT, 50, Unit.PCT);
        holder.setWidgetRightWidth(east, 0, Unit.PCT, 50, Unit.PCT);
        holder.setWidgetLeftRight(middle, 25, Unit.PCT, 25, Unit.PCT);
        holder.setWidgetTopBottom(middle, 25, Unit.PCT, 25, Unit.PCT);
        holder.forceLayout();

        RootPanel.get().add(holder);
    }
}

Answer 1

我的错误是，我使用的是RootPanel而不是RootLayoutPanel，因此用RootLayoutPanel替换最后一行解决了这个问题。

RootLayoutPanel.get().add(holder);

Answer 2

如果您想要可预测的结果，还应该使用SimpleLayoutPanel而不是SimplePanel。布局面板实现了ProvideResize和RequiresResize接口，可确保您的布局正确调整大小。

查看GWT文档http://www.gwtproject.org/doc/latest/DevGuideUiPanels.html