CPSC 210

D5: Observer Pattern

Use a private browser window if you want to remain anonymous.

Welcome back to CPSC 210!

I hope you are all well given the current circumstances!

Learning Goals

To apply the Observer Design Pattern to a given problem

We make mistakes

We identify our mistakes

We learn from our mistakes

We prevent mistakes

We Evolve Design Patterns

Lessons Learned!

Why Design Patterns?

The Observer Pattern

Image source: https://refactoring.guru/

Observer: Motivation

I want arbitrarily many objects to know about a state but I don't know what these objects are exactly.

I want that these objects can be added and removed as they desire.

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.

Observer: Motivation (2)

Image source: https://refactoring.guru/

...or store wastes resources notifying the wrong customers.

Customer waiting for new product...

...either customer wastes time checking product availability...

Observer: Motivation (3)

Would you want to be notified about ALL tweets?

X / Twitter

Image source: https://codepumpkin.com/observer-design-pattern/

You have already used it

...without knowing it
Any GUI click is part of the observer pattern

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);
  }
}

The Newspaper Boy

The Observer Pattern

Newspaper boy 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 boy doesn't come anymore

Observable: 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