Week 3: Introduction

1
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

2
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

3
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!

4
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

5
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

6
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

7
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

8
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

9
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

10
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

11
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

• ActionEvent

actionPerformed(ActionEvent e) code to respond
to event
Handling subprogram executes, responding to the
event that occurred
12
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

13
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)

14
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)

15
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

16
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

17
Week 3 Java Buttons

• 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

• 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

18
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

19
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?

20
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

21
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

22
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

23
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

24
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

25
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