Wednesday, February 1, 2012

How to centre fixed size panel inside another layout panel or screen

Hi guys,

I manage to put my context panel to the middle of the browser page in
Vaadin. Seem my screenshots. It is done purely in Java code, the only
CSS used is for setting colors and font sizes.
Now I wondering how to make something similar with vanilla GWT.

In Vaadin it is one line command!
((VerticalLayout)outerContentPanel).setComponentAlignment(contextPanel,
Alignment.MIDDLE_CENTER);
What is the GWT equivalent?

How to centre a fixed size panel (LayoutPanel) inside resizable parent
container, let's say RootLayoutPanel as it is in this picture?
http://espinosa.s3-website-eu-west-1.amazonaws.com/vvregform2/vvregform/vvregform_progress_2011-01-24_-_screenshot_1.png

The central panel (form) can grow, see here:
http://espinosa.s3-website-eu-west-1.amazonaws.com/vvregform2/vvregform/vvregform_progress_2011-01-24_-_screenshot_3.png
so the solution must be flexible, accommodate any change in the
central panel.

Preferably programmatically (no UiBinding) and ideally without special
CSS tricks.

I made some progress with encapsulated LayoutPanels and setting
WidgetLeftRight and WidgetTopBottom. But I cannot figure out what
values make it centered for any particular inner contextPanel sizes:

// "parent", outer content panel, make it fill whole screen (page)
LayoutPanel outerContentPanel = new LayoutPanel();
outerContentPanel.setStyleName("outerContextPanel");
outerContentPanel.setHeight("100%");
outerContentPanel.setWidth("100%");

// inner content panel
LayoutPanel contentPanel = new LayoutPanel();
outerContentPanel.add(contentPanel);
contentPanel.setStyleName("contextPanel");
contentPanel.setSize("300px", "300px");

// make it centered (????)
outerContentPanel.setWidgetLeftRight(contentPanel, 50, Unit.PCT, 0,
Unit.PCT);
outerContentPanel.setWidgetTopBottom(contentPanel, 50, Unit.PCT, 0,
Unit.PCT);

// put some fancy content iside
HTML html = new HTML("<h1>Hello world centered!</h1>");
contentPanel.add(html);

// set as
RootLayoutPanel.get().add(outerContentPanel)

As values I tried 50% from all directions sides, it makes central
contextPanel nicely centred but also invisible, clipped completely.
When I use 50% from top and left only, 0% from bottom and right, the
left top corner of the inner panel is centered, nice, but i need to
get centered by its center.

I am out of my wits now
Any hints welcome
Thank you
Espinosa

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

No comments:

Post a Comment