Understanding Layouts in SWT

<!----> <!----><o:p></o:p>

Summary
When writing applications in SWT, you may need to use layouts to give your windows a specific look. A layout controls the position and size of children in a Composite. Layout classes are subclasses of the abstract class Layout. This article shows you how to work with standard layouts, and write your own custom layout class.<o:p></o:p>

<!----> <!----><o:p></o:p>

By Carolyn MacLeod, OTI<o:p></o:p>

March 22, 2001<o:p></o:p>

<!----> <!----><o:p></o:p>

---

Layouts

Overview

When writing applications in SWT, you may need to use layouts to give your windows a specific look. A layout controls the position and size of children in a Composite. Layout classes are subclasses of the abstract class Layout. SWT provides several standard layout classes, and you can write custom layout classes.

<!----> <!----><o:p></o:p>

In SWT, positioning and sizing does not happen automatically. Applications can decide to size and place a Composite’s children initially or in a resize listener – or they can specify a layout class to position and size the children. If children are not given a size, they will have zero size and they cannot be seen.

<!----> <!----><o:p></o:p>

The diagram below illustrates a few general terms that are used when discussing layouts. The Composite (in this case, a TabFolder) has a location, clientArea and trim. The size of the Composite is the size of the clientArea plus the size of the trim. The Composite has two children that are laid out side by side. A Layout is managing the size and position of the children. This Layout allows spacing between the children, and a margin between the children and the edges of the Layout. The size of the Layout is the same as the size of the Composite’s clientArea.

<!----> <!----><o:p></o:p>

<!----><!----><!----><!---->
The preferred size of a widget is the minimum size needed to show its content. In the case of a Composite, the preferred size is the smallest rectangle that contains all of its children. If children have been positioned by the application, the Composite computes its own preferred size based on the size and position of the children. If a Composite is using a layout class to position its children, it asks the Layout to compute the size of its clientArea, and then it adds in the trim to determine its preferred size.

Standard Layouts

The standard layout classes in the SWT library are:

<!---->·        <!---->FillLayout – lays out equal-sized widgets in a single row or column

<!---->·        <!---->RowLayout – lays out widgets in a row or rows, with fill, wrap, and spacing options

<!---->·        <!---->GridLayout – lays out widgets in a grid

<!----> <!----><o:p></o:p>

To use the standard layouts, you need to import the SWT layout package:

<!----> <!----><o:p></o:p>

    import org.eclipse.swt.layout.*;

<!----> <!----><o:p></o:p>

Layouts are pluggable. To set a layout into a Composite widget, you use the widget’s setLayout(Layout) method. In the following code, a Shell (a subclass of Composite) is told to position its children using a RowLayout:

<!----> <!----><o:p></o:p>

    Shell shell = new Shell();

    shell.setLayout(new RowLayout());

<!----> <!----><o:p></o:p>

A layout class may have a corresponding layout data class – a subclass of Object that contains layout data for a specific child. By convention, layout data classes are identified by substituting Data for Layout in the class name. For example, the standard layout class RowLayout has a layout data class called RowData, and the layout class GridLayout uses a layout data class called GridData. Layout data classes are set into a widget as follows:

<!----> <!----><o:p></o:p>

    Button button = new Button(shell, SWT.PUSH);

    button.setLayoutData(new RowData(50, 40));

<!----> <!----><o:p></o:p>

Examples in this Document

Most of the snapshots in this document were taken by running variations on the following example code. We may change the type of layout, the options used, or the type or number of children.

<!----> <!----><o:p></o:p>

import org.eclipse.swt.*;

import org.eclipse.swt.widgets.*;

import org.eclipse.swt.layout.*;

<!----> <!----><o:p></o:p>

public class LayoutExample {

<!----> <!----><o:p></o:p>

    public static void main(String[] args) {

       Display display = new Display();

       Shell shell = new Shell(display);

       // Create the layout.

       RowLayout layout = new RowLayout();<o:p></o:p>

       // Optionally set layout fields.

       layout.wrap = true;<o:p></o:p>

       // Set the layout into the composite.

       shell.setLayout(layout);<o:p></o:p>

       // Create the children of the composite.

       new Button(shell, SWT.PUSH).setText("B1");

       new Button(shell, SWT.PUSH).setText("Wide Button 2");

       new Button(shell, SWT.PUSH).setText("Button 3");

       shell.pack();

       shell.open();

       while (!shell.isDisposed()) {

          if (!display.readAndDispatch()) display.sleep();

       }

    }

}

<!----> <!----><o:p></o:p>

Running the above code results in the following:

<!----> <!----><o:p></o:p>

<!----><!----><!---->

<!----> <!----><o:p></o:p>

If the user resizes the shell so that there is no longer room for Button 3 on the right, the RowLayout wraps Button 3 to the next row, as follows:

<!----> <!----><o:p></o:p>

<!----><!----><!---->

<!----> <!----><o:p></o:p>

Using layouts is closely tied with resize, as we shall see. Consequently, most of the examples in this document show what would happen if the Composite becomes smaller or larger, in order to illustrate how the Layout works.

FillLayout<o:p></o:p>

FillLayout is the simplest layout class. It lays out widgets in a single row or column, forcing them to be the same size. Initially, the widgets will all be as tall as the tallest widget, and as wide as the widest. FillLayout does not wrap, and you cannot specify margins or spacing. You might use it to lay out buttons in a task bar or tool bar, or to stack checkboxes in a Group. FillLayout can also be used when a Composite only has one child. For example, if a Shell has a single Group child, FillLayout will cause the Group to completely fill the Shell.

<!----> <!----><o:p></o:p>

Here is the relevant portion of the example code. First we create a FillLayout, then (if we want vertical) we set its type field, and then we set it into the Composite (a Shell). The Shell has three pushbutton children, B1, B2, and Button 3. Note that in a FillLayout, children are always the same size, and they fill all available space.

<!----> <!----><o:p></o:p>

       FillLayout fillLayout = new FillLayout();

       fillLayout.type = SWT.VERTICAL;

       shell.setLayout(fillLayout);

<!----> <!----><o:p></o:p>

The following table shows the differences between a horizontal and vertical FillLayout, initially and after the parent has grown.

<!----> <!----><o:p></o:p>

<!----> <!----><o:p></o:p>	Initial	After resize
<!----> <!----><o:p></o:p> fillLayout.type = SWT.HORIZONTAL<o:p></o:p> (default)<o:p></o:p>	<!----> <!----><o:p></o:p> <!----><!----><!----> <!----> <!----><o:p></o:p>	<!----> <!----><o:p></o:p> <!----><!----><!----> <!----> <!----><o:p></o:p>
<!----> <!----><o:p></o:p> fillLayout.type = SWT.VERTICAL<o:p></o:p>	<!----> <!----><o:p></o:p> <!----><!----><!----> <!----> <!----><o:p></o:p>	<!----> <!----><o:p></o:p> <!----><!----><!----> <!----> <!----><o:p></o:p>

RowLayout

RowLayout is more commonly used than FillLayout because of its ability to wrap, and because it provides configurable margins and spacing. RowLayout has a number of configuration fields. In addition, the height and width of each widget in a RowLayout can be specified by setting a RowData object into the widget using setLayoutData.

RowLayout Configuration Fields

Wrap

The wrap field controls whether or not the RowLayout will wrap widgets into the next row if there isn’t enough space in the current row. RowLayouts wrap by default.

Pack

If the pack field is true, widgets in a RowLayout will take their natural size, and they will be aligned as far to the left as possible. If packing is false, widgets will fill the available space, similar to the widgets in a FillLayout. RowLayouts pack by default.

Justify

If the justify field is true, widgets in a RowLayout are spread across the available space from left to right. If the parent Composite grows wider, the extra space is distributed evenly among the widgets. If both pack and justify are true, widgets take their natural size, and the extra space is placed between the widgets in order to keep them fully justified. By default, RowLayouts do not justify.

MarginLeft, MarginTop, MarginRight, MarginBottom and Spacing

These fields control the number of pixels between widgets (spacing) and the number of pixels between a widget and the side of the parent Composite (margin). By default, RowLayouts leave 3 pixels for margin and spacing. The margin and spacing fields are shown in the following diagram.

<!----> <!----><o:p></o:p>

<!----><!----><!----><!---->

RowLayout Examples

The following example code creates a RowLayout, sets all of its fields to non-default values, and then sets it into a Shell.

<!----> <!----><o:p></o:p>

    RowLayout rowLayout = new RowLayout();

    rowLayout.wrap = false;

    rowLayout.pack = false;

    rowLayout.justify = true;

    rowLayout.marginLeft = 5;

    rowLayout.marginTop = 5;

    rowLayout.marginRight = 5;

    rowLayout.marginBottom = 5;

    rowLayout.spacing = 0;

    shell.setLayout(rowLayout);

<!----> <!----><o:p></o:p>

If you are using the default field values, you only need one line of code:

<!----> <!----><o:p></o:p>

    shell.setLayout(new RowLayout());

<!----> <!----><o:p></o:p>

In the table below, the result of setting specific fields is shown.

<!----> <!----><o:p></o:p>

<!----> <!----><o:p></o:p>	Initial	After resize
<!----> <!----><o:p></o:p> wrap = true<o:p></o:p> pack = true<o:p></o:p> justify = false<o:p></o:p> <!----> <!----><o:p></o:p> (defaults)<o:p></o:p>	<!----> <!----><o:p></o:p> <!----><!----><!----> <!----> <!----><o:p></o:p>	<!----> <!----><o:p></o:p> <!----><!----><!----> <!----> <!----><o:p></o:p>
<!----> <!----><o:p></o:p> wrap = false<o:p></o:p> <!----> <!----><o:p></o:p> (clips if not enough space)<o:p></o:p>	<!----> <!----><o:p></o:p> <!----><!----><!----> <!----> <!----><o:p></o:p>	<!----> <!----><o:p></o:p> <!----><!----><!----> <!----> <!----><o:p></o:p>
<!----> <!----><o:p></o:p> pack = false<o:p></o:p> <!----> <!----><o:p></o:p> (all widgets are the same size)<o:p></o:p>	<!----> <!----><o:p></o:p> <!----><!----><!----> <!----> <!----><o:p></o:p>	<!----> <!----><o:p></o:p> <!----><!----><!----> <!----> <!----><o:p></o:p>
<!----> <!----><o:p></o:p> justify = true<o:p></o:p> <!----> <!----><o:p></o:p> (widgets are spread across the available space)<o:p></o:p>	<!----> <!----><o:p></o:p> <!----><!----><!----> <!----> <!----><o:p></o:p>	<!----> <!----><o:p></o:p> <!----><!----><!----> <!----> <!----><o:p></o:p>

<!----> <!----><o:p></o:p>

Using RowData Objects with RowLayout

Each widget controlled by a RowLayout can have its initial width and height specified by setting a RowData object into the widget. The following code uses RowData objects to change the initial size of the Buttons in a Shell.

<!----> <!----><o:p></o:p>

import org.eclipse.swt.*;

import org.eclipse.swt.widgets.*;

import org.eclipse.swt.layout.*;

<!----> <!----><o:p></o:p>

public class RowDataExample {

<!----> <!----><o:p></o:p>

    public static void main(String[] args) {

       Display display = new Display();

       Shell shell = new Shell(display);

       shell.setLayout(new RowLayout());

       Button button1 = new Button(shell, SWT.PUSH);

       button1.setText("Button 1");

       button1.setLayoutData(new RowData(50, 40));

       Button button2 = new Button(shell, SWT.PUSH);

       button2.setText("Button 2");

       button2.setLayoutData(new RowData(50, 30));

       Button button3 = new Button(shell, SWT.PUSH);

       button3.setText("Button 3");

       button3.setLayoutData(new RowData(50, 20));

       shell.pack();

       shell.open();

       while (!shell.isDisposed()) {

          if (!display.readAndDispatch()) display.sleep();

       }

    }

}

<!----> <!----><o:p></o:p>

Here is what you see when you run the above code.

<!----> <!----><o:p></o:p>

<!----><!----><!---->

GridLayout

GridLayout is the most useful and powerful of the standard layouts, but it is also the most complicated. With a GridLayout, the widget children of a Composite are laid out in a grid. GridLayout has a number of configuration fields, and, like RowLayout, the widgets it lays out can have an associated layout data object, called GridData. The power of GridLayout lies in the ability to configure GridData for each widget controlled by the GridLayout.

GridLayout Configuration Fields

NumColumns

The numColumns field is the most important field in a GridLayout, and it is usually the first field an application will set. Widgets are laid out in columns from left to right, and a new row is created when numColumns + 1 widgets are added to the Composite. The default is to have only 1 column. The following code creates a Shell with five Button children of various widths, managed by a GridLayout. The table below shows the grid when numColumns is set to 1, 2, or 3.

<!----> <!----><o:p></o:p>

       Display display = new Display();

       Shell shell = new Shell(display);

       GridLayout gridLayout = new GridLayout();

       gridLayout.numColumns = 3;

       shell.setLayout(gridLayout);

       new Button(shell, SWT.PUSH).setText("B1");

       new Button(shell, SWT.PUSH).setText("Wide Button 2");

       new Button(shell, SWT.PUSH).setText("Button 3");

       new Button(shell, SWT.PUSH).setText("B4");

       new Button(shell, SWT.PUSH).setText("Button 5");

       shell.pack();

       shell.open();

       while (!shell.isDisposed()) {

          if (!display.readAndDispatch()) display.sleep();

       }

<!----> <!----><o:p></o:p>

numColumns = 1<o:p></o:p>	numColumns = 2<o:p></o:p>	numColumns = 3<o:p></o:p>
<!----> <!----><o:p></o:p> <!----><!----><!----><o:p></o:p> <!----> <!----><o:p></o:p>	<!----> <!----><o:p></o:p> <!----><!----><!----> <!----> <!----><o:p></o:p>	<!----> <!----><o:p></o:p> <!----><!----><!----> <!----> <!----><o:p></o:p>

<!----> <!----><o:p></o:p>

MakeColumnsEqualWidth

The makeColumnsEqualWidth field forces the columns to be the same width. The default is false. If we change the example above to have 3 columns of equal width, this is what we would get (note that in the absence of further instruction, widgets are left-justified in their columns):

<!----><!---->

 <o:p></o:p>

MarginWidth, MarginHeight, HorizontalSpacing, and VerticalSpacing

The margin and spacing fields in a GridLayout are similar to those in a RowLayout. The difference is that the left and right margins are grouped into marginWidth, and the top and bottom margins are grouped into marginHeight. Also, in a GridLayout you can specify verticalSpacing, whereas in a RowLayout, only horizontalSpacing applied.

GridData Object Fields

GridData is the layout data object associated with GridLayout. To set a GridData object into a widget, you use the setLayoutData method. For example, to set the GridData for a Button, we could do the following:

<!----> <!----><o:p></o:p>

       Button button1 = new Button(shell, SWT.PUSH);

       button1.setText("B1");

       button1.setLayoutData(new GridData());

 

Of course, this code just creates a GridData object with all of its fields set to their default values, which is the same as not setting the layout data at all. There are two ways to create a

分享到：

答复: 如何用java为文件生成缩略图 | 使用links方式安装Eclipse插件

• 2008-02-01 15:21
• 浏览 1060
• 评论(0)
• 查看更多