Lecture 3: Basic Java

1
Lecture 3 Basic Java

• Graphics Event Handling Methods

2
Constructing Algorithms

• Recall from day 1
• Algorithms need to be
• Correct
• Efficient
• Understandable
• What else makes a good algorithm?
• Precise enough to be understood by a computer
• Clear enough to be readable by a human

3
Constructing Algorithms

• How do you make good algorithms?
• Break up the problem
• Try to make it into smaller, manageable pieces
• Remember the robot from day 1
• Want to say simple things like Walk to
  Starbucks
• Dont want to have to tell it how to move its
  legs
• Too many instructions can be overwhelming

4
How about in Java?

• In Java we break programs down into pieces called
  objects
• Each object describes some functional role
• e.g. for a robot arm, leg, body, head
• Each object contains descriptions of a variety of
  tasks, called methods
• Leg might have methods for
• Lift
• Move forward
• Put down

5
Lets look at a program

• First, Ill tell you what it does
• Describes behavior to respond to mouse actions
• Actions take place in a single window on the
  screen
• Code to respond to actions is short sequences of
  instructions
• Each group of instructions corresponds to some
  action
• Mouse moved
• Mouse button was pressed
• Mouse button was released
• Note I say Instruction, but these can also be
  called
• Commands
• Statements (most widely used)

6
// First sample Java program - draw filled
rectangle import objectdraw. public class
BeginMakeBox extends WindowController public
void begin() new FilledRect(40,60,90,30,canvas
) new Text("Wow!",40,150,canvas)

• When we run this, it makes a filled-in rectangle
  with the text Wow below it
• Structure
• Whole thing is called a class specification
  because it describes a class of running programs
  that all behave in the same way
• Body of the class consists of the definition of a
  begin method.
• Code in begin() is executed when program starts
• Body of each method is a list of instructions
  telling the machine what to do whenever that
  method is executed.

7
Graphics Primitives

• What are the instructions in the methods doing?
• Need to understand how the graphics system in
  Java works to understand this
• Lets take a look at that

public void begin() new FilledRect(40,60,90,30,
canvas) new Text("Wow!",40,150,canvas)
8
Graphics Primitives

• To place an object on the screen
• Use an instruction called a construction, which
  includes
• The word new
• The name of the thing you want to draw
• FramedRect, FilledRect
• FramedOval, FilledOval
• Text
• Line
• A list of extra bits of information called actual
  parameters
• Determine size and position of object displayed

new FramedRect(10, 10, 40, 60, canvas) new
Line(x1, y1, x2, y2, canvas) new Text("hello
there", x, y, canvas)
9
Locations Dimensions

• Most important parameters specify location and
  dimension of the object constructed
• Coordinates follow these rules
• Basic unit of measurement is a pixel on the
  screen
• The y-coordinate is upside down
• Larger closer to bottom of screen
• The origin (0,0) is in the upper left of the
  programs window
• NOT upper left of the whole display

new FramedRect(10, 10, 40, 60, canvas)
10
Coordinates
x
Window
0,0
10, 2
y
5, 8
11
More on parameters

• Programs window is called the canvas
• You have to pass canvas as the last parameter to
  graphical object constructors
• This tells the object what window to draw itself
  in
• Text passed as a parameter
• Must be enclosed in double quotes ()
• Distinguishes it from names like canvas
• So, canvas is very different from canvas

new Line(x1, y1, x2, y2, canvas)
new Text("hello there", x, y, canvas)
12
More on parameters

• Programs window is called the canvas
• You have to pass canvas as the last parameter to
  graphical object constructors
• This tells the object what window to draw itself
  in
• Text passed as a parameter
• Must be enclosed in double quotes ()
• Distinguishes it from names like canvas
• So, canvas is very different from canvas

new Line(x1, y1, x2, y2, canvas)
new Text("hello there", x, y, canvas)
13
Back to the Program

• Now you should be able to understand begin()
• First line
• creates and draws a solid rectangle at location
  (40,60) on the canvas. Rectangles width is 90
  and its height is 30.
• Second line
• writes the text "Wow" at location (40,150)
• begin method is executed when the program starts
  executing
• Rectangle and Wow drawn as soon as the window
  appears

// make a box when the mouse is pressed public
void begin() new FilledRect(40,60,90,30,canvas
) new Text("Wow!",40,150,canvas)
14
Mouse events

• There are seven mouse actions
• you can add these to any program that extends
  WindowController
• public void onMousePress(Location point)
• public void onMouseRelease(Location point)
• public void onMouseClick(Location point)
• public void onMouseMove(Location point
• public void onMouseDrag(Location point)
• public void onMouseEnter(Location point)
• public void onMouseExit(Location point)

15
Magic words

• public
• All your methods will be public for a while
• Means that these methods can be called from
  outside your class
• void
• Means that the method just performs some action
• Methods can also return values
• Just use void for now more on this later!

16
So lets revise

• Lets revise that original program
• Make it draw rectangle when mouse is pressed
• But NOT when program starts up

import objectdraw. public class MakeBox
extends WindowController public void begin()
new Text("Wow!",40,150,canvas) // make
a box when the mouse is pressed public void
onMousePress(Location point) new
FilledRect(40,60,90,30,canvas)
17
Naming

• Now, say we want to write a program to do this
• if the mouse is pressed, print the word down in
  red and the word up in gray if the mouse is
  released, the word up will be red and the word
  down will be gray.
• Well need to be able to set colors
• Use this command

setColor(Color.XXX)
18
Need one more thing

• Remember program description
• if the mouse is pressed, print the word down in
  red and the word up in gray if the mouse is
  released, the word up will be red and the word
  down will be gray.
• How do you tell Java which particular object to
  change?
• Name your objects!
• Use variables, with associated names

19
Looks like this
// A program in which the color of text depends
on whether // or not the mouse is currently being
pressed. public class MouseIndicator extends
WindowController private Text up,
down // variable declarations //
create two Text objects and set their colors
// to red and gray public void begin()
up new Text("UP",200,220,canva
s) down new Text("DOWN",200,200
,canvas) up.setColor(Color.red)
down.setColor(Color.gray)
// when the mouse is pressed the
down arrow // is red and the up arrow is
gray public void onMousePress(Location
point) down.setColor(Color.red)
up.setColor(Color.gray)
// at all other times the up is red
and the // the down arrow is gray
public void onMouseRelease(Location point)
up.setColor(Color.red)
down.setColor(Color.gray)
20
3 steps to using variables

• Declare a name for your variable
• Assign a value to your variable
• Use your variable

21
Declarations

• Formed by
• Placing name(s) of the objects to be introduced
  after the name of the type of the object
• Methods are public, but named variables are
  private so that other objects cant use them
• Declarations can help Java catch your typos
• For now, put declarations before all the methods
• Variables can be used by any method

public class MouseIndicator extends
WindowController private Text up, down //
variable declarations private FilledRect
myRect private FramedOval redOval
22
Assignment statements

• Now we need to associate a value with our name
• Assignment statement
• Name to associate a meaning with
• An equals sign ()
• Description of the meaning or value to associate
  with the name
• Note value moves from right to left!

myRect new FilledRect(10,10,30,20,canvas)
23
Now, use the name!

• We know one thing we can do with objects
• Need to use this command on a variable
• Use a name, followed by a dot (.), followed by
  the command

setColor(Color.XXX)
myRect.setColor(Color.green)
24
Back to that program
// A program in which the color of text depends
on whether // or not the mouse is currently being
pressed. public class MouseIndicator extends
WindowController private Text up,
down // variable declarations //
create two Text objects and set their colors
// to red and gray public void begin()
up new Text("UP",200,220,canva
s) down new Text("DOWN",200,200
,canvas) up.setColor(Color.red)
down.setColor(Color.gray)
// when the mouse is pressed the
down arrow // is red and the up arrow is
gray public void onMousePress(Location
point) down.setColor(Color.red)
up.setColor(Color.gray)
// at all other times the up is red
and the // the down arrow is gray
public void onMouseRelease(Location point)
up.setColor(Color.red)
down.setColor(Color.gray)
25
One more thing

• Did anyone notice another name in the code?
• Heres a hint it looked like this
• Where was it?
• This has to be required in every mouse handling
  method
• Tells Java you want to use the name point to
  refer to the place the mouse was located
• point is an object of type Location

Location point
26
How do I use that?

• Consider this simple program
• What does this do?

import objectdraw. public class
ImprovedMakeBox extends WindowController //
make a box where you pressed the mouse public
void onMousePress(Location point) new
FilledRect(point,50,50,canvas)
27
How do I use that?

• Consider this simple program
• Now the program draws a rectangle wherever you
  click the mouse
• This is b/c we passed the mouse location to the
  FilledRect constructor

import objectdraw. public class
ImprovedMakeBox extends WindowController //
make a box where you pressed the mouse public
void onMousePress(Location point) new
FilledRect(point,50,50,canvas)
28
Whats the difference?

• Before, we used
• Now, we have

new FilledRect(40,40,50,50,canvas)
new FilledRect(point,50,50,canvas)
29
Mouse handlers revisited

• Seven mouse actions
• public void onMousePress(Location point)
• public void onMouseRelease(Location point)
• public void onMouseClick(Location point)
• public void onMouseMove(Location point
• public void onMouseDrag(Location point)
• public void onMouseEnter(Location point)
• public void onMouseExit(Location point)
• When an event occurs, Java makes the name point
  refer to the current mouse coordinates
• It then runs the instructions in the appropriate
  method
• Only if that methods actually there
• If not, nothing special happens

30
Mouse handlers revisited

• Seven mouse actions
• public void onMousePress(Location point)
• public void onMouseRelease(Location point)
• public void onMouseClick(Location point)
• public void onMouseMove(Location point
• public void onMouseDrag(Location point)
• public void onMouseEnter(Location point)
• public void onMouseExit(Location point)
• Used this way, point is called a formal parameter
• Formal parameters are in the method declaration,
  as above
• Actual parameters are the values passed in a call
  to a method, as in

new FramedRect(10, 10, 40, 60, canvas)
31
More on formal parameters

• Formal parameters are just like other names
• The name itself doesnt matter
• Just that you have a name to call the thing it
  represents
• You could write a mouse handler method like this
• This will work the same as if you used the name
  point instead of mouseLocation

public void onMousePress(Location mouseLocation)
new FramedRect(mouseLocation, 40, 60,
canvas)
32
Using formal parameters and instance variables
together

• Information associated with a formal parameter is
  only available within the method in which its
  declared
• You might want to remember value of a parameter
  for later
• Allows other methods to use that information
• You can do this by assigning it to an instance
  variable

33
Using formal parameters and instance variables
together

• Another simple program
• But this time it does something cool!

import java.awt. import objectdraw. // When
press mouse and drag, draw lines radiating from
initial point public class Spirograph extends
WindowController // first coordinate
of a line segment private Location
lineStart // save the first coordinate
of the line public void
onMousePress(Location point)
lineStart point // as the
user is dragging draw a line from //
initial point where mouse pressed to current
point. public void onMouseDrag(Location
point) new Line(lineStart,
point, canvas)
34
Spirograph

• All we do is remember where the mouse was pressed
• Stored it in an instance variable
• Then we draw lines from there to wherever the
  mouse is dragged

public class Spirograph extends WindowController
private Location lineStart public void
onMousePress(Location point) lineStart
point public void onMouseDrag(Location
point) new Line(lineStart, point,
canvas)
35
Spirograph

• Note that
• The phrase used on the right side of the equal
  sign in an assignment statement need not be a
  construction. Anything that describes the
  information we want to associate with the name on
  the left will do the job

public class Spirograph extends WindowController
private Location lineStart public void
onMousePress(Location point) lineStart
point public void onMouseDrag(Location
point) new Line(lineStart, point,
canvas)
36
Spirograph

• Note that
• A variable or formal parameter name can be
  associated with different things at different
  times in a program. Each time we press the mouse,
  the meaning of the variable lineStart in this
  program changes.

public class Spirograph extends WindowController
private Location lineStart public void
onMousePress(Location point) lineStart
point public void onMouseDrag(Location
point) new Line(lineStart, point,
canvas)
37
Spirograph

• Final question
• What do I have to do to get this to connect all
  the points where the mouse is dragged with lines?
• Lets try it

public class Spirograph extends WindowController
private Location lineStart public void
onMousePress(Location point) lineStart
point public void onMouseDrag(Location
point) new Line(lineStart, point,
canvas)
38
Scribble

• Final question
• What do I have to do to get this to connect all
  the points where the mouse is dragged with lines?
• Lets try it
• Just one new line of code!

public class Scribble extends WindowController
private Location lineStart public void
onMousePress(Location point) lineStart
point public void onMouseDrag(Location
point) new Line(lineStart, point,
canvas) lineStart point
39
Review

• Today we covered
• Naming
• Instance variables
• Mouse handling methods
• Graphics primitives
• Actual Formal parameters
• Thats All you need for Assignment 1!
• You can now write some really simple programs
• But you can still do stuff thats kind of cool
• Spirograph