layout manager

Layout managers, used in Widget toolkits, are software components which have the ability to lay out widgets by their relative positions without using distance units.

A lot of popular Widget toolkits have this ability by default, making it often more natural to use than by defining their absolute (on the screen) or relative (to the parent) position in pixels or common distance units. Widget toolkits that provide this possibility can be separated in two groups :

• Those where the layout behavior is coded in special Graphic Containers. This is the case in XUL or the .NET Framework Widget toolkit (called Windows.Forms).
• Those where the layout behavior is coded in layout managers, that can be applied to any Graphic Container. This is the case in the Swing widget toolkit that is part of the Java API.

Example in XUL

The vbox container allows to stack components on top of each other.

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="vbox example" title="Example"
        xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<vbox>
  <button id="yes" label="Yes"/>
  <button id="no" label="No"/>
  <button id="maybe" label="Maybe"/>
</vbox>

</window>

This piece of code shows 3 buttons stacked on top of each other in a vertical box :

Example in Java Swing

The FlowLayout layout manager arranges components in a directional flow, much like lines of text in a paragraph. It arranges components horizontally until no more components fit on the same line, then it places them on another line.

import javax.swing.JFrame;
import javax.swing.JButton;
import java.awt.FlowLayout;
import java.awt.Container;

public class LayoutExample extends JFrame {
    public LayoutExample() {
        this.setTitle("FlowLayoutDemo");
        // get the top-level container in the Frame (= Window)
        Container contentPane = this.getContentPane();

        // set the layout of this container
        contentPane.setLayout(new FlowLayout());

        // add buttons in this container
        this.add((new JButton("Button 1")));
        this.add((new JButton("Button 2")));
        this.add((new JButton("Button 3")));
        this.add((new JButton("Long-Named Button 4")));
        this.add((new JButton("5")));

        // unrelated, exit the application when clicking on the 
        // right close-button
        this.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
    }

    public static void main(String[] args) {
        LayoutExample example = new LayoutExample();
        example.setVisible(true);
    }
}

This piece of code shows 5 buttons alongside each other on the same line :

Example in PageLayout Layout Manager for Java Swing

The open source (and free) PageLayout layout manager allows the components to be laid out in nested rows, columns, and grids, which are examples of a Cell in the API and are Graphic Containers.

The GUI for the FlowLayout example above can be constructed by using the PageLayout API as follows:

import javax.swing.JFrame;
import javax.swing.JButton;
import java.awt.FlowLayout;
import java.awt.Container;
import static pagelayout.EasyCell.*;

public class LayoutExample extends JFrame {
    public LayoutExample() {
        this.setTitle("PageLayoutDemo");
        
        // create the row of buttons and create the layout.
        // The arguments to row could be any swing component 
        //     or any row, column or grid.
        row(new JButton("Button 1"),
            new JButton("Button 2"),
            new JButton("Button 3"),
            new JButton("Long-Named Button 4"),
            new JButton("5")).createLayout(getContentPane());

        // unrelated, exit the application when clicking on the 
        // right close-button
        this.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
    }
    public static class GUICreator implements Runnable {
                public void run() {
                   LayoutExample example = new LayoutExample();
                   example.setVisible(true);
                }
   }
    public static void main(String[] args) {
            SwingUtilities.invokeLater(new GUICreator());
    }
}

A program for layout of Java Swing components using PageLayout API is generally much more compact than the corresponding code that uses one of the many other layout managers that are available for Java. More examples can be found on the PageLayout site.

External links

• layout tutorial on SUN website
• xul tutorial on xulplanet (see paragraph 3 and 4)

Donate to Wikimedia