Commit 989c2c77 authored by Jens Ehlers's avatar Jens Ehlers
Browse files

minor fixes in MVC/MVVM chapters

parent e771607f
Pipeline #9941 passed with stage
in 1 minute and 7 seconds
......@@ -4,7 +4,7 @@
<p>Als Beispiel soll das einfache Spiel <a href="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>
......@@ -14,7 +14,7 @@
<img src="media/architecture_tictactoe.png" style="width:200px">
<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>
<ul class="nav nav-tabs" id="mvc-tabs" role="tablist">
<li class="nav-item"><a href="#mvc-tabs-view" class="nav-link active" data-toggle="tab" role="tab">View</a></li>
......
......@@ -16,7 +16,7 @@
<ul>
<li><b>Model-View-Presenter (MVP)</b>: MVP wurde in 2004 in einem <a href="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><a href="https://en.wikipedia.org/wiki/Unit_testing">Unit Testing</a></i>) durch <a href="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><a href="https://martinfowler.com/eaaDev/SupervisingPresenter.html">Supervising Controller</a></i> und <i><a href="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 <a href="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 <a href="https://angular.io/">Angular</a>, <a href="https://vuejs.org/">Vue.js</a> und zuerst <a href="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 <a href="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 <a href="https://angular.io/">Angular</a>, <a href="https://vuejs.org/">Vue.js</a> und zuerst <a href="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>
</ul>
<img src="media/architecture_mvp_mvvm.png" style="width:1100px">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment