<p>Als Beispiel soll das einfache Spiel <ahref="https://de.wikipedia.org/wiki/Tic-Tac-Toe">Tic-Tac-Toe</a> implementiert werden. Das UI wird in der folgenden Abbildung dargestellt. Die <i>View</i> enthält folgende Attribute, um ihren Zustand zu erfassen, und Methoden zur Steuerung der Anwenderinteraktion:
<ul>
<li>Attribut <code>board</code>: Spielbrett bestehend 9 Zellen, die jeweils leer oder mit einem X oder einem O belegt sind</li>
<li>Attribut <code>board</code>: Spielbrett bestehend aus 9 Zellen, die jeweils leer oder mit einem X oder einem O belegt sind</li>
<li>Attribut <code>winner</code>: Label, dass ggf. einen Gewinner ausweist</li>
<li>Methode <code>selectCell</code>: Auswählen einer Zelle, um diese im Wechsel mit einem X oder einem O zu markieren</li>
<li>Methode <code>reset</code>: Zurücksetzen des bisherigen Spiels, um ein neues Spiel zu starten</li>
<label>UI der Beispielanwendung Tic-Tac-Toe</label>
<p>Es folgt der Code einer Tic-Tac-Toe-Implementierung, die dem gemäß Dokumentation vorgeschlagen MVC-Muster in JavaFX folgt. Der Code wird anschließend erläutert.</p>
<p>Es folgt der Code einer Tic-Tac-Toe-Implementierung, die dem vorgeschlagen MVC-Muster gemäß der JavaFX-Dokumentation folgt. Der Code wird anschließend erläutert.</p>
<li><b>Model-View-Presenter (MVP)</b>: MVP wurde in 2004 in einem <ahref="https://martinfowler.com/eaaDev/uiArchs.html">Artikel vom Martin Fowler</a> vorgeschlagen und darin von MVC abgegrenzt. Im MVP-Muster läuft sämtliche Kommunikation zwischen <i>View</i> und <i>Model</i> über einen zwischengeschalteten <i>Presenter</i>, damit keine Abhängigkeit zwischen <i>View</i> und <i>Model</i> existiert. Der <i>Presenter</i> arbeitet nur auf Interfaces von <i>View</i> und <i>Model</i>, damit diese in Komponententests (engl. <i><ahref="https://en.wikipedia.org/wiki/Unit_testing">Unit Testing</a></i>) durch <ahref="https://de.wikipedia.org/wiki/Mock-Objekt">Mock-Objekte</a> ausgetauscht und unabhängig voneinander getestet werden können. Martin Fowler hat das MVP-Muster später noch in <i><ahref="https://martinfowler.com/eaaDev/SupervisingPresenter.html">Supervising Controller</a></i> und <i><ahref="https://martinfowler.com/eaaDev/PassiveScreen.html">Passive View</a></i> untergliedert. In aktuellen Frameworks ist MVP meist begrifflich durch MVVM ersetzt worden.</li>
<li><b>Model-View-ViewModel (MVVM)</b>: MVVM wurde als Begriff in 2005 durch das Framework <ahref="https://docs.microsoft.com/de-de/dotnet/framework/wpf/">Windows Presentation Foundation (WPF)</a> innerhalb von Microsoft .NET geprägt. Es ist insbesondere auf UIs ausgerichtet, in denen Teile der <i>View</i> deklarativ in HTML oder XML beschrieben werden. Daher haben auch diverse JavaScript-Frameworks wie <ahref="https://angular.io/">Angular</a>, <ahref="https://vuejs.org/">Vue.js</a> und zuerst <ahref="https://knockoutjs.com/">Knockout</a> das MVVM-Muster übernommen. Wie bei MVC und MVP werden der Zustand und die Steuerung des Verhaltens der <i>View</i> von ihrer grafischen Darstellung getrennt und ins sogenannte <i>ViewModel</i> ausgelagert. Das <i>ViewModel</i> soll wie der <i>Presenter</i> in MVP frei von Abhängigkeiten zu Klassen des konkreten UI-Frameworks sein. <i>View</i> und <i>ViewModel</i> werden per <i>Two-Way-Binding</i> (bidirektionaler Beobachter) aneinander gebunden, so dass ihre Zustände nicht voneinander abweichen können. Wie genau das in Java implementiert werden kann, folgt später.</li>
<li><b>Model-View-ViewModel (MVVM)</b>: MVVM wurde als Begriff in 2005 durch das Framework <ahref="https://docs.microsoft.com/de-de/dotnet/framework/wpf/">Windows Presentation Foundation (WPF)</a> innerhalb von Microsoft .NET geprägt. Es ist insbesondere auf UIs ausgerichtet, in denen Teile der <i>View</i> deklarativ in HTML oder XML beschrieben werden. Daher haben auch diverse JavaScript-Frameworks wie <ahref="https://angular.io/">Angular</a>, <ahref="https://vuejs.org/">Vue.js</a> und zuerst <ahref="https://knockoutjs.com/">Knockout</a> das MVVM-Muster übernommen. Wie bei MVC und MVP werden der Zustand und die Steuerung des Verhaltens der <i>View</i> von ihrer grafischen Darstellung getrennt und ins sogenannte <i>ViewModel</i> ausgelagert. Das <i>ViewModel</i> soll wie der <i>Presenter</i> in MVP frei von Abhängigkeiten zu Klassen des konkreten UI-Frameworks sein. <i>View</i> und <i>ViewModel</i> werden per <i>Two-Way-Binding</i> (bidirektionaler Beobachter) aneinander gebunden, so dass ihre Zustände nicht voneinander abweichen können. Wie genau das in Java implementiert werden kann, folgt im nächsten Kapitel.</li>