Wk04a+b / H4 / UWP & XAML CW66 - SSD1C

UWP & XAML
CSD-I
H4 / week 4
1 / 35
suivant
Slide 1: Diapositive
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

Cette leçon contient 35 diapositives, avec quiz interactifs et diapositives de texte.

time-iconLa durée de la leçon est: 60 min

Éléments de cette leçon

UWP & XAML
CSD-I
H4 / week 4

Slide 1 - Diapositive

Cet élément n'a pas d'instructions

Deze les / week
  • Weekcheck H3 bespreken ('abbo-checker')
  • Kennis over classes consolideren
  • Visuele applicaties maken:
  •         UWP
  •         XAML

Slide 2 - Diapositive

Cet élément n'a pas d'instructions

Bekijken het programma en beantwoord:
1. Op r58 en 78 zie je if-statements. Kan het gebeuren dat die allebei worden uitgevoerd?

2a. Op r70 wordt een variabele gemaakt. Wordt deze gedefinieerd of gedeclareerd?
2b. Zou je deze variabele op r81 kunnen gebruiken?

3. Op welke regel(s) wordt gebruikersinput gevraagd?



4. Op r73 wordt de prijs van een abonnement aangepast. Gebeurt dit voor alle abonnementen? Waarom wel / niet?

5a. Voor alle variabelen wordt het datatype 'double' gebruikt. Waarom?
5b. Zou je ook een ander datatype kunnen gebruiken, en welke dan?

6. Op r63 wordt een variabele gedefinieerd. Zou je deze op r74 kunnen gebruiken? Waarom wel / niet?
Klik en zoom

Slide 3 - Diapositive

Vragen laten beantwoorden in textdocumentje en daarna "cold call" vragen in de klas.
1. Declareer een variabele om de titel van een boek op te slaan.

2. Definieer een variabele waarin je de prijs van een kopje koffie kunt opslaan (de prijs is €2.59).

Slide 4 - Question ouverte

Cet élément n'a pas d'instructions

Classes - belangrijkste punten
  • Een klasse beschrijft één ding.
  • In de klasse declareer je de eigenschappen van dat ding.
  • Een klasse is geen ding, alleen de abstracte beschrijving

  • Door new te gebruiken instantieer je een klasse.
  • Je hebt dan een object gemaakt; een concrete invulling van een klasse.

Slide 5 - Diapositive

Cet élément n'a pas d'instructions

Slide 6 - Diapositive

Cet élément n'a pas d'instructions

Getter / setter
Datatype
Access modifier
Naam

Slide 7 - Question de remorquage

Cet élément n'a pas d'instructions

Plek waar de klasse staat. Hierdoor kunnen verschillende ontwikkelaars dezelfde klassenamen gebruiken.
Beschrijft een attribuut van een klasse.
Het concreet maken van een klasse.
Geven aan of de eigenschap gelezen of ingesteld kan worden.
Concreet voorbeeld van klasse; instantie.
Bepaalt de toegankelijkheid.
Beschrijft een ding.
Klasse
Object
Namespace
Eigenschap
Access modifier
Getters en setters
Instantiëren

Slide 8 - Question de remorquage

Cet élément n'a pas d'instructions

Slide 9 - Diapositive

Cet élément n'a pas d'instructions

Evt. weekcheck H3
uitgebreider bespreken

Slide 10 - Diapositive

Cet élément n'a pas d'instructions

Einddoel deze week

Slide 11 - Diapositive

Cet élément n'a pas d'instructions

Einddoel deze week

Deze app gebruikt:
  • UWP
  • XAML

Slide 12 - Diapositive

Cet élément n'a pas d'instructions

Einddoel deze week

Deze app gebruikt:
  • UWP: Universal Windows Platform

  • XAML: eXtensible App Markup Language

Slide 13 - Diapositive

Cet élément n'a pas d'instructions

Einddoel deze week

Slide 14 - Diapositive

Cet élément n'a pas d'instructions

Einddoel deze week

Deze app gebruikt:
  • UWP
  • XAML

Slide 15 - Diapositive

Cet élément n'a pas d'instructions

Einddoel deze week

Deze app gebruikt:
  • UWP: Universal Windows Platform

  • XAML: eXtensible App Markup Language

Slide 16 - Diapositive

Cet élément n'a pas d'instructions

Slide 17 - Diapositive

Cet élément n'a pas d'instructions

Slide 18 - Diapositive

Cet élément n'a pas d'instructions

Wat herkennen we nog meer?

Slide 19 - Diapositive

Cet élément n'a pas d'instructions

Opdracht
Studeer een paar minuten op de werking van een
Markup Language.

Bedenk: XAML en HTML zijn allebei Markup Languages.

Slide 20 - Diapositive

Cet élément n'a pas d'instructions

Child
Parent
Attribuut
Enkele tag
Element

Slide 21 - Question de remorquage

Cet élément n'a pas d'instructions

X
HTML:
XAML:

Slide 22 - Diapositive

Cet élément n'a pas d'instructions

HTML:
XAML:

Slide 23 - Diapositive

Cet élément n'a pas d'instructions

Demo door docent
(laptops dicht)
H4, paragraaf 3 t/m 7

Slide 24 - Diapositive

Demonstreer maken van UWP C# project, een beetje XAML code schrijven: StackPanel met daarin TextBlock en daarnaast button. Stijlen van een TextBlock laten zien, evt met meerdere Runs

Aan de slag


Lezen + maken H4,
paragraaf 3 t/m 7
(bladzijde 60)

Ofwel: de lay-out van
je applicatie maken





Klaar: 
Paragraaf 8 en 9.

Hulp:
Overleg met je buur
Vraag de docent
Stilte, werk voor jezelf
Overleg met buur is ok
Werk in groepjes
timer
20:00

Slide 25 - Diapositive

Cet élément n'a pas d'instructions

File met XAML-code
Code-behind
Attribuut met inhoud
Element
Tag binnen TextBlock
Element uitlijnen
<Button>...</Button>
FontStyle="Italic"
MainPage.xaml
MainPage.xaml.cs
Run-tag
VerticalAlign
TextAlign

Slide 26 - Question de remorquage

Cet élément n'a pas d'instructions

Event-handler / actie koppelen aan knop
  • We willen dat er iets gebeurt zodra je op de knop drukt
  • Op de knop drukken is een gebeurtenis; een event
  • Wat gebeurt er door het event? Dat beschrijven we in een event-handler.

Slide 27 - Diapositive

Cet élément n'a pas d'instructions

Event-handler / actie koppelen aan knop
  • We willen dat er iets gebeurt zodra je op de knop drukt
  • Op de knop drukken is een gebeurtenis; een event
  • Wat gebeurt er door het event? Dat beschrijven we in een event-handler.

Slide 28 - Diapositive

Cet élément n'a pas d'instructions

Event-handler / actie koppelen aan knop
XAML:


Code-behind:

Slide 29 - Diapositive

Cet élément n'a pas d'instructions

Event-handler / actie koppelen aan knop
XAML:


Code-behind:

Slide 30 - Diapositive

Cet élément n'a pas d'instructions

Event-handler / actie koppelen aan knop

Slide 31 - Diapositive

Cet élément n'a pas d'instructions


Aan de slag


Lezen + maken H4,
paragraaf 8 t/m 11
(bladzijde 67)





Klaar: 
Paragraaf 12.

Hulp:
Overleg met je buur
Vraag de docent
Stilte, werk voor jezelf
Overleg met buur is ok
Werk in groepjes

Slide 32 - Diapositive

Cet élément n'a pas d'instructions

Demo m.b.t. TryParse.

Slide 33 - Diapositive

Cet élément n'a pas d'instructions


Aan de slag


Lezen + maken H4,
paragraaf 12
(bladzijde 69)





Klaar: 
Weekcheck H4.

Hulp:
Overleg met je buur
Vraag de docent
Stilte, werk voor jezelf
Overleg met buur is ok
Werk in groepjes

Slide 34 - Diapositive

Cet élément n'a pas d'instructions


Aan de slag


Weekcheck H4
Stilte, werk voor jezelf
Overleg met buur is ok
Werk in groepjes

Slide 35 - Diapositive

Cet élément n'a pas d'instructions