Layout class that allows controls to be positioned and sized automatically in a horizontal or vertical row.
// BoxLayout arranges its entries in one row or one column. Anything
// more complex is built by nesting them.
//
// add(item, proportion, layout_flags, border_size):
// proportion how leftover space along the layout's own axis is
// shared. 0 = take only what you need; 1 and up divide
// the remainder in that ratio.
// flags/border the Layout.* constants and the border width.
//
// addSpacer(size) is a fixed gap; addStretchSpacer() soaks up slack,
// which is how a control gets pushed to the far end of a row.
class MyForm extends Form {
rows = null;
entry = null;
count = 0;
constructor() {
super("BoxLayout Example", 100, 100, 400, 300);
// the rows get their own layout, so the button can append to it
this.rows = new BoxLayout(Layout.Vertical);
// the text box takes proportion 1 and the button 0, so the box
// absorbs every extra pixel and the button keeps its width
this.entry = new TextBox("", 0, 0, 100, 22);
const add_button = new Button("Add", 0, 0, 60, 24);
add_button.click.connect(this, this.onAdd);
const input = new BoxLayout(Layout.Horizontal);
input.add(this.entry, 1, Layout.Expand, 0);
input.addSpacer(8);
input.add(add_button, 0, Layout.Center, 0);
// only rows has a proportion above 0, so only it grows when the
// form is made taller
const main = new BoxLayout(Layout.Vertical);
main.add(this.rows, 1, Layout.Expand | Layout.All, 8);
main.add(input, 0, Layout.Expand | Layout.All, 8);
// insert() is add() with a position -- an index, or an existing
// entry to go in front of
main.insert(input, new Label("Type a name:", 0, 0, 200, 18),
0, Layout.Left | Layout.Right, 8);
this.setLayout(main);
}
onAdd(sender, event_args) {
const name = this.entry.getText();
if (name === "") {
return;
}
this.count++;
// entries can be added after the form is up
this.rows.add(new Label(`${this.count}. ${name}`, 0, 0, 200, 18),
0, Layout.Top, 2);
this.entry.setText("");
// re-flow the form, nested layouts included
this.layout();
}
}
const form = new MyForm();
form.show();
Application.run();Adds a form component item or another layout item to the layout object for it to position and size automatically, based on the rules specified by proportion, layout_flags, and border_size. Proportion determines the size of this item relative to the total proportions of the items. So, if this item has proportion of 1 and there is another item with a proportion of 2, this item will occupy 1/3 of the overall space of the layout object (1 / 1 + 2), subject to the layout behavior specified in layout_flags. Layout_flags is a combination of Layout.Top, Layout.Bottom, Layout.Left, Layout.Right, Layout.All, Layout.Expand, and Layout.Center, and Layout.Shaped. Border_size determines the space around the contained elements, subject to the layout_flags.
Adds a spacer with the specified pixel size to the layout object. If the layout object has a horizontal layout, then size is the width of the spacer. If the layout object has a vertical layout, then size is the height of the spacer.
Adds a spacer with the specified proportional size to the layout object.
Removes all items from the Layout object.
Inserts a form component item or another layout item into the layout object for it to position and size automatically, based on the rules specified by proportion, layout_flags, and border_size. The item is inserted at the specified index or else before the index of the specified FormComponent or Layout item. Proportion determines the size of this item relative to the total proportions of the items. So, if this item has proportion of 1 and there is another item with a proportion of 2, this item will occupy 1/3 of the overall space of the layout object (1 / 1 + 2), subject to the layout behavior specified in layout_flags. Layout_flags is a combination of Layout.Top, Layout.Bottom, Layout.Left, Layout.Right, Layout.All, Layout.Expand, and Layout.Center, and Layout.Shaped. Border_size determines the space around the contained elements, subject to the layout_flags.
Inserts a spacer with the specified pixel size to the layout object at the specified index, where the index is the zero-based index if it is an integer, or else the zero-based index of the specified FormComponent or Layout object before which the spacer will be inserted. If the layout object has a horizontal layout, then size is the width of the spacer. If the layout object has a vertical layout, then size is the height of the spacer.
Inserts a stretch spacer with the specified proportional size into the layout object at the given index if index is an Integer or before the index of the given FormComponent or LayoutComponent