Classic Tips: Class Up Those Widgets With Form Layouts

By Dwight Deugo

July 30, 2008 —

With a nice layout, applications can be not only useful, but also attractive, fun and easy to use. Fortunately, Eclipse has many layout classes to help you position widgets in a view.

The major ones include FillLayout, RowLayout, GridLayout and FormLayout. FillLayout is the simplest layout class and lays out widgets in a single row or column, forcing them to be the same size. Instances of RowLayout determine the size and position of the widgets by placing them in horizontal rows or vertical columns. RowLayout has a number of fields, including height and width, that can be specified by adding a RowData object to the widget using this layout.

Instances of GridLayout arrange widgets in a grid. Like RowLayout, GridLayout has a number of configuration fields, and the widgets it lays out can have an associated layout data object called a GridData.

The layout class I like to use the most is FormLayout. If I am not arranging widgets in a grid, that’s the layout I always choose. A FormLayout controls the position of widgets using a combination of FormData and FormAttachment objects assigned to each widget, which enables me to precisely configure the left, top, right and bottom edges of each widget that is using the layout.

Let’s start with an example. Listing 1 (less the getters and setters for the instance variables) produces the window shown in Figure 1. Notice in the createLayout(..) method that each Button is assigned an instance of FormData, e.g., getFirstButton().setLayoutData(data).

The FormData instance has fields top, bottom, left and right assigned to instances of FormAttachment. The FormAttachment constructor lets me specify a percentage and pixel offset placing the widget’s edge relative to the composite object containing the widget, which in this case is the Shell.

Based on the code below, my FirstButton has its left and top edges connect to the left and top edges of the shell (with a margin offset) and the right edge is 75 percent of the way across. You can also set the height and width of the widget providing you don’t attach a FormAttachment to the FormData bottom field. In the code below, I made my FirstButton 30 pixels in height. The SecondButton was placed using different attachments.

What I really like being able to do is to associate edge attachments to other widgets rather than percentages of controlling composite widgets, like the Shell. Replace Listing 1’s createLayout(..) method with the one found in Listing 2, and it produces the view found in Figure 2.

The difference is in how the SecondButton is positioned. This time. the top and left FormData fields are assigned attachments that are not based on percentages, but are based on the edges of another widget, specifically the FirstButton button. This change results in the top of the SecondButton attached to the bottom of the FirstButton and the left edge of the SecondButton attached to the right of the FirstButton. You can do the same for bottom and right too.

Give it a try. It may take a little getting used to, but you will be rewarded with the knowledge and ability to finely configure where all of the edges of your widgets will be located.

package demo;

import org.eclipse.swt.*;
import org.eclipse.swt.widgets.*;
import org.eclipse.swt.layout.*;

public class SampleView {
   private static int WIDTH = 300;
   private static int HEIGTH = 100;
   private static int MARGIN = 5;
   private static int THIRTY_PIXELS = 30;
   private static int SEVENTY_FIVE_PERCENT = 75;
   private static int FIFTY_PERCENT = 50;
   private static int ONE_HUNDRED_PERCENT = 100;

   private Display display;
   private Shell shell;
   private Button firstButton, secondButton;

   public SampleView(){
       setDisplay(new Display ());
       setShell(new Shell (getDisplay()));

       createLayout(getShell());

       getShell().setSize(WIDTH, HEIGTH);
       getShell().setText("BZ Media SWT Demo");
       getShell().open ();

       while (!getShell().isDisposed ()) {
           if (!getDisplay().readAndDispatch ())
               getDisplay().sleep ();
       }
       getDisplay().dispose ();
   }

   private void createLayout(Shell shell){

       FormData data;
       FormLayout layout= new FormLayout();

          layout.marginWidth = MARGIN;
          layout.marginHeight = MARGIN;

          shell.setLayout(layout);

       setFirstButton(new Button(shell, SWT.PUSH));
       getFirstButton().setText("First Button");
       data = new FormData();
       data.height= THIRTY_PIXELS;
       data.top = new FormAttachment(0,0);
       data.left = new FormAttachment(0,MARGIN);
       data.right = new FormAttachment(SEVENTY_FIVE_PERCENT,-MARGIN);
       getFirstButton().setLayoutData(data);

       setSecondButton(new Button(shell, SWT.PUSH));
       getSecondButton().setText("Second Button");
       data = new FormData();
       data.height= 2 * THIRTY_PIXELS;
       data.top = new FormAttachment(FIFTY_PERCENT,MARGIN);
       data.left = new FormAttachment(FIFTY_PERCENT,MARGIN);
       data.right = new FormAttachment(ONE_HUNDRED_PERCENT,-MARGIN);
       getSecondButton().setLayoutData(data);
   }

   public static void main(String[] args) {
       SampleView view = new SampleView();
   }
}
Listing 1. Sample View

private void createLayout(Shell shell){

       FormData data;
       FormLayout layout= new FormLayout();

          layout.marginWidth = MARGIN;
          layout.marginHeight = MARGIN;

          shell.setLayout(layout);

       setFirstButton(new Button(shell, SWT.PUSH));
       getFirstButton().setText("First Button");
       data = new FormData();
       data.height= THIRTY_PIXELS;
       data.top = new FormAttachment(0,0);
       data.left = new FormAttachment(0,MARGIN);
       data.right = new FormAttachment(SEVENTY_FIVE_PERCENT,-MARGIN);
       getFirstButton().setLayoutData(data);

       setSecondButton(new Button(shell, SWT.PUSH));
       getSecondButton().setText("Second Button");
       data = new FormData();
       data.height= 2 * THIRTY_PIXELS;
       data.top = new FormAttachment(getFirstButton(),MARGIN);
       data.left = new FormAttachment(getFirstButton(),MARGIN);
       data.right = new FormAttachment(ONE_HUNDRED_PERCENT,-MARGIN);
       getSecondButton().setLayoutData(data);
   }
Listing 2. Modified createLayout(..) Method

This column was originally run in March, 2006, and may be inconsistent with current versions.

Share this link: http://www.sdtimes.com/link/32656

Tips: Combining Field Editors and SWT Widgets in Preference Pages In my last article, I discussed how to use Eclipse's specialized FieldEditors, such as a StringFieldEditor, in your preference pages...

Stepping Up in Class A trend is emerging among midtier database vendors: Their customers want high-end functionality without the installation, maintenance and financial responsibilities...

Novell to SCO: Put Up or Shut Up About Unix Like aftershocks following an earthquake, the effects of the SCO Group's assault on Linux continued to ripple through the industry...

Add comment

Name*
Email*
Country

Comment
Preview

News on Monday
more>>
SharePoint Tech Report
more>>

Download Current Issue
ISSUE 3/15/2010 PDF

Need Back Issues?
DOWNLOAD HERE

Receive the print Edition?

Google Code turns 5
Google Code Turns 5, and adds a Paxos Algorithm to make the system more stable and reliable.
03/17/2010 11:16 AM EST

Test your Visual Studio 2010 know-how
Microsoft is offering free beta certification exams for Visual Studio 2010.
03/17/2010 11:08 AM EST

Microsoft lifts the hood on IE9
Microsoft is previewing IE9.
03/16/2010 01:10 PM EST