GWT: resizable layout without RootLayoutPanel?
I'm using GWT 2.3 and have what I think is an extremely common layout scenario that doesn't seem to be very well supported -- but I hope StackOverflow can tell me I'm looking at the problem wrong.
I'm using layout panels to arrange my app. Typically, you put a layout panel into the RootLayoutPanel, where it takes over the whole browser window.
However, I have a site header and footer that need to be outside of GWT.
The problem is, as the docs clearly say, if you insert a layout panel into an arbitrary HTML element of the page instead of using the RootLayoutPanel, you lose the automatic resize behavior. You m开发者_开发知识库ust specify the layout panel's starting size, and do any resizing manually.
How would I achieve this manual resizing? I'm pretty sure I can track the resizing of the HTML element via javascript, but how do I then interact with GWT to tell it the new size?
Thanks!
I would recommend using css absolute positioning in your html file :
<body style='position:absolute; top:10em; bottom:10em; left:0; right:0;>
<div id="top" style="position:absolute; left:0; top:-10em; bottom:0; right:0;">
<p> THIS IS THE TOP BANNER </p>
</div>
<div id="bottom" style="position:absolute; left:0; top:100%; bottom:0; right:0;">
<p> THIS IS THE BOTTOM BANNER </p>
</div>
</body>
Your RootLayoutPanel will attach to the body, which now has a 10em top and bottom margin.
One possible pure GWT solution. You can add a resize handler. In the resize event you can get the new dimensions and resize your component.
The GWT mail sample pre GWT 2.0 Mail used "manual" resizing (but its a bit out of date).
http://code.google.com/p/google-web-toolkit/source/browse/releases/1.7/samples/mail/src/com/google/gwt/sample/mail/client/Mail.java
Basically, you want to hook into the window resize event handler:
// Hook the window resize event, so that we can adjust the UI.
Window.addResizeHandler(new ResizeHandler() {
public void onResizeA(int width, int height) {
// Adjust each immediate child widget by calling child.onResize()
}
}
加载中,请稍侯......
精彩评论