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