CS112 Lecture: Graphical User Interfaces Last revised 3/19/08Objectives:1. To introduce the notion of a “component” and some basic Swing components (JLabel, JTextField, JTextArea, JButton, JComboBox, JSlider)2. To introduce the rudiments of using containers, with absolute positioning and the basic layout managers.3. To introduce use of event-driven programming with GUI widgets (including with multiple event sources)4. To introduce inner classes5. To introduce creating and using menus Materials: 1. Dr. Java to demonstrate individual operations2. BlueJ project with demo programs from text: ButtonsBallController, MenuBallController, SliderBallController3. BlueJ project with my demo programs: Component and LayoutDemo, JPanelDemo, GUIEventsDemo, MultipleEvents1/2/3/4, MouseEvents, MenuOptionsDemo4. Code for AddressBookGUI for project 3I. IntroductionA. Today we will begin looking at creating and using graphical user interfaces (GUI’s) in a program. This is a large subject, which we will continue to develop in future courses. But after this series of lectures you should be able to create and use simple GUI’s.B. The objectdraw package that the book uses provides some graphical facilities. In fact, it is built on the foundation of general Java facilities, while “hiding” some of the details that can be quite confusing, especially to beginners. In this lecture, we begin to explore the foundation on which objectdraw is built.C. A GUI performs two major tasks:1. It displays information (graphics, text, and controls) on the screen.2. It responds to user actions such as typing or clicking the mouse button.1II. Introduction to Java GUIsA. One of the distinctive features of Java is its built-in support for implementing graphical user interfaces. This is done through a portion of the standard Java library called the abstract windowing toolkit (often referred to as awt) and another portion - which builds on the awt - called Swing. It is possible to build significant GUI's using just the awt, but Swing provides much richer facilities. We will focus on using Swing in this course - as the book does - though we will have to make some reference to portions of the awt that Swing uses.1. The classes comprising the awt reside in the package java.awt, and those comprising Swing reside in the package javax.swing. To use Swing in a program, one normally includes the statementimport javax.swing.*;and might also needimport java.awt.*;2. In addition, it may be necessary to import one or more subpackages - e.g.import java.awt.event.*;(This package contains classes that are used for responding to user input. GUI-related actions performed by the user - e.g. clicking the mouse button - result in the creation of special objects called events that the program can respond to. Both awt and Swing make use of these classes.)3. The awt and Swing are quite large - consisting of 90 classes plus 17 interfaces in the awt package and 120 classes plus 24 interfaces in the Swing package in JDK 1.5, plus several subpackages with additional classes. We will only give a first introduction to them now.4. Many of the visible components that are part of the Swing package have names that begin with capital J - e.g. JButtton, JLabel, etc. a) The J stands for the fact that the component is implemented by code written in Java. b) In contrast, awt components typically use the “native” components of the underlying platform. c) Actually, it is not uncommon to find that there is a “non-J” awt version of a component as well as a swing version - e.g. Button (awt) vs JButton (swing), etc - but this is not always true. The J is used even when there is no corresponding awt component. 2d) One important rule is to never mix awt and swing visible components in the same GUI! [ However, swing makes some use of awt classes like LayoutManagers, which are not themselves visible. That’s ok and unavoidable ].B. One of the fundamental classes in the swing package is the class JComponent. This class is the root of a hierarchy of classes that represent things that users can see in windows:1. Subclasses representing individual GUI components - including six we will briefly introducea) JLabelb) JTextFieldc) JTextAread) JButtone) JComboBoxf) JSliderThe first of these is an output component - i.e. its only use is for displaying information for the user. The remaining five are primarily input components, though the second and third can also be used for output.2. Containers - components that can themselves hold other components, and provide for physically arranging them through layout managers.3. It is also possible to create one's own custom components - e.g. a DrawingCanvas used by objectdraw is actually a special kind of JComponent. C. We will demonstrate the various components using Dr. Java.Setup - select Interactions pane, then type:import java.awt.*;import javax.swing.*;JFrame f = new JFrame();Container p = f.getContentPane();p.setLayout(new BoxLayout(p, BoxLayout.Y_AXIS));f.show();3D. A JLabel is a component that displays text on the screen. 1. The text in a label cannot be edited by the user.2. A label is created by code like the following:JLabel prompt = new JLabel("Hello");Note that the constructor takes a parameter that specifies what the JLabel is to display.DEMO: the above code, thenp.add(prompt);f.pack();(Whenever a new component is added to a GUI, it is necessary to lay it out afresh to take into consideration the additional space needed. The book uses validate() for this - which is a method that can be used with any container. In these examples, we will use pack(), which can only be used with frames. It does what validate() does, plus it resizes the frame to the right size to show everything in it.)3. It is also possible to create a JLabel without specifying any text, and then specify the text later - e.g.DEMO (pause before final line)JLabel result = new JLabel()p.add(result);f.pack();...result.setText("The answer is 42");f.pack();E. A JTextField is a component that displays editable text on the screen.1. In contrast to a JLabel, the text that is displayed in a JTextField can be edited by the user. The library class provides support for normal editing operations like placing the cursor, inserting and deleting characters, and cut and paste. (The program can also disable user editing and re-enable it later if desired.)42. A JTextField is normally created by code like the followingJTextField