Your browser does not support JavaScript
Exit Print View

Lightweight UI Toolkit Developer’s Guide

Get PDF Book Print View

Document Information


1.  Introducing the Lightweight UI Toolkit Library

2.  Using Lightweight UI Toolkit Widgets

3.  Using Lists

4.  Table and Tree

5.  Using Dialogs

6.  Using Layout Managers

6.1 BorderLayout

6.2 BoxLayout

6.2.1 X_AXIS

6.2.2 Y_AXIS

6.3 FlowLayout

6.4 GridLayout

6.5 GroupLayout

6.6 Coordinate Layout

6.7 Table Layout

7.  Painters

8.  Using the Style Object

9.  LWUIT Implementation

10.  HTMLComponent

11.  Theming

12.  Resources

13.  Using Transitions and Animations

14.  M3G

15.  Logging

16.  Authoring Components

17.  Portability and Performance



Chapter 6

Using Layout Managers

This chapter shows you how to use the layout managers provided by the Lightweight UI Toolkit library. It also gives an example of writing a custom layout manager. For each layout manager, this chapter supplies sample code demonstrating how to use the layout manager and a general illustration.

In Lightweight UI Toolkit you can find the following layout managers:

6.1 BorderLayout

A BorderLayout object has five areas. These areas are specified by the BorderLayout constants:

When adding a component to a container, specify the component's location (for example, BorderLayout.CENTER) as one of the arguments to the addComponent method. If this component is missing from a container, controlled by a BorderLayout object, make sure that the component's location was specified and that no other component was placed in the same location.

addComponent(BorderLayout.CENTER, component) // preferred


addComponent(“Center”, component) // valid but error prone

The center area gets as much of the available space as possible. The other areas expand only as much as necessary to fit the components that have been added to it. Often a container uses only one or two of the areas of the BorderLayout object — just the center, or the center and the bottom.

Border Layout Location shows N, S, E, W, and Center locations

6.2 BoxLayout

The BoxLayout class puts components either on top of each other or in a row – your choice.

6.2.1 X_AXIS

To lay out components in a row, use BoxLayout.X_AXIS as the axis indication.

BoxLayout boxLayout = new BoxLayout(BoxLayout.X_AXIS);

In this layout, the box layout manager honors the component width of each layout component to fill the width of the container, and the height is determined by the container height. Any extra space appears at the right side of the container, as shown in link iconBoxLayout.X_AXIS Components in a Row.

BoxLayout.X_AXIS Components in a Row
BoxLayout.X_AXIS Components in a Row

6.2.2 Y_AXIS

To lay out components in a column, use BoxLayout.Y_AXIS as the axis indication.

BoxLayout boxLayout = new BoxLayout(BoxLayout.Y_AXIS);

In this layout, the box layout manager honors the component height of each layout component to fill the height of the container, and the width is determined by the container width. Any extra space appears at the bottom of the container, as shown in link iconBoxLayout_Y_Axis Components in a Row.

BoxLayout_Y_Axis Components in a Row
BoxLayout_Y_Axis Components in a Row

6.3 FlowLayout

The FlowLayout class provides a very simple layout manager that is the default layout manager for Container objects.

The FlowLayout class puts components in a row, sized at their preferred size. If the horizontal space in the container is too small to put all the components in one row, the FlowLayout class uses multiple rows. To align the row to the left, right, or center, use a FlowLayout constructor that takes an alignment argument.

The code snippet below creates a FlowLayout object and the components it manages.

FlowLayout exampleLayout = new FlowLayout();
container.addComponent(new Button("Button 1"));
container.addComponent(new Button("Button 2"));
container.addComponent(new Button("Button 3"));
container.addComponent(new Button("Button 4"));
FlowLayout Default Alignment
FlowLayout Default Alignment

When constructing a FlowLayout manager you can select either the Left, Right, or Center option to set up the component's orientation. The default alignment is Left. The following code snippet applies the Right component orientation to the above exampleLayout.

FlowLayout exampleLayout = new FlowLayout(Component.RIGHT);

FlowLayout With Right Alignment
FlowLayout With Right Alignment

6.4 GridLayout

A GridLayout object places components in a grid of cells. Each component takes all the available space within its cell, and each cell is exactly the same size.

The code snippet below creates the GridLayout object and the components it manages.

GridLayout exampleLayout = new GridLayout(0,2);
container.addComponent(new Button("Button 1"));
container.addComponent(new Button("Button 2"));
container.addComponent(new Button("Button 3"));
container.addComponent(new Button("Button 4"));

In this example the constructor of the GridLayout class creates an instance that has two columns and as many rows as necessary.

GridLayout With Two Columns
GridLayout With Two Columns

6.5 GroupLayout

GroupLayout is a layout manager that was developed for GUI builders such as Matisse, the Java SE GUI builder delivered with the NetBeans IDE. Although the layout manager was originally designed to suit GUI builder needs, it also works well for manual coding. To get more information you can refer to the GroupLayout API ( or review the Swing GroupLayout tutorial at:

6.6 Coordinate Layout

Unlike other layout managers coordinate layout assigns a component an absolute position in relation to the space available within the UI. The coordinate layout allows developers to position components within an X/Y location, however, it doesn't guarantee the position won't change and doesn't determine absolute positions.

Instead coordinate layout accepts positions as "relative" and calculates the actual position based on available space. This is essential since the available size for a container might change at runtime based on font size, screen rotation, etcetera.

For example, a coordinate layout for 200x200 will show a 20x20 component placed in the 90x90 position exactly in the center, regardless of the actual size of the container. If the container is laid out to a larger size, for example, 190x300 the component in the center would still be centered.

Unlike the other standard layouts in LWUIT the coordinate layout allows positioning components on top of one another to achieve z-ordering. The z-ordering is determined by the order in which the components are placed into the parent container.The last component added is the one on top.

final Form mainForm = new Form("Coordinate Layout");
mainForm.setLayout(new CoordinateLayout(200, 200));
Label centeredLabel = new Label("Center");
Label underCenter = new Label("Under Center");
Label top = new Label("Top Left");

This code produces link iconCoordinate Layout Sample:

Coordinate Layout Sample
Coordinate Layout Sample

There are several interesting things we can glean even from this simple example:

6.7 Table Layout

The table layout is a part of the table component discussed later, however it is quite useful on its own. It is largely inspired by the HTML table tag and also influenced by AWT's GridBagLayout.

The table layout is a constraint based layout (similar to the border layout). Other layout managers expect components to be added on their own. For example:


The table layout container expects something like this:

container.addComponent(tableConstraint, component);

Notice that this syntax is optional. If the constraint is omitted, the component is placed in the next available cell.

The table layout will automatically size components to the largest preferred size in the row or column until you run out of space. If the table is not horizontally scrollable this happens when the edge of the parent container is reached (near the edge of the screen), and additional components are "crammed together". Notice that all cells in the table layout are always sized to fit the entire cell. To change a cell’s alignment or margin, use the Component or Style methods.

The constraint argument is an instance of TableLayout.Constraint that can be used only once. Reusing the instance will cause an exception.

A constraint can specify the absolute row/column where the entry should fit as well as spanning between cell boundaries.

Table Layout Sample
table layout window showing 5 cells with a span underneath

In link iconTable Layout Sample, the "First" cell is spanned vertically while the "Spanning" cell is spanned horizontally. This is immensely useful in creating elaborate UIs.

Constraints can also specify a height/width for a column/row that will override the default. This size is indicated in percentage of the total table layout size. In the code below you can see that the "First" label is sized to 50% width while the "Fourth" label is sized to 20% height.

final Form mainForm = new Form("Table Layout");
TableLayout layout = new TableLayout(4, 3);
TableLayout.Constraint constraint = layout.createConstraint();
mainForm.addComponent(constraint, new Label("First"));
mainForm.addComponent(new Label("Second"));
mainForm.addComponent(new Label("Third"));
constraint = layout.createConstraint();
mainForm.addComponent(constraint, new Label("Fourth"));
mainForm.addComponent(new Label("Fifth"));
constraint = layout.createConstraint();
Label span = new Label("Spanning");
mainForm.addComponent(constraint, span);;