JMU
Advanced GUI Layout
With Examples in Java


Prof. David Bernstein
James Madison University

Computer Science Department
bernstdh@jmu.edu


Hierarchical Template Layout
Hierarchical Template Layout (cont.)

Using the (Almost) Composite Pattern

images/container-component.gif
Hierarchical Template Layout (cont.)

An Example

javaexamples/layout/HierarchicalLayoutDriver.java
import java.awt.*;
import javax.swing.*;


/**
 * An example that uses hierarchical layout
 *
 * @version 1.0
 * @author  CS349, James Madison Univeristy
 */
public class HierarchicalLayoutDriver
{

    /**
     * The entry point of the example
     *
     * @param args   The command line arguments
     */
    public static void main(String[] args)
    {
        Container       contentPane;
        JButton         cancelButton, noButton, yesButton;
        JFrame          frame;    
        JLabel          titleLabel;
        JPanel          southPanel;
        JTextArea       textArea;


        frame = new JFrame();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        contentPane = frame.getContentPane();

        contentPane.setLayout(new BorderLayout());

        titleLabel = new JLabel();
        titleLabel.setText("An Example of Hierarchical Layout");
        contentPane.add(titleLabel, BorderLayout.NORTH);


        textArea = new JTextArea(40,20);
        contentPane.add(textArea, BorderLayout.CENTER);


          southPanel = new JPanel();
          southPanel.setLayout(new FlowLayout());

          yesButton = new JButton("Yes");
          southPanel.add(yesButton);
          

          noButton = new JButton("No");
          southPanel.add(noButton);
 
          cancelButton = new JButton("Cancel");
          southPanel.add(cancelButton);

        contentPane.add(southPanel, BorderLayout.SOUTH);

        // Make the JFrame as small as necessary
        frame.pack();

        frame.setSize(400,400);
        frame.setVisible(true);
    }
}
        
Constrained Template Layout
Constrained Template Layout (cont.)

An Example

javaexamples/gui/AboutDialog.java
package gui;

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

/**
 * An "About" box
 *
 * This class illustrates the use of constrained template
 * layout (i.e., GridBagLayout)
 *
 * @author  Prof. David Bernstein, James Madison University
 * @version 1.0
 */
public class AboutDialog extends    JDialog
   implements ActionListener
{

    /**
     * Constructor
     */
    public AboutDialog(Frame owner, String name, String description)
    {
       super(owner, "About "+name+"...", true);
       Container            contentPane;
       GridBagConstraints   gbc;
       GridBagLayout        gbl;
       JButton              button;
       JLabel               label;
       JTextArea            text;


       setSize(350,200);


       contentPane = getContentPane();
       gbl = new GridBagLayout();
       contentPane.setLayout(gbl);

       label = new JLabel(name, JLabel.CENTER);
       label.setFont(new Font("Sans Serif", Font.BOLD, 16));
       gbc = new GridBagConstraints();
       gbc.gridx = 1;
       gbc.gridy = 0;
       gbc.gridwidth = 3;
       gbc.gridheight = 1;
       gbc.fill = GridBagConstraints.HORIZONTAL;
       gbc.anchor = GridBagConstraints.CENTER;
       gbc.weightx = 100;
       gbc.weighty = 0;
       gbl.setConstraints(label, gbc);
       contentPane.add(label);


       label = new JLabel(" JMU ");
       label.setFont(new Font("Sans Serif", Font.PLAIN, 40));
       gbc = new GridBagConstraints();
       gbc.gridx = 0;
       gbc.gridy = 1;
       gbc.gridwidth = 1;
       gbc.gridheight = 3;
       gbc.fill = GridBagConstraints.NONE;
       gbc.anchor = GridBagConstraints.CENTER;
       gbl.setConstraints(label, gbc);
       contentPane.add(label);


       text = new JTextArea(20,20);
       text.append(description);
       text.setEditable(false);
       gbc = new GridBagConstraints();
       gbc.gridx = 1;
       gbc.gridy = 1;
       gbc.gridwidth = 3;
       gbc.gridheight = 3;
       gbc.fill = GridBagConstraints.BOTH;
       gbc.anchor = GridBagConstraints.WEST;
       gbc.weightx = 100;
       gbc.weighty = 100;
       gbl.setConstraints(text, gbc);
       contentPane.add(text);


       label = new JLabel("Copyright, James Madison University");
       label.setFont(new Font("Sans Serif", Font.PLAIN, 10));
       gbc = new GridBagConstraints();
       gbc.gridx = 0;
       gbc.gridy = 4;
       gbc.gridwidth = 3;
       gbc.gridheight = 1;
       gbc.fill = GridBagConstraints.NONE;
       gbc.anchor = GridBagConstraints.WEST;
       gbl.setConstraints(label, gbc);
       contentPane.add(label);


       button = new JButton("OK");
       button.addActionListener(this);
       gbc = new GridBagConstraints();
       gbc.gridx = 3;
       gbc.gridy = 4;
       gbc.gridwidth = 1;
       gbc.gridheight = 1;
       gbc.fill = GridBagConstraints.NONE;
       gbc.anchor = GridBagConstraints.EAST;
       gbl.setConstraints(button, gbc);
       contentPane.add(button);

    }




    /**
     * Handle actionPerformed events (required by ActionListener)
     *
     * @param evt   The event
     */
    public void actionPerformed(ActionEvent evt)
    {
       String command;


       command = evt.getActionCommand();
       if (command.equals("OK")) setVisible(false);
    }
}
        
Scrollable Components
Scrollable Components (cont.)
images/scrollpane.gif
Scrollable Components (cont.)

An Example

javaexamples/layout/ScrollableDriver.java
import java.awt.*;
import javax.swing.*;


/**
 * An example that uses a scrollable text area
 *
 * @version 1.0
 * @author  Prof. David Bernstein, James Madison Univeristy
 */
public class ScrollableDriver
{

    /**
     * The entry point of the example
     *
     * @param args   The command line arguments
     */
    public static void main(String[] args)
    {
        Container       contentPane;
        JFrame          frame;        
        JLabel          titleLabel;
        JPanel          southPanel;
        JRadioButton    automobilesCB, planesCB, trainsCB;
        JScrollPane  scrollPane;
        JTextArea       messageArea;

        frame = new JFrame();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        contentPane = frame.getContentPane();
        contentPane.setLayout(new BorderLayout());

        titleLabel = new JLabel();
        titleLabel.setText("A Scrolling Example");
        contentPane.add(titleLabel, BorderLayout.NORTH);


        messageArea = new JTextArea(1,1);
        // This is new
        scrollPane = new JScrollPane(messageArea);
        contentPane.add(scrollPane, BorderLayout.CENTER);


          southPanel = new JPanel();
          southPanel.setLayout(new FlowLayout());

          planesCB = new JRadioButton("Planes");
          southPanel.add(planesCB);
          

          trainsCB = new JRadioButton("Trains");
          southPanel.add(trainsCB);

          automobilesCB = new JRadioButton("Automobiles");
          southPanel.add(automobilesCB);

        contentPane.add(southPanel, BorderLayout.SOUTH);
        
        frame.setSize(400,400);
        frame.setVisible(true);

        
    }
}
        
Docking Toolbars
Docking Toolbars (cont.)

Some Views

images/toolbar_windows.gif
images/toolbar_motif.gif
images/toolbar_java.gif
Docking Toolbars (cont.)

An Example

javaexamples/layout/DockDriver.java
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;


/**
 * An example that uses buttons and a
 * docking tool bar.
 *
 * @version 1.0
 * @author  Prof. David Bernstein, James Madison Univeristy
 */
public class DockDriver
{

    /**
     * The entry point of the example
     *
     * @param args   The command line arguments
     */
    public static void main(String[] args)
    {
        Container      contentPane;
        JButton        cancelButton, okButton;
        JFrame         frame;
        JLabel         titleLabel;
        JTextArea      messageArea;
        JToolBar     toolBar;

        frame = new JFrame();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
       
        contentPane = frame.getContentPane();
        contentPane.setLayout(new BorderLayout());

        titleLabel = new JLabel();
        titleLabel.setText("A Button Example");
        contentPane.add(titleLabel, BorderLayout.NORTH);

        messageArea = new JTextArea(40,20);
        contentPane.add(messageArea, BorderLayout.CENTER);

        // This is new
        toolBar = new JToolBar();
        
        okButton = new JButton("OK");
        // This is new
        toolBar.add(okButton);
        
        cancelButton = new JButton("Cancel");
        // This is new
        toolBar.add(cancelButton);
        
        // This is new
        contentPane.add(toolBar, BorderLayout.SOUTH);

        frame.setSize(400,400);
        frame.setVisible(true);
    }
}
        
Borders
Border (cont.)

An Example

javaexamples/layout/BorderDriver.java
import java.awt.*;
import javax.swing.*;

/**
 * An example that uses Border
 *
 * @author  Prof. David Bernstein, James Madison University
 * @version 1.0
 */
public class BorderDriver
{

    public static void main(String[] args)
    {
       JFrame            frame;
       Container         contentPane;
       JPanel            p1, p2;



       frame = new JFrame();
       frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
       frame.setSize(200,200);       
       contentPane = frame.getContentPane();
       

       contentPane.setLayout(new GridLayout(3,1));

       p1 = new JPanel();
       p1.setLayout(new BorderLayout());
       p1.setBorder(BorderFactory.createTitledBorder("Name"));
       p1.add(new JTextField(" "), BorderLayout.CENTER);
       contentPane.add(p1);

       p2 = new JPanel();
       p2.setLayout(new BorderLayout());
       p2.setBorder(BorderFactory.createTitledBorder("Address"));
       p2.add(new JTextField(" "), BorderLayout.CENTER);
       contentPane.add(p2);

       contentPane.add(new JLabel("We will sell your personal information!"));

       frame.pack();
       frame.setVisible(true);
    }


}
        
Layered Layout
Layered Layout (cont.)

An Example

javaexamples/layout/JTabbedPaneDriver.java
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.event.*;
import javax.swing.text.*;

/**
 * An example that uses a JTabbedPane
 *
 * @version 1.0
 * @author  Prof. David Bernstein, James Madison Univeristy
 */
public class JTabbedPaneDriver
{

    /**
     * The entry point of the example
     *
     * @param args   The command line arguments
     */
    public static void main(String[] args)
    {
        Container     contentPane;
        JFrame        frame;
        
        JPanel        complements, criticisms;
        JTabbedPane   tabbedPane;
        
        frame = new JFrame();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        contentPane = frame.getContentPane();

        contentPane.setLayout(new BorderLayout());
        tabbedPane = new JTabbedPane();
        contentPane.add(tabbedPane, BorderLayout.CENTER);

        complements = new JPanel();
        complements.setLayout(new BorderLayout());
        complements.add(new JLabel("Things you like about this class:"),
                        BorderLayout.NORTH);
        complements.add(new JTextArea(), BorderLayout.CENTER);

        criticisms = new JPanel();
        criticisms.setLayout(new BorderLayout());
        criticisms.add(new JLabel("Things you dislike about this class:"),
                       BorderLayout.NORTH);

        
        tabbedPane.addTab("Complements", complements);
        tabbedPane.addTab("Criticisms",  criticisms);

        
        frame.setSize(400,200);
        frame.setVisible(true);

        
    }
}