Getting a component to resize as the window is resized

[bgilstrap]

I am attempting to create an app where there are some components at the top and the left that take up a fixed amount of space, and one component takes up the rest of the space. The main component shows scroll bars to allow scrolling when it's contents don't fit, and should resize to always take up the remainder of the window without causing the browser to show scroll bars.

The only way I've found to do this is to create a window resize handler and track window resizes. I have to think there's an easier way to do this but after digging through the code, the javascript reference (for SmartClient), and the javadoc for SmartGWT, I haven't figured out how to do it (and I didn't find a sample with source code that shows how to do it).

Some sample code, which I have to think can be simplified, is below. How do I do this?

Thanks,
Brian

package client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Element;
import com.google.gwt.event.logical.shared.ResizeEvent;
import com.google.gwt.event.logical.shared.ResizeHandler;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.Window;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.types.VisibilityMode;
import com.smartgwt.client.widgets.Button;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.layout.*;
import com.smartgwt.client.widgets.tile.TileGrid;
import com.smartgwt.client.widgets.tile.TileRecord;
import com.smartgwt.client.widgets.viewer.DetailViewerField;

public class Foo implements EntryPoint {


public void onModuleLoad() {

final SectionStack sectionStack = new SectionStack();
sectionStack.setVisibilityMode(VisibilityMode.MULTIPLE);
sectionStack.setWidth100();
sectionStack.setHeight100();

final Canvas header = new Button("My Button");
SectionStackSection context = new SectionStackSection("Context");
context.addItem(header);
context.setResizeable(false);
context.setShowHeader(false);
context.setExpanded(true);
sectionStack.addSection(context);

SectionStackSection mainArea = new SectionStackSection("View");
mainArea.setExpanded(true);
mainArea.setCanCollapse(false);
mainArea.setShowHeader(false);
final int gutterWidth = 35;
Layout layout = new HStack();
layout.setWidth100();
layout.setHeight100();
final Canvas empty = new Canvas();
empty.setWidth(gutterWidth);
layout.addMember(empty);
final TileGrid portlets = createMainContent();
portlets.setOverflow(Overflow.SCROLL);
portlets.setWidth(Window.getClientWidth() - gutterWidth);
Window.addResizeHandler(new ResizeHandler() {
int width;
boolean haveTimer = false;
Timer t = new Timer() {
@Override
public void run() {
adjustSize();
}
};

public void onResize(ResizeEvent resizeEvent) {
adjustSize();
t.cancel();
t.schedule(100);
}

private void adjustSize() {
portlets.setWidth(Window.getClientWidth() - gutterWidth);
portlets.setHeight(Window.getClientHeight() - header.getHeight());
}
});
layout.addMember(portlets);
mainArea.addItem(layout);
sectionStack.addSection(mainArea);
sectionStack.draw();

Element e = DOM.getElementById("loading");
e.getParentElement().removeChild(e);
}

private Layout createComplexLayout() {
ListGrid listGrid = new ListGrid();
listGrid.setWidth(300);
listGrid.setHeight(400);
listGrid.setDataSource(AnimalXmlDS.getInstance());
listGrid.setAutoFetchData(true);
listGrid.setCanDragRecordsOut(true);
listGrid.setCanAcceptDroppedRecords(true);
listGrid.setCanReorderRecords(true);

ListGridField commonNameField2 = new ListGridField("commonName");
ListGridField lifeSpanField = new ListGridField("lifeSpan");
lifeSpanField.setWidth(50);
ListGridField statusField = new ListGridField("status");
listGrid.setFields(commonNameField2, lifeSpanField, statusField);

VLayout layout = new VLayout();
layout.addMember(listGrid);
return layout;
}

private TileGrid createMainContent() {
TileGrid tileGrid = new TileGrid();
tileGrid.setTileWidth(150);
tileGrid.setTileHeight(150);
tileGrid.setCanAcceptDrop(true);
tileGrid.setCanDrag(true);
tileGrid.setData(new TileRecord[]{});

DetailViewerField pictureField = new DetailViewerField("picture");
pictureField.setType("image");
pictureField.setImageURLPrefix("animals/");
DetailViewerField commonNameField = new DetailViewerField("commonName");

tileGrid.setFields(pictureField, commonNameField);
return tileGrid;
}

}

[warren]

you could try

I haven't test this in your case, but you could try laying things out like:

HLayout
|
| -->
VLayoutL | VLayoutR (your main component for resizing should be setWidth100 and setHeight100)

It will fill up your VLayoutR and resize with it.