<p>I'd use the following analogy connecting MVC to a teacher's gradebook.</p>

<p>In the context of MVC, the actual gradebook with a complete record of every student's grade on each assignment is your <code>Model</code>. Students may have their individual grade rendered in the <code>View</code>, but they would never have access to the entire database (for obvious reasons). A <code>Controller</code>, 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 <code>View</code>, through say a dropdown, would modify what appears thanks to logic in the <code>Controller</code>.</p>

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

<p>The iTunes U course on Developing iOS 10 Apps with Swift has a great lecture on MVC. The lecture video and slides are available <a href="https://itunes.apple.com/us/course/developing-ios-10-apps-with-swift/id1198467120" rel="nofollow noreferrer">here</a>.</p>

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

<p><a href="https://i.sstatic.net/VlPKo.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/VlPKo.png" alt="MVC Diagram"></a></p>

CC BY-SA 3.0
2017-06-14T20:32:48.487Z
2017-06-14T20:32:48.487Z
Peter
<p>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 <a href="http://csis.pace.edu/~bergin/mvc/mvcgui.html" rel="nofollow noreferrer">Joseph Bergin at Pace University</a>) is a temperature converter: </p>

<pre><code>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;
}
</code></pre>

<p>Since it extends <code>Observable</code>, 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. </p>

<p>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. </p>

CC BY-SA 3.0
2017-06-24T20:53:53.250Z
2017-06-25T10:50:46.180Z
2017-06-25T10:50:46.180Z
Buffy
<p>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. </p>

<p>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. </p>

<p>What example applications in javaFX can I use to show them the MVC cycle?</p>

<p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/MVC-Process.svg/500px-MVC-Process.svg.png" alt="cycle image"></p>

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

CC BY-SA 4.0
2021-01-18T11:36:55.223Z
I think the arrow from "Model -> Updates -> view" is confusing.  It is not the model which update the view. It is the view which listen to changes in the models data. 
The model should not even know that there is a view. Also I don't think the "view sees user" as indicated by that arrow. You really need to think about what exactly the arrows represent.
MTilsted
CC BY-SA 3.0
2017-07-21T12:43:09.627Z
your image is very big and makes it difficult not to focus on it. from what I understand, mvc is not the only thing to focus on. so an image so big is making it difficult to understand your question....
Harry
<curriculum-design><lesson-ideas><java><mvc>
Introducing the MVC pattern along with JavaFX
# Introducing the MVC pattern along with JavaFX

(Asked by: username_0 on 2017-06-14)

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?

![cycle image](https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/MVC-Process.svg/500px-MVC-Process.svg.png)

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

**Tags:** curriculum-design, lesson-ideas, java, mvc

> **Comments:**
> **username_2**: your image is very big and makes it difficult not to focus on it. from what I understand, mvc is not the only thing to focus on. so an image so big is making it difficult to understand your question....  
> **username_1**: I think the arrow from "Model -> Updates -> view" is confusing.  It is not the model which update the view. It is the view which listen to changes in the models data.  The model should not even know that there is a view. Also I don't think the "view sees user" as indicated by that arrow. You really need to think about what exactly the arrows represent.  

---

## 2 answers

### Answer by username_3 on 2017-06-14. Score: 3

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](https://itunes.apple.com/us/course/developing-ios-10-apps-with-swift/id1198467120).

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

[![MVC Diagram](https://i.sstatic.net/VlPKo.png)](https://i.sstatic.net/VlPKo.png)


---

### Answer by username_4 on 2017-06-24. Score: 3

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.


---

