Re: Problems with resizable display

Dear Thomas,

Thank you very much for your feedback.  I really appreciate the help.  I will respond inline below:

On Tue, Sep 17, 2013 at 3:03 AM, Thomas Broyer <t.broyer@gmail.com> wrote:

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).

You are very right, I don't understand what is going on.  I've tried to find a book with a good chapter on layout but have been unable.  They all have a page or two on one specific area or another, but none has a complete description of the whole mechanism that I know of.  Suggestions are appreciated.

I am trying to avoid html and css as far as possible.  Actually, this is the main reason I use GWT.  I don't want to start combining HTML/CSS/JavaScript.  It is ugly, needlessly complex, and nothing more than a least-common-denominator technology which is a product of the political fighting within the industry.  I want to do everything in the parts of GWT that are all Java.  Given the work I have done thus far with GWT and Sencha GXT, I think this is possible.

More below.

 

 

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);

I am tied up much of today but will try this ASAP.  

I have a very large app written in Flex.  When the user resizes the screen, all of the widgets reposition while retaining their relative position.  Most remain the same size, but some, like grids, expand to take advantage of any additional screen space.  This is the effect I am trying to get to.  I have some awareness of the quadrant idea but intuitively felt that too rigid to achieve the desired effect, so I avoided it.  Perhaps I should rethink that.  Do you think the quadrant approach would achieve the affect I desire?

Thank you very much for your help!

Blake McBride

--
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.