devxlogo

You Don’t Have to Swing to Make Great Java UIs

You Don’t Have to Swing to Make Great Java UIs

thorough understanding of Layout Managers is essential to building complex user interfaces in Java applications. The Standard Widget Toolkit (SWT) provides five different layout managers. This article uses simple examples to introduce all of them (see Figure 1). It also provides a detailed example for GridLayout, a very useful, flexible manager that builds screens for frequent resizing.

FillLayout
This layout is very similar to the Swing’s GridLayout. It does not honor the width and height of the components placed in it?the child widgets get the entire available space. When you add multiple components, each component gets the same height and width. Unlike GridLayout, FillLayout provides two parameters, HORIZONTAL and VERTICAL, which specify how the components will be placed.

Figure 1. The Layout Managers: This shows the SWT layout managers class hierarchy.

RowLayout
RowLayout is analogous to Swing’s FlowLayout. This layout does honor the width and height of its child components. Unlike FlowLayout, where the child components are placed from left to right, RowLayout allows you to position components from top to bottom as well. Use the following additional properties to fine tune the position of the child components within the layout:

marginLeft, marginTop, marginRight, marginBottom

Use the Pack property to set the components with equal width. Use the Justify to position the widgets across the available space within the composite.

When the number of components you’ve added to RowLayout exceeds available width, RowLayout wraps the components into the next row (like FlowLayout). Set each components’ width and height using the width and height properties.

Figure 2. A GridLayout Example: This layout manager allows you to build complex and flexible UIs.

GridLayout with GridData
GridLayout is the most important of the managers. Its features allow you to build complex and flexible UIs?and it’s especially useful for when you need dynamic behavior in your screens. The GridLayout lays out the widgets in grids. Its power lies in its ability to configure GridData for each control in the layout.

GridData is the layout data object associated with GridLayout. To set a GridData object into a control, you use the setLayoutData() method.

The Fill and Grab parameters control the dynamic behavior of the screen. The marginWidth and marginHeight parameters control the space in pixels to be left along the left, right, top, and bottom of the screen.

The HorizontalSpacing and VerticalSpacing values specify the amount of space left between the widgets in pixels. The numColumns value specifies the number of columns in the grid:

txtItem.setLayoutData( new GridData( GridData.HORIZONTAL_ALIGN_FILL |     				      GridData.VERTICAL_ALIGN_CENTER |     				     	GridData.GRAB_HORIZONTAL ));lstItems.setLayoutData(new GridData(GridData.HORIZONTAL_ALIGN_FILL |	    				      GridData.VERTICAL_ALIGN_FILL   |    				      GridData.GRAB_HORIZONTAL      |	    				      GridData.GRAB_VERTICAL));

In the above code, the textItem and listItem, the GRAB_HORIZONTAL parameter enables the widgets to get most of the horizontal space when the screen is expanded. Find the full source code here.

The ListItem gets most of the vertical space as the GRAB_VERTICAL space is set to true. However unlike GridBagLayout of Swing, GridLayout does not support weighted fill for multiple components.

Figure 3. A Blueprint Design: This shows a blueprint design for setting a GridData object into a control.

FormLayout with FormData and FormAttachment
FormLayout is very flexible. It allows you to control the position and size of the components within the layout to the exact pixel.

Use FormData to define the attachments of a widget in a FormLayout. To attach each side of a child widget to a position in the parent composite, or to other widgets within the composite, create instances of FormAttachment and setting them into the top, bottom, left, and right fields of the child’s FormData. Use FormAttachments to determine the size of the control. Use FormData objects to set the width and height of controls within a FormLayout. If you’re not careful, and you make a circular attachment, the layout algorithm will fail, which can incur undesirable results.

StackLayout
This layout stacks all the controls one on top of the other and resizes all the controls to have the same size and location?however only one control is visible at a time. The control specified in topControl is visible. Users must set the topControl value to flip between the visible items and the call layout() on the composite which contains the StackLayout.

layout.topControl = bArray[index[0]];parent.layout();

Though this layout has some similarities to Swing’s TabbedPane, StackLayout allows only sequential navigation of each control.

Using any combination of these layout managers, you can build complex, user-friendly screens for Java applications.

devx-admin

Share the Post: