GWT: resizable layout without RootLayoutPanel?

2
votes

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 must 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!

2
gwtlayout

2 Answers

4
votes

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.

1
votes

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() 
   }
 }