(brug af MVVMStarterLibrary2018)

Præsentationer af emnet: "(brug af MVVMStarterLibrary2018)"— Præsentationens transcript:

1 (brug af MVVMStarterLibrary2018)
BioDemo (brug af MVVMStarterLibrary2018)

2 Theater Movie * * Show

3 23 stk. i alt Generelt Pr. domæne-klassse I alt (3 domæne-klasser)
Data Model View ViewModel Generelt 1 stk. base 1 stk. Catalog-base 1 stk. Dom-model 1 stk. AppView 1 stk. Ress-cat 1 stk. AppVM 2 stk. base Pr. domæne-klassse 1 stk. 1 stk. Catalog 2 stk. I alt (3 domæne-klasser) 4 stk. 5 stk. 9 stk. 23 stk. i alt

4 Selve applikationen Er af typen UWP (Universal Windows Platform)
I Visual Studio: Vælg New Project, og vælg under Visual C# projekt- typen Windows Universal, og der- under Blank App

5 Brug af klassebibliotek (1)
I dit eget projekt: lav en ny mappe, f.eks. kaldet Libs (det er den kaldt i BioDemo) Gå til min GitHub-side, og download projektet MVVMStarter- Library2018 Når du har downloadet projektet: gå tilbage til dit eget projekt, højreklik på mappen du lige har lavet, og vælg Add | Existing Item… I dialogen: Navigér ned til projektet MVVMStarterLibrary2018, og ned i mappen MVVMStarterLibrary2018DLLs. Den skal gerne indeholde otte filer med endelsen .dll. Markér de otte .dll filer, og klik på Add.

6 Brug af klassebibliotek (2)
I dit eget projekt: Højreklik på References, og vælg Add References… I den fremkomne dialog: Navigér ned til din Libs-mappe I dit eget projekt, vælg de otte .dll-filer der ligger i mappen, og klik på Add Lav en Rebuild Solution på hele dit project (vælg Build | Rebuild Solution) Nu kan du benytte klassebibliotekerne i dit projekt!

7 Domæne-klasser (1) Ligger i mappen Data
I mappen Base ligger klassen DomainAppBase. Denne klasse er base-klasse for alle de egentlig domæne-klasser (d.v.s. de arver alle fra DomainAppBase) DomainAppBase arver selv fra CopyableWithDefaultValuesBase, som er en klasse fra klassebiblioteket. Dette sørger for, at domæne- klasserne får nogle egenskaber, som gør dem kompatible med resten af klasse-biblioteket.

8 Domæne-klasser (2) De egentlig domæne-klasser ligger i mappen Data/Domain Tre domæne-klasser: Movie, Theater og Show. Movie og Theater er meget simple (rummer kun et par properties med simple typer) Show er lidt mere kompleks, idet et Show-objekt har en reference til et Movie-objekt og et Theater-objekt. Disse reference er implementeret ved hjælp af keys (nøgler), som er en int-værdi der udpeger et specifikt objekt. Alle domæne-klasser har en sådan nøgle p.g.a. base-klassen de arver fra.

9 Domæne-klasser (3) En key-værdi kan “konverteres” til en rigtig objekt-reference på denne måde: public Movie MovieForShow { get { return DomainModel.Instance.Movies.Read(_movieKey); } } Dette er et opslag i domæne-modellen (se senere) Bemærk også, at alle domæne-klasser skal implementere metoden SetDefaultValues. Her kan alle properties gives en initiel værdi, som bliver vist i GUI’en, når man laver et nyt objekt af den givne klasse.

10 Model-klasser (1) Ligger i mappen Models
I mappen Base ligger klassen CatalogAppBase. Denne klasse er base-klasse for alle catalog-klasserne for de egentlig domæne- klasser (d.v.s. de arver alle fra CatalogAppBase) Et catalog-klasse er en klasse, hvis formål det er at opbevare en mængde af domæne-objekter af en specifik klasse CatalogAppBase<T> arver selv fra FilePersistableCatalogWithout- TransformationAsync<T>, som er en klasse fra klassebiblioteket. Dette gør, at objekterne i et catalog kan gemmes i en fil.

11 Model-klasser (2) De egentlig catalog-klasser for domæne-klasserne ligger i mappen Models/Domain Tre catalog-klasser: MovieCatalog, TheaterCatalog og ShowCatalog. Disse tre klasser er alle meget simple (bemærk, at navnet på domæne- klassen bruges som en såkaldt type-parameter til base-klassen): public class MovieCatalog : CatalogAppBase<Movie> { }

12 Model-klasser (3) I mappen Models/App ligger klassen DomainModel
Denne klasse repræsenterer hele domæne-modellen, hvilket vil sige de tre catalog-klasser beskrevet før. DomainModel har derfor tre instance fields: public class DomainModel { private MovieCatalog _movieCatalog; private TheaterCatalog _theaterCatalog; private ShowCatalog _showCatalog;

13 Model-klasser (4) Idet vi gerne vil være sikre på, at der til enhver tid kun eksisterer ét DomainModel objekt (så vi har styr på vores domæne-objekter), er DomainModel-klassen en såkaldt Singleton Koden i regionen Singleton implementation sikrer dette. Ydermere skal DomainModel-constructoren være private. Derudover rummer DomainModel nogle properties svarende til hvert catalog, samt metoderne SaveAsync og LoadAsync. SaveAsync kan gemmen hele domæne-modellen i en fil, og LoadAsync kan indlæse domæne-modellen igen fra samme fil.

14 Model-klasser (5) Bemærk, at når DomainModel er en Singleton, er syntaksen for at bruge den lidt speciel, f.eks.: public Movie MovieForShow { get { return DomainModel.Instance.Movies.Read(_movieKey); } } Vi skal aldrig skrive new for at benytte DomainModel, men derimod DomainModel.Instance. Herefter er syntaksen som normalt.

15 ViewModel-klasser (1) Ligger i mappen ViewModels
I mappen Base ligger klasserne DataViewModelAppBase samt PageViewModelAppBase. En DataViewModel-klasse er en klasse, som rummer properties som kan benyttes til Data Binding i.f.m. et enkelt domæne-objekt. Denne klasse kommer i brug, når vi skal definer et View hørende til en domæne-klasse.

16 ViewModel-klasser (2) Selve DataViewModelAppBase er rimeligt simpel; den arver fra DataViewModelBase, som er en klasse fra klassebiblioteket. Det er p.g.a. denne arv, at constructoren ser ud som den gør. De to properties HeaderText og ContentText kan benyttes til Data Binding i et View, men det er ikke påkrævet at benytte disse. Man kan selv definere andre properties til dette formål. Vigtigt: Et DataViewModel-objekt har en reference til et enkelt domæne-objekt; dette objekt kan man få fat på v.h.a. en property kaldet DataObject.

17 ViewModel-klasser (3) Mappen ViewModels/Data rummer DataViewModel-klasser for hver af de tre domæne-klasser. MovieDataViewModel og TheaterDataViewModel er ret simple, og rummer primært properties som ligner hinanden meget, f.eks.: public string Title { get { return DataObject.Title; } set DataObject.Title = value; OnPropertyChanged(); }

18 ViewModel-klasser (4) MovieDataViewModel og TheaterDataViewModel rummer også overrides af de to properties HeaderText og ContentText fra base- klassen, f.eks.: public override string HeaderText { get { return Title; } } public override string ContentText get { return $"{LengthInMins} mins. Age {AgeLimit}+"; }

19 ViewModel-klasser (5) ShowDataViewModel er noget mere kompleks, hvilket skyldes at denne klasse skal håndtere valget af Movie og Theater hørende til et Show. Klassen rummer derfor to ObservableCollections af hhv. MovieDataViewModel og TheaterDataViewModel objekter, samt logik til at håndtere disse.

20 ViewModel-klasser (6) Selve PageViewModelAppBase er rimeligt simpel; den arver fra PageViewModelCRUD, som er en klasse fra klassebiblioteket. Det er p.g.a. denne arv, at constructoren ser ud som den gør. Et PageViewModel-objekt skal have en reference til et catalog- objekt. Constructoren for PageViewModelCRUD kræver yderligere to parametre, som dog ikke kommer i brug i denne demo. Derfor er der blot angivet to tomme List-objekter.

21 ViewModel-klasser (7) Mappen ViewModels/Page rummer PageViewModel-klasser for hver af de tre domæne-klasser. Disse klasser er ret simple, og ligner hinanden meget, f.eks.: public class MoviePageViewModel : PageViewModelAppBase<Movie> { public MoviePageViewModel() : base(DomainModel.Instance.Movies) } public override IDataWrapper<Movie> CreateDataViewModel(Movie obj) return new MovieDataViewModel(obj);

22 ViewModel-klasser (8) Mappen ViewModels/App rummer klassen AppViewModel. Denne klasse er en ViewModel for hele applikationen som sådan. Den rummer primært funktionalitet relateret til overordnet navigation i applikationen (f.eks. åbne et specifikt View), og funktioner som Load, Save og Quit. Vigtigt: Metoden AddCommands er stedet, hvor man angiver hvilke overordnede “commands” som applikationen rummer.

23 ViewModel-klasser (9) Hvert “element” i AddCommands ser nogenlunde således ud: NavigationCommands.Add("OpenShowView", new RelayCommand(() => { AppFrame.Navigate(typeof(Views.Domain.ShowView)); })); Koden mellem { og } er den som bliver udført, når denne command aktiveres. En command aktiveres ved at vælge et tilsvarende menu item (se senere)

24 Views (1) Ligger i mappen Views
I mappen App ligger filerne AppResources.xaml og MainPage.xaml AppResources.xaml rummer såkaldte Style-definitioner, som beskriver hvordan GUI-kontroller af en given type skal se ud. Disse Style-definitioner kan så benyttes i egentlige Views, hvilket gør det langt nemmere at ændre udseendet på kontroller senere. (Kan sammenlignes lidt med CSS)

25 Views (2) MainPage.xaml rummer definitionen af det overordnede view for hele applikationen. Bemærk at AppViewModel er sat som DataContext for dette view. Page.Resources-delen inkluderer de føromtalte Style-definitioner. Den vigtigste del af dette view er NavigationView-kontrollen, specielt de seks NavigationViewItem-elementer Vigtigt: hvert af disse NavigationViewItem-elementer svarer til en command defineret i AddCommands-metoden i AppViewModel

26 Views (3) Vigtigt: Den værdi som Tag er sat til for hvert NavigationViewItem- element, skal matche den tilsvarende command defineret i AddCommands-metoden i AppViewModel: <NavigationViewItem Style="{StaticResource NavigationViewItemStyle}" Icon="Memo" Content="Movies" Tag="OpenMovieView"/> NavigationCommands.Add("OpenMovieView", new RelayCommand(() => { AppFrame.Navigate(typeof(Views.Domain.MovieView)); }));

27 Views (4) NavigationView-kontrollen i MainPage.xaml rummer også et element af typen Frame. Det er i dette element, at indholdet af de enkelte views vises. Bemærk at Frame-elementet har navnet AppFrame. Dette er vigtigt, da det benyttes til at få navigationen mellem views til at virke.

28 Views (5) Mappen Views/Domain indeholder Views for de enkelte domæne- klasser. I hvert view kan man oprette (Create), læse (Read), redigere (Update) og slette (Delete) objekter af en specifik klasse. Dette kaldes samlet for CRUD-operationer. I hvert view er den tilsvarende PageViewModel-klasse angivet som DataContext, f.eks. MoviePageViewModel i MovieView.xaml

29 Views (6) Hvert view rummer en Page.BottomAppBar-sektion. Denne del rummer funktionalitet til dels at sætte viewet i en af fire tilstande svarende til Create, Read, Update eller Delete. Når man benytter et View i applikationen, står dets øjeblikkelige tilstand i nederste venstre hjørne. Tilstanden af et View kan ændres ved at klikke på tandhjulet i nederste højre hjørne. Når man vil udføre en handling (f.eks. slette et objekt), klikker man på en af ikonerne til venstre for tandhjulet.

30 Dette element vil blive slettet

31 Views (7) Den overordnede navigation rummer også Load, Save og Quit:
Load: Indlæs domæne-modellen fra fil (der benyttes en fast fil, så man skal ikke angivne hvilken fil man vil indlæse fra). Save: Gem domæne-modellen i dens nuværende tilstand i en fil. Quit: Luk applikationen. Vigtigt: Data gemmes IKKE automatisk, når man lukker applikationen!

32