minigui: AlignmentLayout

[andre2007]

I would like to design a window like this with minigui: So far I wasn't able to find out, how to achieve this with the existing layout classes.

At the top there is an area which has a specified height and uses the full width of the window. Below on the left side there an area which has a specified width and and it uses the height of the window minus the height of the top area. In the bottom right there is an area which uses the rest.

In Delphi I can define it just like this

topRect.align = Alignment.top;
topRect.height = 50;

leftRect.align = Alignment.left;
leftRect.width = 100;

centerRect.align = Alignment.client;

I wonder whether something similiar could be added to minigui.

auto alignmentLayout = new AlignmentLayout();
alignmentLayout.setChildAlignment(topRect, 50, 0, Alignment.top);
alignmentLayout.setChildAlignment(leftRect, 0, 100, Alignment.left);
alignmentLayout.setChildAlignment(centerRect, 0, 0, Alignment.client);

Maybe in the future this would be a quite interesting layout feature for minigui?

[adamdruppe]

Yes, that's actually kinda similar to the GridLayout I just added, though the grid is always proportional size.

the way you'd do this with the existing things is you'd have just some kind of container widget - whatever subclass you want really, probably either VerticalLayout or HorizontalLayout - in the window that has an override int maxHeight() { return 50; }

You might do minHeight to that too.

Then after that, do a HorizontalLayout with the first child being something with a maxWidth, then the second child being just a generic Widget to act as a container for everything else.

Dinner in the oven about done. I'll make an example when I'm back online.

[adamdruppe]

import arsd.minigui;

class ColorWidget : Widget {
    this(Color color, Widget parent) {
        this.color = color;
        super(parent);
    }
    Color color;
    class Style : Widget.Style {
        override WidgetBackground background() { return WidgetBackground(color); }
    }
    mixin OverrideStyle!Style;
}

void main() {
    auto window = new Window;

    auto header = new class HorizontalLayout {
        this() { super(window); }
        override int maxHeight() { return 50; }
    };

    auto bar = new HorizontalLayout(window);

    auto left = new class VerticalLayout {
        this() { super(bar); }
        override int maxWidth() { return 100; }
    };

    auto container = new Widget(bar);

    auto headerColorBox = new ColorWidget(Color(0, 255, 255), header);
    auto leftColorBox = new ColorWidget(Color.green, left);
        auto rightColorBox = new ColorWidget(Color.purple, container);

    window.loop();
}

[andre2007]

Thank you Adam. This solves my issue.