Eric Roberts Handout #49CS 106A February 19, 2010Slides for the Interactors LectureInteractorsEric RobertsCS 106AFebruary 19, 2010A Tale of Two Companies• As I noted in an earlier story, the modern user interface wasdeveloped at the Xerox Palo Alto Research Center (XeroxPARC) but commercialized at Apple.• Xerox had tried to reach the commercial office market and hadpriced its Alto accordingly. By contrast, Apple recognized thattheir machine had to be affordable to individual users.The original Apple MacintoshThe Xerox AltoA Tale of Two Companies• This history has been retold inmany books, including the oneby Smith and Alexander picturedhere.• Some industry experts, includingPARC veteran and later CEO ofInterval Research David Liddle,have argued that Xerox made theright decision by focusing on thebreakthroughs at PARC—mostnotably laser printing—that werein their core business area.Creating a Simple GUI• Most application programs today include a graphical userinterface or GUI (pronounced gooey) consisting of buttonsand other on-screen controls. Collectively, these controls arecalled interactors.• Java defines many types of interactors, most of which are partof a collection called the Swing library, which is described insection 10.6. You create a GUI by constructing the Swinginteractors you need and then arranging them appropriately inthe program window.• The text outlines two strategies for arranging interactors onthe screen. The simple approach is to create a control stripalong one or more edges of the window, as described on thenext slide. You can, however, create more general GUIs byusing Java’s layout managers, as described in section 10.7.Creating a Control Strip• When you create an instance of any Program subclass, Javadivides the window area into five regions as follows:•The CENTER region is typically where the action takes place.A ConsoleProgram adds a console to the CENTER region, anda GraphicsProgram puts a GCanvas there.CENTERNORTHSOUTHWESTEAST• The other regions are visible only if you add an interactor tothem. The examples in the text use the SOUTH region as acontrol strip containing a set of interactors, which are laid outfrom left to right in the order in which they were added.Creating a GUI with a Single ButtonPlease do not press this button again.Please do not press this button again.Arthur listened for a short while, but being unable to understand the vastmajority of what Ford was saying he began to let his mind wander, trailinghis fingers along the edge of an incomprehensible computer bank, he reachedout and pressed an invitingly large red button on a nearby panel. The panellit up with the words “Please do not press this button again.”—Douglas Adams, Hitchhiker’s Guide to the Galaxy, 1979The HitchhikerButton program on the next slide uses thisvignette from Hitchhiker’s Guide to the Galaxy to illustrate theprocess of creating a GUI without focusing on the details. Thecode creates a single button and adds it to the SOUTH region. Itthen waits for the user to click the button, at which point theprogram responds by printing a simple message on the console.HitchhikerButtonRed– 2 –The HitchhikerButton Programimport acm.program.*;import java.awt.event.*;import javax.swing.*;/* * This program puts up a button on the screen, which triggers a * message inspired by Douglas Adams's novel. */public class HitchhikerButton extends ConsoleProgram {/* Initializes the user-interface buttons */ public void init() { add(new JButton("Red"), SOUTH); addActionListeners(); }/* Responds to a button action */ public void actionPerformed(ActionEvent e) { if (e.getActionCommand().equals("Red")) { println("Please do not press this button again."); } }}The Swing Interactor HierarchyThe following diagram shows the Swing classes used in this text.With the exception of IntField and DoubleField, all of theseclasses live in the javax.swing package.JComponentAbstractButton JSlider JLabel JComboBoxJButton JToggleButtonJTextComponentJCheckBox JRadioButtonJTextFieldIntField DoubleFieldacm.guiButtonGroupThe JButton Class• The most common interactor in GUI-based applications is anon-screen button, which is implemented in Swing by the classJButton. A JButton object looks something like• When you click on a button, Java generates an action event,which in turn invokes a call to actionPerformed in anylisteners that are waiting for action events.• The constructor for the JButton class iswhere label is a string telling the user what the button does.The button shown earlier on this slide is therefore created bynew JButton(label)JButton pushMeButton = new JButton("Push Me");Push MeDetecting Action Events• Before you can detect action events, you need to enable anaction listener for the buttons on the screen. The easieststrategy is to call addActionListeners at the end of theinit method. This call adds the program as a listener to allthe buttons on the display.• You specify the response to a button click by overriding thedefinition of actionPerformed with a new version thatimplements the correct actions for each button.• If there is more than one button in the application, you needto be able to tell which one caused the event. There are twostrategies for doing so:1. Call getSource on the event to obtain the button itself.2. Call getActionCommand on the event to get the actioncommand string, which is initially set to the button label.Adding Features to DrawStarMap• The text illustrates the various Swing interactors by addingnew features to the DrawStarMap application. The first stepis adding a Clear button that erases the screen.• Adding the button is accomplished in the init method:public void init() { add(new JButton("Clear"), SOUTH); addActionListeners();}• The response to the button appears in actionPerformed:public void actionPerformed(ActionEvent e) { if (e.getActionCommand().equals("Clear")) { removeAll(); }}Exercise: Interactive StoplightDesign and implement a GStoplight class that represents acompound object with three colored lights—red, yellow, andgreen—as in a traditional traffic signal. Once you have finishedthat, write a GraphicsProgram that creates a stoplight and threebuttons labeled Red, Yello w, and Green , as shown in the samplerun below. Clicking on a button should send a message to thestoplight to change its state accordingly.GStoplightGUIRed Yellow Green– 3 –The