Model View Tutorial/de

Table of Content

• Einführung in die _Model/View_-Programmierung anhand eines Beispiels
  • Das _Model-View_-Konzept - eine kurze Einführung
  • Aufbau der Applikation
  • Schritt 1 - Ein read only Model
  • Teil 2 - ein Modell, dessen Werte editiert werden können
  • Teil 3
• _*ab hier wird das ganze später erweitert*_ Gerolf
  • Teil 4
  • Teil 5

Diese Wikiseite im Forum diskutieren… [developer.qt.nokia.com]

Einführung in die Model/View-Programmierung anhand eines Beispiels

Wir möchten eine Anwendung entwickeln, mit der wir unsere CD-Sammlung verwalten können.
Der gesamte Datenbestand wird in einer Datei abgelegt (Format XML). Öffnen und Speichern sollen zeitgemäß per Menü und Toolbar angeboten werden.

example app

Die Applikation soll in einem 3-Schichten-Modell gebaut werden (User Interface (UI) – Business Layer – Data Layer). In den Codebeispielen wird hauptsächlich auf die Implementierung des Modells eingegangen.

Die Codebeispiele liegen in gitorious.org [gitorious.org]

Das Model-View-Konzept – eine kurze Einführung

Model-View-Controller (MVC) ist ein Design Pattern aus Smalltalk, das oft verwendet wird, um Daten und Anzeige zu trennen. Im Buch Design Patterns, Gamma et al. steht dazu:

MVC besteht aus drei Arten von Objekten. Das Model ist das Daten-Objekt, die View ist die Ansicht (Bildschirm-Präsentation), und der Controller definiert, wie das User Interface auf Benutzereingaben reagiert. Vor MVC tendierte man dazu, diese Objekte in eines zusammenzufassen. MVC entkoppelt das und erhöht damit die Flexibilität und die Wiederverwendbarkeit.

Wenn die View und der Controller zu einem Objekt zusammengefasst werden, spricht man von einer Model/View-Architektur. Das führt dazu, das die Daten immer noch von der Anzeige getrennt sind, ermöglicht aber ein einfacheres Framework. Diese Trennung ermöglicht es, die selben Daten in mehreren, auch unterschiedlichen Views anzuzeigen, ohne die unterliegenden Datenstrukturen zu ändern. Um Benutzereingaben flexibel handhaben zu können, wird ein Konzept namens Delegate eingeführt. Hierdurch lassen sich Eingabe und Darstellung der Daten individuell anpassen.

Modle View Delegate

Model, View und Delegate kommunizieren mittels Signals und Slots, teils auch über direkte Methodenaufrufe:

• Signale des Model benachrichtigen die View über Datenänderungen der Datenquelle
• Signale der View informieren über Benutzer-Interaktionen für die Elemente
• Signale des Delegate werden beim Editieren verwendet um View und Model über den Status des Editierens zu informieren
• Die View ruft Methoden im Model auf, um die Daten zu lesen / zu bearbeiten

Jedes Model muss (direkt oder indirekt) von QAbstractItemModel [doc.qt.nokia.com] abgeleitet werden. Jede View muss (direkt oder indirekt) von QAbastratcItemView [doc.qt.nokia.com] abgeleitet werden. Diese Basisklassen definieren die Schnittstellen für die Kommunikation.

Um einzelne Elemente eines Modells zu referenzieren, werden Objekte vom Typ QModelIndex [doc.qt.nokia.com] verwendet. Diese werden immer vom Modell erzeugt (QAbstractItemModel::Index [doc.qt.nokia.com] ). Genauer werden wir später auf diese Klasse eingehen.

Eine sehr ausführliche Beschreibung des MVC Konzepts findet sich in der Qt Onlinehilfe [doc.qt.nokia.com] .

Aufbau der Applikation

Folgende Klassen werden erstellt:

Klasse	Beschreibung
VirtualCdRack Beschreibung [developer.qt.nokia.com]	Dies ist die Hauptanwendung (abgeleitet von QMainWindow). Sie beinhaltet das Menu, den Toolbar etc.
CdRack Beschreibung [developer.qt.nokia.com]	Datenschicht. Diese Klasse implementiert das Laden und Speichern der Daten aus /in die xml Datei. Alle Daten werden in dieser Klasse gehalten.
CdModel	Implementierung des Models. Es verbindet diue Daten aus der Klasse CdRack mit der View (ein Objekt vom Typ QTableView) die Bestandteil der Klasse VirtualCdRack ist.

Schritt 1 – Ein read only Model

Zunächst sollen die CD-Daten in tabellarischer Form angezeigt werden (Spalten: Titel, Interpret, Jahrgang, Genre).
Nach dem Laden der Daten sollen diese korrekt in der Applikation dargestellt werden.

Teil 1 →
Code für die Beispielapplikation Teil 1 als zip Datei zum Download [gitorious.org]

Teil 2 – ein Modell, dessen Werte editiert werden können

Im nächsten Schritt sollen die Daten in der Tabelle bearbeitet werden können, z.B. um Schreibfehler zu korrigieren.
Die Genres sollen aus einer Liste ausgewählt oder per Hand eingegeben werden können (ComboBox).

Teil 2 Datenmodell →
Teil 2 Delegate und View →
Code für die Beispielapplikation Teil 2 als zip Datei zum Download [gitorious.org]

Teil 3

Jetzt sollen neue CDs hinzugefügt werden, alte entfernt werden (Tabellen-Zeilen).
Außerdem soll es möglich sein, zusätzliche Informationen (z.B. ausgeliehen an) hinzuzufügen (Tabellen-Spalten).

Teil 3 →

Code für die Beispielapplikation Teil 3 als zip Datei zum Download [gitorious.org]

ab hier wird das ganze später erweitert Gerolf

Teil 4

Als letztes sollen noch Daten aus anderen Tabellen (Excel, Word, HTML Tabellen) eingefügt werden können (via Drag’n‘Drop) oder aus der Tabelle heraus in eine andere Applikation übertragen werden können.
Auch einzelne Zelleninhalte sollen übertragbar sein (evtl. auch ein Bild für die CD = Cover?)

Teil 5

Um die Suche zu beschleunigen, soll die Tabelle nun auch gefiltert werden können (nach Interpret, Genre…, ggf. per RegExp, …).