Introducing the MVC pattern along with JavaFX

Question

This year I am planning to shift from teaching Swing for graphics, to teaching JavaFX. As JavaFX ideally uses the MVC design pattern, I thought it would help students understand how to use JavaFX if they learnt about MVC.

While teaching the various controls, views and goodies in JavaFX is relatively trivial and straightforward, teaching MVC isn't so simple. So I am trying to intuitively explain MVC in the context of JavaFX.

What example applications in javaFX can I use to show them the MVC cycle?

That image explains what the cycle is, but students have difficulty in seeing how it works in practice in a javaFX application.

Answer 1

I'd use the following analogy connecting MVC to a teacher's gradebook.

In the context of MVC, the actual gradebook with a complete record of every student's grade on each assignment is your Model. Students may have their individual grade rendered in the View, but they would never have access to the entire database (for obvious reasons). A Controller, say in a school's learning management system, would select the appropriate grades to display to the specific student. A student could then choose only to render her quizzes or her homework assignments to focus on specifically those grades. In that instance a user action in the View, through say a dropdown, would modify what appears thanks to logic in the Controller.

As with all analogies, it is an imperfect comparison. However, this general concept will be something (nearly) all students are familiar with.

The iTunes U course on Developing iOS 10 Apps with Swift has a great lecture on MVC. The lecture video and slides are available here.

The image below from Apple also gives a succinct summary of the relationships among the three components.

Answer 2

The model you use in teaching MVC can be extremely simple so that the student can focus on the details of the views and controllers. One of the simplest, (copied with permission from Joseph Bergin at Pace University) is a temperature converter:

public class TemperatureModel extends java.util.Observable {

    public double getF(){return temperatureF;}

    public double getC(){return (temperatureF - 32.0) * 5.0 / 9.0;}

    public void setF(double tempF)
    {   temperatureF = tempF;
        setChanged();
        notifyObservers();
    }

    public void setC(double tempC)
    {   temperatureF = tempC*9.0/5.0 + 32.0;
        setChanged();
        notifyObservers();
    }

    private double temperatureF = 32.0;
}

Since it extends Observable, it can add any observer. The link shows code for several examples. They aren't JavaFX, but I'm sure you can adapt them simply enough.

The model is easy enough to extend to other temperature systems if desired. If you want to include Absolute temperatures, it might be advantageous to change the internal representation to that. Since the interface wouldn't change (except for the new methods) you can demonstrate separation of interface from implementation as well. I suspect that if you are teaching MVC that they have already learned that, of course.