Wk09 / UI/UX

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

UI/UX

CSD-I

Week 9

Deze week

Deze week:

• Nog even herhalen
• Voor we het vergeten - de For Loop
• UI en UX
• Werken met Grids
• Herhalen/Ophalen naamgevingsconventies
• Documenteren

We bouwen verder op het tonen van data uit een tekstbestand. Waar we vorig hoofdstuk met weinig data hebben gewerkt, gaan we nu met veel data uit een csv-bestand werken. We gaan alle regels met data uit een csv-bestand in een lijst in onze app laten zien. Iedere regel krijgt dan een eigen plek in de lijst.

Opdracht: bekijk programma en antwoord

1. Op regel 55 staat var csvReader = ..... gebruikt. Wat staat in deze variabele?
2. Wat is een betere naam voor deze variabele (op regel 55)?
3. Wat staat en waarom staat er iets tussen de haakjes bij new CsvReader(????) ?
4. r23 -  Wat wordt er bedoeld met x:DataType = "local:Worker" ?
5. Welke code zorgt er voor dat er een afbeelding in je app verschijnt en hoe werkt dat?

Stilte, werk voor jezelf

Overleg met buur is ok

Werk in groepjes

Klik en zoom

Vragen laten beantwoorden in textdocumentje en daarna "cold call" vragen in de klas.

Opdracht: bekijk programma en antwoord

1. Op regel 55 wordt var csvReader = ..... gebruikt. Wat staat in deze variabele?
2. Op welk regelnummer begint het sjabloon voor ieder item in de ListView en op welk eindigt het?
   
3. r23 -  Wat wordt er bedoeld met x:DataType = "local:Worker" ?
4. Welke code zorgt er voor dat er een afbeelding in je app verschijnt en hoe werkt dat?

Stilte, werk voor jezelf

Overleg met buur is ok

Werk in groepjes

Klik en zoom

Vragen laten beantwoorden in textdocumentje en daarna "cold call" vragen in de klas.

Van bestand naar List

• Bestand selecteren
• Bestand openen
• Stream opzetten zodat we de inhoud kunnen lezen 
• Reader maken waarmee we het bestand gaan lezen
• De inhoud van het hele bestand in een variabele stoppen
• De data in de variabele omzetten naar een list

Eerst nog even herhalen

• Bestand in een variabele zetten
• Bestand openen
• Stream opzetten zodat we de inhoud kunnen lezen 
• Reader maken waarmee we het bestand gaan lezen
• De inhoud van het hele bestand in een variabele stoppen
• De data in de variabele omzetten naar een list

Eerst nog even herhalen

• Bestand in een variabele zetten
• 
  
• Stream opzetten zodat we de inhoud kunnen lezen 
• Reader maken waarmee we het bestand gaan lezen
• De inhoud van het hele bestand in een variabele stoppen
• De data in de variabele omzetten naar een list

Eerst nog even herhalen

• Bestand in een variabele zetten
• 
  
• 
  
• Reader maken waarmee we het bestand gaan lezen
• De inhoud van het hele bestand in een variabele stoppen
• De data in de variabele omzetten naar een list

Eerst nog even herhalen

• Bestand in een variabele zetten
• 
  
• 
  
• 
  
• De inhoud van het hele bestand in een variabele stoppen
• De data in de variabele omzetten naar een list

Eerst nog even herhalen

• Bestand in een variabele zetten
• 
  
• 
  
• 
  
• 
  
• De data in de variabele omzetten naar een list

Eerst nog even herhalen

• Bestand in een variabele zetten
• 
  
• 
  
• 
  
• 
  
• 
  

Eigenlijk is dit twee keer hetzelfde programma.

Eigenlijk is dit twee keer hetzelfde programma. Enige verschil:

• Links is de lijst handmatig gevuld

Eigenlijk is dit twee keer hetzelfde programma. Enige verschil:

• Links is de lijst handmatig gevuld
• Rechts wordt de lijst gevuld vanuit een csv-file

Je wil een lijst met namen opslaan

Wat is de juiste aanpak?

1. Maak een klasse "Namen" in de MainPage.
2. Maak een klasse "Naam" in de MainPage.
3. Maak een List van strings en vul deze met namen.
4. Maak een klasse "Naam" in een eigen file Naam.cs.

Je wil een lijst met studenten opslaan met een naam en leeftijd

Wat is de juiste aanpak?

1. Maak een klasse "Studenten" in de MainPage.
2. Maak een klasse "Student" in een eigen file Student.cs
3. Maak een klasse " Students" in een eigen file Students.cs
4. Maak een List en vul deze met Dictionaries van studenten

Schrijf de code om de properties Naam en
Leeftijd te declareren in de class Student

<ListView.ItemTemplate>

<ListView ...>

<DataTemplate ...>

<TextBlock Text="{x:Bind ...}">

Belangrijk

                                               

Xaml kijkt naar de gecompileerde code van je applicatie. Is je programma nog niet succesvol een keer gestart (en dus gecompileerd) dan zal Xaml de class niet kunnen vinden. 

Oplossing:

      - Maak eerst de extra class aan die je gaat gebruiken.

      - Start hierna je 'lege' applicatie zodat je zeker weet dat er geen fouten zijn en je applicatie       

         dus succesvol gecompileerd wordt.

      - Ga hierna verder met het bouwen van je applicatie.

Voor we het vergeten - de For Loop

Voor we het vergeten - de 'for-loop'

de for-loop

Nu 

naar

de

grid 

lay-out

We bouwen verder op het tonen van data uit een tekstbestand. Waar we vorig hoofdstuk met weinig data hebben gewerkt, gaan we nu met veel data uit een csv-bestand werken. We gaan alle regels met data uit een csv-bestand in een lijst in onze app laten zien. Iedere regel krijgt dan een eigen plek in de lijst.

Grid

• Grid is een raster dat bestaat uit rijen en kolommen
• Een hokje in een grid noemen we cell

Grid

• Grid is een raster dat bestaat uit rijen en kolommen
• Een hokje in een grid noemen we cell

Standaard Grid

Een standaard grid bestaat uit 1 rij en 1 kolom (dus 1 cel)

Standaard Grid

Een standaard grid bestaat uit 1 rij en 1 kolom (dus 1 cel)

Elementen plaatsen op een rij

Elementen plaatsen op een rij

 1* geeft aan dat de hoogte van de rij 1/4e van het totaal inneemt

3* geeft aan dat de hoogte van de rij 3/4e van het totaal inneemt

Elementen plaatsen op een rij

 Auto -- geeft aan dat de hoogte automatisch wordt bepaald door de inhoud

     *     -- geeft aan dat de andere rij de rest van de ruimte inneemt.

Opbouw van je Grid

Opbouw van je grid

Opbouw van je grid

Grid.Row="0"                                            

Grid.Row="1"                                            

Opbouw van je grid

Grid.Row="0"                                            

Grid.Row="1"                                            

Attributen en Elementen van Grid

Aan de slag

Opdracht 5: Vlaggen

Pagina 126

• Maak voor iedere vlag een nieuw project maar binnen één solution.
• Kijk naar het gele kader hoe je al deze projecten in één solution kunt plaatsen.
• Lees het tweede gele kader Extra: Andere type lay-out

Stilte, werk voor jezelf

Overleg met buur is ok

Werk in groepjes

Doel:	* Leren werken met de attributen en elementen van Grid * Leren met Grid je lay-out op te maken * Leren meerder projecten in één solution te plaatsen
Hulp:	Zie paragraaf 2 + 3
Klaar?	Zie gele blok aan het einde van het hoofdstuk voor meer oefeningen

We bouwen verder op het tonen van data uit een tekstbestand. Waar we vorig hoofdstuk met weinig data hebben gewerkt, gaan we nu met veel data uit een csv-bestand werken. We gaan alle regels met data uit een csv-bestand in een lijst in onze app laten zien. Iedere regel krijgt dan een eigen plek in de lijst.

UX

Wat is UX?

• UX staat voor User Experience
• De beleving van de gebruiker
• De UX en UI zijn nauw met elkaar verbonden in een applicatie

Voorbeelden

Voorbeelden

Accessibility / Toegankelijkheid

Door ontwikkelaars vaak geschreven al a11y

Nadenken over a11y

• Niet alleen voor mensen met een permanente
    beperking
• Mensen in het gips
• Kleurenblind
• Responsive websites (mobiel toegankelijk)
  

Dark Patterns

Opzettelijk een slechte UX gebruiken

Toegankelijke code

Denk bij het maken van een applicatie ook aan je collega ontwikkelaars!

Nettere code schrijven

Conventies

   - lowerCamelCase   -- Elementen, lokale variabelen

   - UpperCamelCase  -- Properties, Klassen

 

Laten we kijken of we nog meer conventies nodig hebben.

Conventies = afspraken,

bijvoorbeeld naamgevingsconventies = afspraken over namen van structuren in code

Zoek de elementen...

(die in de XAML een x:Name heeft)

Allemaal gevonden?

Elementen

Naamgeving

We gaan elementen beter herkenbaar maken in onze code:

Geef vanaf nu een element altijd een beschrijvende lowerCamelCase naam die eindigt op El (van Element).

Bijv.:

nameEl

emailEl

receiveNewsEl

Event Handlers

IntelliSense verzint voor meerdere knoppen, slechte namen voor event handlers:

Event Handlers

Vanaf nu gaan we dit netjes oplossen door knoppen altijd eerst een x:Name te geven. Daarna koppelen we de Event Handler pas:

Dan kunnen we iedere knop een beschrijvende naam geven.

Aan de slag

Opdracht 10

pagina 134

Let op dit moet je ook inleveren!

Stilte, werk voor jezelf

Overleg met buur is ok

Werk in groepjes

Doel:	* Vergaarde kennis vastleggen in een document * Documenteren als belangrijk onderdeel van je vakgebied * Oefenen maken "Conventiedocument"
Hulp:	Zie paragraaf 6 t/m 9 en doorzoek het moduleboekje op "conventie"
Klaar?	Start met de weekcheck

We bouwen verder op het tonen van data uit een tekstbestand. Waar we vorig hoofdstuk met weinig data hebben gewerkt, gaan we nu met veel data uit een csv-bestand werken. We gaan alle regels met data uit een csv-bestand in een lijst in onze app laten zien. Iedere regel krijgt dan een eigen plek in de lijst.

Weekcheck H10

Introductie + zelfstandig werken.