Layout Class

Overview

Layout class that allows controls to be positioned and sized automatically.

Constructor

Layout()

Properties

Layout.Horizontal

A flag representing that a horizontal layout should be created.

Layout.Vertical

A flag representing that a vertical layout should be created.

Layout.Top

A flag representing that a layout item should have padding on the top.

Layout.Bottom

A flag representing that a layout item should have padding on the bottom.

Layout.Left

A flag representing that a layout item should have padding on the left.

Layout.Right

A flag representing that a layout item should have padding on the right.

Layout.All

A flag representing that a layout item should have padding on all sides.

Layout.Expand

A flag representing that a layout item should be expanded to fill the layout (layout items are expanded vertically for horizontal layouts and expanded horizontally for vertical layouts).

Layout.Center

A flag representing that a layout item should be centered in the layout (layout items are centered vertically for horizontal layouts and centered horizontally for vertical layouts).

Methods

Layout.layout

Positions and sizes the contents of the layout object.

Layout.show

Shows or hides the contents of the layout object.

Example

// Layout is the base class of BoxLayout and BorderBoxLayout.  It is not
// instantiated directly; what it contributes is the flags every add()
// call uses, plus show() and layout().
//
//   orientation  Layout.Horizontal, Layout.Vertical
//                (given to the BoxLayout constructor, not to add())
//   sizing       Layout.Expand  fill the cross axis
//                Layout.Center  centre on it instead
//   borders      Layout.Top, Bottom, Left, Right, All -- which sides
//                the add() call's border_size applies to.  A side flag
//                with no border size does nothing, and vice versa.

class MyForm extends Form {
    layout = null;
    detail = null;
    shown = true;

    constructor() {
        super("Layout Example", 100, 100, 380, 240);

        this.layout = new BoxLayout(Layout.Vertical);

        // Expand: fills the width, and keeps filling it as the form is
        // resized.  8 pixels of border down the left and right only.
        this.layout.add(new TextBox("expands", 0, 0, 100, 22),
                        0, Layout.Expand | Layout.Left | Layout.Right, 8);

        // Center: keeps its own width, sits in the middle instead
        this.layout.add(new TextBox("centered", 0, 0, 160, 22),
                        0, Layout.Center | Layout.All, 8);

        // a nested layout, so one show() call hides the whole row
        this.detail = new BoxLayout(Layout.Horizontal);
        this.detail.add(new Label("Detail:", 0, 0, 50, 18), 0, Layout.Center, 0);
        this.detail.add(new TextBox("", 0, 0, 100, 22), 1, Layout.Expand, 0);
        this.layout.add(this.detail, 0, Layout.Expand | Layout.All, 8);

        const button = new Button("Hide Detail", 0, 0, 100, 24);
        button.click.connect(this, this.onToggle);
        this.layout.add(button, 0, Layout.Center | Layout.All, 8);

        this.setLayout(this.layout);
    }

    onToggle(sender, event_args) {
        this.shown = !this.shown;

        // show() hides an entry of this layout -- a control or a nested
        // layout -- without removing it, so it comes back in place
        this.layout.show(this.detail, this.shown);

        // nothing moves until a layout pass runs
        this.layout.layout();

        sender.setLabel(this.shown ? "Hide Detail" : "Show Detail");
    }
}


const form = new MyForm();
form.show();
Application.run();