Model View Tutorial/de: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
<div class="factbox right">


===Table of Content===
* [[#2a73961237717a0a5272323f4b942d3c|Einführung in die _Model/View_-Programmierung anhand eines Beispiels]]
** [[#2c74f0957e8b28dba48999ead2b710e7|Das _Model-View_-Konzept - eine kurze Einführung]]
** [[#4d36eed6646e29059393aaa1039384aa|Aufbau der Applikation]]
** [[#61c9b83652906611c97cf4110063c754|Schritt 1 - Ein read only Model]]
** [[#6331ba4697097db96db4ad19635b9c07|Teil 2 - ein Modell, dessen Werte editiert werden können]]
** [[#fa8cd5aaefce2e5a45a49b14d093876d|Teil 3]]
* [[#a8d2a8bad981f712e7315f6c234ce4e9|_*ab hier wird das ganze später erweitert*_ Gerolf]]
** [[#c6bcd582e7e98fdb4725a175cf5d7a1a|Teil 4]]
** [[#56bb99ad4c4f6ad18d7aad30bc2bd3c1|Teil 5]]
</div>
[http://developer.qt.nokia.com/forums/viewthread/2967/ ''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.<br /> Der gesamte Datenbestand wird in einer Datei abgelegt (Format <span class="caps">XML</span>). Öffnen und Speichern sollen zeitgemäß per Menü und Toolbar angeboten werden.
[[Image:MVC_Part1_Example_App.png|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 [http://www.gitorious.org/qtdevnet-wiki-mvc/qtdevnet-wiki-mvc gitorious.org] ''[gitorious.org]''
==Das ''Model-View''-Konzept – eine kurze Einführung==
Model-View-Controller (<span class="caps">MVC</span>) 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:
'''<span class="caps">MVC</span> 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 <span class="caps">MVC</span> tendierte man dazu, diese Objekte in eines zusammenzufassen. <span class="caps">MVC</span> 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.
[[Image:modelview-overview.png|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 ([http://qt.io/groups/qt_german/wiki/OOP-Grundlagen direkt oder indirekt]) von [http://doc.qt.nokia.com/latest/QAbstractItemModel.html QAbstractItemModel] ''[doc.qt.nokia.com]'' abgeleitet werden. Jede View muss (direkt oder indirekt) von [http://doc.qt.nokia.com/latest/qabstractitemview.html 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 [http://doc.qt.nokia.com/4.7/qmodelindex.html QModelIndex] ''[doc.qt.nokia.com]'' verwendet. Diese werden immer vom Modell erzeugt ([http://doc.qt.nokia.com/4.7/qabstractitemmodel.html#index QAbstractItemModel::Index] ''[doc.qt.nokia.com]'' ). Genauer werden wir später auf diese Klasse eingehen.
Eine ''sehr ausführliche'' Beschreibung des <span class="caps">MVC</span> Konzepts findet sich in der [http://doc.qt.nokia.com/latest/model-view-programming.html Qt Onlinehilfe] ''[doc.qt.nokia.com]'' .
==Aufbau der Applikation==
Folgende Klassen werden erstellt:
{| class="infotable line"
| '''Klasse'''
| '''Beschreibung'''
|-
|
'''VirtualCdRack''' [http://developer.qt.nokia.com/groups/qt_german/wiki/Model_View_Tutorial_Teil1_CVirtualCdRack Beschreibung] ''[developer.qt.nokia.com]''
| Dies ist die Hauptanwendung (abgeleitet von QMainWindow). Sie beinhaltet das Menu, den Toolbar etc.
|-
|
'''CdRack''' [http://developer.qt.nokia.com/groups/qt_german/wiki/Model_View_Tutorial_Teil1_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).<br /> Nach dem Laden der Daten sollen diese korrekt in der Applikation dargestellt werden.
[http://qt.io/groups/qt_german/wiki/Model_View_Tutorial_Teil1 Teil 1 →]<br />[http://www.gitorious.org/qtdevnet-wiki-mvc/qtdevnet-wiki-mvc/blobs/raw/20175536aac6c1d39132ce5e7057699b629cb962/VirtualCdRackPart1.zip 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.<br /> Die Genres sollen aus einer Liste ausgewählt oder per Hand eingegeben werden können (ComboBox).
[http://qt.io/groups/qt_german/wiki/Model_View_Tutorial_Teil2 Teil 2 Datenmodell →]<br />[http://qt.io/groups/qt_german/wiki/Model_View_Tutorial_Teil2_Delegate_und_View Teil 2 Delegate und View →]<br />[http://www.gitorious.org/qtdevnet-wiki-mvc/qtdevnet-wiki-mvc/blobs/raw/20175536aac6c1d39132ce5e7057699b629cb962/VirtualCdRackPart2.zip 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).<br /> Außerdem soll es möglich sein, zusätzliche Informationen (z.B. ausgeliehen an) hinzuzufügen (Tabellen-Spalten).
[http://qt.io/groups/qt_german/wiki/Model_View_Tutorial_Teil3 Teil 3 →]
[http://www.gitorious.org/qtdevnet-wiki-mvc/qtdevnet-wiki-mvc/blobs/raw/20175536aac6c1d39132ce5e7057699b629cb962/VirtualCdRackPart3.zip 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, <span class="caps">HTML</span> Tabellen) eingefügt werden können (via Drag’n‘Drop) oder aus der Tabelle heraus in eine andere Applikation übertragen werden können.<br /> 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, …).

Revision as of 13:56, 25 February 2015

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, …).