JavaFX Observer Pattern With Example

This article explains observer pattern in context of JavaFX. First you will see, what is observable and observer in general, followed by how they work in Java core i.e. without JavaFX. At the end, you would know how JavaFX application can use observer pattern to keep the view updated based on data in memory.

Observable is an entity that is observed by one or more observers. The observable entity maintain a list of observers that are informed by observable, mostly when an event or change occurs in observable. For example, if a teacher maintain list of students at some forum or on FB Group. The FB Group is observable entity and students are observers that must be intimated by an email or sms when the teacher post a message on FB Group. Before a message is posted, students must be members of that group, otherwise they would not receive updates. So FB Group i.e. observable, maintains a list of members i.e. observers, only then message can be emailed to them.

In JavaFX, we associate a data object called model e.g. an object of Person class, with the user interface component, called view. In this case, the model act as observable and the view component work as observer. The benefit of binding a model to view is, when we make changes in model (the observable), the view component is automatically informed by the model which help to keep keep the view in sync with model. We never explicitly call a method of view component to update. Its done automatically.

Lets try to understand above description with an example. Assume you have created an array list of Person objects and binded it some table i.e. the view component, table view in short. If the list contains 5 objects, there would be 5 rows in table view. If you remove an object from the list, the corresponding row in table view would be automatically removed. In same way, if you add an object in the list, the table view would automatically update itself i.e. new row would be added in the table. Why? Because the view component has registered itself with model, called binding. Whenever some change occurs in the model, the model object automatically call a method of the view component to update the table view.

There are two core components involved to manage this. The Observable class and Observer interface. First I explain, how both component work using example of student and examination center. The student work as observer of examination center for the result announcement. The examination center work as observable. Few things must be clear from above description:

1. Student class implement Observer interface. to make itself Observer.
2. ExaminationCenter extend Observable class, to make itself Observable.
3. The ExaminationCenter shall provide a method for others to register themselvs as observers. So, it maintain a list of observers. This method is already defined in Observable class.
4. The Student class override the method declared in Observer interface.
5. When result is announced, the ExamincationCenter notify all observers by calling the method of Observer interface.

Below is the code of Student class:

package com.bitspedia.javafx.observer;

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

public class Student implements Observer {

    private String name;

    public Student(String name) {
        this.name = name;
    }
    
    @Override
    public void update(Observable o, Object arg) {
        System.out.println(o);
        System.out.println(name + " updated about changed. ");
    }
}

Below is the code of ExamincationCenter

package com.bitspedia.javafx.observer;

import java.util.Observable;

public class ExaminationCenter extends Observable {

    public ExaminationCenter() {
        super();
    }

    public void announceResult(String result) {
        setChanged();
        notifyObservers(result);
    }
}

In below code, we register three student objects with examincation center as observers. So that, those objects may be informed when some event occur in examincation center e.g. result announcement.

package com.bitspedia.javafx.observer;

public class MainClass {

    public static void main(String[] args) {

        ExaminationCenter examinationCenter = new ExaminationCenter();

        Student alice = new Student("Alice");
        Student bob = new Student("Bob");
        Student oracle = new Student("Oracle");

        examinationCenter.addObserver(alice);
        examinationCenter.addObserver(bob);
        examinationCenter.addObserver(oracle);

        examinationCenter.announceResult("FA17 Result");
    }
}

TODO-add code here