Applicatiebouwcollege2

APPLICATIEBOUW
2E COLLEGE: ONTWERPEN, GEBRUIKERSINTERFACES, VARIABELEN &
EXPRESSIES
Onderdeel van SmartProducts
INHOUD COLLEGE 2
 Software ontwerpen
 Gebruikersinterfaces, in- en uitvoer
met tekstvelden
 Variabelen, expressies, type conversie
{3 - 4.2}
 Math class
 Opdracht 2
Opdrachten en presentaties:
vanslooten.com/applicatiebouw
Applicatiebouw, Industrieel Ontwerpen
1-5-2014
2
www.shakespeak.com
We gaan stemmen
Internet
SMS
1
Ga naar shakeq.com
2
Log in met APPL
1 presentatie
SMS naaris06
4250 0030
Deze
geladen
zonder de Shakespeak plug-in.
Plug-in gratis downloaden? Ga naar http://shakespeak.com/en/freeuw keuze (bv. Antw b)
2 Typ Antw <spatie>
download/
Twitter
1
Begin uw tweet met #APPL <spatie> het vraagnummer
2
Typ daarna <spatie> uw keuze (bv. #APPL 1 b)
Geen extra kosten per bericht
Applicatiebouw, Industrieel Ontwerpen
1-5-2014
3
Opdracht 1 was:
A.
Moeilijk
B.
Redelijk goed te doen
C.
Makkelijk
De vraag gaat open zodra u een
sessie en diavoorstelling start.
Stemmen: 0
Gesloten
Internet Ga naar shakeq.com en log in met APPL
Deze presentatie is geladen zonder de Shakespeak plug-in.
SMS
Stuur naar 06 4250 0030: Antw <spatie> uw keuze (bv. Antw b)
Plug-in
gratis
downloaden?
naar uw
http://shakespeak.com/en/free-download/
Applicatiebouw,
1-5-2014
Twitter
Tweet
#APPL
<spatie> 0 Ga
<spatie>
keuze (bv.
#APPLIndustrieel
0 b) Ontwerpen
4
Opdracht 1 was:
A.
Moeilijk
Deze voorbeeld resultaten zullen op 0 gezet worden
zodra een sessie en diavoorstelling gestart zijn.
33,3%
Voel u vrij om ondertussen de layout van de
resultaten te veranderen (bv. de kleur)
B.
Redelijk goed te
doen
C.
Makkelijk
66,7%
100,0%
Gesloten
Internet Ga naar shakeq.com en log in met APPL
Deze presentatie is geladen zonder de Shakespeak plug-in.
SMS
Stuur naar 06 4250 0030: Antw <spatie> uw keuze (bv. Antw b)
Plug-in
gratis
downloaden?
naar uw
http://shakespeak.com/en/free-download/
Applicatiebouw,
1-5-2014
Twitter
Tweet
#APPL
<spatie> 0 Ga
<spatie>
keuze (bv.
#APPLIndustrieel
0 b) Ontwerpen
5
SOFTWARE ONTWERPEN
Opdrachtgever:
"Maak een applicatie die een of
meer figuren kan tekenen in een
door de gebruiker te bepalen
kleur"
• Gebruikersinterface
ontwerpen: schetsen
(Ergonomie)
• Specificaties opstellen
(DPU1)
Applicatiebouw, Industrieel Ontwerpen
1-5-2014
6
DPU1 : SPECIFICATIES
 Opsomming van de data (wat het programma
weet/onthoudt)
 Invoer/uitvoer: Wat wordt er ingevoerd/doet de gebruiker? Wat wordt
er uitgevoerd?
 Beschrijving algoritmes (hoe het handelt) en/of
(vormen van) gedrag
 Rekenen/bewerken: Wat gebeurd er met de invoer?
 Resultaat/opslag/communicatie: Moet er iets gebeuren? Hoe wordt het
resultaat gepresenteerd/afgeleverd?
 Opzet module indeling: de hoofdonderdelen en
verbanden daar tussen
Applicatiebouw, Industrieel Ontwerpen
1-5-2014
7
OBJECTEN: SCHRIJF EEN RECEPT
Analyseer de
'wereld' om
je heen
 Klassen (eigenschappen en methoden)
specificeren in een klassendiagram (UML)
{hst 6 boek}
 Methoden uitwerken in pseudo-code
 In “gewone taal” instructies opschrijven, stapsgewijs detailleren
Applicatiebouw, Industrieel Ontwerpen
1-5-2014
8
KLASSENDIAGRAM TEKENEN
 Bijv. online, draw.io
Data (wat het
programma
weet/onthoudt)
Beschrijving
algoritmes (hoe het
handelt) en/of
(vormen van) gedrag
class Hond {
// eigenschappen:
int haarlengte;
int leeftijd;
// methoden:
loop(int snelheid);
blaf(int volume);
zit();
}
DPU1
Applicatiebouw, Industrieel Ontwerpen
1-5-2014
9
PSEUDO CODE: METHODEN UITWERKEN
PSEUDO
DPU2
// methode die het lopen regelt:
loop(int snelheid) {
als de hond zit, sta dan op (motoren achterbenen aansturen)
stel vermogen naar motoren in afhankelijk van snelheid
beweeg motoren voorwaarts
}
CODE:
// methode die het lopen regelt:
loop(int snelheid) {
// als de hond zit, sta dan op (motoren achterbenen aansturen)
if (sitting) Motor.A.rotate(60);
// stel vermogen naar motoren in afhankelijk van snelheid
Motor.A.power(snelheid);
Motor.C.power(snelheid);
// beweeg motoren voorwaarts
Motor.A.forward();
Motor.C.forward();
}
Pseudocode komt
terug als
commentaar
Applicatiebouw, Industrieel Ontwerpen
10
THEORIE: GEBRUIKERSINTERFACES
KNOPPEN, TEKSTVAKKEN ENZ.
Hoofdstuk 2.8 en 2.9 boek
Applicatiebouw, Industrieel Ontwerpen
1-5-2014
11
THEORIE: GEBRUIKERSINTERFACES
KNOPPEN, TEKSTVAKKEN ENZ.
Label
Button
TextField
 Invoer: tekstveld is editable (=true)
 Uitvoer (resultaat): tekstveld is niet editable
Hoofdstuk 2.8 en 2.9 boek
Applicatiebouw, Industrieel Ontwerpen
1-5-2014
12
GEBEURTENISSEN: EVENT-AFHANDELING
HOOFDSTUK 2.8 EN 2.9 BOEK
dubbelklik
 Wat is een event?
 Muisklik
 Druk op knop
 Toetsaanslag
 Wat gebeurd er?
 Speciale methode gaat event
‘afhandelen’: Event Handler
btnTeken.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
// hier code EventHandler
}
});
Applicatiebouw, Industrieel Ontwerpen
1-5-2014
13
IN- EN UITVOER MET TEKSTVELDEN
HOOFDSTUK 2.8 EN 2.9 BOEK
JTextField invoerVeld;
Invoer uit
tekstvak lezen:
getText() methode
String invoer = invoerVeld.getText();
JTextField uitvoerVeld;
Uitvoer naar
tekstvak:
setText() methode
double getal = 26.0;
uitvoerVeld.setText(""+getal);
Applicatiebouw, Industrieel Ontwerpen
1-5-2014
14
THEORIE
HOOFDSTUK 3 EN 4 TM. 4.2 BOEK
 Variabelen
 Expressies
 Type conversie
 Mathematische functies
 Math class
 Niet in boek…
Applicatiebouw, Industrieel Ontwerpen
1-5-2014
15
VARIABELEN
DECLAREREN, TOEKENNEN
int x, y;
Variabele declaratie
x = 20;
x
y = 25;
x = y * 2;
50
20
y
25
Variabele: geheugenplaats
met een naam
Variabele toekenning of assignment
Applicatiebouw, Industrieel Ontwerpen
1-5-2014
16
DE TYPEN INT EN DOUBLE
int i;
double d;
i = 3;
d = 3.141592653;
i = 10;
d = 10;
i = i / 3;
d = d / 3;
int: geheel getal
i
10
3
d
3.141592653
3.333333333
10.0
double: double precision
floating point getal
Applicatiebouw, Industrieel Ontwerpen
1-5-2014
17
EXPRESSIES
 Expressie = Stukje programma met een waarde
 Gebruik:
 Rechterkant van een assignment
x3 = x2+40 ;
 Parameterwaarde van een methode aanroep
g.fillRect(0, y1+yTop, x1, y2-(y1+yTop) ) ;
Applicatiebouw, Industrieel Ontwerpen
1-5-2014
18
OPBOUW VAN EXPRESSIES
 constante
5
 variabele
hoogte
 ... operator ...
x+y +1
 ( ... )
x - (y + 1)
expressie expressie
Applicatiebouw, Industrieel Ontwerpen
1-5-2014
19
OPERATOREN
+-*/%
+ optellen
Bij deling van int-waarden:
cijfers achter de komma
- aftrekken
worden afgekapt!
* vermenigvuldigen
/ delen
% rest bij deling (modulo)
14 / 3 geeft 4
14 % 3 geeft 2
modulo operator
want 14 is 4*3 + 2
Applicatiebouw, Industrieel Ontwerpen
1-5-2014
20
PRIORITEIT VAN OPERATOREN
 Vermenigvuldigen en delen
gaat voor optellen en
1+2*3
aftrekken
 Bij gelijke prioriteit: van links
naar rechts
10 - 5 - 2
 Wil je ’t anders:
(1+2) * 3
gebruik haakjes
geeft 7
geeft 3
geeft 9
Applicatiebouw, Industrieel Ontwerpen
1-5-2014
21
TYPE CONVERSIE
double d;
int i, n;
d = 5.0;
i = 5.0;
d = 5;
i = 5;
d = n;
i = n;
d = i;
i = d;
…van klein naar
groot mag altijd,
van groot naar
klein alleen met
een typecast
i = (int) d;
typecast : expliciete
conversie van double
naar int
Applicatiebouw, Industrieel Ontwerpen
1-5-2014
22
TEKST UITVOER VAN VARIABELEN
Print een regel naar de
standaard uitvoer
System.out.println("Hallo wereld!");
Strings mag je aan
elkaar plakken met
+ operator…
System.out.println("gewicht=" + gewicht );
Verklarende tekst
Waarde van de variabele
Applicatiebouw, Industrieel Ontwerpen
1-5-2014
23
CONVERSIE VAN STRINGS
PARAGRAAF 3.9 EN 4.2.6 BOEK
String str;
int n;
str = ”Hallo”;
n = 5;
str = ”5”;
n = str;
…er bestaat geen
cast voor string
naar int of double
str = String.valueOf(n);
str = n;
n = Integer.parseInt(str);
double d = Double.parseDouble(str);
parse
voor expliciete
conversie
van string
naar int of double
Applicatiebouw, Industrieel Ontwerpen
1-5-2014
24
MATHEMATISCHE FUNCTIES
NIET IN BOEK!
 Verzameling mathematische functies:
Math
 O.a. sinus (sin), cosinus (cos), wortel
(sqrt), machtsverheffen (pow)
 Resultaat meestal double
double s;
s = Math.sin(0.78);
Applicatiebouw, Industrieel Ontwerpen
1-5-2014
25
MATH: INGEBOUWDE DOCUMENTATIE
 Nadat je de punt achter Math getypt hebt, verschijnt de ingebouwde hulp
met documentatie:
Applicatiebouw, Industrieel Ontwerpen
1-5-2014
26
MATH: AFRONDEN VAN GETALLEN
double mijnVariable = Math.PI;
System.out.println("mijnVariable=" + mijnVariable );
Wat is de uitvoer?
mijnVariable=3.141592653589793
double mijnVariable = Math.PI;
mijnVariable = Math.round(mijnVariable);
System.out.println("mijnVariable=" + mijnVariable );
Wat is de uitvoer?
mijnVariable=3.0
Op 2 getallen achter komma
afronden? Paragraaf 4.6 boek
Applicatiebouw, Industrieel Ontwerpen
1-5-2014
27
DECLARATIE VARIABELE EN TOEKENNING
 Berekening oppervlakte 3D-object: bol
 Formule van Wiki-pagina:
4πr2
 Java variant formule: 4 * Math.PI * Math.pow(r,2)
 Complete versie met variabele om waarde resultaat in op te slaan:
double oppervlak = 4 * Math.PI * Math.pow(r,2);
declaratie
toekenning
Applicatiebouw, Industrieel Ontwerpen
1-5-2014
28
AAN DE SLAG
OPDRACHT 2
 Opdracht 2:
“Maak een applicatie die
een of meer figuren kan
tekenen in een door de
gebruiker te bepalen
kleur”
Opdrachten en presentaties:
vanslooten.com/applicatiebouw
Applicatiebouw, Industrieel Ontwerpen
1-5-2014
29
Hoe ver ben je met Opdracht 2?
A.
Is af
B.
Bijna klaar
C.
Moet nog veel doen
D.
Ik maak deze opdracht niet
De vraag gaat open zodra u een
sessie en diavoorstelling start.
Stemmen: 0
Gesloten
Internet Ga naar shakeq.com en log in met APPL
Deze presentatie is geladen zonder de Shakespeak plug-in.
SMS
Stuur naar 06 4250 0030: Antw <spatie> uw keuze (bv. Antw b)
Plug-in
gratis
downloaden?
naar uw
http://shakespeak.com/en/free-download/
Applicatiebouw,
1-5-2014
Twitter
Tweet
#APPL
<spatie> 0 Ga
<spatie>
keuze (bv.
#APPLIndustrieel
0 b) Ontwerpen
30
Hoe ver ben je met Opdracht 2?
A.
Is af
B.
Bijna klaar
C.
Moet nog veel
doen
D.
Ik maak deze
opdracht niet
Deze voorbeeld resultaten zullen op 0 gezet worden
zodra
een sessie en diavoorstelling gestart zijn.
25,0%
Voel u vrij om ondertussen de layout van de
resultaten te veranderen (bv. de kleur)
50,0%
75,0%
100,0%
Gesloten
Internet Ga naar shakeq.com en log in met APPL
Deze presentatie is geladen zonder de Shakespeak plug-in.
SMS
Stuur naar 06 4250 0030: Antw <spatie> uw keuze (bv. Antw b)
Plug-in
gratis
downloaden?
naar uw
http://shakespeak.com/en/free-download/
Applicatiebouw,
1-5-2014
Twitter
Tweet
#APPL
<spatie> 0 Ga
<spatie>
keuze (bv.
#APPLIndustrieel
0 b) Ontwerpen
31
Heb je vragen of opmerkingen over deze
les?
1. Dit is een voorbeeld bericht met het max. aantal tekens. Pas dit aan naar de
gewenste grootte, lettertype etc. Dit wordt onthouden. Start dan uw sessie.
2. Dit is een voorbeeld bericht met het max. aantal tekens. Pas dit aan naar de
gewenste grootte, lettertype etc. Dit wordt onthouden. Start dan uw sessie.
3. Dit is een voorbeeld bericht met het max. aantal tekens. Pas dit aan naar de
gewenste grootte, lettertype etc. Dit wordt onthouden. Start dan uw sessie.
Berichten: 0
Internet Ga naar shakeq.com en log in met APPL
Deze presentatie is geladen zonder de Shakespeak plug-in.
SMS
Stuur naar 06 4250 0030: Antw <spatie> uw bericht
Plug-in
gratis#APPL
downloaden?
naar http://shakespeak.com/en/free-download/
Applicatiebouw, Industrieel Ontwerpen
1-5-2014
Twitter
Verwerk
en #Q in Ga
uw tweet
32