nicht angemeldet
Hallo SELFler,
Irgendwie habe ich Probleme, das Model-View-Controller-Muster umzusetzen. Das grobe Prinzip, wie bei Wikipedia beschrieben, ist mir einigermaßen verständlich, aber wie setzt man sowas konkret um?
Hier mal ein konstruiertes Beispiel: In einem Restaurant gebe es
– Beliebig viele Tische mit je sechs Sitzplätzen
– Eine Karte mit Speisen und Getränken
– Pro Tisch eine(n) KellnerIn, der Einfachheit halber im folgenden Kellnerin genannt
In einer Webanwendung sollen
– solche Tische ausgewählt werden können, an denen mindestens ein Gast sitzt.
– für den ausgewählten Tisch die Sitzplätze ausgewählt werden können, auf denen jemand sitzt.
– Für den ausgewählten Sitzplatz die Speisen angezeigt werden, die der Gast bestellt hat.
– Die Kellnerin soll der Reihe nach alle Gäste an einem nicht-leeren Tisch bedienen (Bestellung aufnehmen/liefern) und, wenn alle durch sind, wieder von vorne beginnen. Es wird z.B. zuerst pro Gast ein Getränk geliefert (falls bestellt), dann pro Gast eine Vorspeise (falls bestellt) usw.
– Die Kellnerin soll manuell gestartet und angehalten werden können, damit man jederzeit in Ruhe den aktuellen Stand der Speisen und Getränke pro Gast studieren kann. Solange die Kellnerin läuft, wird ständig serviert, und die Anzeige des ausgewählten Sitzplatzes (der laufend dort bestellten Produkte) aktualisiert sich automatisch.
Mein Ansatz für die Umsetzung:
DOM:
– Ein Eingabefeld für die Bezeichnung eines neu „eröffneten“ Tisches (ein erster Gast hat daran Platz genommen), z.B. „Tisch1“ eingeben und bestätigen mit Eingabetaste.
– Eine Dropdown-Liste zum Auswählen eines besetzten Tisches (deaktiviert falls keiner besetzt ist)
– Ein Entfernen-Button zum Löschen eines Tisches aus der Liste, z.B. wenn kein Gast mehr am Tisch sitzt oder der Tisch aus anderem Grund uninteressant ist..
– Ein Tisch-Element (z.B. <DIV>) für den ausgewählten Tisch.
– Sechs Sitzplatz-Buttons als Kindelemente des Tisches zum Auswählen eines Platzes (deaktiviert falls unbesetzt)
– Anzeigeelemente für die am gewählten Sitzplatz bestellten Produkte
– Ein Start- und ein Stop-Button für die Kellnerin
In einem objektorientierten Ansatz würde ich folgendes implementieren:
– Einen Ur-Tisch, von dem Instanzen für konkrete Tische gebildet werden können
– Eine Ur-Kellnerin, von der Instanzen für konkrete Tische gebildet werden können
– Ein Speisekarten-Objekt für bestellte Produkte
– ...
Und jetzt? Was wird hier Model, was View, und was Controller?
View ist eigentlich klar: Das sind die DOM-Elemente. Denen würde ich einfach Eventhandler-Methoden verpassen, z.B. für das Tischeingabe-Element in JS:
tischInput.onchange = function(){ createTable(this.value) && fire('tableOpened'); };
und hätte somit einen neu eröffneten Tisch.mit dem eingegebenen Namen. Analog mit den anderen Bedienelementen im DOM. Buttons bekommen u.a. onclick-Methoden, die dann die entsprechende Aktion durchführen usw. Sitzplatz-Buttons z.B. reagieren auf den tableOpened-Event (der seinerseits durch den Change-Event des Eingabefelds für einen Tisch ausgelöst wurde) und werden daraufhin erst sichtbar.
So weit, so gut. Aber fehlt da nicht irgendwie eine konkrete Controller-Schicht? Die Funktionen sind ja jetzt direkt in den DOM-Elementen (View) als Eventhandler verankert, zählen die trotzdem als Controller? Und wo ist überhaupt das 'Model'? Die Kellnerin kann's ja nicht sein, sonst würde sie nicht im Restaurant bedienen ;)
Versteht jemand, was ich meine? Irgendwie habe ich ein Problem, Model, View und Controller konkret auseinanderzuhalten bzw. überhaupt zu bauen. Hat mein Konzept deshalb einen Designfehler? Hat es überhaupt etwas mit dem MVC-Muster zu tun oder kann man MVC für mein Beispiel gar nicht brauchen?
Danke für jede Anregung,
Don P