Programowanie Windows Kolekcje danych w aplikacjach MVVM Jacek

Programowanie Windows Kolekcje danych w aplikacjach MVVM Jacek Matulewski 7 listopada 2019 http: //www. fizyka. umk. pl/~jacek/dydaktyka/winprog_v 2/

Warstwy MVVM (powtórzenie) Behavior<> ICommand Relay. Command <Window>, <User. Control> IValue. Converter {Binding} INotify. Property. Changed

Kolekcje danych w MVVM Model – element kolekcji danych (rekord): namespace Zadania. WPF. Model { public enum Priorytet. Zadania : byte { Mniej. Ważne, Krytyczne }; public class Zadanie { public string Opis { get; private set; } public Date. Time Data. Utworzenia { get; private set; } public Date. Time Planowany. Termin. Realizacji { get; private set; } public Priorytet. Zadania Priorytet { get; private set; } public bool Czy. Zrealizowane { get; set; } public static string Opis. Priorytetu(Priorytet. Zadania priorytet). . . public override string To. String(). . . } }

Kolekcje danych w MVVM Model – element kolekcji danych (rekord): namespace Zadania. WPF. Model { public enum Priorytet. Zadania : byte { Mniej. Ważne, Krytyczne }; public class Zadanie {. . . public Zadanie(string opis, Date. Time data. Utworzenia, Date. Time planowany. Termin. Realizacji, Priorytet. Zadania priorytet. Zadania bool czy. Zrealizowane = false) { this. Opis = opis; this. Data. Utworzenia = data. Utworzenia; this. Planowany. Termin. Realizacji = planowany. Termin. Realizacji; this. Priorytet = priorytet. Zadania; this. Czy. Zrealizowane = czy. Zrealizowane; } } }

Kolekcje danych w MVVM Model – kolekcja danych (zbiór rekordów): namespace Zadania. WPF. Model { public class Zadania //prosty wrapper dla listy { private List<Zadanie> lista. Zadań = new List<Zadanie>(); public void Dodaj. Zadanie(Zadanie zadanie) { lista. Zadań. Add(zadanie); } public bool UsuńZadanie(Zadanie zadanie) { return lista. Zadań. Remove(zadanie); }. . . } } CRUD = create, read, update, delete

Kolekcje danych w MVVM Model – kolekcja danych (zbiór rekordów): namespace Zadania. WPF. Model { public class Zadania {. . . public int Liczba. Zadań { get { return lista. Zadań. Count; } } public Zadanie this[int indeks] //indeksator { get { return lista. Zadań[indeks]; } }

Kolekcje danych w MVVM Model – kolekcja danych (zbiór rekordów): namespace Zadania. WPF. Model { public class Zadania : IEnumerable<Zadanie> {. . . public IEnumerator<Zadanie> Get. Enumerator() { return lista. Zadań. Get. Enumerator(); } IEnumerator IEnumerable. Get. Enumerator() { return (IEnumerator)this. Get. Enumerator(); } } } Enumerator = iterator, sekwencyjny dostęp do wszystkich elementów

Kolekcje danych w MVVM Model – zapis i odczyt kolekcji z pliku using System; System. Collections. Generic; System. Globalization; System. Linq; using System. Xml. Linq; namespace Zadania. WPF. Model { public static class Plik. Xml { private static readonly IFormat. Provider format. Provider = Culture. Info. Invariant. Culture; public static void Zapisz(string ścieżka. Pliku, Zadania zadania). . . public static Zadania Czytaj(string ścieżka. Pliku). . . } }

Kolekcje danych w MVVM Model widoku zadania (rekordu) namespace Zadania. WPF. Model. Widoku { public class Zadanie : INotify. Property. Changed { private Model. Zadanie model; //ten konstruktor ułatwi nam życie public Zadanie(Model. Zadanie zadanie) { this. model = zadanie; } public Model. Zadanie Get. Model() //model nie jest ukryty w środku m. w. { return model; }. . . } }

Kolekcje danych w MVVM Model widoku zadania (rekordu) namespace Zadania. WPF. Model. Widoku { public class Zadanie : INotify. Property. Changed { private Model. Zadanie model; . . . public Zadanie(string opis, Date. Time data. Utworzenia, Date. Time planowany. Termin. Realizacji, Model. Priorytet. Zadania priorytet. Zadania, bool czy. Zrealizowane) { model = new Model. Zadanie( opis, data. Utworzenia, planowany. Termin. Realizacji, priorytet. Zadania, czy. Zrealizowane); }. . .

Kolekcje danych w MVVM Model widoku zadania (rekordu) namespace Zadania. WPF. Model. Widoku { public class Zadanie : INotify. Property. Changed {. . . #region Własności public string Opis { get { return model. Opis; } } public Model. Priorytet. Zadania Priorytet { get. . . public Date. Time Data. Utworzenia { get. . . public Date. Time Planowany. Termin. Realizacji { get. . . public bool Czy. Zrealizowane { get. . . public bool Czy. Zadanie. Pozostaje. Niezrealizowane. Po. Planowanym. Terminie. . . #endregion

Kolekcje danych w MVVM Model widoku zadania (rekordu) namespace Zadania. WPF. Model. Widoku { public class Zadanie : INotify. Property. Changed {. . . #region INotify. Property. Changed public event Property. Changed. Event. Handler Property. Changed; //zmodyfikowana wersja dla wielu własności private void On. Property. Changed(params string[] nazwy. Własności) { if (Property. Changed != null) { foreach (string nazwa. Własności in nazwy. Własności) Property. Changed( this, new Property. Changed. Event. Args(nazwa. Własności)); } } #endregion

Kolekcje danych w MVVM Model widoku zadania (rekordu) namespace Zadania. WPF. Model. Widoku { public class Zadanie : INotify. Property. Changed {. . . #region Polecenia private ICommand oznacz. Jako. Zrealizowane = null; public ICommand Oznacz. Jako. Zrealizowane. . . private ICommand oznacz. Jako. Niezrealizowane = null; public ICommand Oznacz. Jako. Niezrealizowane. . . #endregion } }

Kolekcje danych w MVVM Model widoku kolekcji zadań (clue tego wykładu) namespace Zadania. WPF. Model. Widoku { using static Zadania. WPF. Model. Plik. Xml; Observable. Collection<> implementuje interfejs INotify. Collection. Changed public class Zadania { private const string ścieżka. Pliku. Xml = "zadania. xml"; //przechowywanie dwóch kolekcji private Model. Zadania model; //kolekcja z modelu public Observable. Collection<Zadanie> Lista. Zadań { get; } = new Observable. Collection<Zadanie>(); //kolekcja modeli widoku. . . } } Kolekcja z modelu – stan aplikacji Kolekcja modeli widoku – np. możliwe wiązania do jej elementów Problem synchronizacji kolekcji (w obie strony)

Kolekcje danych w MVVM Model widoku kolekcji zadań (clue tego wykładu) namespace Zadania. WPF. Model. Widoku { using static Zadania. WPF. Model. Plik. Xml; public class Zadania { private const string ścieżka. Pliku. Xml = "zadania. xml"; //przechowywanie dwóch kolekcji private Model. Zadania model; //kolekcja z modelu public Observable. Collection<Zadanie> Lista. Zadań { get; } = new Observable. Collection<Zadanie>(); //kolekcja modeli widoku. . . } } Kolekcja z modelu – stan aplikacji Kolekcja modeli widoku – np. możliwe wiązania do jej elementów Problem synchronizacji kolekcji (w obie strony)

Kolekcje danych w MVVM Model widoku kolekcji zadań (clue tego wykładu) namespace Zadania. WPF. Model. Widoku { using static Zadania. WPF. Model. Plik. Xml; public class Zadania {. . . private void kopiuj. Zadania() { Lista. Zadań. Collection. Changed -= synchronizacja. Modelu; Lista. Zadań. Clear(); foreach (Model. Zadanie zadanie in model) Lista. Zadań. Add(new Zadanie(zadanie)); Lista. Zadań. Collection. Changed += synchronizacja. Modelu; }. . . } }

Kolekcje danych w MVVM Model widoku kolekcji zadań (clue tego wykładu) namespace Zadania. WPF. Model. Widoku { using static Zadania. WPF. Model. Plik. Xml; public class Zadania {. . . public Zadania() { if (System. IO. File. Exists(ścieżka. Pliku. Xml)) model = Czytaj(ścieżka. Pliku. Xml); else model = new Model. Zadania(); kopiuj. Zadania(); }. . . } }

Kolekcje danych w MVVM Model widoku kolekcji zadań (clue tego wykładu) namespace Zadania. WPF. Model. Widoku { using static Zadania. WPF. Model. Plik. Xml; public class Zadania {. . . private void kopiuj. Zadania() { Lista. Zadań. Collection. Changed -= synchronizacja. Modelu; Lista. Zadań. Clear(); foreach (Model. Zadanie zadanie in model) Lista. Zadań. Add(new Zadanie(zadanie)); Lista. Zadań. Collection. Changed += synchronizacja. Modelu; }. . . } }

Kolekcje danych w MVVM Model widoku kolekcji zadań (clue tego wykładu). . . public class Zadania {. . . private void synchronizacja. Modelu(object sender, Notify. Collection. Changed. Event. Args e) { switch (e. Action) { case Notify. Collection. Changed. Action. Add: Zadanie nowe. Zadanie = (Zadanie)e. New. Items[0]; if (nowe. Zadanie != null) model. Dodaj. Zadanie(nowe. Zadanie. Get. Model()); break; case Notify. Collection. Changed. Action. Remove: . . . } }

Kolekcje danych w MVVM Model widoku kolekcji zadań (clue tego wykładu). . . public class Zadania {. . . private void synchronizacja. Modelu(object sender, Notify. Collection. Changed. Event. Args e) { switch (e. Action) { case Notify. Collection. Changed. Action. Add: Zadanie nowe. Zadanie = (Zadanie)e. New. Items[0]; if (nowe. Zadanie != null) model. Dodaj. Zadanie(nowe. Zadanie. Get. Model()); break; case Notify. Collection. Changed. Action. Remove: . . . } }

Kolekcje danych w MVVM Widoku – prezentacja kolekcji – szablon danych <Window x: Class="Zadania. WPF. Main. Window". . . Title="Zadania. WPF" Height="500" Width="500"> <Window. Data. Context> <mw: Zadania /> </Window. Data. Context> <Grid> <Text. Block Margin="10, 0, 0" Text="Liczba zadań: " Horizontal. Alignment="Left" Vertical. Alignment="Top"> <Run Text="{Binding Path=Lista. Zadań. Count, Mode=One. Way}" /> </Text. Block> <List. Box x: Name="lb. Lista. Zadań" Margin="10, 35, 10, 200" Items. Source="{Binding Path=Lista. Zadań}">. . . </List. Box> </Grid> </Window>

Kolekcje danych w MVVM Widoku – prezentacja kolekcji – szablon danych

Kolekcje danych w MVVM Widoku – prezentacja kolekcji – szablon danych <List. Box x: Name="lb. Lista. Zadań" Margin="10, 35, 10, 200" Items. Source="{Binding Path=Lista. Zadań}"> <List. Box. Item. Template> <Data. Template> <Stack. Panel Orientation="Vertical" Margin="3"> <Stack. Panel Orientation="Horizontal"> <Text. Block Text="{Binding Path=Opis, Mode=One. Way}" Font. Size="20" /> <Button Content="Zrealizowane" Command="{Binding Path=Oznacz. Jako. Zrealizowane}" /> <Button Content="Niezrealizowane" Command="{Binding Path=Oznacz. Jako. Niezrealizowane}"/> </Stack. Panel>. . . </Stack. Panel> </Data. Template> </List. Box. Item. Template> </List. Box> Źródłem wiązania wewnątrz szablonu jest element z kolekcji

Kolekcje danych w MVVM Widoku – prezentacja kolekcji – szablon danych <List. Box x: Name="lb. Lista. Zadań" Margin="10, 35, 10, 200" Items. Source="{Binding Path=Lista. Zadań}"> <List. Box. Item. Template> <Data. Template> <Stack. Panel Orientation="Vertical" Margin="3">. . . <Text. Block> Termin: <Run Text="{Binding Path=Planowany. Termin. Realizacji, Mode=One. Way, String. Format={}{0: dd MMMM yyyy}, Converter. Culture=pl-PL}" />, Utworzone: <Run Text="{Binding Path=Data. Utworzenia, Mode=One. Way, String. Format={}{0: dd MMMM yyyy} Converter. Culture=pl-PL}" /> </Text. Block> </Stack. Panel> </Data. Template> </List. Box. Item. Template> </List. Box>

Kolekcje danych w MVVM Widoku – prezentacja kolekcji – styl elementu <List. Box x: Name="lb. Lista. Zadań" Margin="10, 35, 10, 200" Items. Source="{Binding Path=Lista. Zadań}"> <List. Box. Item. Template>. . . </List. Box. Item. Template> <List. Box. Item. Container. Style> <Style Target. Type="List. Box. Item"> <Setter Property="Control. Margin" Value="3" /> <Setter Property="Control. Border. Brush" Value="Black" /> <Setter Property="Control. Border. Thickness" Value="1" /> <Style. Triggers> <Trigger Property="Control. Is. Mouse. Over" Value="True"> <Setter Property="Control. Background" Value="Light. Gray" /> </Trigger> </Style. Triggers> </Style> </List. Box. Item. Container. Style> </List. Box>

Kolekcje danych w MVVM Widoku – prezentacja kolekcji – styl elementu

Kolekcje danych w MVVM Widoku – prezentacja kolekcji – konwertery

Kolekcje danych w MVVM Widoku – prezentacja kolekcji – zdarzenie → polecenie <Window x: Class="Zadania. WPF. Main. Window". . . xmlns: i="http: //schemas. microsoft. com/expression/2010/interactivity" Title="Zadania. WPF" Height="500" Width="500"> <Window. Data. Context> <mw: Zadania /> </Window. Data. Context> <i: Interaction. Triggers> <i: Event. Trigger Event. Name="Closed"> <i: Invoke. Command. Action Command="{Binding Zapisz}" /> </i: Event. Trigger> </i: Interaction. Triggers> <Grid>. . . </Grid> </Window>

Kolekcje danych w MVVM Model widoku – modyfikacje kolekcji (CRUD) public ICommand UsuńZadanie { get { if (usuńZadanie == null) usuńZadanie = new Relay. Command( o => { int indeks. Zadania = (int)o; Zadanie zadanie = Lista. Zadań[indeks. Zadania]; Lista. Zadań. Remove(zadanie); }, o => { if (o == null) return false; int indeks. Zadania = (int)o; return indeks. Zadania >= 0; }); return usuńZadanie; } }

Kolekcje danych w MVVM Widoku – modyfikacje kolekcji (CRUD). . . </List. Box> <Button Content="Usuń zadanie" Horizontal. Alignment="Left" Vertical. Alignment="Bottom" Margin="10, 0, 0, 165" Width="100" Height="25" Style="{Static. Resource styl. Przycisku}" Command="{Binding Path=UsuńZadanie}" Command. Parameter="{Binding Element. Name=lb. Lista. Zadań, Path=Selected. Index}" />. . .

Kolekcje danych w MVVM Model widoku – modyfikacje kolekcji (CRUD) public ICommand Dodaj. Zadanie { get { if (dodaj. Zadanie == null) dodaj. Zadanie = new Relay. Command( o => { Zadanie zadanie = o as Zadanie; if (zadanie != null) Lista. Zadań. Add(zadanie); }, o => { return (o as Zadanie) != null; }); return dodaj. Zadanie; } }

Kolekcje danych w MVVM Widok – modyfikacje kolekcji (CRUD) Dodanie zadania ↔ formularz

Kolekcje danych w MVVM Widok – modyfikacje kolekcji (CRUD) <Window x: Class="Zadania. WPF. Main. Window". . . xmlns: s="clr-namespace: System; assembly=mscorlib" Title="Zadania. WPF" Height="500" Width="500">. . . <Grid>. . . <Group. Box Header="Nowe zadanie" Margin="10, 0, 10" Min. Width="420" Height="140" Vertical. Alignment="Bottom"> <Grid> <Label Content="Opis: " Margin="10, 5, 0, 0" Horizontal. Alignment="Left" Vertical. Alignment="Top"/> <Text. Box x: Name="tb. Opis" Height="23" Margin="10, 30, 10, 0" Vertical. Alignment="Top" /> <Label Content="Priorytet: " Margin="10, 60, 0, 0" Horizontal. Alignment="Left" Vertical. Alignment="Top"/>. . . </Grid> </Group. Box> </Grid> </Window>

Kolekcje danych w MVVM Widok – modyfikacje kolekcji (CRUD) <Window x: Class="Zadania. WPF. Main. Window". . . xmlns: s="clr-namespace: System; assembly=mscorlib" Title="Zadania. WPF" Height="500" Width="500">. . . <Grid>. . . <Group. Box Header="Nowe zadanie" Margin="10, 0, 10" Min. Width="420" Height="140" Vertical. Alignment="Bottom"> <Grid>. . . <Combo. Box x: Name="cb. Priorytet" Margin="10, 85, 0, 0" Width="120" Horizontal. Alignment="Left" Vertical. Alignment="Top"> <Combo. Box. Item>Mniej ważne</Combo. Box. Item> <Combo. Box. Item Is. Selected="True">Ważne</Combo. Box. Item> <Combo. Box. Item>Krytyczne</Combo. Box. Item> </Combo. Box>. . . </Grid> </Group. Box> </Grid>

Kolekcje danych w MVVM Widok – modyfikacje kolekcji (CRUD) <Window x: Class="Zadania. WPF. Main. Window". . . xmlns: s="clr-namespace: System; assembly=mscorlib" Title="Zadania. WPF" Height="500" Width="500">. . . <Grid>. . . <Group. Box Header="Nowe zadanie" Margin="10, 0, 10" Min. Width="420" Height="140" Vertical. Alignment="Bottom"> <Grid>. . . <Label Content="Termin realizacji: " Margin="160, 0, 0" Horizontal. Alignment="Left" Vertical. Alignment="Top"/> <Date. Picker x: Name="dp. Termin. Realizacji" Margin="160, 85, 0, 0" Horizontal. Alignment="Left" Vertical. Alignment="Top" Selected. Date="{x: Static s: Date. Time. Now}" />. . . </Grid> </Group. Box> </Grid> </Window>

Kolekcje danych w MVVM Widok – modyfikacje kolekcji (CRUD) <Window x: Class="Zadania. WPF. Main. Window". . . xmlns: s="clr-namespace: System; assembly=mscorlib" Title="Zadania. WPF" Height="500" Width="500">. . . <Grid>. . . <Group. Box Header="Nowe zadanie" Margin="10, 0, 10" Min. Width="420" Height="140" Vertical. Alignment="Bottom"> <Grid>. . . <Button Content="Dodaj zadanie" Margin="0, 80, 10, 0" Horizontal. Alignment="Right" Vertical. Alignment="Top" Width="100" Height="25" Style="{Static. Resource styl. Przycisku}" Command="{Binding Path=Dodaj. Zadanie}"> </Button> </Grid> </Group. Box> </Grid> </Window> Polecenie oczekuje zadania przekazanego przez parametr → konwerter

Kolekcje danych w MVVM Widok – konwerter tworzący zadanie (multibinding) public class Zadanie. Converter : IMulti. Value. Converter { Priorytet. Zadania. To. Int pzti = new Priorytet. Zadania. To. Int(); public object Convert(object[] values, Type target. Type, object parameter, Culture. Info culture) { string opis = (string)values[0]; Date. Time termin. Utworzenia = Date. Time. Now; Date. Time? planowany. Termin. Realizacji = (Date. Time? )values[1]; Model. Priorytet. Zadania priorytet = (Model. Priorytet. Zadania)pzti. Convert. Back( values[2], typeof(Model. Priorytet. Zadania), null, Culture. Info. Current. Culture); if (!string. Is. Null. Or. White. Space(opis) && planowany. Termin. Realizacji. Has. Value) return new Model. Widoku. Zadanie(opis, termin. Utworzenia, planowany. Termin. Realizacji. Value, priorytet, false); else return null; }. . .

Kolekcje danych w MVVM Widok – multibinding (konwerter tworzący zadanie) Do zasobów: <local: Zadanie. Converter x: Key="twórz. Zadanie" /> Wiązanie w zbierające w parametrze polecenia dane potrzebne do utworzenie zadania przez konwerter: <Button Content="Dodaj zadanie" Margin="0, 80, 10, 0" Horizontal. Alignment="Right" Vertical. Alignment="Top" Width="100" Height="25" Style="{Static. Resource styl. Przycisku}" Command="{Binding Path=Dodaj. Zadanie}"> <Button. Command. Parameter> <Multi. Binding Converter="{Static. Resource twórz. Zadanie}"> <Binding Element. Name="tb. Opis" Path="Text" /> <Binding Element. Name="dp. Termin. Realizacji" Path="Selected. Date" /> <Binding Element. Name="cb. Priorytet" Path="Selected. Index" /> </Multi. Binding> </Button. Command. Parameter> </Button>

Kolekcje danych w MVVM Widok – multibinding (konwerter tworzący zadanie) Do zasobów: <local: Zadanie. Converter x: Key="twórz. Zadanie" /> Wiązanie w zbierające w parametrze polecenia dane potrzebne do utworzenie zadania przez konwerter: <Button Content="Dodaj zadanie" Margin="0, 80, 10, 0" Horizontal. Alignment="Right" Vertical. Alignment="Top" Width="100" Height="25" Style="{Static. Resource styl. Przycisku}" Command="{Binding Path=Dodaj. Zadanie}"> <Button. Command. Parameter> <Multi. Binding Converter="{Static. Resource twórz. Zadanie}"> <Binding Element. Name="tb. Opis" Path="Text" /> <Binding Element. Name="dp. Termin. Realizacji" Path="Selected. Date" /> <Binding Element. Name="cb. Priorytet" Path="Selected. Index" /> </Multi. Binding> </Button. Command. Parameter> </Button>

Kolekcje danych w MVVM Widok – użycie okna dialogowego <local: Notification. Dialog. Box x: Name="notification. Dialog. Box" Caption="Zadania. WPF" Command. Before="{Binding Path=Dodaj. Zadanie}"> <local: Notification. Dialog. Box. Command. Parameter> <Multi. Binding Converter="{Static. Resource twórz. Zadanie}"> <Binding Element. Name="tb. Opis" Path="Text" /> <Binding Element. Name="dp. Termin. Realizacji" Path="Selected. Date" /> <Binding Element. Name="cb. Priorytet" Path="Selected. Index" /> </Multi. Binding> </local: Notification. Dialog. Box. Command. Parameter> </local: Notification. Dialog. Box> <Button Content="Dodaj zadanie" Margin="0, 83, 9. 8, 0" Horizontal. Alignment="Right" Vertical. Alignment="Top" Width="100" Height="25" Style="{Static. Resource styl. Przycisku}" Command="{Binding Element. Name=notification. Dialog. Box, Path=Show}" Command. Parameter="Zadanie zostało dodane" />

Kolekcje danych w MVVM Widok – użycie okna dialogowego Alternatywne rozwiązanie: • Model widoku udostępnia własności, z którymi elementy formularza są związane One. Way. To. Source lub Two. Way • Przycisk związany jest z poleceniem, które odpowiedzialne jest za utworzenie elementu kolekcji (zbierane dane z tych własności)

Lokowanie produktu Rozwinięcie tematu: • Przechowywanie kolekcji w chmurze prywatnej (podłączenie aplikacji do usługi REST) • CQRS (na wypadek większych obciążeń usługi REST) Te zaawansowane zagadnienia nie są wymagane na egzaminie