Demo Applicatie maken

Demo Applicatie maken from scratch
CSD-I
Week 13
1 / 19
volgende
Slide 1: Tekstslide
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

In deze les zitten 19 slides, met tekstslides.

time-iconLesduur is: 60 min

Onderdelen in deze les

Demo Applicatie maken from scratch
CSD-I
Week 13

Slide 1 - Tekstslide

Hoe maak je een applicatie

Slide 2 - Tekstslide

Analyseer de opdracht en bestanden

Slide 3 - Tekstslide

CSV Bestand
Titl

Slide 4 - Tekstslide

CSV Bestand
Kolommen:

Title
Codec
ResolutieX
ResolutieY
Audio
Channels
Locatie
FilleSize

Slide 5 - Tekstslide

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

Slide 6 - Tekstslide

De Layout

Slide 7 - Tekstslide

Row 0
Row 1
Col 0
Row 0
Row 1
Col 0
Col 1
Col 1
Col 2
Col 3

Slide 8 - Tekstslide

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

Slide 9 - Tekstslide

De Layout
StackPanels
Image

Slide 10 - Tekstslide

Button
Button
ListView
TextBlock(en)
TextBlock(en)
TextBlock(en)
Image

Slide 11 - Tekstslide

Bij Opstarten
We weten nu welke gegevens dynamisch
worden ingeladen.

De ListView
Status
Meldingen
Informatie over de films

Slide 12 - Tekstslide

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.

Slide 13 - Tekstslide

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

Slide 14 - Tekstslide

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

Slide 15 - Tekstslide

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)

Slide 16 - Tekstslide

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)

Slide 17 - Tekstslide

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.
            }





Slide 18 - Tekstslide

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";

Slide 19 - Tekstslide