Transcript Week 3: Java Buttons - Pitt Computer Science

Week 3: Introduction
• Last meeting we discussed
 Advantages of using subprograms
 How subprograms work
 How you write them
 How you call them
 What happens when they are called
 Using parameters with subprograms
 Allow "communication" with the subprogram
 Recursive subprograms
University of Pittsburgh Computer Science
1
Week 3: Introduction
 Ex. Towers of Hanoi
 Procedural abstraction
 Can use a subprogram without having to know details
of its implementation
 Data abstraction
 Can use a new data type without having to know
details of its implementation
 Object-oriented programming
 Encapsulation of data and operations
 Inheritance
 Polymorphism
University of Pittsburgh Computer Science
2
Week 3: Adding a Graphical Interface
• In the past two weeks we have seen how
to make things easier for the
programmer
 But the USER of the program is the main
concern
 Early programs interacted with the user through
the command line and the console
 User runs program by typing some command
 Input is typed from the keyboard onto console
 Output is shown on console
 Not very user-friendly!
University of Pittsburgh Computer Science
3
Week 3: Adding a Graphical Interface
 As more "regular" people started using
computers, the user-interface had to be
improved
 People at Xerox and Apple began developing
ways for a "mouse" to be used with a program
 Graphics abilities on computers were improved,
and could be used in conjunction with the
"mouse"
 Now most production software has a GUI
(Graphical User Interface) to go with it
 Let's see a little bit of how this is done
University of Pittsburgh Computer Science
4
Week 3: Graphical Components
• Graphical Components
 Objects in a program that work primarily in a
graphical way
 Windows
– Used to contain and manipulate the other graphical
components, and for drawing
 Buttons
– User "pushes" button by clicking the mouse
– Button responds by executing a subprogram
 Dialog Boxes
– Some graphical information is shown to the user
– User types in a response
– User's response is processed
University of Pittsburgh Computer Science
5
Week 3: Java Buttons
• Let's look in more detail at a Button
 What do we need in order to use one?
 Must be in some window
 Must be created and initialized
 A subprogram to handle the "click" must be
implemented and associated with the button
 Download SimpleButton.java
 Compile and run it
 Let's look at the code
University of Pittsburgh Computer Science
6
Week 3: Java Buttons
• Remember what we needed
 Must be in some window
 In Java a JFrame is a window
 Note that the main class extends JFrame
 The button will be inside this window
 Must be created and initialized
 Button variable is declared in the data area
 Button object is created in the constructor
 A subprogram to handle the "click" must be
implemented and associated with the button
 Let's talk more about this one
University of Pittsburgh Computer Science
7
Week 3: Event-Driven Programming
• Older computer programs were the
initiators of activities
 Program prompts, user responds
• Event-driven programs have the opposite
approach
 Program waits for user to initiate an activity,
then responds to it
 If user does nothing, program just idles
 Programmer must code ways that program will
react to user's actions
University of Pittsburgh Computer Science
8
Week 3: Event-Driven Programming
• In Java, event-driven programming is
handled in three parts:
 Events:
 These are generated due to the user's actions
– ActionEvent: some action has occurred
– MouseEvent: mouse has done something
– WindowEvent: something has happened to window
 Event generators:
 The components/activities that cause the events to be
generated
– Button has been clicked
– Mouse has been moved
– Window has been closed
University of Pittsburgh Computer Science
9
Week 3: Event-Driven Programming
 Event handlers (listeners)
 Subprograms that execute in response to an event
 Programmer indicates here what program should do
when event occurs
 Must be linked to the event-generator
University of Pittsburgh Computer Science
10
Week 3: Event-Driven Programming
Button is clicked in window,
generating an ActionEvent
ActionEvent is sent as a parameter
to the handling subprogram to
process
Handling subprogram
executes, responding to the
event that occurred
University of Pittsburgh Computer Science
actionPerformed(ActionEvent e)
{
code to respond to event
}
11
Week 3: Event-Driven Programming
• Look again at SimpleButton.java
 Event: ActionEvent
 Event generator: button click
 Event listener: ButtonHandler (ActionListener)
 Note where it is linked to the button
 Note what is done to handle click
University of Pittsburgh Computer Science
12
Week 3: Java Buttons
• Let's add another button to our program
 Let's have this button change the title of our
window to whatever we want it to be
 What do we need to do to do this?
 Create another button variable and object
– Call it button2
– Add the variable right after button1 (same line)
– Create the object below button1:
button2 = new JButton("Change Title");
 Link our new button to a listener (handler)
– Let's use the same one as for the first button
button2.addActionListener(bhandler);
University of Pittsburgh Computer Science
13
Week 3: Java Buttons
 Tell our window about the new button so it can
handle its display
– Let's make the buttons WEST and EAST
– Change button1 from CENTER to WEST, then add
button2:
c.add(button2, BorderLayout.EAST);
 Write the code to handle the button
– We must test to see if button2 generated the event
– If so, execute the code to handle it
else if (e.getSource() == button2)
{
String newTitle = JOptionPane.showInputDialog(
SimpleButton.this, "New Title?");
SimpleButton.this.setTitle(newTitle);
}
University of Pittsburgh Computer Science
14
Week 3: Java Buttons
• What else can a button do?
 How about a toggle button
 Click it once to "turn something on"
 Click it again to "turn it off"
 Similar to the power switch on your remote
 Let's use it to turn on and off the button that
we just made
University of Pittsburgh Computer Science
15
Week 3: Java Buttons
 How can we make a toggle button?
 We need to keep track of the button's current "state"
– Is the button on or off?
– We can do this with a boolean variable, titleOn
» Remember that boolean variables have two values, true or
false
 Each time button is clicked, change to the opposite
state and execute the appropriate action
– If on, turn off; If off, turn on
– We'll initialize it to on (true)
 Add new button variable and create new object
– For text, we'll put "Turn off Title Changer" initially
– Link it to same listener as other two buttons
– Put it in SOUTH of the window's layout
University of Pittsburgh Computer Science
16
Week 3: Java Buttons
 Add code to handler for new button
– What do we do here?
– If titleOn, turn it off and change button text
– If not titleOn, turn it on and change button text
if (titleOn)
{
button2.setVisible(false);
button3.setText("Turn Title On");
titleOn = false;
}
else
{
button2.setVisible(true);
button3.setText("Turn Title Off");
titleOn = true;
}
– Let's look at and run ToggleButton.java
University of Pittsburgh Computer Science
17
Week 3: Other Java Components
• Java has MANY GUI Components
 Menu
 Allows selection from list of options
 Pull-down and pop-up menus can be created
 CheckBox
 Allows something to be selected or not
 Label
 Allows text to be displayed in different fonts and
colors
 TextArea
 Allows user to input text and can detect changes
University of Pittsburgh Computer Science
18
Week 3: Mouse Events
• Key to all GUIs is the mouse
• What are some useful things to know
about the mouse?
 Where is it?
 X and Y coordinates
 Is a mouse button pressed?
 If so is it over anything that requires an action?
 Is it moving/has it moved?
 Is it "dragging" anything along with it?
University of Pittsburgh Computer Science
19
Week 3: Mouse Events
• Java events involving the mouse are
MouseEvents
 Two different listeners for ease of handling
 MouseListener handles/implements
–
–
–
–
–
mousePressed
mouseReleased
mouseClicked
mouseEntered
mouseExited
 MouseMotionListener handles/implements
– mouseMoved
– mouseDragged
University of Pittsburgh Computer Science
20
Week 3: Mouse Events
• Let's look at an example
 Download, compile and run Mousey.java
• What does the code do?
 Getting a bit more complicated
 A separate Panel class is created for the
graphics
 It is in this class that most of the work is done
 We have theShape to store the rectangle
 We have theColors to store the different background
colors
 We add a MouseListener and a MouseMotionListener
University of Pittsburgh Computer Science
21
Week 3: Mouse Events
• Look at the subprograms
 mousePressed
 Indicate the mouse has been pressed
 Get the current location of the mouse
 If it's within the shape, select the shape
 If not, change the background color (and unselect the
shape, if it had been selected)
 mouseReleased
 Indicate the mouse has been released
University of Pittsburgh Computer Science
22
Week 3: Mouse Events
 mouseMoved
 Show current location of the mouse
 Note that this event occurs each time mouse is moved
even the slightest bit
 Thus it occurs hundreds/thousands of times as you
are using a GUI program
– However in many applications it is ignored
 mouseDragged
 Mouse is move WHILE button is held down
 Note when this occurs mouseMoved does not
 If the shape has been selected
– Get the new location of the mouse
– Reposition the shape to the new location
University of Pittsburgh Computer Science
23
Week 3: Simple Java Graphics
• What is going on with the shape?
 It is a Rectangle2D, predefined in Java
 This shape can be drawn graphically in various
ways (ex. filled or just outline)
 To "move" it we really just change it's "frame"
with a new upper left corner
 There are some interesting things we can do
 See if it contains a point
 See if it intersects another shape
– Can be useful for games, other graphical applications
 There are other shapes that we can use as well
University of Pittsburgh Computer Science
24
Week 3: Summary
• This week we discussed
 Graphical interfaces
 Simple graphical components in Java
 Implementing Java buttons
 Events and event-driven programming
 Using the mouse and its related events
 Simple graphics in Java
University of Pittsburgh Computer Science
25