SpringLayout (Professional Version Only)

Though the SpringLayout is one of the most complicated layouts, it is also one of the most useful and powerful. By using the SpringLayout, you are able to configure each side of a control to "snap" to window margins or to the sides of other controls. Controls can be freely placed on a container with SpringLayout. They can be freely moved and resized as well.

Play Movie

The Swing Designer fully supports creating SpringLayouts using fixed sized springs (struts), and you can easily configure the layout graphically. The Swing Designer has dynamic snap points at the window margins and near other controls. By dragging a control near these snap points, the control will be set to the snap point and will dynamically move and resize to stay consistent to the snap points.

Placing the SpringLayout on a container is the same as other layouts. Simply select SpringLayout from the Control Palette and place it on the container. The layout itself does not have any properties other than its variable. Each control on a container using SpringLayout has configuration data in the form of spring constraints, which can be accessed in the constraints property in the Inspector.

To place a control, simply select a control from the Control Palette and click anywhere on the container. If you just release the mouse button right where you clicked it, the control will be created at its natural size with its top-left corner exactly where you clicked. If you drag the control after clicking, you can specify the size of the control.

Like the NullLayout, the SpringLayout displays a grid when creating, moving, or sizing controls.

If you select a control place on a SpringLayout and expand the constraints property in the Inspector, you should see four complex properties called west, north, east and south. These are SpringLayout settings for each of the four sides of the selected control. All of the sides have the same properties.

If you select the component property, a button with three dots will appear in the property editor. If you click this button, a window pops up with a list of all the controls that the selected control can snap to. The side property allows you to set which side of the control listed in the component property the selected control is snapped to.

If a side of the selected control is snapped to another control, the offset property specifies the number of pixels the two sides of the controls are from each other from the perspective of the control listed under the component property. For example, let’s say that the selected control is to the right of the control that it is snapped to and the left side of the selected control is snapped to the right side of the other control. If the two controls have a 50 pixel offset between them, the offset property of the left side of the selected control would be 50.

Note: Not all controls are necessarily listed in the window of controls to snap to. The only controls that are listed are the siblings of the control (controls created in the same container) and the control's parent.

Although you can fully modify the snap points of all four sides of a control in the Inspector, it is often a lot easier to do this in the Content Pane. The Swing Designer allows you easily set up snap points graphically.

In the Content Pane, you will notice a small button on each side of your control. When clicked, these buttons will bring up a popup menu with some more buttons. These buttons change what the side of the control is snapped to.

The two buttons in the popup menu that have an arrow and a number sign specify that the side of the control is always to be the same number of pixels from the edge of the container that the arrow is pointing to.

The two buttons that show one rectangle pointing to another rectangle specify that the side of the control is always to be the same number of pixels from the edge of another control. When this button is clicked, the window with the list of all the controls that the selected control can snap on to appears.

The button removes any snap points for that side.

There are five sections in the menu. The first section attaches all four sides using fixed offsets from two of the container’s sides. The second section attaches all four sides using fixed offsets from three of the container’s sides. The third section attaches each side to the corresponding side of the container. The fourth section attaches two of the sides to fixed offsets from two of the container’s sides and attaches the other two sides to percentage offsets from the container’s sides. The fifth section attaches three of the sides to fixed offsets from three of the container’s sides and attaches the fourth side to a percentage offset from the container’s side.

The SpringLayout also supports the alignment buttons on the toolbar above the Content Pane. These buttons function similarly when using the SpringLayout as when using the NullLayout.

You can also set the snap points to predefined offsets. To see what these values are and how to change them, we will go to the Swing Designer’s SpringLayout preference page. To get there, select Window > Preferences, then select Designer > Swing > SpringLayout from the pane on the left. You should see the following page:

The Suppress dropdown box specifies when snap points will not be displayed. The default value is "When Ctrl key pressed". This means that when you hold down the Ctrl key, snap points will not be displayed on the Content Pane. The snap point sensitivity is the maximum number of pixels that the control can be away from the snap point for the control to be "grabbed" by the snap point. If this value is set to -1, no snap points will be displayed.

Snap point settings can be set independently for horizontal and vertical operations. There are snap points at given offsets from the window margin and from each widget. If a value of -1 is given for any of these, that particular snap point attachment will be disabled.

If you create a control and move it around, you will see lines appearing at certain places. These are the snap points that are defined in the SpringLayout property page.

Every control is broken up into four quadrants. If you move your mouse over a quadrant, there will be a line on the outside edges of that quadrant as shown below. When you move the control by dragging it, the two sides that have the line will be the only sides able to snap to a snap point.

Snap points are shown as gray lines for widget sides and blue lines for offset lines. The colors for these lines can be changed in the property page. To snap to a preset snap point, move the mouse into the proper quadrant of the control, and drag the control near the snap points. Lines will appear and the control will be grabbed by the snap points when you drop it.

Above there are two blue lines. The horizontal blue line is the top window margin offset while the vertical blue line is the left window margin.

When you drag the handles of a control to resize it, the snap points will also appear and you can snap to them.

Dragging a control near another control will also display snap points. As shown below, the two blue lines are offsets from the sides of the other control. Resizing a control also displays snap points to other controls. If a control is moved or resized and it has other controls that are snapped to it, the other controls will also move or resize to stay consistent with the snap points. Blue lines are also used for text baseline snap points.

As you start using the SpringLayout, you will find that it is very powerful. Using the Swing Designer, it is also very easy to use. The Swing Designer allows you to modify spring constraint settings in several ways, allowing you to use the way that works the best for a given situation.