Question

In this chapter we show how to lay out our widgets in windows or dialogs.

When we design the GUI of our application, we decide what widgets we use and how we organise those widgets in the application. To organise our widgets, we use specialised non-visible widgets called layout containers.

Composite is a container for placing children widgets. The layout manager for a Composite is set with the setLayout() method. Shell is a Composite too. It does not have a default layout manager, in which case the widgets are placed using absolute positioning.

SWT has the following standard layout classes:

• FillLayout
• RowLayout
• FormLayout
• GridLayout

FillLayout lays out equal-sized widgets in a single row or column. RowLayout lays out widgets in a row or column, with fill, wrap, and spacing options. FormLayout lays out widgets by creating attachments for each of their sides. GridLayout lays out widgets in a grid.

A layout class may have a corresponding layout data class which contains layout data for a specific child. For example, RowLayout has a layout data class called RowData , GridLayout has GridData , and FormLayout has FormData .

Absolute positioning

In most cases, programmers should use layout managers. There are a few situations where we can also use absolute positioning. In absolute positioning, the programmer specifies the position and the size of each widget in pixels. The size and the position of a widget do not change if we resize a window. Applications look different on various platforms, and what looks OK on Linux, might not look OK on Mac OS. Changing fonts in your application might spoil the layout. If we translate our application into another language, we must redo our layout. For all these issues, use the absolute positioning only when you have a reason to do so, or your application is a simple testing.

The absolute positioning is done with the setSize() , setLocation() , and setBounds() methods.

AbsoluteLayoutEx.java

package com.zetcode;

import org.eclipse.swt.SWT;
import org.eclipse.swt.widgets.Button;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;

/**
 * ZetCode Java SWT tutorial
 *
 * In this program, we position two
 * buttons using absolute coordinates.
 *
 * Author: Jan Bodnar
 * Website: zetcode.com
 * Last modified: June 2015
 */

public class AbsoluteLayoutEx {

  public AbsoluteLayoutEx(Display display) {

    initUI(display);
  }

  private void initUI(Display display) {
    
    Shell shell = new Shell(display, SWT.SHELL_TRIM | SWT.CENTER);
    
    Button btn1 = new Button(shell, SWT.PUSH);
    btn1.setText("Button");
    btn1.setBounds(20, 50, 80, 30);

    Button btn2 = new Button(shell, SWT.PUSH);
    btn2.setText("Button");
    btn2.setSize(80, 30);
    btn2.setLocation(50, 100);
    
    shell.setText("Absolute layout");
    shell.setSize(300, 250);
    shell.open();

    while (!shell.isDisposed()) {
      if (!display.readAndDispatch()) {
      display.sleep();
      }
    }    
  }

  @SuppressWarnings("unused")
  public static void main(String[] args) {
    
    Display display = new Display();
    AbsoluteLayoutEx ex = new AbsoluteLayoutEx(display);
    display.dispose();
  }
}

In our example, we place two buttons on the window using absolute positioning.

btn1.setBounds(20, 50, 80, 30);

The setBounds() method does two things: it positions the button at x=20 and y=50 and sizes the button to width=80 and height=30.

button2.setSize(80, 30);
button2.setLocation(50, 100);

Here we do the same in two steps. First we size the button using the setSize() method. Then we locate it on the window using the setLocation() method.

Figure: Absolute layout

FillLayout manager

FillLayout is the simplest layout class. It lays out widgets in a single row or column, forcing them to be the same size.

FillLayoutEx.java

package com.zetcode;

import org.eclipse.swt.SWT;
import org.eclipse.swt.graphics.Device;
import org.eclipse.swt.graphics.Image;
import org.eclipse.swt.graphics.Rectangle;
import org.eclipse.swt.layout.FillLayout;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Label;
import org.eclipse.swt.widgets.Shell;

/**
 * ZetCode Java SWT tutorial
 *
 * This program demonstrates the FillLayout
 * manager
 *
 * Author: Jan Bodnar
 * Website: zetcode.com
 * Last modified: May 2015
 */

public class FillLayoutEx {

  private Image castle;

  public FillLayoutEx(Display display) {

    initUI(display);
  }

  private void initUI(Display display) {
    
    Shell shell = new Shell(display, SWT.SHELL_TRIM | SWT.CENTER);
    shell.setLayout(new FillLayout());
    
    loadImage(shell);

    Label label = new Label(shell, SWT.IMAGE_PNG);
    label.setImage(castle);
    
    shell.setText("FillLayout");    
    Rectangle rect = castle.getBounds();
    shell.setSize(rect.width, rect.height);
    shell.open();

    while (!shell.isDisposed()) {
      if (!display.readAndDispatch()) {
      display.sleep();
      }
    }    
  }
  
  private void loadImage(Shell shell) {
    
    Device dev = shell.getDisplay();
    
    try {
      castle = new Image(dev, "redrock.png");
      
    } catch(Exception e) {
      
      System.out.println("Cannot load image");
      System.out.println(e.getMessage());
      System.exit(1);
    }    
  }

  @Override
  public void finalize() {
    
    castle.dispose();
  }

  public static void main(String[] args) {
    
    Display display = new Display();
    FillLayoutEx app = new FillLayoutEx(display);
    app.finalize();
    display.dispose();
  }
}

In our example, we use this manager to display an image.

shell.setLayout(new FillLayout());

We set the FillLayout to be the layout class for the shell. The layout is set with the setLayout() method.

Rectangle rect = castle.getBounds();
shell.setSize(rect.width, rect.height);

We find out the size of the picture to resize the shell to exactly fit the image size.

Label label = new Label(shell, SWT.IMAGE_PNG);
label.setImage(castle);

We set the image to the label widget.

private void loadImage(Shell shell) {
  
  Device dev = shell.getDisplay();
  
  try {
    castle = new Image(dev, "redrock.png");
    
  } catch(Exception e) {
    
    System.out.println("Cannot load image");
    System.out.println(e.getMessage());
    System.exit(1);
  }    
}

The loadImage() method loads the image from the disk.

Figure: FillLayout

RowLayout

The RowLayout manager places all widgets either in one row or in one column.

RowLayoutEx.java

package com.zetcode;

import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.RowData;
import org.eclipse.swt.layout.RowLayout;
import org.eclipse.swt.widgets.Button;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;

/**
 * ZetCode Java SWT tutorial
 *
 * This program demonstrates the RowLayout
 * manager.
 *
 * Author: Jan Bodnar
 * Website: zetcode.com
 * Last modified: June 2015
 */

public class RowLayoutEx {

  public RowLayoutEx(Display display) {

    initUI(display);
  }

  private void initUI(Display display) {
    
    Shell shell = new Shell(display, SWT.SHELL_TRIM | SWT.CENTER);

    RowLayout rowLayout = new RowLayout(SWT.HORIZONTAL);
    rowLayout.marginTop = 10;
    rowLayout.marginBottom = 10;
    rowLayout.marginLeft = 5;
    rowLayout.marginRight = 5;
    rowLayout.spacing = 10;
    shell.setLayout(rowLayout);

    Button btn1 = new Button(shell, SWT.PUSH);
    btn1.setText("Button");
    btn1.setLayoutData(new RowData(80, 30));

    Button btn2 = new Button(shell, SWT.PUSH);
    btn2.setText("Button");
    btn2.setLayoutData(new RowData(80, 30));

    Button btn3 = new Button(shell, SWT.PUSH);
    btn3.setText("Button");
    btn3.setLayoutData(new RowData(80, 30));
    
    shell.setText("RowLayout");
    shell.pack();
    shell.open();

    while (!shell.isDisposed()) {
      if (!display.readAndDispatch()) {
      display.sleep();
      }
    }    
  }

  @SuppressWarnings("unused")
  public static void main(String[] args) {
    
    Display display = new Display();
    RowLayoutEx ex = new RowLayoutEx(display);
    display.dispose();
  }
}

In our example, we create a row of three buttons.

RowLayout rowLayout = new RowLayout(SWT.HORIZONTAL);

A horizontal RowLayout is created. The widgets will be placed in a single row.

rowLayout.marginTop = 10;
rowLayout.marginBottom = 10;
rowLayout.marginLeft = 5;
rowLayout.marginRight = 5;

The margins specify the space along the edges of the container.

rowLayout.spacing = 10;

The spacing property specifies the space between the buttons.

shell.setLayout(rowLayout);

We specify the row layout to be the layout for the shell.

Button btn1 = new Button(shell, SWT.PUSH);
btn1.setText("Button");
btn1.setLayoutData(new RowData(80, 30));

A Button is created. The setLayoutData() specifies the dimensions of the button.

Figure: RowLayout manager

Buttons

In the last example, we create an example with the FormLayout manager. This manager controls the position and size of the children using two objects: FormData and FormAttachment .

ButtonsEx.java

package com.zetcode;

import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.FormAttachment;
import org.eclipse.swt.layout.FormData;
import org.eclipse.swt.layout.FormLayout;
import org.eclipse.swt.widgets.Button;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;

/**
 * ZetCode Java SWT tutorial
 *
 * In this program, we position two buttons
 * in the bottom right corner of the window.
 *
 * Author: Jan Bodnar
 * Website: zetcode.com
 * Last modified: May 2015
 */

public class ButtonsEx {

  public ButtonsEx(Display display) {

    initUI(display);
  }

  private void initUI(Display display) {
    
    Shell shell = new Shell(display, SWT.SHELL_TRIM | SWT.CENTER);
    
    FormLayout layout = new FormLayout();
    shell.setLayout(layout);

    Button okBtn = new Button(shell, SWT.PUSH);
    okBtn.setText("OK");

    Button cancBtn = new Button(shell, SWT.PUSH);
    cancBtn.setText("Cancel");

    FormData cancelData = new FormData(80, 30);
    cancelData.right = new FormAttachment(98);
    cancelData.bottom = new FormAttachment(95);
    cancBtn.setLayoutData(cancelData);

    FormData okData = new FormData(80, 30);
    okData.right = new FormAttachment(cancBtn, -5, SWT.LEFT);
    okData.bottom = new FormAttachment(cancBtn, 0, SWT.BOTTOM);
    okBtn.setLayoutData(okData);
    
    shell.setText("Buttons");
    shell.setSize(350, 200);
    shell.open();

    while (!shell.isDisposed()) {
      if (!display.readAndDispatch()) {
      display.sleep();
      }
    }    
  }

  @SuppressWarnings("unused")
  public static void main(String[] args) {
    
    Display display = new Display();
    ButtonsEx ex = new ButtonsEx(display);
    display.dispose();
  }
}

In this code example, we position two buttons in the bottom-right corner of the window.

FormLayout layout = new FormLayout();
shell.setLayout(layout);

The FormLayout manager is created.

Button okBtn = new Button(shell, SWT.PUSH);
okBtn.setText("OK");

Button cancBtn = new Button(shell, SWT.PUSH);
cancBtn.setText("Cancel");

Two push buttons are created and set to the shell.

FormData cancelData = new FormData(80, 30);

The cancel button's size is 80x30.

cancelData.right = new FormAttachment(98);
cancelData.bottom = new FormAttachment(95);

The right side of the button is attached at 98% of the width of the window. The bottom side of the button is attached at 95% of the height of the window.

okData.right = new FormAttachment(cancelButton, -5, SWT.LEFT);
okData.bottom = new FormAttachment(cancelButton, 0, SWT.BOTTOM);

The right side of the OK button goes 5 px to the left of the Cancel button. The bottom side of the OK button is aligned with the bottom of the Cancel button.

Figure: Buttons

New folder

In the following example, we create a window layout using the FormLayout and the RowLayout managers.

NewFolderEx.java

package com.zetcode;

import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.FormAttachment;
import org.eclipse.swt.layout.FormData;
import org.eclipse.swt.layout.FormLayout;
import org.eclipse.swt.layout.RowData;
import org.eclipse.swt.layout.RowLayout;
import org.eclipse.swt.widgets.Button;
import org.eclipse.swt.widgets.Composite;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Label;
import org.eclipse.swt.widgets.Shell;
import org.eclipse.swt.widgets.Text;

/**
 * ZetCode Java SWT tutorial
 *
 * This program creates a layout using a
 * FormLayout and a RowLayout. 
 *
 * Author: Jan Bodnar 
 * Website: zetcode.com 
 * Last modified: June 2015
 */

public class NewFolderEx {

  public NewFolderEx(Display display) {
    
    initUI(display);
  }
  
  private void initUI(Display display) {
    
    Shell shell = new Shell(display, SWT.SHELL_TRIM | SWT.CENTER);  
    shell.setLayout(new FormLayout());
    
    Label lbl = new Label(shell, SWT.LEFT);
    lbl.setText("Name:");
    
    FormData data1 = new FormData();
    data1.left = new FormAttachment(0, 5);
    data1.top = new FormAttachment(0, 10);
    lbl.setLayoutData(data1);    
    
    Text text = new Text(shell, SWT.SINGLE);
    FormData data2 = new FormData();
    data2.left = new FormAttachment(lbl, 15);
    data2.top = new FormAttachment(0, 10);
    data2.right = new FormAttachment(100, -5);
    text.setLayoutData(data2);    
    
    Composite com = new Composite(shell, SWT.NONE);    
    RowLayout rowLayout = new RowLayout();
    com.setLayout(rowLayout);
    
    Button okBtn = new Button(com, SWT.PUSH);
    okBtn.setText("OK");
    okBtn.setLayoutData(new RowData(80, 30));
    Button closeBtn = new Button(com, SWT.PUSH);
    closeBtn.setText("Close");
    closeBtn.setLayoutData(new RowData(80, 30));
    
    FormData data3 = new FormData();
    data3.bottom = new FormAttachment(100, -5);
    data3.right = new FormAttachment(100, 0);
    com.setLayoutData(data3);     
    
    Text mainText = new Text(shell, SWT.MULTI | SWT.BORDER);
    FormData data4 = new FormData();
    data4.width = 250;
    data4.height = 180;
    data4.top = new FormAttachment(text, 10);
    data4.left = new FormAttachment(0, 5);
    data4.right = new FormAttachment(100, -5);
    data4.bottom = new FormAttachment(com, -10);
    mainText.setLayoutData(data4);       
    
    shell.setText("New folder");
    shell.pack();
    shell.open();
    
    while (!shell.isDisposed()) {
      if (!display.readAndDispatch())
        display.sleep();
    }    
  }

  @SuppressWarnings("unused")
  public static void main(String[] args) {
    
    Display display = new Display();
    NewFolderEx ex = new NewFolderEx(display);
    display.dispose();  
  }
}

In the example, there are the the label, the text, and the button widgets.

Shell shell = new Shell(display, SWT.SHELL_TRIM | SWT.CENTER);  
shell.setLayout(new FormLayout());

The FormLayout is set to be the shell's main layout manager.

Label lbl = new Label(shell, SWT.LEFT);
lbl.setText("Name:");

FormData data1 = new FormData();
data1.left = new FormAttachment(0, 5);
data1.top = new FormAttachment(0, 10);
lbl.setLayoutData(data1);

The label widget is attached at the upper-left corner of the window.

Text text = new Text(shell, SWT.SINGLE);
FormData data2 = new FormData();
data2.left = new FormAttachment(lbl, 15);
data2.top = new FormAttachment(0, 10);
data2.right = new FormAttachment(100, -5);
text.setLayoutData(data2);  

Next to the label, we place a Text control. The left side of the text control is placed relatively to the label.

Composite com = new Composite(shell, SWT.NONE);    
RowLayout rowLayout = new RowLayout();
com.setLayout(rowLayout);

A Composite is created and the RowLayout manager is set to it. The two buttons go into this container. It is a bit easier to use a RowLayout for the buttons than to organise them directly with the FormLayout .

Button okBtn = new Button(com, SWT.PUSH);
okBtn.setText("OK");
okBtn.setLayoutData(new RowData(80, 30));
Button closeBtn = new Button(com, SWT.PUSH);
closeBtn.setText("Close");
closeBtn.setLayoutData(new RowData(80, 30));

Two push buttons are created. Their parent widget is the Composite .

FormData data3 = new FormData();
data3.bottom = new FormAttachment(100, -5);
data3.right = new FormAttachment(100, 0);
com.setLayoutData(data3);    

The Composite itself is placed at the bottom of the window with the FormLayout . Negative values are offsets from the neighbouring widgets or window borders.

Text mainText = new Text(shell, SWT.MULTI | SWT.BORDER);
FormData data4 = new FormData();
data4.width = 250;
data4.height = 180;
data4.top = new FormAttachment(text, 10);
data4.left = new FormAttachment(0, 5);
data4.right = new FormAttachment(100, -5);
data4.bottom = new FormAttachment(com, -10);
mainText.setLayoutData(data4);

Finally, the main Text widget is created. It takes the most of the window area. The width and height properties specify the initial preferred size of the control.

Figure: New folder

GridLayout

GridLayout manager puts its child widgets into a grid.

GridLayoutEx.java

package com.zetcode;

import org.eclipse.swt.SWT;
import org.eclipse.swt.graphics.Color;
import org.eclipse.swt.layout.GridData;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Label;
import org.eclipse.swt.widgets.Shell;

/**
 * ZetCode Java SWT tutorial
 *
 * This example presents the GridLayout.
 *
 * Author: Jan Bodnar 
 * Website: zetcode.com 
 * Last modified: June 2015
 */

public class GridLayoutEx {

  public GridLayoutEx(Display display) {

    initUI(display);
  }

  private void initUI(Display display) {
    
    Shell shell = new Shell(display, SWT.SHELL_TRIM | SWT.CENTER);

    Color col = new Color(display, 100, 200, 100);
    shell.setBackground(col);
    col.dispose();
    
    GridLayout layout = new GridLayout(2, false);
    shell.setLayout(layout);
    
    Label lbl1 = new Label(shell, SWT.NONE);
    GridData gd1 = new GridData(SWT.FILL, SWT.FILL, true, true);
    lbl1.setLayoutData(gd1);
    
    Color col1 = new Color(display, 250, 155, 100);
    lbl1.setBackground(col1);
    col1.dispose();    
    
    Label lbl2 = new Label(shell, SWT.NONE);
    GridData gd2 = new GridData(SWT.FILL, SWT.FILL, true, true);
    gd2.heightHint = 100;
    lbl2.setLayoutData(gd2);    
    
    Color col2 = new Color(display, 10, 155, 100);
    lbl2.setBackground(col2);
    col2.dispose();    
    
    Label lbl3 = new Label(shell, SWT.NONE);
    GridData gd3 = new GridData(SWT.FILL, SWT.FILL, true, true);
    gd3.widthHint = 300;
    gd3.heightHint = 100;
    gd3.horizontalSpan = 2;
    lbl3.setLayoutData(gd3);       
    
    Color col3 = new Color(display, 100, 205, 200);
    lbl3.setBackground(col3);
    col3.dispose();    

    shell.setText("Grid");
    shell.pack();
    shell.open();
    
    while (!shell.isDisposed()) {
      if (!display.readAndDispatch())
        display.sleep();
    }
  }

  @SuppressWarnings("unused")
  public static void main(String[] args) {
    
    Display display = new Display();
    GridLayoutEx ex = new GridLayoutEx(display);
    display.dispose();
  }
}

In the example, we place three labels in a grid. Each of the labels has a different background colour.

Color col = new Color(display, 100, 200, 100);
shell.setBackground(col);
col.dispose();

The setBackground() method sets a background colour for the shell.

GridLayout layout = new GridLayout(2, false);
shell.setLayout(layout);

The GridLayout manager is instantiated and set to be the layout manager for the shell. The grid consists of 2 columns.

Label lbl1 = new Label(shell, SWT.NONE);
GridData gd1 = new GridData(SWT.FILL, SWT.FILL, true, true);
lbl1.setLayoutData(gd1);

The first label goes into the top-left cell of the grid. The four parameters of the GridData class make the label component fill its cell and expand in both directions.

Label lbl2 = new Label(shell, SWT.NONE);
GridData gd2 = new GridData(SWT.FILL, SWT.FILL, true, true);
gd2.heightHint = 100;
lbl2.setLayoutData(gd2);  

The second label goes to the adjacent cell. The heightHint property specifies the preferred height of the label. Note that it affects the previous widget as well, because the property effectively sets the preferred height of the row.

Label lbl3 = new Label(shell, SWT.NONE);
GridData gd3 = new GridData(SWT.FILL, SWT.FILL, true, true);
gd3.widthHint = 300;
gd3.heightHint = 100;
gd3.horizontalSpan = 2;
lbl3.setLayoutData(gd3);   

The third label goes into the second row. The horizontalSpan property makes the label span two columns.

Figure: Simple GridLayout

Calculator

In the following example, we use the GridLayout manager to create a skeleton of a calculator.

CalculatorEx.java

package com.zetcode;

import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.GridData;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Button;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Label;
import org.eclipse.swt.widgets.Shell;
import org.eclipse.swt.widgets.Text;

/**
 * ZetCode Java SWT tutorial
 *
 * In this program, we use the GridLayout to
 * create a calculator skeleton.
 *
 * Author: Jan Bodnar
 * Website: zetcode.com
 * Last modified: June 2015
 */

public class CalculatorEx {

  public CalculatorEx(Display display) {

    initUI(display);
  }

  private void initUI(Display display) {
    
    Shell shell = new Shell(display, SWT.DIALOG_TRIM | SWT.CENTER);

    GridLayout gl = new GridLayout(4, true);
    gl.marginHeight = 5;
    shell.setLayout(gl);

    String[] buttons = {
      "Cls", "Bck", "", "Close", "7", "8", "9", "/", "4",
      "5", "6", "*", "1", "2", "3", "-", "0", ".", "=", "+"
    };

    Text text = new Text(shell, SWT.SINGLE);
    GridData gridData = new GridData();
    gridData.horizontalSpan = 4;
    gridData.horizontalAlignment = GridData.FILL;
    text.setLayoutData(gridData);

    for (int i = 0; i < buttons.length; i++) {

      if (i == 2) {
        
        Label lbl = new Label(shell, SWT.CENTER);
        GridData gd = new GridData(SWT.FILL, SWT.FILL, false, false);
        lbl.setLayoutData(gd);
      } else {
        
         Button btn = new Button(shell, SWT.PUSH);
         btn.setText(buttons[i]);
         GridData gd = new GridData(SWT.FILL, SWT.FILL, false, false);
         gd.widthHint = 50;
         gd.heightHint = 30;
         btn.setLayoutData(gd);
      }
    }
    
    shell.setText("Calculator");
    shell.pack();
    shell.open();

    while (!shell.isDisposed()) {
      if (!display.readAndDispatch()) {
      display.sleep();
      }
    }    
  }

  @SuppressWarnings("unused")
  public static void main(String[] args) {
    
    Display display = new Display();
    CalculatorEx ex = new CalculatorEx(display);
    display.dispose();
  }
}

We create a skeleton of a calculator with the GridLayout manager. We use three types of widgets: a text widget, a label widget, and several buttons.

Shell shell = new Shell(display, SWT.DIALOG_TRIM | SWT.CENTER);

With the SWT.DIALOG_TRIM flag, we make the window non-resizable.

GridLayout gl = new GridLayout(4, true);
gl.marginHeight = 5;
shell.setLayout(gl);

We create a GridLayout with 4 columns and provide top and bottom margins.

Text text = new Text(shell, SWT.SINGLE);
GridData gridData = new GridData();
gridData.horizontalSpan = 4;
gridData.horizontalAlignment = GridData.FILL;
text.setLayoutData(gridData);

GridData is the layout data object associated with GridLayout . With the horizontalSpan property, we make the text widget span all four columns. The horizontalAlignment set to GridData.FILL makes the text widget fill the entire area alotted to it by the layout manager.

Button btn = new Button(shell, SWT.PUSH);
btn.setText(buttons[i]);
GridData gd = new GridData(SWT.FILL, SWT.FILL, false, false);
gd.widthHint = 50;
gd.heightHint = 30;
btn.setLayoutData(gd);

Inside the for loop, we create buttons and put them into the grid. With the widthHint and heightHint properties, we set the preferred size of the buttons.

Figure: Calculator skeleton

In this part of the Java SWT tutorial, we talked about layout management of widgets.