Using DockPLayoutPanel - can I get an autoexpanding south widget?

[King_V]

All,

Ok, I realize DockLayoutPanel is a full-screen sort of Panel, that
REQUIRES an explicit size for every widget attached.

So, given that, I'm wondering if what I want to do is even possible.

I'm trying to go for an application-like look. Essentially, the
screen will be in three sections:

1) The north section will have a MenuBar - no surprise there.
2) The center section will be the "guts" of the GUI.
3) The south section will be something like a Windows Taskbar. Right
now this is a FlowPanel.

The center section will basically have various items in it, and they
can be minimized. When this happens, I'd like to add them to the
taskbar at the bottom.

Now, here's the thing - if a lot items in the main section get
minimized, the FlowPanel will get more and more items added to it, and
eventually be wider than the screen.

Naturally, the FlowPanel would expand under normal circumstances to
form a new row - but since its size has been explicitly set, this does
not happen.

Now, my initial instinct is to somehow try and determine whether or
not the FlowPanel needs to vertically resize (how do I determine
this? Can it be determined?) and then use
DockLayoutPanel.setWidgetSize to perform the resizing "manually".

Is this possible?

Is there a simpler way to get the behavior I want?

Thanks.

[Danny Kirchmeier]

Now, my initial instinct is to somehow try and determine whether or  not the FlowPanel needs to vertically resize (how do I determine this?  Can it be determined?) and then use DockLayoutPanel.setWidgetSize to perform the resizing "manually". 

 

Sounds like a good approach. On the bottom flow panel, you can use element.getScrollHeight() and either getOffsetHeight or getClientHeight(I can't remember, sorry), to determine if you need to expand the flow panel. You should check this when the window is resized or when an item is added. When the scroll height is larger than the offset/client height, use DockLayoutPanel.setWidgetSize to resize the panel.

[Thomas Broyer]

Have you looked at the HeaderPanel? http://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/user/client/ui/HeaderPanel.html

[King_V]

Danny, Thomas,

Thanks for the suggestions.

I actually came up with a workaround - though Thomas, I think I like
the HeaderPanel idea, and may adapt it to my project instead.

What I'm doing currently is:
1) Attach a DockLayoutPanel to the RootPanel
2) Attach a DockPanel to the CENTER of the DockLayoutPanel - DockPanel
has the following style added - width: 100%
3) Attach a MenuBar to the NORTH part of the DockPanel
4) Attach a FlowPanel to the SOUTH part of the DockPanel - FlowPanel
has the following styles added - position: absolute; bottom: 0;

This seems to have done the trick for me.

Now if only I could get the MenuBar to wrap if the browser window is
too small... but that's something I asked about in a more recent post.

[Andrei]

Don't use DockLayoutPanel. Use LayoutPanel instead. It gives you
complete control: you can make any area expandable. Personally, I
never use DockLayoutPanel: it adds no useful functionality compared to
LayoutPanel, while the size of the compile code jumps if you use both
of these widgets.

If you want the menu to wrap, however, the best solution is to use a
FlowPanel (or HTMLpanel, if you use UIBinder), and CSS rules for your
menu items. Then the browser will do the work for you.