HIGLayout tutorial

Daniel Michalik (dmi@autel.cz), April 2002

(version 1.0a)

What are saying developpers:

Why You may need a new Layout Manager

I decided to create HIGLayout after reading Java Look and Feel Design Guidelines and frustration on lack of easy to use and powerful layout manager. Standard Java layout managers require programmer to suffer all the bureaucracy of creating a number of panels, setting preferred sizes of components, creating empty components for intercomponent spacing etc. This radically slows down process of prototyping and makes GUI layout code more dificult to maintain.

May be You are working in IDE with form editor. But what if Your IDE uses some nonstandard layout manager and You will have to switch to another IDE? And, are they really powerful enough? Variety of absolute positioning layouts (like XYLayout) at first look are useful, but does not support resizing nor alignment.

What I expect of good Layout Manager:

I hope HIGLayout layout manager satisfies above criteria. It was created under LGPL license which give you oportunity tu use it in open/closed source programs. Following screenshots give You preview of posibilities with HIGLayout:

Following dialog is from Java Look and Feel Design Guidelines (part III.8):

Unfortunatelly, Swing components are not compliant with "guidelines" - their default sizes are greater then recomended in the book. HIGLayout allows to make corrections if You need:

Following dialog has only one panel (source code needed for obtaining this layout is only 13 lines!) Note, that buttons OK and Cancel have equal width. The same would be true, if text on the buttons were in another language, where their widths were opposite. Label on top of the text area is aligned in center.

The same dialog resized. Label still remains aligned in center:

Coordinate system

HIGLayout is based on idea of design grid which divides layout area into rows and columns. Both are indexed from 1. Any rectangle built from cells we will call component's target area. This rectangle is specified by the column and row indexes of top left cell, width by number of columns and height by number of rows. Following figure shows design grid used by dialog on figure above. Red rectangles mark target component areas. Components are placed into these areas.

There are 3 ways, how to specify width of column or height of row:

Resizing

Suppose width of container will enlarge by n pixels. This number is distributed amnong columns depending on column weights. Let S to be sum of all column weights, and Wi is weight of i-th column. Then i-th column width will be increased by n*(Wi/S). The same is true for rows.

In our example text area resizes because only 3rd column and 4th row have nonzero weights. When enlarging width, buttons OK, Cancel also move with right border of window.

Anchors

Layout algorithm gives component its preferred size. Then component is placed into center of its target area. There can be specified anchors which tells how to move or resize component to borders of the target area. Anchors are specified by single string of characters l, r, t, b (case sensitive!). These mean directions: left, right, top, bottom. In horizontal direction, first appearance of letter l (or r) moves component to left (right) border, second resizes it into right (left) border of target area. The same is true for vertical direction and letters t and b.

Default anchors string is "lrtb". In our example label in 2nd row has empty anchors string - that is why it is aligned in center.

Listing

Below is annotated listing of example.

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import cz.autel.dmi.*;

public class Demo2Dialog extends JDialog {
	public Demo2Dialog() {		
		JPanel p1 = new JPanel();
		int w1[] = {12, 0, 150, -6, 11,-4, 11};
		int h1[] = {12, 0, 5, 200, 17, 0, 11};
		HIGLayout l1 = new HIGLayout(w1, h1);
		HIGConstraints c = new HIGConstraints();

Arrays w1 and h1 specify widths and heights, as shown before. Remember about indexing from 1. Variable c holds HIGConstraints object which is used for specyfying position, size and anchors of component added into container. HIGLayout object always copies object, so we can use only one instance. HIGConstraints contains both sets of setter methods with "xy" and "rc" naming conventions. Below is used "rc".

		l1.setColumnWeight(3,1);
		l1.setRowWeight(4,1);
		p1.setLayout(l1);

To achieve proper resizing behavior define weights for 3rd column and 4th row.

		p1.add(new JLabel("Do You like HIGLayout?"), c.rcwh(2,2,5,1,"")); 

Places label into target area beginning on 2nd row, 2nd column and width of 5 columns and height of 1 row. We want to align the label into center, so we define anchor as empty string.

		p1.add(new JScrollPane(new JTextArea()), c.rcwh(4,2,5,1));
		p1.add(new JButton("Help"), c.rc(6,2));

Default width and height is 1 column and 1 row.

		p1.add(new JButton("OK"), c.rc(6,4));
		p1.add(new JButton("Cancel"), c.rc(6,6));
		getContentPane().add(p1, BorderLayout.CENTER);		
	}
}

This code You can find in download bundle in file examples/Demo2Dialog.java.

Donwload HIGLayout package

If You want to use HIGLayout, feel free to download it. Good luck!

History

Version 1.0a

Updated download link in this document

Version 1.0

There are several bug fixes and new features provided kindly by several contributors.

Fixed bugs:

New feature:

Important note:

Many thanks to all, who contributed to version 1.0:

Special thanks to Sun Microsystems for sponsoring great on-line available books. Without the book Java Look and Feel Design Guidelines there would be no HIGLayout.

Version 0.99

Version 0.98 (April 2000)

Version 0.95 (December 1999)

First public version.