Creating a fluid panel in GWT to fill the page?

问题

I would like a panel in GWT to fill the page without actually having to set the size. Is there a way to do this? Currently I have the following:

public class Main  implements EntryPoint
{
    public void onModuleLoad()
    {
        HorizontalSplitPanel split = new HorizontalSplitPanel();
        //split.setSize("250px", "500px");
        split.setSplitPosition("30%");

        DecoratorPanel dp = new DecoratorPanel();
        dp.setWidget(split);

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

}

With the previous code snippet, nothing shows up. Is there a method call I am missing?

Thanks.

UPDATE Sep 17 '08 at 20:15

I put some buttons (explicitly set their size) on each side and that still doesn't work. I'm really surprised there isn't like a FillLayout class or a setFillLayout method or setDockStyle(DockStyle.Fill) or something like that. Maybe it's not possible? But for as popular as GWT is, I would think it would be possible.

UPDATE Sep 18 '08 at 14:38

I have tried setting the RootPanel width and height to 100% and that still didn't work. Thanks for the suggestion though, that seemed like it maybe was going to work. Any other suggestions??

回答1:

Google has answered the main part of your question in one of their FAQs: http://code.google.com/webtoolkit/doc/1.6/FAQ_UI.html#How_do_I_create_an_app_that_fills_the_page_vertically_when_the_b

The primary point is that you can't set height to 100%, you must do something like this:

final VerticalPanel vp = new VerticalPanel();
vp.add(mainPanel);
vp.setWidth("100%");
vp.setHeight(Window.getClientHeight() + "px");
Window.addResizeHandler(new ResizeHandler() {

  public void onResize(ResizeEvent event) {
    int height = event.getHeight();
    vp.setHeight(height + "px");
  }
});
RootPanel.get().add(vp);

回答2:

Ben's answer is very good, but is also out of date. A resize handler was necessary in GWT 1.6, but we are at 2.4 now. You can use a DockLayoutPanel to have your content fill the page vertically. See the sample mail app, which uses this panel.

回答3:

I think you'll need to put something on the left and/or right of the split (split.setLeftWidget(widget), split.setRightWidget(widget) OR split.add(widget), which will add first to the left, then to the right) in order for anything to show up.

回答4:

Try setting the width and/or height of the rootpanel to 100% before adding your widget.

回答5:

Panels automatically resize to the smallest visible width. So you must resize every panel you add to the RootPanel to 100% including your SplitPanel. The RootPanel itself does not need resizing. So try:

split.setWidth("100%");
split.setHeight("100%");

回答6:

The documentation for DecoratorPanel says:

If you set the width or height of the DecoratorPanel, you need to set the height and width of the middleCenter cell to 100% so that the middleCenter cell takes up all of the available space. If you do not set the width and height of the DecoratorPanel, it will wrap its contents tightly.

回答7:

The problem is that DecoratorPanel middleCenter cell will fill tight on your contents as default, and SplitPanel doesn't allow "100%" style size setting. To do what you want, set the table's style appropriately, on your CSS:

.gwt-DecoratorPanel .middleCenter { height: 100%; width: 100%; }

回答8:

For me it does not work if I just set the width like

panel.setWidth("100%");

The panel is a VerticalPanel that it just got a randomly size that I don't know where it comes from. But what @Ben Bederson commented worked very well for me after I added the line:

panel.setWidth(Window.getClientWidth() + "px");

Just this, nothing else. Thanks

来源：https://stackoverflow.com/questions/86901/creating-a-fluid-panel-in-gwt-to-fill-the-page

标签

java

gwt