1. 1 Graphical User Interfaces AWT and Swing packages Frames and Panels Components Nested Panels Images Reading for this Lecture: L&L, 3.9 – 3.11

2. 2 Graphical Applications The example programs we've explored thus far have been text-based command-line applications, which interact with the user using text prompts Let's examine some Java applications that have graphical components These components will serve as a foundation to programs with true graphical user interfaces (GUIs) We will start with generating a frame with panels containing text “labels” or images

3. 3 Graphical Applications GUI-related classes are defined primarily in java.awt and javax.swing packages The Abstract Windowing Toolkit (AWT) was the original Java GUI package The Swing package provides additional and more versatile components Sometimes called Java Foundation Classes (mimicking Microsoft Foundation Classes)

4. 4 GUI Containers - Frame A GUI container is a component that is used to hold and organize other components JFrame, JDialog, and JApplet are the three top level containers that are used to display graphics in GUI applications We will work only with JFrame for now A JFrame is displayed as a separate window with a title bar – it can be repositioned and resized on the screen as needed

5. 5 Frame-based Hello World JFrame frame attribute title JFrame frame JLabel label JFrame frame width = 300 JFrame frame height = 200

6. 6 Frame-based Hello World import javax.swing.*; // Get JFrame and JLabel classes public class HelloWorld { public static void main(String[] args) { //Create and set up the window. JFrame frame = new JFrame("HelloWorld Using Swing"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); //Add the ubiquitous "Hello World" label. JLabel label = new JLabel("Hello World"); frame.add(label); //Display the window. frame.setSize(300,200); // width and height frame.setVisible(true); }

7. 7 GUI Panels / Components A panel is a container that cannot be displayed on its own It must be added to another container to be displayed It is used to organize other components A GUI component is an object that represents a screen element such as a text field, image, radio buttons, check boxes and so on. A GUI component must be added to a container such as a panel or frame to be displayed

8. 8 GUI Containers A GUI container can be classified as either heavyweight or lightweight A heavyweight container is one that is managed by the underlying operating system A lightweight container is managed by the Java program itself Occasionally this distinction is important A frame is a heavyweight container and a panel is a lightweight container

9. 9 Labels A label is a GUI component that displays a line of text Labels are usually used to display information or identify other components in the display Let's look at a program that organizes two labels in a panel and displays that panel in a frame See Authority.java (page 144)Authority.java This program is not interactive, but the frame can be repositioned and resized

10. 10 Authority JLabel label1 JLabel label2 JPanel primary JFrame frame

11. 11 Authority.java import java.awt.*; import javax.swing.*; public class Authority { public static void main (String[] args) { JFrame frame = new JFrame ("Authority"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JPanel primary = new JPanel(); primary.setBackground (Color.yellow); primary.setPreferredSize (new Dimension(250, 75));

12. 12 Authority.java JLabel label1 = new JLabel ("Question authority,"); JLabel label2 = new JLabel ("but raise your hand first."); primary.add (label1); primary.add (label2); frame.add(primary); frame.pack(); frame.setVisible(true); }

13. 13 Nested Panels Containers that contain other components make up the containment hierarchy of an interface This hierarchy can be as intricate as needed to create the visual effect desired The following example nests two panels inside a third panel – note the effect this has as the frame is resized See NestedPanels.java (page 146)NestedPanels.java

14. 14 Nested Panels JPanel panel1 JLabel label1JLabel label2JLabel label3

15. 15 NestedPanels.java import java.awt.*; import javax.swing.*; public class NestedPanels { public static void main (String[] args) { JFrame frame = new JFrame ("Nested Panels"); frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE); // Set up first subpanel JPanel subPanel1 = new JPanel(); subPanel1.setPreferredSize (new Dimension(150, 100)); subPanel1.setBackground (Color.green); JLabel label1 = new JLabel ("One"); subPanel1.add (label1);

16. 16 NestedPanels.java // Set up second subpanel JPanel subPanel2 = new JPanel(); subPanel2.setPreferredSize (new Dimension(150, 100)); subPanel2.setBackground (Color.red); JLabel label2 = new JLabel ("Two"); subPanel2.add (label2); // Set up primary panel JPanel primary = new JPanel(); primary.setBackground (Color.yellow); primary.add (subPanel1); primary.add (subPanel2); JLabel label3 = new JLabel ("Buckle my shoe..."); primary.add (label3); frame.add(primary); frame.pack(); frame.setVisible(true); }

17. 17 Images Images are often used in a programs with a graphical interface Java can manage images in both JPEG and GIF formats As we've seen, a JLabel object can be used to display a line of text It can also be used to display an image That is, a label can be composed of text, and image, or both at the same time

18. 18 Images The ImageIcon class is used to represent an image that is stored in a label The position of the text relative to the image can be set explicitly The alignment of the text and image within the label can be set as well See LabelDemo.java (page 149)LabelDemo.java

19. 19 LabelDemo

20. 20 LabelDemo.java import java.awt.*; import javax.swing.*; public class LabelDemo { public static void main (String[] args) { JFrame frame = new JFrame ("Label Demo"); frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE); ImageIcon icon = new ImageIcon ("devil.gif"); JLabel label1, label2, label3; label1 = new JLabel ("Devil Left", icon, SwingConstants.CENTER); label2 = new JLabel ("Devil Right", icon, SwingConstants.CENTER); label2.setHorizontalTextPosition (SwingConstants.LEFT); label2.setVerticalTextPosition (SwingConstants.BOTTOM);

21. 21 LabelDemo.java label3 = new JLabel ("Devil Above", icon, SwingConstants.CENTER); label3.setHorizontalTextPosition (SwingConstants.CENTER); label3.setVerticalTextPosition (SwingConstants.BOTTOM); JPanel panel = new JPanel(); panel.setBackground (Color.cyan); panel.setPreferredSize (new Dimension (200, 250)); panel.add (label1); panel.add (label2); panel.add (label3); frame.add(panel); frame.pack(); frame.setVisible(true); }

22. 22 Graphical User Interfaces At least three kinds of objects are needed to create a GUI: –Components – an object that defines a screen element to display information. Containers is a special type of component that is used to hold and organize other components. –Events – an event is an object that represents some occurrence in which we may be interested. For e.g. Press of a mouse button or typing a key on keyboard.

23. 23 Graphical User Interfaces Listeners – a listener is an object that “waits’ for an event to occur and responds in some way when it does. We must carefully establish the relationships among the listener, the event it listens for, and the component that will generate the event.

24. 24 Graphical User Interfaces Every event handler requires three pieces of code: In the declaration for the event handler class, one line of code specifies that the class implements a listener interface. For example: public class MyClass extends JFrame implements ActionListener { Another line of code registers an instance of the event handler class as a listener on one or more components. For example: someComponent.addActionListener(this); The event handler class has code that implements the methods in the listener interface. For example: public void actionPerformed(ActionEvent e) {... //code that reacts to the action... }

25. 25 Buttons Lets write a class for following output. Push Counter Push me Pushes: 2

26. 26 TextFields Lets write a class for following output. Calculator Add 3 2 First Number Second Number SubtractProduct Result: 5Result: 1Result: 6