Demo Applicatie maken

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

Demo Applicatie maken from scratch

CSD-I

Week 13

Hoe maak je een applicatie

Analyseer de opdracht en bestanden

CSV Bestand

Titl

CSV Bestand

Kolommen:

Title

Codec

ResolutieX

ResolutieY

Audio

Channels

Locatie

FilleSize

Wat weten we tot nu

• We hebben een CSV bestand dus we gaan de NuGet package CSVHelper gebruiken
• We hebben een Class nodig met daarin de properties:

             Title

             Codec

             ResolutieX

             ResolutieY

             Audio

             Channels

             Locatie

             FileSize

De Layout

Row 0

Row 1

Col 0

Row 0

Row 1

Col 0

Col 1

Col 1

Col 2

Col 3

Row 0

Row 1

Col 0

Row 0

Row 1

Col 0

Col 1

Col 1

Col 2

Col 3

Border voor kleur

Border voor kleur

De Layout

StackPanels

Image

Button

Button

ListView

TextBlock(en)

TextBlock(en)

TextBlock(en)

Image

Bij Opstarten

We weten nu welke gegevens dynamisch

worden ingeladen.

De ListView

Status

Meldingen

Informatie over de films

De werking

• Met de knop inladen wordt het CSV bestand ingeladen
• Als de listview met filmtitels is geladen kun je op één film klikken. 
• De gegevens over de film komen in de rechter kolom te staan.
• Er wordt een plaatje geladen als deze beschikbaar is.  (dit is extra)

• Met de knop Exporteren worden gegevens van de geselecteerde film naar een textbestand geschreven.
• Bestaande bestand wordt overschreven.
• De map waar het bestand staat wordt geopend.

Stap 1 - Maken van de Class

Geef de Class een duidelijke naam (enkelvoud)

Movie.cs

Properties aanmaken in de class op basis van de CSV file.

Na het aanmaken van de Class moet je nog iets aanpassen (ook bij de weekcheck):

internal class Movie         -->            public class Movie

Om vanuit je methoden met de class te kunnen werken

Verder

• Installeren NuGet package CSVHelper
• Layout van de applicatie maken met meerdere Grids, Borders, StackPanels etc.
• Geef de Elementen duidelijke namen en maak dan de (click) events aan.

       x:Name="importEl"                       x:Name="exportEl"     

       Click="importEl_Click"                 Click="exportEl_Click"

• Andere elementen ook een duidelijke naam die eindigt op "El"  van Element

Code behind - Inlezen bestand

Methoden gaan vullen met code:

• Importeren van CSV en inlezen naar een list
• Koppel de lijst aan de ListView -> movielistEl.ItemsSource = .......
• Status weergeven in de applicatie (Weergeven welk bestand is ingelezen)
• 
  

Code behind - Weergeven info

Methoden gaan vullen met code (deze is aangemaakt bij het maken van het even in Xaml:

private void movielistEl_ItemClick(object sender, ItemClickEventArgs e)

• Om hier mee te werken hebben we de class Movie nodig deze moet public zijn dus toevoegen aan de applicatie op de volgende plek

 public sealed partial class MainPage : Page

    {

        public Movie SelectedMovie { get; set; }

• Vul deze variabele (in de methode) met de gegevens van de geselecteerde film    SelectedMovie = (Movie)e.ClickedItem;
• vul de elementen in Xaml die in de rechter kolom staan.   codecEl.Text = SelectedMovie.Codec; 
• Status weergeven in de applicatie (Weergeven welk bestand is ingelezen)
• 
  

Code behind - Exporteren

private async void exportEl_Click(object sender, RoutedEventArgs e)      --> deze methode is aangemaakt vanuit Xaml

• Controleer of er een film is geselecteerd (anders kunnen we niets wegschrijven)
• Als er geen film is geselecteerd dan komt de text "Selecteer eerst een film" op het scherm.

  if (SelectedMovie == null)                                                            --> als deze variabele leeg is (dus er is geen film geselecteerd)

            {

                messageEl.Text = "Selecteer eerst een film!";     --> laat de tekst op het scherm zien.

                return;                                                                                     --> sluit het Event zodat de gebruiker een film kan selecteren en nog een                                                                                                                             keer op de knop kan klikken.

            }

Code Behind - Exporteren

Gegevens wegschrijven

Open de folder waarin het bestand wordt opgeslagen

await Launcher.LaunchFolderAsync(ApplicationData.Current.LocalFolder);

Sla de folder op in een variabele

var storageFolder = ApplicationData.Current.LocalFolder;

Maak een bestand aan

var file = await storageFolder.CreateFileAsync($"Gegevens_{SelectedMovie.Title}.txt", CreationCollisionOption.OpenIfExists);

Schrijf de gegevens naar het aangemaakte bestand

await FileIO.WriteTextAsync(file, $"Film: {SelectedMovie.Title}\n" + etc. etc.

Geen in de message aan dat gegevens zijn weggeschreven

messageEl.Text = $"Gegevens van {SelectedMovie.Title} zijn weggeschreven";