# Layout

The UI library provides an integration with the layout library to allow defining layouts for windows easily. For this purpose, the UI library provides three keywords that are used to define windows: `window`, `frame`, and `dialog`. They work the same, except that they create classes that are derived from `Window`, `Frame`, and `Dialog` respectively.

Inside a class defined using one of these keywords it is possible to include a `layout` block that specifies the layout of the window. The contents of the layout block follows the domain specific language from the layout library. However, the UI library extends the syntax to also allow declaring variables inside the layout syntax. Declared variables will be added as members of the class, and will be initialized in the constructor. The UI library also wraps the entire layout in a border.

For example, a frame can be declared as follows:

    use ui;
    use core:geometry;

    // Creates an actor that inherits from ui.Frame.
    frame MyFrame {
        layout Grid {
            expandCol: 0;
            Button a("A") {}
            Button b("B") { rowspan: 2; }
            nextLine;

            Button c("C") {}
            nextLine;

            Button d("D") {}
            Button e("E") {}

            Button f("F") { row: 3; col: 2; }
            Button g("G") { row: 4; col: 1; colspan: 2; }
        }

        init() {
            init("My Window", Size(200, 200));
            create();

            a.onClick = () => print("Hello!");
        }
    }

    void main() {
        MyFrame frame;
        frame.waitForClose();
    }

Note that the UI library integrates computations of minimum size from the layout library. As such, the system will not allow the window to become smaller than its contents.

The UI library also adds special syntax for nesting containers. This is useful for placing certain parts of the layout as a child to another component, such as when using `ui.TabView`, `ui.Group`, or `ui.ScrollWindow`.

The syntax looks a lot like a regular `layout` declaration, except that the `container` keyword is used instead. This construct produces an expression (of type `Container`) that can be passed as a parameter to other components, as shown below:

    use ui;
    use core:geometry;

    frame MyFrame {
        layout Grid {
            expandCol: 0;
            wrapCols: 1;

            TabView {
                add: "Tab 1", container Grid {
                    expandCol: 0;
                    Button b1("Button 1") {}
                };
                add: "Tab 2", container Grid {
                    expandCol: 0;
                    Label l1("Label 1") {}
                };
            }
        }

        init() {
            init("My Window", Size(200, 200));
            create();
        }
    }

    // ...

The UI library automatically inserts a border at the root of each layout block. This can be suppressed by adding the text `without border` after either `layout` or `container`.