PDA

View Full Version : Centered application layout with Viewport



DoNuT
28 Oct 2009, 8:01 AM
Hi everybody,

I changed the layout of my GXT application and now I'm facing some real problems with implementation

The basic version was something like that (simplified)



Viewport vp = new Viewport();
vp.setLayout(new BorderLayout());

// northern content with fixed height
LayoutContainer northContainer = new LayoutContainer();
vp.add(northContainer, new BorderLayoutData(LayoutRegion.NORTH, 120));

// center content
centerContainer = new LayoutContainer(new FitLayout());
centerContainer.add(new Button("BIGBUTTON"));
vp.add(centerContainer, new BorderLayoutData(LayoutRegion.CENTER));

RootPanel.get().add(vp);

Everything worked well for me - sizing was done by the Viewport, the northern panel had its 120 pixels height, the centered container and its child filled up the rest of the screen.

But now, requirements have changed - the content should have a fixed width, should be centered and height should by still sized dynamically...

So, i tried CenterLayout...



Viewport vp = new Viewport();
vp.setLayout(new CenterLayout());

LayoutContainer contentContainer = new LayoutContainer(new BorderLayout());
contentContainer.setWidth(1024);
// does this help at all...?
contentContainer.setAutoHeight(true);

// northern content with fixed height
LayoutContainer northContainer = new LayoutContainer();
contentContainer .add(northContainer, new BorderLayoutData(LayoutRegion.NORTH, 120));

// center content
centerContainer = new LayoutContainer(new FitLayout());
centerContainer.add(new Button("BIGBUTTON"));
contentContainer add(centerContainer, new BorderLayoutData(LayoutRegion.CENTER));

RootPanel.get().add(vp);
In the second version, the centerContainer has only the default height of the attached button, but never gets stretched to the full Viewport...

I thought of columns, but how should I (dynamically) size the space on the left and the right side of my applications content?

Thanks for any ideas...

Kind regards,
Florian

sven
28 Oct 2009, 8:04 AM
You can extend CenterLayout to center it only horizontally, with a fixed width and dynamic height.

Else you can use a rowlayout iwth oritentation horizontal. and 3 items in there. But i suggest the first one.