Erhalten Sie Zugang zu diesem und mehr als 300000 Büchern ab EUR 5,99 monatlich.
- Herausgeber: Books on Demand
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Deutsch
Ein Buch für den Einstieg in die Softwareentwicklung unter dem MVVM-Konzept. Anhand praktischer Beispiele lernen Sie das Konzept kennen. Das Buch nimmt Sie hier an die Hand und führt übersichtlich von einem Schritt zum anderen. Legen Sie das Buch einfach links oder rechts neben Ihre Tastatur. Später dient Ihnen das Buch als praktisches Nachschlagewerk. Als Programmiersprache nutzen Sie hier C# und Sie arbeiten mit der Windows Präsentation Form.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 107
Veröffentlichungsjahr: 2018
Das E-Book (TTS) können Sie hören im Abo „Legimi Premium” in Legimi-Apps auf:
Ähnliche
Der Autor und der Verlag haften nicht für Schäden, die im Zusammenhang mit der Verwendung des Buches stehen.
Die in diesem Buch verwendeten Soft- und Hardwarebezeichnungen sind in vielen Fällen auch eingetragene Warenzeichen, sie werden ohne Gewährleistung der freien Verwendbarkeit benutzt. Ich richte mich im wesentlichen nach der Schreibweise der Hersteller. Die Wiedergabe von Waren- und Handelsnamen berechtigt nicht zur Annahme, dass solche Namen (im Sinne der Warenzeichen und Markenschutz-Gesetzgebung) als frei zu betrachten sind.
Inhaltsverzeichnis
Vorwort
Wie funktioniert eine MVVM-Anwendung?
1.1 Das Prinzip
1.2 Näheres zu den einzelnen Komponenten
1.2.1 Die View
1.2.2 Das View Model
1.2.3 Das Model
1.3 Die grafischen Elemente auf dem Formular
Das erste Projekt
2.1 Die Vorgabe
2.2 Die einzelnen Schritte
2.3 Die einzelnen Klassen
2.3.1 Die Projektstruktur
2.3.2 Die Klasse Zahlen.cs
2.3.3 Die Datei View Rechnen.xaml
2.3.4 Die Klasse ViewRechnen.xaml.cs
2.3.5 Die Klasse RechnenViewModel.cs
2.3.6 Die Klasse RelayCommand.cs
2.3.7 Die Datei App.xaml
Die Anwendung mit zwei Fenstern
3.1 Die Vorgabe
3.2 Die einzelnen Punkte
3.3 Die Dateien
3.3.1 Die Projektstruktur
3.3.2 Klasse Werte.cs
3.3.3 Datei ViewFensterZwei.xaml
3.3.4 Datei ViewHauptfenster.xaml
3.3.4 Klasse RelayCommand.cs
3.3.5 Klasse ZweiFensterViewModel.cs
3.3.6 Datei App.xaml
Näheres zu grafischen Elementen
4.1 Generelles zu den Elementen
4.2 Arbeiten mit den grafischen Elementen
4.2.1 Button
4.2.2 Calendar
4.2.3 Checkbox
4.2.4 ComboBox / ListBox
4.2.5 DataGrid
4.2.6 Formular
4.2.7 Label
4.2.9 MessageBox / InputBox
4.2.10 ProcessBar
4.2.11 RibbonBar
4.2.13 Slider
4.2.14 Tabreitern
4.2.15 Textfeldern
4.2.16 TreeView
Test
5.1 Der automatische Test
5.1.1 Installation von Nunit
5.1.2 Den Test aufbauen
Wie geht es weiter?
6.1 Ein größeres Projekt
6.1.1 Die Basisklasse
6.1.2 Die Anwendung
Quellen
Vorwort
MVVM – das Model View View Model-Konzept, mal wieder eine neue Idee in der Softwareentwicklung? Ja, es ist eine Variante des MVC-Konzeptes (Model-View-Controller). Im Jahr 2005 wurde das Konzept vom John Gossman veröffentlicht und gewinnt immer mehr Anhänger.
Das Buch dient Ihnen zum einfacheren Einstieg in die Materie. Es führt Sie bei der Codierung Ihrer Anwendungen von einem Punkt zum anderen. Sie sollten bei der Lektüre des Buches schon C#-Kenntnisse mitbringen und Ihre erste Hello-Word-Anwendung ist schon realisiert worden.
Im vorliegenden Buch arbeiten Sie mit der deutschsprachigen Community-Edition des Visual Studios 2015/2017 (mit den anderen Versionen geht es natürlich auch). Als Oberfläche verwenden Sie die Windows-Presentation-Form (kurz WPF). Zwischenzeitlich gibt es auch Anbieter von MVVM-Frameworks (z.B. MVVM Light oder auch Prism). Beachten Sie bei einem Einsatz eines Frameworks immer, dass ein solches Projekt auch mal eingestellt werden kann. So unterbleiben wichtige Anpassungen und Sie sitzen auf dem Trockenen. Der Vorteil liegt natürlich in der schnelleren und einfacheren Umsetzung Ihrer Projekte. In dem vorliegenden Buch lernen Sie die Grundlagen des MVVM-Konzeptes kennen.
Im Internet finden Sie hin und wieder etwas abweichende Vorschläge. Alle haben eines gemeinsam, sie führen oft zum Ziel. Teilweise kommen Sie sich vor, wie bei Opern- oder Theater-Aufführungen. Dem einen gefällt eine Inszenierung, dem anderen nicht.
An dieser Stelle möchte ich auch meiner Frau Janny für Hinweise und Korrekturen danken.
1. Wie funktioniert eine MWM-Anwendung?
1.1 Das Prinzip
In dem unten gezeigten Bild sehen Sie den Aufbau der Anwendung. Sie, als Anwender, geben in einer Anwendung Daten ein, drücken anschließend eine Schaltfläche und erhalten ein Ergebnis.
Im MWM-Konzept interagiert der Anwender mit der View. Sie haben dort alle grafischen Elemente. Von der View gehen die Daten oder Kommandos an das ViewModel. Dieses „Mittelteil“ ist die Schaltstelle im Programm. Hier ein Beispiel: Sie geben eine Artikel-Nr. ein und drücken den Button Lesen. Die eingegebene Artikel-Nr. geht von der View zum ViewModel. Das ViewModel liest mit Hilfe des Models den Eintrag in der Datenbank. Im negativen oder positiven Fall gehen die Informationen zurück an das ViewModel. Das ViewModel reicht die Daten an die View weiter (die Textfelder werden gefüllt). Im negativen Fall sollte der Anwender natürlich auch informiert werden! Dazu bietet sich ein Informationsfeld an.
1.2 Näheres zu den einzelnen Komponenten
1.2.1 Die View
Die View ist ein Formular. In ihm befinden sich alle grafischen Elemente. Sie können hier sowohl die Elemente von Microsoft einsetzten oder auch die von Fremdanbietern (zum Beispiel die von Janus-Tools, Telerik oder DevExpress). Über den Weg der Datenanbindung gehen Informationen an das ViewModel weiter oder kommen auch zurück vom ViewModel an die View.
1.2.2 Das ViewModel
Das ViewModel ist eine Klasse und erbt vom Interface INotifyPropertyChanged. Dadurch „dürfen“ Sie dann das Ereignis OnPropertyChanged in die Klasse einbauen. Die View nutzt über die Datenanbindung die Eigenschaften des ViewModels. In der Set-Methode einer Eigenschaft geben Sie den ankommenden Inhalt an eine Klassenvariable weiter und lösen auch ein OnPropertyChanged-Ereignis aus. Das wird besonders wichtig, wenn Sie zum Beispiel das Ergebnis einer Operation dem Anwender zugänglich machen müssen. Generell gilt: In dieser Klasse befindet sich die Präsentations-Logik. Es gibt in der Anwendung nur eine ViewModel-Klasse!
Zum ViewModel gehört noch eine Klasse für die Kommandos, die von der View an das ViewModel gehen. Diese Klasse erbt von dem Interface ICommand.
1.2.3 Das Model
Das Model beinhaltet die Geschäftslogik. In ihm greifen Sie auf Daten zu, die sich in einer Datenbank oder Datei befinden. Auch Berechnungen erledigt das Model und das Ergebnis geht an das ViewModel zurück.
1.3 Die grafischen Elemente auf dem Formular
Die einzelnen Elemente (wie TextBoxen und andere) sind mit dem ViewModel verbunden. Auch das ViewModel sendet Informationen an die einzelnen grafischen Elemente (um beispielsweise das Ergebnis einer Rechenoperation auszugeben).
Wie sieht die Sache nun in der Praxis aus? Hier sehen Sie 2 Möglichkeiten.
Das Beispiel TextBox, mit der Eigenschaft Text, gilt im Prinzip für viele Elemente. Bei Buttons und TreeViews ist es etwas anders. Das Element enthält den Text, den der Anwender auf dem Formular sieht:
Anstelle der Eigenschaft Text können Sie natürlich auch andere Eigenschaften ansprechen. Im Kapitel 4 geht das Buch näher auf die Sache ein. Doch nun geht es zu den Schaltflächen.
Im Internet finden Sie hin und wieder Beispiele, in denen in einem Formular die Methode Click vom Button angesprochen wird. Technisch läuft die Anwendung, aber es ist doch ein Stilbruch.
Nach dem es im letzten Teil doch ziemlich in die Tiefe ging, geht es jetzt weiter zu den einzelnen Projekten. Dort wird Ihnen manches auch etwas gegenständlicher.
2. Das erste Projekt
2.1 Die Vorgabe
Im ersten Projekt geht es erst mal um die prinzipielle Umsetzung eines MVVM-Projektes. Von der Programmiererseite her ist es eigentlich recht anspruchslos. Aber es geht ja hier um das Grundverständnis einer MVVM-Anwendung.
Sie programmieren hier eine Anwendung die entweder 2 Zahlen addiert oder auch subtrahiert. Über eine dritte Schaltfläche löschen Sie alle Eingaben und auch das Ergebnis. Alle Felder haben dann den Wert 0. Dem Anwender stehen zur Eingabe zwei Textfelder zur Verfügung. In einem dritten Feld zeigen Sie ihm das Ergebnis an. Von möglichen Unstimmigkeiten (mal eine bessere Ausdrucksweise, als immer von Fehlern zu sprechen - Fehler haben immer einen so negativen Makel an sich) erfährt der Anwender in einem Textblock. So sollte die Anwendung dann aussehen:
2.2 Die einzelnen Schritte
Das aktuelle Projekt dient auch als ein Musterprojekt für weitere Anwendungen. Doch zuvor noch eins: Ab und zu sehen Sie nach der Eingabe einer Zeile Wörter mit einer roten Linie unterstrichen. Beheben Sie die Sache über den Weg Mögliche Korrektur. Die Entwicklungsumgebung schlägt Ihren zum Beispiel die Using-Anweisung vor. Hier geht es jetzt zu den einzelnen Schritten:
Punkt
Inhalt
1
Legen Sie ein WPF-Projekt an. Das geht über die Menueleiste über die Einträge
Datei, Neu
und
Projekte
.
2
Auf der linken Seite geht es bei den Vorlagen über
Visual C#
und
Windows
(beim Visual Studio 2017 ist es der
Klassischer Windows Desktop
)
zu dem Eintrag
WPF-Anwendung
(Visual Studio 2017:
WPF-App (.NET Framework)
). Im Anschluss ändern Sie noch den Namen der Anwendung noch auf
Rechnen
.
3
Jetzt legen wir drei neue Ordner im Projekt an. Klicken Sie dazu auf das Projekt
Rechnen
und dann geht es mit der rechten Maustaste auf den Menuepunkt
Hinzufügen
und
Neuer Ordner
.
Legen Sie so diese Ordner an:
- Model
- View
- ViewModel
4
Verschieben Sie die Datei
MainWindow.xaml
in das Verzeichnis
View.
Das geht sehr einfach über Drag-and-Drop (besser löschen und dann unter neuem Namen anlegen).
5
Jetzt bearbeiten Sie das Formular.
5.1
Benennen Sie das Formular jetzt um.
HINWEIS: Besser ist es, das Formular MainWindow.xaml zu löschen und im Verzeichnis View neu anzulegen. Sie haben es dann einfacher mit Verknüpfungen.
5.1.1
Jetzt ändern Sie noch den Namen des Formulars
MainWindow.xaml
in
ViewRechnen.xaml
. Achten Sie unbedingt auch innerhalb der MainWindow.xaml.cs-Klasse auf eine korrekte Umbenennung (Stichwort F2-Taste).
5.1.2
Nun überprüfen Sie noch von dem gerade umbenannten Formular die Datei
ViewRechnen.xaml.cs
. Dort ist es einmal der Namespace. Er muss auf
Rechnen.View
lauten. Der Klassenname sollte auch
ViewRechnen
heißen und auch der Konstruktor der Klasse muss von
MainWindow
auf
ViewRechnen
umbenannt werden.
5.1.3
Achten Sie auch auf die gerade umbenannte XAML-Datei (bitte im Designer öffnen). So sorgt ein falschen Eintrag x:Class mit für Fehlermeldungen. Überprüfen Sie die ersten Zeile. So muss es aussehen:
<Window x:Class="Rechnen.View.ViewRechen"
Überprüfen Sie die Zeile 6. Hier aktualisieren Sie den Namespace
xmlns:local="clr-namespace:Rechnen.View"
6
