Skip to content

Latest commit

 

History

History
139 lines (120 loc) · 4.5 KB

hbox-and-vbox.md

File metadata and controls

139 lines (120 loc) · 4.5 KB
Raw

Relative Positioning

At totalcross, we have two layouts ready to help you set up your application: HBox and VBox. These layouts can be described as 2 boxes where you "stack" your components, be it with a certain space between them or just simply really stacked. Both these layouts are extensions of the LinearBox class. To use them is pretty simple, all you ned to do is instantiate one of them, set its mode and add your components inside.

Hbox

This layout will group your components horizontally,

{% code title="How to use HBox Layout" %}

public void initUI() {
    HBox hBox = new HBox(HBox.LAYOUT_FILL, HBox.ALIGNMENT_STRETCH);

    for (int i = 0; i < 5; i++) {
        hBox.add(new Button(i+""));
    }
    add(hBox, LEFT, CENTER, FILL, PREFERRED);
}

{% endcode %}

Vbox

This layout will group your controllers vertically

{% code title="How to use VBox layout" %}

public void initUI() {
    VBox vBox = new VBox(VBox.LAYOUT_FILL, VBox.ALIGNMENT_STRETCH);
    
    for (int i = 0; i < 5; i++) {
        vBox.add(new Button(i + ""));
    }
    add(vBox, CENTER, TOP, DP + 50, FILL);
}

{% endcode %}

Attributes

Type Name

Description
int LinearBox.LAYOUT_STACK_CENTER Organizes the elements around the center.
int LinearBox.LAYOUT_DISTRIBUTE Distributes the elements along the width or height of the box.
int LinearBox.LAYOUT_FILL Distribute and scale each element to fill the entire width or height of the box.
int LinearBox.ALIGNMENT_LEFT Aligns each child along the left/top border.
int LinearBox.ALIGNMENT_RIGHT Aligns each child along the right/bottom border.
int LinearBox.ALIGNMENT_CENTER Centers each child object.
int LinearBox.ALIGNMENT_STRETCH Stretches each child object.
int Hbox.LAYOUT_STACK_LEFT Organizes each element from left to right.
int Hbox.LAYOUT_STACK_RIGHT Organizes each element from right to left.
int Vbox.LAYOUT_STACK_TOP Organizes each element from top to bottom.
int Vbox.LAYOUT_STACK_BOTTOM Organizes each element from bottom to top.

Methods

Type Name Description
void setInsets(int left, int right, int top, int bottom) Sets the internal paddings of this component.
void setLayout(int mode, int alignment) Sets the layout mode and alignment of this component.
void suspendLayout() Suspends all layout operations from 'add' calls until a 'resumeLayout' call.
void resumeLayout() Performs all queued layout operations and resumes the default layout behaviour of the 'add' method.
void setSpacing(int spacing) Sets the spacing between components.