1 GUI Programming (Part III). Graphical User Interfaces (Part III) Overview  GUI Programming Issues.  GUI Programming in Java: Then and Now.  Overview of AWT and Swing Graphics Elements.  Layout Managers.  Some Examples.  Coming Next: GUI Programming (Part IV).

2 GUI Programming (Part III). 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 GUI Programming (Part III). 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 GUI Programming (Part III). 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 GUI Programming (Part III). Complete GUIs Containers with Separate Layout Managers A Combo Box, Radio Buttons, and Check Boxes Pulldown Menus

6 GUI Programming (Part III). 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 GUI Programming (Part III). 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 GUI Programming (Part III). GUI Design Critique Problem: The default layout for a JPanel is FlowLayout but we need GridLayout. We got the keypad layout wrong!

9 GUI Programming (Part III). 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 GUI Programming (Part III). The BorderLayout Manager Panels are used to group components by function. All the controls are grouped together.

11 GUI Programming (Part III). Anatomy of a Swing JFrame The surface of a Swing frame is covered with four panes. Three of them, namely the root pane, the layered pane, and the glass pane are of no interest to most Java programmers. You need to know about the content pane, which holds the components that you want to display in the window To add a component to the content pane of a frame, you must first get a reference to the content pane object by calling the getContentPane method. This method returns a reference of type Container.

12 GUI Programming (Part III). 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(); }

13 GUI Programming (Part III). Example 1 (Cont’d)  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.

14 GUI Programming (Part III). 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();}}

15 GUI Programming (Part III). 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(); }

16 GUI Programming (Part III). Example 3: Multiple Listeners to ActionEvent (Cont’d) 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

17 GUI Programming (Part III). Example 3: Multiple Listeners to ActionEvent (Cont’d)  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)