📡 Lecture 13 · Pub-Sub & MVC architecture

Observer Pattern & MVC Architecture

الـ Observer = الـ Pub-Sub pattern. Winter 2023 Q3 ضم Observer implementation (4 marks code + 3 marks diagram). MVC architecture is also recurring in Q1.18.

← All Lectures 🎯 جرب أسئلة الامتحان

Chapters

Observer Players

MVC Components

Exam Qs

Observer Pattern — Intro

الـ "Publish-Subscribe" — One object notifies a collection of others about changes.

📖 Definition

الـ Observer Pattern = pattern behavioral بـ "publish/subscribe":

عند ما object واحد بيتغير state، بيـ notify a collection of other objects.
الـ observers بيسجّلوا نفسهم عند الـ observable / subject.
الـ Subject بيحتفظ بـ collection of observers.
عند تغيير state، الـ Subject بيخبّر كل الـ observers تلقائياً.

📡 Visual Workflow

📊 Subject
state: a=50% b=30% c=20%

change notification

requests / modifications

📊 Bar Chart

📑 Text Grid

🥧 Pie Chart

3 different observers بيرسموا نفس الـ data بطرق مختلفة. عند تغيير الـ Subject، كل الـ Observers يتم تحديث تلقائياً.

☕ Manager & Office Boy Analogy

Office Boy: "I'm here at your service" (subscribe/register)
Manager: "Thanks. I'll call you when I need you" (subject acknowledges)
Manager (later): "Hey, I have something to ask you for." (notify)
Office Boy: "Sure, what do you need?" (update)
Manager: "Please, can I have a cup of tea?" (specific event)

الـ Manager (Subject) doesn't know exactly what each Office Boy (Observer) will do — they handle their own reactions.

UML Structure

4 classes: Subject + Observer interfaces + their concrete implementations.

📐 Observer Pattern — UML Class Diagram

       ┌────────────────────────────┐         ┌──────────────────────────┐
       │         Subject            │ ◇ ─────→│  «interface» Observer    │
       ├────────────────────────────┤observers├──────────────────────────┤
       │ -observers : List          │         │ +update()                │
       │ +attach(o : Observer)      │         └──────────────────────────┘
       │ +detach(o : Observer)      │                      △
       │ +notify()                  │                      │ implements
       └────────────────────────────┘                      │
                       △                       ┌───────────────────────────┐
                       │ extends               │     ConcreteObserver       │
       ┌────────────────────────────┐          ├───────────────────────────┤
       │     ConcreteSubject        │ ←observes│ -observerState            │
       ├────────────────────────────┤          │ -subject : ConcreteSubject│
       │ -subjectState              │          │ +update()                 │
       │ +getState()                │          └───────────────────────────┘
       │ +setState()                │
       └────────────────────────────┘

   Note on notify(): "For all x in observers { x.update(); }"
   Note on update(): "observerState = subject.getState();"

💡 The 4 essential classesYou need (1) Subject base/interface, (2) Observer interface, (3) ConcreteSubject extending Subject, (4) ConcreteObserver implementing Observer. هذا الـ structure متكرر in Java's Observable + Observer.

4 Key Players

كل player له responsibility محدد.

📊 Subject (Abstract)

يحتفظ بـ list of observers.
Interfaces للـ attach / detach observers.
notify() method = loop on observers and call update on each.

👁️ Observer (Interface)

Updating interface للـ objects اللي بيوصلها الـ notification.
الـ method الأساسية: update().
Defines the contract لكل observer.

📦 ConcreteSubject

Stores "state of interest" للـ observers.
Sends notification when state changes (calls notify()).
Provides getState(), setState().

🎧 ConcreteObserver

Implements update().
Has reference to its ConcreteSubject.
Maintains its own state synchronized with the subject.

Sequence Flow

The order of interactions when state changes.

🎬 Collaboration Sequence

Lifelines: :ConcreteSubject · :ConcreteObserver-1 · :ConcreteObserver-2

External or internal call invokes setState() on :ConcreteSubject.
:ConcreteSubject triggers internal notify() cycle.
:ConcreteSubject sends update() message to :ConcreteObserver-1.
:ConcreteObserver-1 responds by calling getState() back on :ConcreteSubject to fetch the new data.
:ConcreteSubject sends update() message to :ConcreteObserver-2.
:ConcreteObserver-2 responds by calling getState() back on :ConcreteSubject to fetch the new data.

💡 Pull Modelالـ flow ده pull-based: الـ Observer بيسحب (pull) الـ state من الـ Subject بنفسه عن طريق getState(). في الـ push model، الـ Subject بيدفع (push) الـ data كـ parameter في الـ update().

Java Implementation ⭐ (Winter 2023 Q3)

الـ Java standard library فيه Observable class و Observer interface (deprecated بعد Java 9 لكنها لسه في الـ exam).

📚 Java's Built-in Observer

Class/Interface	Method Summary
`interface Observer`	`void update(Observable o, Object arg)` — called when observed object is changed.
`class Observable`	`void addObserver(Observer o)` — adds observer to set.
	`void notifyObservers()` — if changed, notify all observers.
	`protected void setChanged()` — marks this Observable as having been changed.

📜 Original Code (without Observer)

Subject1.java (no pattern)

import java.util.Random;

class Subject1 {
  public String getNumber() {
    Random random = new Random();
    int randNum = random.nextInt(10000);
    return String.valueOf(randNum);
  }
}

class Client {
  private Subject1 subject;

  public void setSubject(Subject1 subject) {
    this.subject = subject;
  }

  public void update() {
    System.out.println("Client got num: " + subject.getNumber());
  }
}

public class Main {
  public static void main(String[] args) {
    Subject1 subject = new Subject1();
    Client client = new Client();
    client.setSubject(subject);
    client.update();  // Client manually pulls — no auto-notify
  }
}

⚠️ Problemالـ client بيستدعي update يدوياً. لو الـ subject يتغير، الـ client مش بيعرف تلقائياً. محتاج auto-notification.

🎯 After Applying Observer Pattern

الـ goal: لما Subject.getNumber() يتعمل call، الـ Client يوصله notification تلقائياً.

1️⃣ Imports + Client (implements Observer)

import java.util.Observer;
import java.util.Observable;

class Client implements Observer {  // 0.5 mark
  private Subject subject;

  public void setSubject(Subject subject) {
    this.subject = subject;
    subject.addObserver(this);  // 1 mark — register self
  }

  public void update(Observable subject, Object newNum) {  // 0.5 mark
    System.out.println("Client got new num: " + newNum);
  }
}

2️⃣ Subject (extends Observable)

class Subject extends Observable {  // 0.5 mark
  public String getNumber() {
    Random random = new Random();
    int randomNumber = random.nextInt(100);
    String newNum = String.valueOf(randomNumber);

    setChanged();              // 0.5 mark — mark dirty
    notifyObservers(newNum);   // 1 mark — auto-notify everyone

    return newNum;
  }
}

3️⃣ Main (Loop demo)

public class Main {
  public static void main(String[] args) {
    Subject subject = new Subject();
    Client client = new Client();
    client.setSubject(subject);

    for (int i = 0; i < 10; i++) {
      subject.getNumber();  // Observer auto-notified each time
    }
  }
}

💡 الفايدةالـ Main code أصبح أبسط: ما عادش محتاج يـستدعي update يدوياً. الـ Client بيتم notify تلقائياً في كل iteration.

📐 Class Diagram (3 marks in Q3)

   ┌─────────────────────────┐         ┌──────────────────────────┐
   │ «interface» Observer    │         │     Observable            │
   ├─────────────────────────┤         ├──────────────────────────┤
   │ +update(Observable,Obj) │ ←─────  │ +addObserver(Observer)   │
   └─────────────────────────┘         │ +notifyObservers()       │
              △                        │ +setChanged()            │
              │ implements             └──────────────────────────┘
              │                                    △
   ┌─────────────────────────┐                     │ extends
   │       Client            │                     │
   ├─────────────────────────┤              ┌──────────────────┐
   │ -subject : Subject      │─────────────→│     Subject      │
   │ +setSubject(Subject)    │              ├──────────────────┤
   │ +update(Observable,Obj) │              │ +getNumber():Str │
   └─────────────────────────┘              └──────────────────┘

MVC — Model View Controller

Architectural pattern (مش design pattern). أعم وأشمل من Strategy/Observer.

🏗️ Architectural vs Design Pattern

MVC = Architectural pattern (high level). مش زي Strategy/Observer.
بيقسّم الـ whole application لـ 3 separate parts.
معروف قبل GoF design patterns — موجود من 1979.
Sun (Java): "MVC is the recommended architectural design pattern for interactive applications."

Model

Data + business logic
Rules, strategies
Observable (Subject)
Notifies Views of changes

View

Displays the Model
Observer of Model
UI representation
Can have edit components

Controller

Accepts user input
Mediates: View ↔ Model
Sends messages to Model
In Java: listeners are controllers

MVC Roles & Data Flow

كل component له responsibilities محددة. الـ flow بيدور كذا الشكل.

📦 Model Responsibilities

Provide access to the state of the system.
Provide access to the system's functionality.
Can notify the view(s) that its state has changed.

⚠️ Model = Observable

🖼️ View Responsibilities

Display the state of the model to the user.
Register with the model (Model = observable, Views = observers).
Get notified when Model state changes.

👁️ View = Observer

🎮 Controller Responsibilities

Accept user input: clicks, key presses, mouse, sliders.
Send messages to Model (may trigger notifications).
Send appropriate messages to View.

🎧 Controller = Listener in Java

🔄 Data Flow

👤 User

user actions

🎮 Controller

setState()

📦 Model

👤 User

🖼️ View

📦 Model

1. User acts → Controller

2. Controller updates → Model (setState)

3. Model notifies → View (update / change notification)

4. View queries → Model (getState)

5. View displays updated info to User

🧩 When to Combine View & Controller

أحياناً في برامج صغيرة، Controller + View بيتجمعوا.
Appropriate لما الـ Controller و View very interdependent.
The Model should remain independent.

🔴 NEVER mix Model code with GUI code!دي القاعدة الذهبية للـ MVC. الـ Model لازم يكون pure logic بدون أي UI dependencies.

✨ MVC Benefits

Clarity of design — easier to implement and maintain.
Modularity — changes to one module don't affect others. Can develop in parallel.
Multiple views — same model can have many views (games, spreadsheets, PowerPoint, Eclipse, UML tools).

MVC + Observer Pattern Connection

الـ MVC بيستخدم الـ Observer pattern للـ communication بين Model و View.

🔗 Mapping

MVC Role	Observer Pattern Role
Model	Subject (Observable)
View	Observer (ConcreteObserver)
Controller	External trigger (calls Model.setState)

💡 السؤال المتكررQ1.18 في Fall 2021-22 / Winter 2021 بيدي UML مع @Observable (1), @EventListener (2), @Observer (3) ويسأل ايه classes 1, 2, 3 بالترتيب؟ الإجابة: Model, Controller, View.

🎮 Example — TicTacToe MVC

Layer	Class	Role
Model	`Game`	Grid arrays · game state · turn logic · rule evaluation
View	`TextFieldView`	Display rows/columns as text fields
View	`DrawingView`	Custom graphical X/O rendering
Controller	`MouseListener`	Mouse input handler
Controller	`ActionListener`	Button events

Multiple views للـ same game model — text version أو drawing version. لما الـ Model يتغير، الاثنين يتم تحديث.

☕ Java Swing as MVC

   ┌──────────────────┐    notify    ┌──────────────────────────┐
   │  TTTGame (Model) │ ──────────→  │ GameListener (Controller)│
   │  observable      │              │ implements ActionListener │
   └──────────────────┘              ├──────────────────────────┤
                                     │ +actionPerformed()       │
                                     └──────────────────────────┘
                                                  ↑
                                                  │ implements
                                     ┌──────────────────────────┐
                                     │  «interface» Observer    │
                                     │    (ActionListener)      │
                                     └──────────────────────────┘

في Java Swing، الـ JFrame = view container, ActionListener = controller. الـ Game logic = Model — completely separate من الـ UI.

MVP Variation

Model-View-Presenter — an updated MVC variation.

🆕 MVP — Modern Take

الـ MVP بيستبدل الـ Controller بـ Presenter. الـ Presenter:

Communicates with both Model and View directly.
Mediates more strictly than Controller — لا تواصل مباشرة بين Model و View.
Updates the state in Model via setState() + retrieves data via get.
Instructs the View directly via changeView().

الفرق المهم: في MVC الـ View بيراقب Model مباشرة. في MVP الـ View ما يعرفش الـ Model — كل التواصل يمر عبر الـ Presenter.

⚖️ MVC vs MVP

Aspect	MVC	MVP
3rd Component	Controller	Presenter
View ↔ Model	Direct (Observer)	Indirect (via Presenter)
Testability	Harder (View tied to Model)	Easier (Presenter is testable)
Common in	Web frameworks, classic GUI	Android (old), .NET

🎯

Exam Bank — Lecture 13

8 أسئلة على Observer و MVC. Q3 Winter 2023 ضم Observer implementation كاملة.

Question 1 Fall 2021–22 / Winter 2021 · Q1.17

A water company has CRM, billing system, and messaging system. When a customer is created in CRM, billing & messaging need to be notified and get a copy of customer data. Which pattern fits?

A GoF pattern (any)

B Publish-Subscribe (Observer)

C Strategy

D MVC

✅ الإجابة الصح: B — Publish-Subscribe (Observer) الـ CRM = Subject. Billing & Messaging = Observers. عند event "new customer", subject calls notifyObservers(customerData) وكل observer يستجيب.

Question 2 Fall 2021–22 / Winter 2021 · Q1.18

In the MVC pattern with classes labeled @Observable (1), @EventListener (2), @Observer (3), what are classes 1, 2, 3 in order?

A View, Controller, Model

B Model, View, Controller

C Model, Controller, View

D Controller, View, Model

✅ الإجابة الصح: C — Model, Controller, View

Model = @Observable (notifies of state changes)
Controller = @EventListener (responds to events)
View = @Observer (receives notifications)

Question 3 Practice — Observer implementation

In Java's built-in Observer pattern, which method must be called before notifyObservers() for observers to actually be notified?

A addObserver()

B update()

C setChanged()

D deleteObserver()

✅ الإجابة الصح: C — setChanged() الـ Observable class بيتطلّب إنك تستدعي setChanged() الأول لـ mark the observable as having been changed. لو ما قلتش بـ كده، notifyObservers() ما يفعلش شيء.

A (addObserver) — يضيف observer بس مش بيشغّل notification. · B (update) — هي اللي بتتنده على الـ observer، مش الـ subject.

Question 4 Practice — Observer roles

In the Observer pattern, which class is responsible for maintaining the list of subscribers?

A ConcreteObserver

B Observer interface

C Client / Main

D Subject (or Observable)

✅ الإجابة الصح: D — Subject Subject = الـ source of changes. هو اللي بيحتفظ بـ List<Observer> ويوفّر methods لـ attach() و detach() الـ observers.

Question 5 Practice — MVC principle

What is the golden rule of MVC?

A Never mix Model code with GUI code

B Always have exactly one View

C Controller must extend View

D Model must implement Observer

✅ الإجابة الصح: A الـ Model must remain pure — no UI dependencies. هذا بيخليك تقدر تستبدل views, test الـ logic independently, و reuse الـ model في other applications.

Question 6 Practice — MVC benefits

Which is NOT a benefit of MVC?

A Multiple views can share the same model

B Reduces the total amount of code

C Modularity — changes to one don't affect others

D Parallel development is possible

✅ الإجابة الصح: B MVC actually adds more code (separating into 3 layers, adding event handling). الـ benefit في الـ structure, مش الـ size. Trade-off acceptable للـ maintainability + parallel dev.

Question 7 Practice — Pattern matching

In a stock trading application, multiple charts (bar, line, pie) must update in real-time when stock prices change. Which pattern is best?

A Strategy

B Singleton

C Observer

D Adapter

✅ الإجابة الصح: C — Observer الـ Subject = stock price feed. الـ Observers = the 3 chart views. كل chart بيشترك وبيتنبّه عند price update.

Question 8 Practice — Java Swing

In Java Swing, ActionListener plays the role of:

A Subject / Observable

B Observer (responds to events)

C Model

D View only

✅ الإجابة الصح: B — Observer ActionListener = Observer. الـ Button = Subject. لما تدوس الـ button (state change), بيخبّر الـ listeners (call actionPerformed()). ده exactly الـ Observer pattern.

في MVC: ActionListener = Controller. الـ Observer pattern یستخدم تحت بـ Java Swing implementation.

📋

Cheat Sheet

Observer + MVC quick reference.

📡 Observer Pattern — 4 Players

Subject

Maintains list + attach/detach + notify

Observer

Interface with update() method

ConcreteSubject

Has state of interest, calls notify()

ConcreteObserver

Implements update(), holds ref to subject

☕ Java Observer API

interface Observer

update(Observable, Object)

class Observable

addObserver, notifyObservers

protected setChanged()

⭐ Must call before notifyObservers!

Q3 Winter 2023

Subject extends Observable, Client implements Observer

🏗️ MVC Architecture

Model

Data + business logic = Observable (Subject)

View

Display + UI = Observer

Controller

User input → Model = Listener in Java

Golden Rule

Never mix Model with GUI code

✅ MVC Benefits

Clarity

Easier to implement/maintain

Modularity

Changes don't propagate

Multiple views

Same model → different displays

Parallel dev

Once interfaces defined

🆚 MVC vs MVP

MVC

Controller + View can observe Model directly

MVP

Presenter mediates ALL communication

View knows Model?

MVC: yes · MVP: no

🔗 Observer ↔ MVC Mapping

Subject

= Model

Observer

= View

Controller

External trigger (user input → setState)

⚡

Rapid Revision

Flashcards · Common Mistakes · Doctor favorites.

Observer = ?

tap

Publish-Subscribe — Subject notifies many Observers of state change

Observer 4 players؟

tap

Subject · Observer · ConcreteSubject · ConcreteObserver

Java Observable method to call before notifyObservers?

tap

setChanged() — MUST call first

MVC components؟

tap

Model · View · Controller

Model in MVC = ?

tap

Observable / Subject — data + business logic

View in MVC = ?

tap

Observer — displays state

Controller in Java؟

tap

Listeners (ActionListener, MouseListener)

MVC golden rule؟

tap

Never mix Model code with GUI code

MVP differs from MVC?

tap

Presenter mediates ALL Model↔View communication

🚨 Common Mistakes

1. خلط Observer + StrategyObserver = one-to-many notification. Strategy = swap behavior in one object.

2. نسيان setChanged() قبل notifyObservers()الـ Java Observable لازم setChanged() الأول، وإلا الـ notification ما تحصلش.

3. Model يعتمد على ViewModel مش لازم يعرف Views — هو just publishes changes. الـ View هو اللي بيشترك.

4. MVC = Design Patternغلط — MVC هو Architectural pattern، أعلى مستوى. أكبر من Strategy/Observer.

5. خلط Controller و Listenerفي Java specifically، Listeners (ActionListener, MouseListener) هم الـ Controllers في MVC.

⭐ What Dr. El-Ramly Loves

🔥 Observer + MVC in exams

Q1.17 Pub-Sub scenario (water company / banking) — Observer.
Q1.18 MVC role identification — مرتبط بـ Observer terminology.
Q3 Winter 2023 Observer Pattern in Java with Subject + Observable + setChanged + notifyObservers.
Recurring conceptual — when notify-many is needed, use Observer.