1. 1 Lecture 11Lecture 14 Graphical User Interfaces (GUI) with AWT and Swing Overview  GUI Programming Issues.  GUI Programming in Java: Then and Now.  Overview of AWT and Swing Graphics Elements.  Layout Managers.  Some Examples.  Preview: More on GUIs

2. 2 Lecture 11Lecture 14 AWT GUI Programming Issues.  GUI programming consists of the following aspects:  Graphics: line drawing, filling, icons, etc  Windows (Containers, Components, Layout): gadgets for interaction  Events: handling interaction, timings, etc  Media: photos, video, sound, etc  Concurrency: doing several things at once  We have touched on all of these aspects except concurrency in the preceding lectures.  In the this and the next lectures, we will be considering more AWT graphics components and containers (as well as introducing Swing components) that can be used to develop more interesting GUIs.  All the components used in our graphics applications so far are from the AWT library.  Although the AWT is multiplatform (i.e, programs using AWT components run on different computer platforms without change), it was not written in Java and, as a result, it could not benefit from Java’s object-oriented virtues.  AWT components rely on native “peer” user interface elements (buttons, text fields, menus etc) of the underlying OS to render and operate them.

3. 3 Lecture 11Lecture 14 GUI Programming in Java: Then and Now  This reliance of the AWT components on the native platform gives AWT the following historical limitations:  slow on some platforms (e.g., windows)  portability problems (slightly different look, some behaviors different)  least common denominator phenomenon; rigid look  After many programmer complaints that Java with AWT does not qualify for “write once run everywhere” but “write once debug everywhere”, SUN Microsystems responded with the Java Foundation Classes (JFC) a.k.a Swing.  Unlike AWT, Swing components do not rely on native peers, instead the Java Virtual Machine renders and controls all components.  Swing completely controls the look and feel of all components and enables the creation of fast, flexible and extensible graphics components.  Four important points to remember about Swing:  1) The API is your best friend  2) Put a J in front of almost everything  3) Only “add” to a top-level container (JFrame, JApplet) by getting the container’s content-pane: getContentPane(); DON’T  4) DON’T mix Swing and AWT components.

4. 4 Lecture 11Lecture 14 AWT and Swing Graphics Elements  Graphics Components and Containers can be grouped into the following main headings  1.) Buttons (see classes Button, JButton): This class creates labeled buttons which generate ActionEvent (as seen in Lecture 13)  2.) Text components (see JTextComponent, JTextArea, JTextField): Allow multi-line (or single- line in case of JTextField) text display are which may be set to be read-only or to allow editing.  3.) Choices (Radio buttons, check boxes, combo boxes): Creates selectable/checkable buttons and boxes, selectable drop-down lists and look and feel renditions.  4.) Menus (see JMenuBar, JMenu, JMenuItem):Provide encapsulations for a platforms menus.  5.) Labels (see JLabel): Components for placing single-line, read-only text in a container.  6.) Panels: T he simplest container class (with FlowLayout default manganer) that provides space in which an application can attach any other component, including other panels.  7.) etc  See Example 2 for a simple demonstration of some of these components.

5. 5 Lecture 11Lecture 14 GUI Containers with Separate Layout Managers A Combo Box, Radio Buttons, and Check Boxes Pulldown Menus

6. 6 Lecture 11Lecture 14 Layout Managers  A layout manager is an object that determines the manner in which components are automatically arranged in a container.  Here are some predefined layout managers Java (the last two are defined in Swing)  FlowLayout: puts as many components in a row as possible, then moves to the next row. Components are displayed in the order they are added.  BorderLayout: defines 5 areas (North, East, South, West and Center) into which components can be added. Each of these areas could contain a container.  CardLayout: Treats each component in the container as a card, only one is visible at a time, and the container acts as a stack of cards.  GridLayout: Partitions the Frame into a fixed number of rows and columns.  GridBagLayout: Aligns components vertically and horizontally, without requiring that the components be of the same size.  BoxLayout: organises components either horizontally (in a row) or vertically (in a column).  OverlayLayout: Arranges components over the top of each other.  Every container has a default layout manager which can be changed using setLayout().

7. 7 Lecture 11Lecture 14 The GridLayout Manager keypadPanel.setLayout( new GridLayout(4,3,1,1)); A GridLayout arranges components in a two-dimensional grid. 4 rows and 3 columns 1 space between each row and column Design Critique: We should use BorderLayout for top-level window.

8. 8 Lecture 11Lecture 14 GUI Design Critique Problem: The default layout for a JPanel is FlowLayout but we need GridLayout. We got the keypad layout wrong!

9. 9 Lecture 11Lecture 14 The BorderLayout Manager Use add(Component, String) method to add components to a border layout : A BorderLayout divides the container into five areas: north, south, east, west, and center. getContentPane().setLayout(new BorderLayout(2, 2)); getContentPane().add(keypadPanel, "East"); Horizontal and vertical gaps.

10. 10 Lecture 11Lecture 14 Converter: BorderLayout Design Panels are used to group components by function. All the controls are grouped together.

11. 11 Lecture 11Lecture 14 Example 1: Using Simple Swing Components import javax.swing.*; import java.awt.*; import java.awt.event.*; public class CountButtonPushes extends JFrame implements ActionListener { private JButton button = new JButton("Press me"); private JLabel total = new JLabel( "Running total:"); private JTextField tally = new JTextField(10); private int sum = 0; public CountButtonPushes() { super("A Container With Components"); setSize(500,500); Container cp = getContentPane(); cp.setLayout(new FlowLayout()); cp.add(total); cp.add(tally); cp.add (button); button.addActionListener(this); show(); } public void actionPerformed( ActionEvent e ) { sum = sum + 1; // add number to sum tally.setText(Integer.toString(sum)); } public static void main(String args [] ) { new CountButtonPushes(); }

12. 12 Lecture 11Lecture 14 Example 1 (cont.)  Example 1 in the preceding slide is the same as in Lecture 10 except that in this case we need to add the components to the content pane of the JFrame window.  Run this program side-by-side the equivalent one in Lecture 10 that extends the AWT’s Frame and observe the behavior of the two programs.  Example 2 on the next slide is meant to provide a way of experimenting with the different layout managers.  In this example, different Swing components are created and added to the main JFrame Container as well as a JPanel subcontainer.  As you might guess, many of these Swing components have more than one constructor. You should consult the Java 2 SDK documentation for more details on these.  In order to facilitate your understanding of layout managers, you should run this program with the different standard layout managers to see their effect.

13. 13 Lecture 11Lecture 14 Example 2: Understanding Layout Managers import javax.swing.*;import java.awt.*; public class UsingLayoutManagers extends JFrame { private String courses[] = { "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten", "Eleven"}; private JCheckBox jcb = new JCheckBox("A check box"); private JRadioButton jrb = new JRadioButton("Radio Button"); private JPanel jp = new JPanel(); private Choice jc = new Choice(); private JComboBox jcbb = new JComboBox(); public UsingLayoutManagers() { super("Experimenting with Layout Managers."); setSize(500,500); Container cp = getContentPane(); cp.setLayout(new FlowLayout()); //cp.setLayout(new FlowLayout(FlowLayout.LEFT)); //cp.setLayout(new GridLayout(3,5)); //cp.setLayout(new GridBagLayout()); //cp.setLayout(new BorderLayout()); for (int i=0; i<courses.length; i++){ cp.add(new JButton(courses[i])); } cp.add(jcb); cp.add(jrb); jc.add("UNIX"); jc.add("Windows"); jc.add("Macintosh"); jp.add(jc); cp.add(jp); cp.add(jcbb); show();} public static void main(String args [] ) { new UsingLayoutManagers();}}

14. 14 Lecture 11Lecture 14 Example 3: Multiple Listeners to ActionEvent import javax.swing.*;import java.awt.*; import java.awt.event.*; public class UsingLayoutManagers1 extends JFrame implements ActionListener { private JPanel jp = new JPanel(); private JTextField jtf = new JTextField(21); private JButton buttons[] = new JButton[5]; private String courses[] = {"ICS102", "ICS201", "ICS202", "ICS232", "ICS313"}; public UsingLayoutManagers1() { super("Experimenting with Layout Managers!"); setSize(500,500); Container cp = getContentPane(); cp.setLayout(new FlowLayout()); for (int i=0; i<courses.length; i++){ buttons[i] = new JButton(courses[i]); buttons[i].addActionListener(this); cp.add(buttons[i]); } jp.add(jtf); cp.add(jp); show(); }

15. 15 Lecture 11Lecture 14 Example 3: Multiple Listeners to ActionEvent public void actionPerformed( ActionEvent ae) { for (int i = 0; i<courses.length; i++){ if (ae.getSource() == buttons[i]) jtf.setText("You Pressed "+ buttons[i].getText()); } public static void main(String args [] ) { new UsingLayoutManagers1(); } Example2

16. 16 Lecture 11Lecture 14 Example 3: Multiple Listeners to ActionEvent  Example 3 creates and adds a number of buttons to a JFrame and registers all these buttons to listen to an action event.  The getSource() method returns the object on which the Event initially occurred  The getText() method is used to return a button's text.  You may make similar modifications to this program as you did to the program in Example 2 above to add to your experience with layout managers.  We will consider more interesting examples involving with multiple Swing controls (components and containers)