Issue with Window and autosize - auto width

[mathias]

Hello,

I'm sorry but I cannot get this thing to work, hoping someone can point out my mistake. I want a window with three buttons, and I want a layout with a label on top of them to take up the entire window width. If you take a look at the attached image it should be clear what I'm after and what not is happening...

I have made a simple test case which is the base of the attached screenshot so that you can see what I'm doing.
In short, I'd expect that calling setWidth100() on either the layout or the label would make it take up the entire window width, but clearly that isn't happening. I tried lots of stuff, for example addChild instead - that made it take up the width, but the layout got completely screwed up.

If someone could take a look at the below code and explain why the layout in my popup won't expand to the full window width, I'd be super happy!

public class Test implements EntryPoint {

    public void onModuleLoad() {

        VLayout mainLayout = new VLayout();
        mainLayout.setBorder("1px solid yellow");
        mainLayout.setWidth(500);
        mainLayout.setHeight(300);
        mainLayout.setMembersMargin(30);
        mainLayout.setLayoutTopMargin(20);
        IButton show = new IButton("popup");
        show.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent clickEvent) {
                MyPopup popup = new MyPopup();
                popup.show();
            }
        });
        mainLayout.addMember(show);
        mainLayout.draw();
    }


    class MyPopup extends Window {

        VLayout layout = new VLayout(10);
        HLayout buttonsLayout = new HLayout(10);

        MyPopup() {
            setTitle("Testing testing");
            setIsModal(true);
            setAlign(VerticalAlignment.TOP);
            setDefaultLayoutAlign(VerticalAlignment.TOP);
            setShowMinimizeButton(false);
            setShowModalMask(true);
            setAutoCenter(true);
            setCanDragResize(false);
            setChildrenSnapResizeToGrid(true);
            setCanDrag(true);
            setShowCloseButton(true);
            setShowStatusBar(false);


            layout.setMargin(20);
            layout.setWidth100();
            layout.setHeight100();
            layout.setBorder("1px solid red");
            layout.setMembersMargin(10);

            Label test = new Label("This is a label.");
            test.setBorder("1 px solid blue");
            layout.addMember(test);
            super.addItem(layout);

            buttonsLayout.setAutoHeight();
            buttonsLayout.setWidth100();
            buttonsLayout.setMargin(10);
            buttonsLayout.setMembersMargin(10);
            buttonsLayout.setAlign(Alignment.CENTER);

            IButton b1 = new IButton("First");
            IButton b2 = new IButton("Second");
            IButton b3 = new IButton("Third");

            buttonsLayout.addMember(b1);
            buttonsLayout.addMember(b2);
            buttonsLayout.addMember(b3);

            super.addItem(buttonsLayout);

            setAutoSize(true);
        }
    }

[Isomorphic]

You are telling the Window to auto-fit to the buttonsLayout, and the buttonsLayout to autofit to the Window. This is nonsense - one or the other needs a size.

It looks like what you probably want is just to remove setWidth100() from the buttonsLayout.

[mathias]

Well, the buttons do have a implicit width, which is set by the combined width of the buttons plus padding. So, what I'd like is for the window to autosize its width after how much the buttons take up (which is why the window has setAutoSize(true)) and this seems to work as I want as you can see in the picture.

But then I'd like the label expand to the same width as the window. I've tried lots of stuff, width100, autowitth etc. but to no avail so far.
I tried your advice - i.e. just removing the setWidth100. I tried both having nothing on the button layout, and having auto width, nothing made any difference.

Not sure what you mean by "one or the other needs a size"? As it stands, I don't call setSize() anywhere, but the window and the button layout have the width I want. My only problem is that the label above the button layout does not use up the entire window width.

[Isomorphic]

You are setting the buttonLayout to 100% of the Window's size but the Window is set to autosize to the buttonLayout. That's the part that's nonsense.

Leave no width on the buttonLayout and the window will autosize to the size of the contained buttons. If you want something to also match the buttons, add a ResizeHandler to the buttonLayout and size the other element to match.

[mathias]

Point taken regarding the autosize on both button layout and window, although it didn't break the width of the window.

It feels awkward that I need to add a resized handler, if I set the top layout to width100, in my humble it should automatically resize to the width of the window. This is how it would work in most other apps I have, IOS, Android etc.

However, I did as you say and added a resized handler, it never gets called. The ONLY thing I've gotten working is setting the top layout size manually, e.g. setSize(300), which I'd naturally like to avoid.

If you could look and see if I'm doing something wrong (which I don't think, I use resized handler in lots of other places), I'd be grateful. I also shortened the example:

[code]
public class Test implements EntryPoint {

public void onModuleLoad() {

VLayout mainLayout = new VLayout();
mainLayout.setBorder("1px solid yellow");
mainLayout.setWidth(500);
mainLayout.setHeight(300);
mainLayout.setMembersMargin(30);
mainLayout.setLayoutTopMargin(20);
IButton show = new IButton("popup");
show.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent clickEvent) {
MyPopup popup = new MyPopup();
popup.show();
}
});
mainLayout.addMember(show);
mainLayout.draw();
}


class MyPopup extends Window {

VLayout layout = new VLayout(10);
HLayout buttonsLayout = new HLayout(10);

MyPopup() {
setTitle("Testing testing");
setIsModal(true);

layout.setMargin(20);
layout.setHeight100();
layout.setBorder("1px solid red");
layout.setMembersMargin(10);

Label test = new Label("This is a label. Why isn't it width100()?");
test.setBorder("1 px solid blue");
test.setWidth100();
layout.addMember(test);
layout.setAutoWidth();
super.addItem(layout);

buttonsLayout.setAutoHeight();
buttonsLayout.setMargin(10);
buttonsLayout.setMembersMargin(10);
buttonsLayout.setAlign(Alignment.CENTER);

IButton b1 = new IButton("First");
IButton b2 = new IButton("Second");
IButton b3 = new IButton("Third");

buttonsLayout.addMember(b1);
buttonsLayout.addMember(b2);
buttonsLayout.addMember(b3);

buttonsLayout.addResizedHandler(new ResizedHandler() {
@Override
public void onResized(ResizedEvent resizedEvent) {
System.out.println("resized event: "+resizedEvent.getFiringCanvas().getWidth()+" : "+layout.getWidth());
layout.setWidth(resizedEvent.getFiringCanvas().getWidth());
}
});


super.addItem(buttonsLayout);

setAutoSize(true);
}
}
}
[code]

[Isomorphic]

There is no framework in which it would be valid to autosize two things to each other. But we have considering a property to make one widget size to the overflowed size of another (your actual use case here).

The ResizedHandler is actually to keep the sizes in sync if they continue to change after draw. For a one-time size match, you can just setWidth() after the Window is first drawn.