Question

I’m trying to create a layoutPanel, spanning the width of the user’s screen, which will contain 4 images. These images should be scaled proportional to their width regardless of the screen height. Such as:

Landscape:
+----+----+----+----+
| i1 | i2 | i3 | i4 |
|    |    |    |    |
+----+----+----+----+
|                   |
+-------------------+

Portrait:
+--+--+--+--+
|i1|i2|i3|i4|
+--+--+--+--+
|           |
|           |
|           |
+-----------+

I’m attempting to do this by setting one panel equal to the width of the screen. That appears to work fine. But then when I try to set the height relative to the width the height always remains zero.

I’m using GWT through the eclipse plugin. I’ve attempted to use some line breaks to get variables at any given time but I can’t seem to get the line breaks to do anything (run as…, debug as…, during compile). However, not being able to get the debugging working is a separate issue.

Below is the code I’m using. If anyone can see what I’m doing wrong, please let me know. Thank you much!

public void onModuleLoad() {
    int layout_panel_width;
    int layout_panel_height;
    RootLayoutPanel rootLayoutPanel = RootLayoutPanel.get();
    rootLayoutPanel.setSize("100%", "100%");

    LayoutPanel layoutPanel = new LayoutPanel();
    rootLayoutPanel.add(layoutPanel);
    rootLayoutPanel.setWidgetLeftWidth(layoutPanel, 0.0, Unit.PCT, 100.0, Unit.PCT);
    layout_panel_width = layoutPanel.getOffsetWidth();
    layout_panel_height = layout_panel_width * 70 / 128;
    rootLayoutPanel.setWidgetTopHeight(layoutPanel, 0.0, Unit.PCT, layout_panel_height, Unit.PX);

    LayoutPanel lp1 = new LayoutPanel();
    layoutPanel.add(lp1);
    layoutPanel.setWidgetLeftWidth(lp1, 0.0, Unit.PCT, 25.0, Unit.PCT);
    layoutPanel.setWidgetTopHeight(lp1, 0.0, Unit.PCT, layout_panel_height, Unit.PX);
    Image i1 = new Image("images/single_test_sprite.png");
    lp1.add(i1);
    lp1.setWidgetLeftWidth(i1, 0.0, Unit.PCT, 100.0, Unit.PCT);
    lp1.setWidgetTopHeight(i1, 0.0, Unit.PCT, 100.0, Unit.PCT);

    LayoutPanel lp2 = new LayoutPanel();
    layoutPanel.add(lp2);
    layoutPanel.setWidgetLeftWidth(lp2, 25.0, Unit.PCT, 25.0, Unit.PCT);
    layoutPanel.setWidgetTopHeight(lp2, 0.0, Unit.PCT, layout_panel_height, Unit.PX);
    Image i2 = new Image("images/single_test_sprite.png");
    lp2.add(i2);
    lp2.setWidgetLeftWidth(i2, 0.0, Unit.PCT, 100.0, Unit.PCT);
    lp2.setWidgetTopHeight(i2, 0.0, Unit.PCT, 100.0, Unit.PCT);

    LayoutPanel lp3 = new LayoutPanel();
    layoutPanel.add(lp3);
    layoutPanel.setWidgetLeftWidth(lp3, 50.0, Unit.PCT, 25.0, Unit.PCT);
    layoutPanel.setWidgetTopHeight(lp3, 0.0, Unit.PCT, layout_panel_height, Unit.PX);
    Image i3 = new Image("images/single_test_sprite.png");
    lp3.add(i3);
    lp3.setWidgetLeftWidth(i3, 0.0, Unit.PCT, 100.0, Unit.PCT);
    lp3.setWidgetTopHeight(i3, 0.0, Unit.PCT, 100.0, Unit.PCT);

    LayoutPanel lp4 = new LayoutPanel();
    layoutPanel.add(lp4);
    layoutPanel.setWidgetLeftWidth(lp4, 75.0, Unit.PCT, 25.0, Unit.PCT);
    layoutPanel.setWidgetTopHeight(lp4, 0.0, Unit.PCT, layout_panel_height, Unit.PX);
    Image i4 = new Image("images/single_test_sprite.png");
    lp4.add(i4);
    lp4.setWidgetLeftWidth(i4, 0.0, Unit.PCT, 100.0, Unit.PCT);
    lp4.setWidgetTopHeight(i4, 0.0, Unit.PCT, 100.0, Unit.PCT);
}

Answer 1

This is what you need:

public void onModuleLoad() {
    RootLayoutPanel rootLayoutPanel = RootLayoutPanel.get();

    FlowPanel flowPanel = new FlowPanel();
    flowPanel.addStyleName("my_images_panel");
    rootLayoutPanel.add(flowPanel);

    Image i1 = new Image("images/single_test_sprite.png");
    Image i2 = new Image("images/single_test_sprite.png");
    Image i3 = new Image("images/single_test_sprite.png");
    Image i4 = new Image("images/single_test_sprite.png");

    flowPanel.add(i1);
    flowPanel.add(i2);
    flowPanel.add(i3);
    flowPanel.add(i4);
}

Then, in your CSS file:

.my_images_panel img {
    float: left;
    width: 25%;
}

---

Problem with the original code (taken from answer comments):

Every widget has a width and height of zero until the browser completes rendering it. You need to use Scheduler to wait until the rendering is finished, and after that you can use getOffsetHeight() and getOffsetWidth()