CPSC 210

D5: Observer Pattern

Slides designed by Felix Grund, based on Paul Carter’s slides

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

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)

...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                                    BlueSky 🦋

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

Observable

MessagePrinter

Observer

addObserver(Observer o)

notifyObservers()

update()

Lecture Ticket (2)

= Observable

Lecture Lab

Observer

Observer

Observable

Event

(Nothing)

Lecture Lab (2)

Observer

Observer

Observable

Event

Lecture Lab #2

Observer

Observer

Observable

Event

D5: Observer Pattern

The End - Thank You!

D5: Observer

By firas_moosvi

D5: Observer

  • 76