Re: Problems with resizable display

On Monday, September 16, 2013 11:36:24 PM UTC+2, Blake wrote:

Greetings,

I am having a problem with what I would think would be a common goal.  I am trying to create a browser screen that automatically resizes and/or repositions widgets on a browser screen.  My first attempt was to create a browser screen that has four buttons, one on each corner of the screen.  As the screen is resized the buttons automatically reposition to remain in the four corners.

The code I show below gets close to this goal.  It creates four buttons that automatically reposition as the browser is resized.  (In this case the buttons correctly stay the same size.)  The problem I am having is that the buttons on the bottom are not flush to the bottom.  Same problem with the right side.  While the top and left correctly stay flushed, the bottom and right reposition well but I can't get them flush with the bottom and right.  How can I do that?

The code is as follows:

private boolean test() {RootLayoutPanel rootPanel = RootLayoutPanel.get();

rootPanel.clear();

rootPanel.setHeight("100%");

rootPanel.setWidth("100%");

This is wrong. The whole idea of the RootLayoutPanel is that it entirely covers the viewport, so don't mess with its size and position.

BTW, with layout panels, you define the size and position of the "child" when you add it to its parent layout panel; otherwise, don't use layout panels (similar to what Jens suggests).

VerticalPanel vp = new VerticalPanel();

vp.setWidth("100%");

vp.setHeight("100%");

"Modern" applications shouldn't (as a rule of thumb) need to use VerticalPanel and HorizontalPanel. Either use HTMLPanel / FlowPanel / SimplePanel (and a few other panels) along with CSS, or use layout panels (or possibly combine both approaches, but first understand what you're doing).

 

rootPanel.add(vp);

HorizontalPanel hp = new HorizontalPanel();

hp.setWidth("100%");

hp.add(new Button("Button 1"));

Label lbl = new Label(" ");

lbl.setWidth("100%");

hp.add(lbl);

hp.add(new Button("Button 2"));

vp.add(hp);

lbl = new Label(" ");

lbl.setHeight("100%");

vp.add(lbl);

hp = new HorizontalPanel();

hp.setWidth("100%");

hp.add(new Button("Button 3"));

lbl = new Label(" ");

lbl.setWidth("100%");

hp.add(lbl);

hp.add(new Button("Button 4"));

vp.add(hp);

}

One possibility (splitting the screen in four quarters, each containing a button aligned accordingly to its corner position; DISCLAIMER: untested):

RootLayoutPanel root = RootLayoutPanel.get();

Button topLeft = new Button("Top Left");

root.add(topLeft);

root.setWidgetLeftWidth(topLeft, 0, Unit.PX, 50, Unit.PCT);

root.setWidgetTopHeight(topLeft, 0, Unit.PX, 50 Unit.PCT);

root.setWidgetHorizontalAlignment(topLeft, Alignment.BEGIN);

root.setWidgetVerticalAlignment(topLeft, Alignment.BEGIN);

Button topRight = new Button("Top Right");

root.add(topRight);

root.setWidgetRightWidth(topRight, 0, Unit.PX, 50, Unit.PCT);

root.setWidgetTopHeight(topRight, 0, Unit.PX, 50 Unit.PCT);

root.setWidgetHorizontalAlignment(topRight, Alignment.END);

root.setWidgetVerticalAlignment(topRght, Alignment.BEGIN);

Button bottomLeft = new Button("Bottom Left");

root.add(bottomLeft);

root.setWidgetLeftWidth(bottomLeft, 0, Unit.PX, 50, Unit.PCT);

root.setWidgetBottomHeight(bottomLeft, 0, Unit.PX, 50 Unit.PCT);

root.setWidgetHorizontalAlignment(bottomLeft, Alignment.BEGIN);

root.setWidgetVerticalAlignment(bottomLeft, Alignment.END);

Button bottomRight = new Button("Bottom Right");

root.add(bottomRight);

root.setWidgetRightWidth(bottomRight, 0, Unit.PX, 50, Unit.PCT);

root.setWidgetBottomHeight(bottomRight, 0, Unit.PX, 50 Unit.PCT);

root.setWidgetHorizontalAlignment(bottomRight, Alignment.END);

root.setWidgetVerticalAlignment(topRght, Alignment.END);

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.