How to design a GWT Layout that Scrolls

In our previous post we showed you three different ways you can follow to implement your app’s layout using GWT. For this post, we would like to make some emphasis in a layout that has shown to be the trickiest of all: a scrollable layout.

While DockLayoutPanel is Google’s new preferred way to start an app layout, we have found that there are some limitations in the way the code is generated (specially since you have to combine it with a RootLayoutPanel) and this might not make it a fit for your project.

DockLayoutPanel case study: Google Wave

On last year Google I|O Conference, one of the big announcements -other than Google Wave itself- was that Wave was been built using Google Web Toolkit 2.0 and that one of the most powerful features they took advantage of was the new layout system, these new widgets enabled them to load the layout much faster than before and all of this thanks to the use CSS behind the scenes.

The way Google went to layout their new service was thru the use of DockLayoutPanel, now you are probably wondering… How do you know that? Let us show it for you:

Here it is a screenshot of my Google Wave’s account in a “normal” size window:

Now, the way that DockLayoutPanel works (and as a result of it’s parent the RootLayoutPanel) is that on page load it calculates the dimensions of its components based on the size of the window that will display it. Let’s resize a bit the page to see what we mean:

As you can see, the browser layout rearranges itself to fit as much as it can but a lot of stuff remain off the window; when I try to create a new wave I don’t even have enough space to see the text that I’m writing and I can hardly see the waves that I have in my inbox, now just imagine what if I had lots of windows and I would like to resize Google Wave to its a minimum size:

Don’t get us wrong, we are not saying that Google Wave is built in the wrong way. Despite that, we think the new layout system was meant for full browser experiences (read apps) and probably not meant for typical document-like implementations that scrolls (unless you want to go in and take care of that yourself, see ResizeComposite).

If you come to think of it Google Wave is not just another website, Wave was built as any desktop app out there and for that like any other of this kind you need enough real state to work with; at least that’s what how we have come to think of it.

Now, What if I want a normal web layout that scrolls?

So what if you just want to build a typical web layout that scroll when resized or when the content grows out of the tipical view. We struggle thru this question and after some testing we came to a simple solution: Add a ScrollPanel at the top and, for our particular case, enter a VerticalPanel within it, this makes the layout work even in the smallest of the windows. 

The following is a sample UiBinder that shows what we mean:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder
xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:gwt='urn:import:com.google.gwt.user.client.ui'>
<ui:style>
… 
</ui:style>
<gwt:ScrollPanel>
<gwt:VerticalPanel>
<gwt:Label>Header</gwt:Label>
<gwt:Label>
… Content ...
</gwt:Label> 
<gwt:Label>Footer</gwt:Label>
</gwt:VerticalPanel>
</gwt:ScrollPanel>
</ui:UiBinder>

That was easy right?

You can also come to the same result by just using

RootPanel.get().add(new VerticalPanel());

instead of using RootLayoutPanel and removing the ScrollPanel altogether from the UiBinder, but in our case it proved that using it helped us in other caveats of our implementation.

Update: Now, just to clarify we would like to point out that this solution will work as long as you stick to GWT’s Basic Panels inside the ScrollPanel - at least if what you want is the full page to scroll instead of just portions of the layout. This is because the way the new layout panels were implemented prohibit this implementation to work as you will expect, at least this is what we have found thru our experiments. We hope Google will fix this in the future as there is a lot to be gained using CSS-only implementations.

We hope this will get you from wherever you are to happier lands and hopefully to happy programming!

Posted by Helga Alvarez