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,

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);
}

Vbox

This layout will group your controllers vertically

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);
}

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.