在GWT中创建流畅的面板来填充页面?
我希望GWT中的面板可以填充页面,而无需实际设置大小。有没有办法做到这一点?目前,我有以下内容:
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); } }
使用前面的代码片段,什么都没有显示。我缺少方法调用吗?
谢谢。
更新08年9月17日在20:15
我在每一侧都放了一些按钮(明确设置了它们的大小),但这仍然行不通。我真的很惊讶,没有像FillLayout类或者setFillLayout方法或者setDockStyle(DockStyle.Fill)之类的东西。也许不可能吗?但是对于像GWT这样流行的应用程序,我认为这是可能的。
更新08年9月18日在14:38
我尝试将RootPanel的宽度和高度设置为100%,但这仍然行不通。不过,感谢建议,这似乎很有用。还有其他建议吗?
解决方案
回答
我认为我们需要在拆分的左侧和/或者右侧放置一些内容(split.setLeftWidget(widget),split.setRightWidget(widget)或者split.add(widget),它们会先添加到左侧,然后添加右边)以便显示任何内容。
回答
在添加小部件之前,请尝试将根面板的宽度和/或者高度设置为100%。
回答
面板会自动调整为最小的可见宽度。因此,我们必须将添加到RootPanel的每个面板(包括SplitPanel)的大小调整为100%。 RootPanel本身不需要调整大小。因此,请尝试:
split.setWidth("100%"); split.setHeight("100%");
回答
DecoratorPanel的文档说:
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.
回答
问题在于DecoratorPanel middleCenter单元格将默认填充内容,而SplitPanel不允许设置" 100%"样式大小。
要执行所需的操作,请在CSS上适当地设置表格的样式:
.gwt-DecoratorPanel .middleCenter {
高度:100%;
宽度:100%;
}
回答
Google已通过以下常见问题解答之一回答了我们问题的主要部分:
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
要点是不能将高度设置为100%,我们必须执行以下操作:
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);