具有SimplePanel的LayoutPanel在瀏覽器中不可見

Question

我正在使用以下gwt代碼嘗試GWT的LayoutPanel和SimplePanel組件，但是，當我運行以下示例時，在網頁中看不到任何內容，但是當我在bweoser（Chrome）中檢查webapge時，可以瀏覽所有布局面板的dom。 如果代碼有任何問題，誰能幫助我確定一下。 我還附上了chrome dom inspection UI的snaphot以供參考。

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 。 布局面板實現了ProvidesResize和RequiresResize接口，可確保布局正確調整大小。

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