Agenda

• Introduce AWT Components
• Give examples of each with applets and code
• Introduce containers and layout managers
• Give examples of each layout manager
• Demonstrate gaps and insets

---

AWT Components

• AWT has basic component set: Button, Canvas, Checkbox, Choice, Label, List, PopupMenu, MenuBar, ScrollBar, TextArea, TextField.
• Also has basic window elements: Frame, Dialog.
• AWT Components have native peers:
  
  
• Starting with 1.1, Panel and Canvas are lightweight

---

Some AWT Components

Button b = new Button("Mr. Button");
Canvas c = new Canvas();

Checkbox cb1 = new Checkbox("Salt");
Checkbox cb2 = new Checkbox("Pepper");

CheckboxGroup cbg = new CheckboxGroup();
Checkbox cb1 = new Checkbox("Zero", cbg, true);
Checkbox cb2 = new Checkbox("One", cbg, false);

Choice c = new Choice();
c.add("Purple");
c.add("Mauve");

Label l = new Label("Name: ");
TextField t = new TextField();

 1 // In file
 2 // compolayoutmgrs/examples/ex1/ButtonDemo.java
 3 import java.awt.*;
 4 import java.applet.*;
 5
 6 public class ButtonDemo extends Applet {
 7
 8     private String label = "Mr. Button";
 9
10     public ButtonDemo() {
11
12         Button b = new Button(label);
13         add(b);
14     }
15 }

---

More AWT Components

TextArea t = new TextArea("Hi, there.");

List l = new List();
l.add("Eat");
l.add("Ripe");
l.add("Plums");

Scrollbar s = new Scrollbar();

ScrollPane s = new ScrollPane();

 1 // In file compolayoutmgrs/examples/ex1/TextAreaDemo.java
 2 import java.awt.*;
 3 import java.applet.*;
 4
 5 public class TextAreaDemo extends Applet {
 6
 7     public TextAreaDemo() {
 8
 9         setLayout(new BorderLayout());
10
11         TextArea t = new TextArea("Hi, there.");
12
13         add("Center", t);
14     }
15 }

---

Frames and Dialogs

• Components that don't fit inside a Panel are:
  • Frame - Window with border and title bar
  • MenuBar - Menubar with Menus, MenuItems, and PopupMenus
  • Window - Plain old window
  • Dialog - Dialog box (can be modal)
  • FileDialog - Standard file dialog for Open and Save

  1 // In file compolayoutmgrs/examples/ex1/FrameDemo.java
  2 import java.awt.*;
  3 import java.awt.event.*;
  4 import java.applet.*;
  5
  6 public class FrameDemo extends Applet {
  7
  8     private Frame frame = new Frame("I've Been Framed!");
  9     private Dialog dialog = new Dialog(frame, "I've Been Dialoged!");
 10     private FileDialog fileDialog = new FileDialog(frame);
 11
 12     public FrameDemo() {
 13
 14         dialog.setSize(200, 150);
 15
 16         dialog.addWindowListener(
 17
 18             new WindowAdapter() {
 19
 20                 public void windowClosing(WindowEvent e) {
 21
 22                     dialog.setVisible(false);
 23                 }
 24             }
 25         );
 26
 27         frame.setSize(200, 150);
 28
 29         frame.addWindowListener(
 30
 31             new WindowAdapter() {
 32
 33                 public void windowClosing(WindowEvent e) {
 34
 35                     frame.setVisible(false);
 36                 }
 37             }
 38         );
 39
 40         Button dialogButton = new Button("Dialog");
 41
 42         dialogButton.addActionListener(
 43
 44             new ActionListener() {
 45
 46                 public void actionPerformed(ActionEvent e) {
 47
 48                     dialog.setVisible(true);
 49                 }
 50             }
 51         );
 52
 53         Button fileDialogButton = new Button("FileDialog");
 54
 55         fileDialogButton.addActionListener(
 56
 57             new ActionListener() {
 58
 59                 public void actionPerformed(ActionEvent e) {
 60
 61                     fileDialog.setVisible(true);
 62                 }
 63             }
 64         );
 65
 66         Panel buttonPanel = new Panel();
 67         buttonPanel.setLayout(new GridLayout(1, 2, 5, 5));
 68         buttonPanel.add(dialogButton);
 69         buttonPanel.add(fileDialogButton);
 70
 71         Panel southPanel = new Panel();
 72         southPanel.add(buttonPanel);
 73
 74         frame.add("South", southPanel);
 75
 76         Button frameButton = new Button("Frame");
 77
 78         frameButton.addActionListener(
 79
 80             new ActionListener() {
 81
 82                 public void actionPerformed(ActionEvent e) {
 83
 84                     frame.setVisible(true);
 85                 }
 86             }
 87         );
 88
 89         add(frameButton);
 90
 91         MenuBar menubar = new MenuBar();
 92         Menu fileMenu = new Menu("File");
 93         menubar.add(fileMenu);
 94         fileMenu.add(new MenuItem("New"));
 95         fileMenu.add(new MenuItem("Open..."));
 96         fileMenu.add(new MenuItem("-"));
 97         fileMenu.add(new MenuItem("Save"));
 98         fileMenu.add(new MenuItem("Save As..."));
 99         fileMenu.add(new MenuItem("-"));
100
101         MenuItem closeMenuItem = new MenuItem("Close");
102         fileMenu.add(closeMenuItem);
103
104         frame.setMenuBar(menubar);
105
106         closeMenuItem.addActionListener(
107
108             new ActionListener() {
109
110                 public void actionPerformed(ActionEvent e) {
111
112                     frame.setVisible(false);
113                 }
114             }
115         );
116     }
117 }

---

Containers

• To build an AWT GUI, you add Components to Containers
  
  

---

Components go into Containers

• Old fashioned way to position a Component inside a Container:

  container.add(component);
  component.setLocation(x, y);
  component.setSize(width, height);
  

• New-fangled way to position a Component inside a Container:

  container.setLayout(layoutManager);
  add(component);
  

  LayoutManagers invoke getMinimumSize() on components.

---

LayoutManagers

• LayoutManagers help you to design GUIs that:
  • adjust to heterogeneous displays
  • adjust to font changes
  • adjust to language changes
• With LayoutManagers Java GUIs are rendered similarly to how a browser renders HTML pages.
• A web page will be usasble everywhere, but graphical designers are frustrated because they can't fully control the look.
• LayoutMangers give you a less clean separation of application code from "resource" code.

---

FlowLayout

• A FlowLayout (Panel's default) adds components one after another:
  • Uses width and height from getMinimumSize()
  • Alignments: CENTER (the default), LEFT, RIGHT
  • H and V Gaps: (5 is the default)

 1 // In file
 2 // compolayoutmgrs/examples/ex2/FlowLayoutPanel.java
 3 import java.awt.*;
 4
 5 public class FlowLayoutPanel extends Panel {
 6
 7     public FlowLayoutPanel() {
 8
 9         setLayout(new FlowLayout());
10
11         add(new Button("Characteristically,"));
12         add(new Button("Every"));
13         add(new Button("Good"));
14         add(new Button("Boy"));
15         add(new Button("Does"));
16         add(new Button("Fine."));
17     }
18 }

---

GridLayout

• A GridLayout lays components out on a grid, completely ignoring getMinimumSize():
  • Completely ignores width and height from getMinimumSize()
  • Grid fills entire container; components fill entire cell.
  • By default, no H and V Gaps

 1 // In file
 2 // compolayoutmgrs/examples/ex2/GridLayoutPanel.java
 3 import java.awt.*;
 4
 5 public class GridLayoutPanel extends Panel {
 6
 7     public GridLayoutPanel() {
 8
 9         setLayout(new GridLayout(3, 2));
10
11         add(new Button("Characteristically,"));
12         add(new Button("Every"));
13         add(new Button("Good"));
14         add(new Button("Boy"));
15         add(new Button("Does"));
16         add(new Button("Fine."));
17     }
18 }

---

Gaps Between Components

• Can also add horizontal and vertical gaps:

   1 // In file
   2 // compolayoutmgrs/examples/ex2/GridWithGapsPanel.java
   3 import java.awt.*;
   4
   5 public class GridWithGapsPanel extends Panel {
   6
   7     public GridWithGapsPanel() {
   8
   9         setLayout(new GridLayout(3, 2, 5, 5));
  10
  11         add(new Button("Characteristically,"));
  12         add(new Button("Every"));
  13         add(new Button("Good"));
  14         add(new Button("Boy"));
  15         add(new Button("Does"));
  16         add(new Button("Fine."));
  17     }
  18 }
  

---

Insets

• Containers can override getInsets() to create a border around the components they contain:

   1 // In file
   2 // compolayoutmgrs/examples/ex2/PanelWithInsets.java
   3 import java.awt.*;
   4
   5 public class PanelWithInsets extends Panel {
   6
   7     public PanelWithInsets() {
   8
   9         setLayout(new GridLayout(1, 1));
  10         add(new GridWithGapsPanel());
  11     }
  12
  13     public Insets getInsets() {
  14
  15         // top, left, bottom, right
  16         return new Insets(5, 5, 5, 5);
  17     }
  18 }
  

---

BorderLayout

• A BorderLayout lets you position components in the north, south, east, west, or center.
  
  • Uses minimum height of North and South components
  • Uses minimum width of East and West components
  • Center component gets everything else

   1 // In file
   2 // compolayoutmgrs/examples/ex2/BorderLayoutPanel.java
   3 import java.awt.*;
   4
   5 public class BorderLayoutPanel extends Panel {
   6
   7     public BorderLayoutPanel() {
   8
   9         setLayout(new BorderLayout());
  10
  11         add("North", new Button("Every"));
  12         add("East", new Button("Good"));
  13         add("South", new Button("Boy"));
  14         add("West", new Button("Does"));
  15         add("Center", new Button("Fine"));
  16     }
  17 }
  

---

CardLayout

• A CardLayout lets you position components one on top of the other:

   1 // In file
   2 // compolayoutmgrs/examples/ex2/CardLayoutPanel.java
   3 import java.awt.*;
   4
   5 public class CardLayoutPanel extends Panel {
   6
   7     public static final String RED = "Red";
   8     public static final String GREEN = "Green";
   9     public static final String BLUE = "Blue";
  10
  11     private CardLayout cardLayout = new CardLayout();
  12
  13     public CardLayoutPanel() {
  14
  15         setLayout(cardLayout);
  16
  17         Canvas redCanvas = new Canvas();
  18         Canvas greenCanvas = new Canvas();
  19         Canvas blueCanvas = new Canvas();
  20
  21         redCanvas.setBackground(Color.red);
  22         greenCanvas.setBackground(Color.green);
  23         blueCanvas.setBackground(Color.blue);
  24
  25         add(RED, redCanvas);
  26         add(GREEN, greenCanvas);
  27         add(BLUE, blueCanvas);
  28     }
  29
  30     public void flipCard() {
  31
  32         cardLayout.next(this);
  33     }
  34 }
  

---

Swing Intro

• JFC = AWT + Accessibility + 2D API + Drag and Drop + Swing
• Component and Container lightweight in 1.1
• Swing Heavyweight Components: JFrame, JDialog, JWindow, and JApplet
• All others are lightweight subclasses of JComponent
• JComponent extends Container, which extends Component
• Swing draws all its components, light or heavy, with Java code

---

Swing Components

• JLabel
• ImageIcon
• JButton
• (tooltips)
• JToggleButton
• JCheckBox
• JRadioButton
• JScrollbar
• JSlider
• JProgressBar
• JList
• JComboBox
• JPanel
• JInternalFrame
• JFileChooser
• JColorChooser
• Borders
• JMenuBar and JMenuItem
• JToolBar
• JTable
• JTree

---

Model View Controller

• Model: state data for component
• View: how you see the component on the screen
• Controller: determines how the component interacts with events
• Swing combines View and Controller into "Delegate"
• Can have a pie chart, a bar chart, and a table
• Can change the look and feel on the fly

---

A Swing FlowerDemo

 1 // In file CompoLayoutMgrs/examples/ex4/FlowerDemo.java
 2 import javax.swing.*;
 3 import java.awt.event.*;
 4
 5 class FlowerDemo {
 6
 7     public static void main(String[] args) {
 8
 9         FlowerFrame bf = new FlowerFrame();
10
11         bf.addWindowListener(
12             new WindowAdapter() {
13                 public void windowClosing(WindowEvent e) {
14                     System.exit(0);
15                 }
16             }
17         );
18
19         bf.pack();
20         bf.setLocation(100, 75);
21         bf.setVisible(true);
22     }
23 }

 1 // In file CompoLayoutMgrs/examples/ex4/FlowerFrame.java
 2 import javax.swing.*;
 3 import java.awt.*;
 4 import javax.swing.border.TitledBorder;
 5
 6 class FlowerFrame extends JFrame {
 7
 8     FlowerFrame() {
 9
10         getContentPane().setLayout(new GridLayout(1, 1));
11
12         // Create a JPanel to put on the content pane
13         JPanel panel = new JPanel();
14         panel.setLayout(new GridLayout(1, 2, 5, 5));
15
16         // set up the buttons
17         JButton b1 = new JButton("Golden Poppy",
18             new ImageIcon("images/CAGoldenPoppy.gif"));
19         JButton b2 = new JButton("Columbine",
20             new ImageIcon("images/COColumbine.gif"));
21
22         b1.setHorizontalTextPosition(JButton.CENTER);
23         b1.setVerticalTextPosition(JButton.BOTTOM);
24         b1.setMnemonic('G');
25         b1.setToolTipText("California");
26
27         b2.setHorizontalTextPosition(JButton.CENTER);
28         b2.setVerticalTextPosition(JButton.BOTTOM);
29         b2.setMnemonic('C');
30         b2.setToolTipText("Colorado");
31
32         panel.add(b1);
33         panel.add(b2);
34
35         JRootPane root = getRootPane();
36         root.setDefaultButton(b1);
37
38         // Set up the menubar
39         JMenuBar bar = new JMenuBar();
40
41         JMenu flowersMenu = new JMenu("Flowers");
42         bar.add(flowersMenu);
43         JMenuItem mi = new JMenuItem("Golden Poppy");
44         mi.setAccelerator(KeyStroke.getKeyStroke('G',
45             java.awt.Event.CTRL_MASK, false));
46         flowersMenu.add(mi);
47         mi = new JMenuItem("Columbine");
48         mi.setAccelerator(KeyStroke.getKeyStroke('C',
49             java.awt.Event.CTRL_MASK, false));
50         flowersMenu.add(mi);
51         bar.add(flowersMenu);
52
53         JMenu lookNFeelMenu = new JMenu("Look&Feel");
54         lookNFeelMenu.add("Metal");
55         lookNFeelMenu.add("Motif");
56         lookNFeelMenu.add("Windows");
57         bar.add(lookNFeelMenu);
58
59         root.setJMenuBar(bar);
60
61         // Add a border to the content pane
62         TitledBorder border = new TitledBorder("State Flowers");
63         border.setTitlePosition(TitledBorder.BOTTOM);
64         border.setTitleJustification(TitledBorder.RIGHT);
65         panel.setBorder(border);
66
67         getContentPane().add(panel);
68     }
69 }

---

Exercises

Problem 1.

Create a Java application that puts up a JFrame that has the look, but not the functionality, of a web browser. Put the title "Swing Browser" on the title bar. Give it a menu bar with a few menu items that your browser has. Below the menubar, put a tool bar with buttons for Back, Forward, Reload, Home, and Stop. These buttons should all be left adjusted, with a bit of space between them and around them. Put icons in these buttons as well as text. Below the toolbar, place another toolbar that has a label on the left that says "Location:". The rest of the toolbar is an edit box where the user can type in a URL. At the bottom of the JFrame, place a status bar. Put a message in the status bar. The rest of the JFrame is left as the area that will display the web pages. Just make this area white.

Swing has a lot of functionality to hope with this kind of task, but this time try to limit yourself to using only JButtons, JTextFields, JPanels, JLabels, and of course JFrame. The aim of this exercise is to get you thinking in terms of layout managers. How will you use layout managers to get the JFrame to look like a web browser using just this handful of lightweight components?