CPSC 210

D5: Observer Pattern

👂

🦻

👂

🎶🐦

Learning Goals

To apply the Observer Design Pattern to a given problem

An interesting thing tells interested objects that something cool happened.

SO much coupling!

Strategies?

Interesting
Thing

Interested
Class2

Interested
Class3

Interested
Class1

We make mistakes

We identify our mistakes

We learn from our mistakes

We prevent mistakes

We Evolve Design Patterns

Lessons Learned!

Design Patterns
to the Rescue?

Observer: Motivation

I want arbitrarily many objects to know about a state without knowing anything about these objects.

I want these objects to be added and removed as desired.

Intent: To define a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically.

The observer pattern allows us to achieve the notification without introducing coupling between the subject and its dependents.

The Observer Pattern

Image source: https://refactoring.guru/

Observer: Motivation (2)

original image source: https://refactoring.guru/ (right image edited)

Either the customer wastes time checking product availability or the store wastes resources notifying the wrong customers.

Customer waiting for new product

Observer: Motivation (3)

Would you want to be notified about ALL tweets?

Twitter

You have already used it

...maybe without knowing it!
mouse clicks are handled via the observer pattern in Swing

private class DrawingMouseListener extends MouseAdapter {
  public void mousePressed(MouseEvent e) {
    handleMousePressed(translateEvent(e));
  }
  public void mouseReleased(MouseEvent e) {
    handleMouseReleased(translateEvent(e));
  }
  public void mouseClicked(MouseEvent e) {
    handleMouseClicked(translateEvent(e));
  }
  public void mouseDragged(MouseEvent e) {
    handleMouseDragged(translateEvent(e));
  }
  private MouseEvent translateEvent(MouseEvent e) {
    return SwingUtilities.convertMouseEvent(
        e.getComponent(), e, currentDrawing);
  }
}

Observer Class Diagram

The particular names here (but especially "Concrete"!) will change.

Observer

an Observer

An Observer Metaphor

Newspaper kid delivers you the newspapers. Why?

Because you registered!

Newspaper reaches the shop => newspaper boy delivers it to all registered customers

Imagine you don't like this newspaper anymore

You unregister!

Newspaper kid doesn't come anymore

Observable/Subject: Shop
Observer: Customer

Observer Terminology

Observers register with Observable/Subject for getting information about the occurrences of events

Roles: the observer pattern requires us to identify:

The observable (or subject): when this object changes state, we want all its dependents to be notified
The observer(s): these are the dependents that are to be notified when the observable changes state

Kiosk app where users can vote for their fav. color
Goal: update pie chart and panel showing number of votes for the fav. color

Example: Color Kiosk

FavoriteColorData

void setData(Color c, int numVotes)

PieChart

void update(Color c, int numVotes)
JFreeChart getChart()

MaxVotesPanel

void update(Color c, int numVotes)

Example: Color Kiosk (2)

Refactoring

0..*

FavoriteColorData

void setData(Color c, int numVotes)
void addObserver(Observer o)
void notifyObservers(Color c, int numVotes)

Observer

void update(Color c, int numVotes)

<<interface>>

MaxVotesPanel

void update(Color c, int numVotes)

PieChart

void update(Color c, int numVotes)
JFreeChart getChart()

Example: Color Kiosk (3)

Refactoring - Part 2

0..*

Observable

void addObserver(Observer o)
void notifyObservers(Color c, int numVotes)

FavoriteColorData

void setData(Color c, int numVotes)

Observer

void update(Color c, int numVotes)

<<interface>>

MaxVotesPanel

void update(Color c, int numVotes)

PieChart

void update(Color c, int numVotes)
JFreeChart getChart()

Lecture Ticket

System with classes from the Composite Lecture Ticket (Leaf, Branch and Offshoot)
Now you want to add observation to this system
Each time a leaf changes color, you want a MessagePrinter class to print a corresponding message to the console