Textbausteine. C# WPF-Framework Model-View-Viewmodel-Architektur Blog-Client-Applikation

Transkript

1 Entwicklung einer C-Sharp- Applikation auf Basis des WPF- Frameworks und der Model-View- Viewmodel-Architektur am Beispiel einer Blog-Client-Applikation Von Mirko Jungblut

2 Textbausteine C# WPF-Framework Model-View-Viewmodel-Architektur Blog-Client-Applikation

3 Inhalt Blog-Client-Applikation.NET-Framework Softwarearchitektur MVC (bekannt) MVVM (neu) Windows Presentation Foundation (WPF) Erste Schritte Databinding Probleme (Bsp.: Dialoge und Nachrichten)

4 Blog-Client-Applikation Erstellen von Blogeinträgen Titel Teaser Inhalt (Textauszeichnung, Hyperlinks etc) Kategorien (hierarchisch) Editieren Hochladen, Herunterladen Lokal speichern

5

6 .NET-Framework Microsoft vertreibt Windows-Betriebssysteme Was fehlt? Anwendungsprogramme/ Applikationen! Von externen Softwareentwicklern Einfach zu entwickeln Verschiedene Programmiersprachen Lösung:.NET-Framework

7 .NET-Framework Jeder kann entwickeln Einfach, da große API vorhanden Interaktion mit Betriebssystem Interaktion mit Dateisystem Versch. Programmiersprachen (C#, VB etc.) Entwickeln von graphischen Oberflächen alt: Windows Forms (WinForms) neu: Windows Presentation Foundation (WPF)

8

9 Softwarearchitektur Gröbste Unterteilung eines Software-Systems Unterteilung der Software in Komponenten Komponenten erhalten Aufgabenbereich Beschreibenden Namen Logische Anordnung der Komponenten Strukturelle Darstellung Beschreibung der Beziehungen untereinander

10 MVC

11 MVC Model Enthält Geschäftsdaten View Graphische Darstellung von Daten Bietet dem Benutzer Interaktionsmöglichkeiten Controller Nimmt Benutzereingaben vom View entgegen Bearbeitet Model und View

12 MVVM Model Geschäftsdaten Geschäftslogik View Graphische Darstellung von Daten Bietet dem Benutzer Interaktionsmöglichkeiten

13 MVVM Viewmodel Bereitet Geschäftsdaten für View auf Nimmt Benutzereingaben des View entgegen Gibt Datenänderungen an Model weiter

14 WPF allgemein Grafik-Framework Komplexe Oberflächen einfach erstellen Trennen von Oberfläche und Programmlogik Oberfläche durch XAML Programmlogik durch C# (zum Beispiel) Trennung durch Databinding Für klare Trennung: Kein Code-Behind für Oberfläche verwenden

15 WPF und MVVM Warum eigentlich? Databinding! Teil von WPF Ermöglicht vollständige Trennung von Oberfläche und Programmlogik MVVM ist darauf ausgelegt Aufbereitete Daten im Viewmodel Müssen von View nur gebunden werden

16 Erste Schritte - Ordnerstruktur (entspricht Namespaces) - Model - Service - View - Viewmodel

17 Erste Schritte App.xaml Namespaces Startadresse für Programm Erstellen der Haupt-Viewmodel-Instanz

18 Erste Schritte BlogClientView.xaml (MainWindow.xaml) DataContext wird auf zuvor erstellte Instanz von BlogClientViewModel festgelegt

19 Databinding, aber wie? Erste Möglichkeit: Festlegung des View Zuweisung eines bestimmten Viewmodel

20 Databinding, aber wie? Zweite Möglichkeit: Keine Festlegung des View => ContentControl Zuweisung eines bestimmten Viewmodel DataTemplate legt für Viewmodel den View fest

21 Databinding, aber wie? Erste Möglichkeit nicht falsch. Eindeutig. Zweite Möglichkeit flexibler WPF entscheidet nach dynamischem Typ View Viewmodel

22 Databinding (Geschäftsdaten) Viewmodel View

23 Databinding (Geschäftsdaten) Viewmodel

24 Databinding (Geschäftsdaten) View

25 Databinding (Befehle) Viewmodel View

26 Databinding (Befehle) Klasse BaseCommand Implementiert ICommand bool CanExecute void Execute EventHandler CanExecuteChanged Zusatzfunktion: RaiseCanExecuteChanged

27 Databinding (Befehle) Viewmodel View

28 Dialoge und Nachrichten Windows Forms: Benutzerdialoge durch FormXY.ShowDialog() Nachrichten durch MessageBox.Show() Anwendung in WPF genauso möglich Aber: Bricht mit MVVM View soll kein Code-Behind enthalten Viewmodel soll Views nicht kennen

29 Dialoge und Nachrichten MVVM-konforme Lösung: Verwenden von nur einem (Haupt-)Fenster Dialoge und Nachrichten durch Pseudefenster Realisiert durch: Zusätzliche Layer im Hauptfenster (Grids) Unsichtbar, bei Bedarf sichtbar und gefüllt Fokus ebenfalls durch Zusatzlayer

30

31 Dialoge und Nachrichten

32

33