SWC i 2.semester projektet

SWC i 2.semester projektet
Overblik, tips, m.v.

Overordnede forventninger til SWC-delen
Obligatorisk En applikation skrevet i C# Applikation følger principperne i MVVM Data gemmes i relationel database Anbefales Valgfrit

Obligatorisk Anbefales Database ligger på Azure Database er på 3.normalform GUI defineres i XAML Man benytter type-parameteriserede base-klasser Ingen/minimal code-behind (i filerne …View.xaml.cs) Der benyttes Data Binding mellem View og ViewModel-lag Brug GitHub til versionsstyring/samarbejde Valgfrit

Obligatorisk Anbefales Valgfrit Man benytter MVVMGo-klassebiblioteket as-is Man lader sig inspirere af MVVMGo-klassebiblioteket Man udvikler selv sine egne base-klasser fra bunden Man bruger auto-genererede nøgler i databasen

Teknologier Database MVVM UI/XAML UWP Apps MVVMGo klassebibliotek
GitHub

Database - Proces Husk at skelne mellem rækkefølgen i SWD og SWC! SWD
Opbyg jeres domæne-model (fra Use Cases, m.v..), og vær grundige! Følg reglerne for at komme fra domæne-model til tabel-model (se evt. PowerPoint om DB Design, fra uge 41) SWC Implementér tabel-model (opret database, tast tabel-definitioner ind) Brug EF Core Power Tools til at generere C#-klasser ud fra tabeller

Database - Implementation
Overvej fra starten disse issues grundigt for hver tabel: Hvad skal primær-nøglen være (det er helt fint f.eks. altid at lave en ekstra kolonne kaldet id, som er primær-nøgle)? Hvilke kolonner må gerne være null (vær specielt opmærksomme på tekst- kolonner, da dette kan give problemer)? Skal nogle kolonner defines til at være fremmed-nøgler (dette gør en forskel i.f.t. de klasser, som EF Core Power Tools genererer)?

Database – EF Core Power Tools
Hvis ikke allerede installeret; få det gjort! Hvordan benyttes det? Se kapitel Persistency, s , fra uge 44 HUSK Man kan altid slette de genererede klasser, og generere forfra. Giv DB-context klassen et godt navn (f.eks. (ProjektNavn)DBContext), så man nemt kan finde den igen. Vær forsigtig med kun at generere nogle af klasserne påny – man kan nemt komme til at glemme, hvilke tabeller man har rettet. Hold genereret del og ”håndkodet” del af domæne-klasser adskilt.

Database – Azure Ikke strengt nødvendigt at alle har en Azure-konto, men mindst én i gruppen skal have en. Alle bør have adgang til en Azure-konto! Mange kan godt tilgå den samme database, men der skal åbnes for adgang til databasen (firewall settings)! Hvordan gør man? Se kapitel Persistency, s , fra uge 44

Database – Azure Nemmeste måde (synes jeg ) at få lavet en database på Azure: Lav en lokal database, og fyld tabel-definitioner (evt. også data) i Lav en tom database på Azure For hver tabel: På den lokale database: Brug Visual Studio til at lave et script for tabellen (højreklik på tabel, og vælg Script as…) På Azure-databasen: Åbn et Query-vindue, kopiér scriptet ind, og kør queryen. Nu skulle Azure-databasen indeholde den samme tabel. NB! En UWP App + EF Core + lokal database fungerer IKKE! En UWP App + EF Core + Azure database fungerer…

MVVM - overblik MVVM = Model-View-ViewModel
Se også kapitel AppDev02 (ligger i OOProg/Chap)

MVVM - Model MVVM = Model-View-ViewModel
Model: Den del af vores kode, hvor vi definerer C# klasser som: Rummer collections af domæne-objekter Rummer implementationer af forretningslogik Har kontakt til en data-kilde, her typisk en database (via EF) Ikke afspejler nogen antagelser om visuel præsentation

MVVM - Model public class StudentCatalog { private static int _keyCount = 1; private Dictionary<int, Student> _students; public StudentCatalog() _students = new Dictionary<int, Student>(); } public List<Student> All get { return _students.Values.ToList(); } …

MVVM - Model public class StudentCatalog { … public void Create(Student s) s.Key = _keyCount++; _students.Add(s.Key, s); } public Student Read(int key) return _students.ContainsKey(key) ? _students[key] : null; public void Delete(int key) _students.Remove(key);

MVVM - Model public class Catalog<T> { private static int _keyCount = 1; private Dictionary<int, T> _objects; public Catalog() _objects = new Dictionary<int, T>(); } public List<T> All get { return _objects.Values.ToList(); } …

MVVM - Model public class Catalog<T> { … public void Create(T obj) obj.Key = _keyCount++; _objects.Add(obj.Key, obj); } public T Read(int key) return _objects.ContainsKey(key) ? _objects[key] : null; public void Delete(int key) _objects.Remove(key);

MVVM - View MVVM = Model-View-ViewModel
View: Den del af vores kode, hvor vi definerer views i XAML som: Beskriver det visuelle layout af vores applikation, ved at definere et antal UI- kontroller for hvert View. Definerer Data Bindings til at fremskaffe data, som vises i UI-kontroller. Det kan også være data, som styrer aspekter af selve præsentationen. Rummer UI-kontroller, med hvilke vi kan navigere rundt i applikationen, og sætte forskellige handlinger i gang. Ikke rummer forretningslogik, hverken i XAML-koden selv, eller i den tilhørende code-behind fil (…xaml.cs)

MVVM - View <Page x:Class="MyProject.View.MainPage" …> <Page.DataContext> <viewModel:StudentPageViewModel/> </Page.DataContext> <StackPanel Orientation="Horizontal">  <StackPanel> <ListView ItemsSource="{Binding ItemCollection}" SelectedItem="{Binding ItemSelected, Mode=TwoWay}"> <ListView.ItemTemplate> </ListView.ItemTemplate> </ListView> <Button Content="Delete" Command="{Binding DeleteCommand}"/> </StackPanel>  <StackPanel …> </Page>

MVVM - View <Page x:Class="MyProject.View.MainPage" …> <Page.DataContext> <viewModel:StudentPageViewModel/> </Page.DataContext> <StackPanel Orientation="Horizontal">  <StackPanel …>  <StackPanel> <Image Source="{Binding ItemSelected.ImageSource}” …/> <StackPanel Margin="20,20,20,20"> <TextBlock Text="{Binding ItemSelected.NameText}"/> <TextBlock Text="{Binding ItemSelected.AgeText}"/> <TextBlock Text="{Binding ItemSelected.ResidenceText}"/> </StackPanel> </Page>

MVVM - ViewModel MVVM = Model-View-ViewModel
ViewModel: Den del af vores kode, hvor vi definerer C# klasser som: Rummer properties til hvilke vi i vores Views kan definere Data Bindings. Disse properties kan også referere til Command-objekter, eller være relateret til aspekter af selve præsentationen. Fremskaffer relevante data ved kontakt til Model-laget Ikke selv rummer domæne-objekter Ikke rummer nogen antagelser om data-kilde

MVVM - ViewModel Typisk brug for to typer af ViewModel-klasser
DataViewModel klasser PageViewModel klasser

MVVM – DataViewModel klasser
Vil typisk være en ”wrapper” omkring et enkelt domæneobjekt. Rummer properties til Data Binding, som ofte – men ikke altid – er tæt knyttet til en tilsvarende property på domæne-objektet Benyttes til Data Binding i de dele af et view, hvor der vises detaljer om et enkelt objekt. PlayerDataViewModel Name CurrentHP HPColor Player Name CurrentHP

public class Player { … public string Name { get; } public int CurrentHP { get; private set; } public Player(string name, int initialHP) Name = name; CurrentHP = initialHP; }

public class PlayerDataViewModel { public Player DataObject { get; } public int CurrentHP { get; private set; } public PlayerDataViewModel(Player obj) DataObject = obj; } …

public class PlayerDataViewModel { … public string Name get { return DataObject.Name; } } public int CurrentHP get { return DataObject.CurrentHP; } set DataObject.CurrentHP = value; OnPropertyChanged();

public class PlayerDataViewModel { … public SolidColorBrush HPColor get return new SolidColorBrush(CurrentHPToColor(DataObject.CurrentHP)); } private SolidColorBrush CurrentHPToColor(int currentHP)

MVVM – PageViewModel klasser
Vil typisk blive en Data Context for en Page (d.v.s. et view). Rummer properties til Data Binding, som er relateret til en collection af objekter, typisk De objekter der findes af en given type Det af disse objekter som p.t. er ”udvalgt” Benyttes til Data Binding i de dele af et view, hvor der vises en oversigt over alle objekter af en specifik type. Kan også rumme properties til navigation og commands Vil have en reference til et underliggende Catalog

PlayerPageViewModel ItemCollection ItemSelected … CommandX CommandY CommandZ PlayerData ViewModel PlayerData ViewModel PlayerData ViewModel PlayerData ViewModel PlayerData ViewModel

MVVM – View (Data bindings)
<Page x:Class="MyProject.View.MainPage" …> <Page.DataContext> <viewModel:StudentPageViewModel/> </Page.DataContext> <StackPanel Orientation="Horizontal">  <StackPanel> <ListView ItemsSource="{Binding ItemCollection}" SelectedItem="{Binding ItemSelected, Mode=TwoWay}"> <ListView.ItemTemplate> </ListView.ItemTemplate> </ListView> <Button Content="Delete" Command="{Binding DeleteCommand}"/> </StackPanel>  <StackPanel …> </Page>

public class StudentPageViewModel { private StudentCatalog Catalog { get; set;} public StudentDeleteCommand DeleteCommand { get; private set;} public StudentPageViewModel() Catalog = new StudentCatalog(); ItemSelected = null; DeleteCommand = new StudentDeleteCommand(…); } public StudentDataViewModel ItemSelected {…} public List<StudentDataViewModel> ItemCollection {…}

public class PageViewModel<T, TViewModel> { private CatalogBase<T> Catalog { get; set;} public DeleteCommandBase<T, TViewModel> DeleteCommand { get; private set;} public PageViewModel() Catalog = …; ItemSelected = null; DeleteCommand = new DeleteCommandBase(…); } public TViewModel ItemSelected {…} public List<TViewModel> ItemCollection {…}

PlayerPageViewModel ItemCollection ItemSelected … CommandX CommandY CommandZ PlayerCatalog All Create Read Update Delete … PlayerData ViewModel PlayerData ViewModel PlayerData ViewModel PlayerData ViewModel PlayerData ViewModel

PlayerView PlayerPageViewModel ItemCollection ItemSelected … CommandX CommandY CommandZ PlayerCatalog All Create Read Update Delete … C R U D

UI/XAML - overblik Som udgangspunkt gefinerer vi vores UI (User Interface) i XAML Vi kan skabe XAML kode ved at Skrive det selv i Visual Studio Bruge Designer Tool i Visual Studio Eksterne værktøjer (Blend,…) Min anbefaling: skriv selv XAML.

UI/XAML – UI kontroller
Generelt kan UI kontroller deles op i tre grupper (NB: mit påfund, ikke officielt): Simple kontroller Kontrol-containere Collection-containere

UI/XAML – Simple kontroller
Simple kontroller vil typisk relatere sig sig til En enkelt, ”atomisk” data, f.eks. et tal eller en tekst. En enkelt funktion, f.eks. at slette noget data. Eksempler: TextBlock, TextBox, Button, CheckBox, Image Nogle af disse (f.eks. Button og CheckBox) har en Command property, til hvilken man kan Data Binde et Command objekt (via en property på en PageViewModel klasse).

UI/XAML – Simple kontroller
Man kan styre det grafiske udseende af disse kontroller (og alle kontroller generelt) på en lang række måder. TIP: Definér tidligt nogle ”styles” for forskellige typer kontroller Giver et homogent udseende MEGET lettere at justere på layout undervejs Se flere detaljer i AppDev01, s.6-15

UI/XAML – collection-containere
Disse kontroller bruges når man gerne vil: Præsentere en collection af objekter på en homogen måde Vil gøre det muligt at ”udvælge” et af objekterne Eksempler er ListView og GridView (kontroller som ListBox og ComboBox er lidt på grænsen mellem simple og containere). Disse kontroller har (næsten) altid disse to vigtige properties: ItemsSource: De objekter der vises i kontrollen SelectedItem: Det objekt som p.t. er ”udvalgt”

UI/XAML – collection-containere
Vi har ansvar for at styre, hvordan et element (det kan være et objekt eller en simpel værdi, f.eks. en tekst) vises i f.eks. en ListView kontrol Simpel værdi: Som regel ikke behov for at gøre yderligere Objekt vist som ren tekst: Kan gøres ved at override ToString Objekt vist på anden vis: Definér en DataTemplate for objektet Se flere detaljer i AppDev01, s.29-36

UI/XAML – control-containere
Disse kontroller bruges til at organisere kontrollerne i sit view Skaber et ”hierarki” af kontroller Hvorfor bruge det? MEGET nemmere at holde styr på layout! To essentielle kontroller: Grid og StackPanel

Players in Game C R U D

Players in Game Players in Game C R U D C R U D

<Grid> <Grid.RowDefinitions> <RowDefinition Height="2*"> <RowDefinition Height="6*"> </Grid.RowDefinitions> </Grid> Players in Game Players in Game C R U D C R U D

<Grid> <Grid.RowDefinitions> <RowDefinition Height="2*"> <RowDefinition Height="6*"> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Text="Players in Game"/> </Grid> Players in Game Players in Game C R U D C R U D

<Grid> <Grid.RowDefinitions> <RowDefinition Height="2*"> <RowDefinition Height="6*"> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Text="Players in Game"/> <StackPanel Grid.Row="2"> <Button Text="Create" …> <Button Text="Read" …> <Button Text="Update" …> <Button Text="Delete" …> </StackPanel> </Grid> Players in Game Players in Game C R U D C R U D

Players in Game Players in Game C R U D C R U D

Tænk grundigt over organiseringen af kontroller i et view, INDEN I begynder at sætte kontrollerne ind! Man kan godt bruge Designer-toolbox, men ofte får man et meget ”skrøbeligt” layout

UWP Applikationer UWP – Universal Windows Platform
Microsoft platform for programmer (apps) generelt Forudsætter Windows 10 Har været en noget tung fødsel – stadig ikke 100 % Nogle elementer i UWP kan kun benyttes på nyere/nyeste version af Windows 10...

UWP Applikationer Når I skal lave et nyt UWP projekt i Visual Studio:
I hovedmenu: Vælg File | New | Project… I træet: Vælg Installed | Visual C# | Windows Universal I listen: vælg Blank App (øverste mulighed) Vælg et godt navn og en fornuftig mappe… NB: Vigtigt at vælge en tilpas ny version af Windows 10 som Minimum version! Vælg mindst Build 16299

UWP Applikationer

UWP Applikationer En UWP rummer til at starte med en enkelt Page (d.v.s. view), som hedder MainPage.xaml. Når applikationen starter, vil den pr. default navigere hen til MainPage (kan dog godt ændres). Hvad skal der være på MainPage? Typisk to elementer: En kontrol til overordnet navigation i applikationen. En Frame kontrol, som views vil blive vist indeni.

UWP Applikationer <Page x:Class="MyProject.View.MainPage" …> <Page.DataContext> <viewModel:MainPageViewModel/> </Page.DataContext> <NavigationView …> <NavigationView.MenuItems> … </NavigationView.MenuItems> <Frame x:Name="AppFrame"> </Frame> </NavigationView> </Page>

UWP Applikationer MainPage kan have en DataContext, ligesom andre sider. Her kan defineres properties til Data Binding i.f.t. overordnet navigation Typisk kontrol til overordnet navigation er NavigationView, som f.eks. har en SelectedItem property

UWP Applikationer Der er ofte også behov for navigation og/eller ”kommandoer” i de enkelte views. Flere muligheder: et eksempel er CommandBar kontrollen Er en container for et antal AppBarButton kontroller. En AppBarButton har en Command property, så her kan Data Bindes på sædvanlig vis. Kan placeres flere forskellige steder i viewet: top, bund, side,.. Alt dette handler om at få udført Execute på et Command-objekt, så alle kontroller med en Command property kan bruges…

UWP Applikationer Hele kapitlet AppDev03 handler om, hvordan man kan få stykket en komplet UWP-applikation sammen. Der er mange dele, som skal ”falde i hak”… Ingen naturlov, at man skal følge de retningslinjer der beskrives. Der kan sagtens være scenarier, som beskrivelserne ikke dækker. Beskrivelserne er i et vist omfang baseret på klassebiblioteket MVVMGo (tidligere MVVMStarterLibrary)

MVVMGo klassebibliotek
Et forsøg på min side på at lave et MVVM-relateret klassebibliotek. Rummer en antal klasser, som er tiltænkt som base-klasser for applikationsspecifikke klasser. Stort fokus på type-parameterisering. Findes en længere PowerPoint under OOProg/General/Libs/Doc om de specifikke klasser. Benyttes i CarRetailDemo og SimpleRPGDemo

Klassebiblioteket rummer base-klasser for: Domæne-klasser Catalog-klasser PageViewModel-klasser DataViewModel-klasser AppViewModel-klasser Command-klasser Controller-klasser

VIGTIGT: Det er helt valgfrit, om man vil benytte MVVMGo eller ej – det tæller hverken op eller ned. Det kan bruges på flere måder Man kan bruges det as-is, som base-klasser for ens egne specifikke klasser. Man kan bruges det som inspiration til at lave egne base-klasser. Man kan lade være med at bruge det  Det er tænkt som en hjælp til jer, MEN der er også et vist arbejde forbundet med at sætte sig ind i klasse-biblioteket. Man får ikke ”det hele foræret” ved at gå den vej.

GitHub Brug det! ja, det kan drille nogle gange, men hvad er alternativet…? Øv jer! Prøv at lave et lille brug-og-smid-væk projekt, og få noget føling med det. Lav et par klasser, se om I kan få det lagt op, så andre kan hente det ned, o.s.v.. Lav klare aftaler: Hvordan og hvornår må vi committe, hvordan gør vi når vi tilføjer nye klasser/views til projektet, o.s.v.. Udpeg gerne en form for koordinator/gatekeeper. Keep it simple: Pas på med for indviklede systemet med mange lokale branches m.v.. Det er tit merge af braches, der driller.

SWC i 2.semester projektet

Lignende præsentationer

Præsentationer af emnet: "SWC i 2.semester projektet"— Præsentationens transcript:

Lignende præsentationer

Om projektet

Feedback

Log ind

Logge ind via sociale netværk:

SWC i 2.semester projektet

Lignende præsentationer

Præsentationer af emnet: "SWC i 2.semester projektet"— Præsentationens transcript:

Lignende præsentationer

Om projektet

Feedback