Weeks 8 and 9GUI and Event-Driven ProgrammingCS 180Prof. Sunil PrabhakarDepartment of Computer Science Purdue University© Sunil Prabhakar Purdue UniversityGraphical User InterfacesInput/output devices for computersPrinter, punch cardsKeyboard, ScreenGraphical interface with mouse inputYou have used GUIs for most of your interactions with the computer. GUIs consist of windows, buttons, menus, entry fields, …2© Sunil Prabhakar Purdue UniversitySample GUI3© Sunil Prabhakar Purdue UniversityGUI classesJava makes it very easy to create GUIsThe two packages java.awt and javax.swing provide a large number of classes that can be used to construct GUIsBy using these classes, we need not worry about the differences between operating systems or system detailsWe will use classes from the swing package as they are more reliable across platformsThe awt package provides support for swing classes4© Sunil Prabhakar Purdue UniversityCreating a simple GUICreate a window object Add GUI elements to the windowWrite code to respond to the GUI elements5© Sunil Prabhakar Purdue UniversityCreating a WindowThe JFrame class is a common starting point.The JFrame class corresponds to a basic window for the given operating systemIt behaves like most other windowsWe can either create an object of the JFrame class, orcreate a subclass of JFrame if we expect to create multiple windows with the same behavior6© Sunil Prabhakar Purdue University7A simple JFrame objectimport javax.swing.*;class ShowWindow { public static void main( String[] args ) { JFrame myWindow; myWindow = new JFrame();myWindow.setSize(300,400);myWindow.setTitle(“My Window”);myWindow.setResizable(true);myWindow.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE); myWindow.setVisible(true); }}© Sunil Prabhakar Purdue University8A custom JFrameimport javax.swing.*;class MyWindow extends JFrame { public MyWindow(String title) {this.setSize(300,400);this.setTitle(title);this.setVisible(true); }}import javax.swing.*;class ShowWindow2 { public static void main( String[] args ) { MyWindow myWindow = new MyWindow(“My Window”); MyWindow window = new MyWindow(“Another Window”); }}© Sunil Prabhakar Purdue University9Some GUI classesFrameA special container corresponding to a window not contained in another window.JFrameJApplet (for web applets)ContainersGUI components that hold other GUI components.JFrame, JApplet, JPanelAn invisible container that can be nested.© Sunil Prabhakar Purdue University10Other GUI classesCommon elementsJButton, JCheckBox, JComboBox,JTextField, JTextAreaGraphicsAllows drawing of circles, strings, etc.FontFor selecting fonts for textColorFor selecting colors of GUI componentsMenu classesJMenuBar, JMenuAnd many more …© Sunil Prabhakar Purdue UniversityCoverageThere are way too many classes for us to consider each oneWe will see a samplingUse the online tutorial from Sun for more examples, other detailshttp://java.sun.com/docs/books/tutorial/ui/features/components.html11© Sunil Prabhakar Purdue University12Essentials of a GUI We begin with a frame (e.g, JFrame, JApplet)We will use JFrame as our starting point.We can change the properties of the frame by calling several methods for it.We cannot add components to the JFrame directly. We have to add them to its Content Pane.We can add (and remove) components from this pane. These can be buttons, text fields, labels, lists, scroll bars, …. , and other panes.© Sunil Prabhakar Purdue University13The Content Pane of a FrameWe access the content pane by calling the frame’s getContentPane() method. It belongs to the Container classThis yellow area is the content pane of this frame.© Sunil Prabhakar Purdue UniversityAdding ComponentsWe can add objects to a container object by using the add() method on the containerWe can add multiple objects to a single containerTheir placement is controlled by eithera layout manager, orabsolute positioning (rare)14© Sunil Prabhakar Purdue UniversityLayout ManagersA layout manager organizes the multiple components added to a single container.For now, we will use a FlowLayoutManager.The flow layout organizes objects similar to how (centered) text is written on a pageWe set the layout manager for a container by using the setLayout() method15© Sunil Prabhakar Purdue University16Adding Buttons A JButton object is a GUI component that represents a pushbutton.Create new objectsGet Container Panel,Set Layout MANAGERAdd Objects to Panel. . .JButton loginButton = new JButton("Login");JButton cancelButton = new JButton("Cancel");Container contentPane;contentPane = myFrame.getContentPane();contentPane.setLayout(new FlowLayout());contentPane.add(loginButton);contentPane.add(cancelButton);. . .© Sunil Prabhakar Purdue Universityimport javax.swing.*;import java.awt.*;class LoginWindow extends JFrame{JButton loginButton, cancelButton;JTextField nameInput; public LoginWindow(String title) {this.setTitle(title);this.setSize(200,100);loginButton = new JButton(“Login”);cancelButton = new JButton(“Cancel”);JLabel label = new JLabel(“Name”);nameInput = new JTextField(“<Enter Name>”);Container contentPane = this.getContentPane();contentPane.setLayout(new FlowLayout());contentPane.add(label);contentPane.add(nameInput);contentPane.add(loginButton);contentPane.add(cancelButton);this.pack();this.setVisible(true);}}17Exampleclass OpenAccount { public static void main( String[] args ) { LoginWindow myWindow = new LoginWindow(“Login to Account”); }}© Sunil Prabhakar Purdue University18Control flow with GUIGUI components introduce a new type of control flow.In earlier example, even though the main method ends, the window (and program) keep running.A separate thread is automatically created which handles the GUI components.What code is running?The separate thread watches for user interactions with the GUI componentshow does it know what to do, e.g., when a button is pressed?Event handling© Sunil Prabhakar Purdue University19Event HandlingAn action involving a GUI object, such as clicking a button, is called an event.The mechanism to process events is called event handling.Event handling in Java is