"I saw the angel in the marble and carved until I set him free."—Michelangelo
Learning layout managers takes time, but once you get accustomed to using them, you can create good looking user interfaces. You also can use GUI builders to create the GUI easily. I use SWT (Standard Widget Toolkit), a cross platform GUI developed by IBM and part of the Eclipse environment. If you are not familiar with this tool please see my earlier article on programming with SWT.
I prefer to use the GUI builders to create an initial look and I configure the UI manually. If you do not have a good understanding of the layout internals, you will limit yourself to the capabilities of the GUI builder that you are using.
Layouts
A layout automatically controls the position and size of widgets inside a Composite. In SWT, the size of a widget inside a composite is not automatically set. Each composite requires a layout to show its children controls. If the layout is not set, SWT will not be able to set the size and position of the controls inside a composite and our controls will not be visible. We have to set a layout for each composite in order to display the children controls.
Layout Manager classes are inherited from an abstract Layout class. Some Layout Managers allow us to set different properties for each control. Those layout classes have an addition object which can be set separately for each control inside a composite. The Control class provides a standard method, setLayoutData(Object obj), to set this addition parameter. You have to set an appropriate layout data object for each control; otherwise, it throws a classcast exception.
Figure 1. SWT Layout managers.
Layout classes have properties that affect all the components within a composite. Some layout classes support layout data objects to set different properties for each control within a composite. Layout properties can be set by using a layout's member variables. If you are familiar with Swing, you would probably search for methods to set and get these member variables. In SWT, this is different; you read and write to those variables directly.
You can use the following SWT application template to test the code snippets shown in this article.
| Listing 1. SWT application template |
import org.eclipse.swt.layout.RowLayout;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;
public class SWTTemplate
{
public static void main(String args[])
{
Display display = new Display();
Shell shell = new Shell(display);
// ------------------------
// Your code comes to here.
// ------------------------
shell.pack();
shell.open();
while( !shell.isDisposed())
{
if(!display.readAndDispatch())
display.sleep();
}
display.dispose();
}
} |
FillLayout
FillLayout is the simplest layout. If there is only one subcomponent, it fills the all available parent area. If there are more than one component, it forces all components to be the same size in a single row or a column. The width and hight of the subcomponents are determined by the widest or the highest widget in a composite. There are no options available to control either the spacing, margins, or wrapping.
The type variable specifies how controls will be positioned within the composite. The type variable can be set to SWT.HORIZONTAL (the default) or SWT.VERTICAL to position the controls either in a single row or a column. This variable is public; you can either directly set the variable or pass the variable to the constructor.
| Listing 2. FillLayout example |
FillLayout fillLayout = new FillLayout(SWT.HORIZONTAL);
// or ..
FillLayout fillLayout = new FillLayout();
fillLayout.type = SWT.HORIZONTAL;
|
The FillLayout might be used in a task bar, in a tool bar, or in a group or composite having only one child. Besides that, it might be used to stack the check boxes or radio buttons in a group.
| Listing 3. FillLayout example |
// ...
FillLayout fillLayout = new FillLayout(SWT.VERTICAL);
shell.setLayout(fillLayout);
for (int i = 0; i < 3; i++)
{
Button button =new Button(shell, SWT.PUSH);
button.setText("A"+i);
}
// ...
|
The width and height of a control within a composite are determined by the parent composite. Initially, the height of any control is equal to the highest, and the width of a control is equal to the widest.
| Table 1. FillLayout examples |
| Type |
Before&After Resize |
| SWT.HORIZONTAL |
 |
| SWT.VERTICAL |
 |
Advantages:
- Simplest layout
- Positions the components in rows or columns
IE 7
Firefox 2.0
