APPLICATIEBOUW 2E COLLEGE: ONTWERPEN, GEBRUIKERSINTERFACES, VARIABELEN & EXPRESSIES. Onderdeel van SmartProducts

Transcriptie

1 APPLICATIEBOUW 2E COLLEGE: ONTWERPEN, GEBRUIKERSINTERFACES, VARIABELEN & EXPRESSIES Onderdeel van SmartProducts

2 INHOUD COLLEGE 2 module4.io.utwente.nl/applicatiebouw Software ontwerpen Gebruikersinterfaces, in- en uitvoer met tekstvelden Variabelen, expressies, type conversie {3-4.2} Math class Opdracht 2 We gebruiken laptop of smartphone bij deze presentatie, hou deze gereed Applicatiebouw, Industrieel Ontwerpen

3 We gaan stemmen Internet 1 2 SMS 1 Deze presentatie is geladen zonder de Shakespeak Add-In. Add-In gratis downloaden? Ga naar 2 Twitter 1 2 Stemmen is anoniem Applicatiebouw, Industrieel Ontwerpen

4 Opdracht 1 was: A. Moeilijk B. Redelijk goed te doen C. Makkelijk Oplossing instabiele Window Builder in bijlage Opdracht 2 De vraag gaat open zodra u een sessie en diavoorstelling start. Stemmen: 47 Gesloten Internet SMS Twitter Dit tekstvak wordt gebruikt om de verschillende stemmethodes uit te leggen. Deze presentatie is geladen zonder de Shakespeak Add-In. De juiste uitleg wordt hier ingevuld nadat u een sessie heeft gestart. Het is mogelijk om dit tekstvak aan te passen en te verplaatsen. Add-In gratis downloaden? Ga naar Applicatiebouw, Industrieel Ontwerpen

5 Opdracht 1 was: A. Moeilijk 0,0% B. Redelijk goed te doen 31,9% C. Makkelijk 68,1% Internet SMS Twitter Dit tekstvak wordt gebruikt om de verschillende stemmethodes uit te leggen. Deze presentatie is geladen zonder de Shakespeak Add-In. De juiste uitleg wordt hier ingevuld nadat u een sessie heeft gestart. Het is mogelijk om dit tekstvak aan te passen en te verplaatsen. Gesloten Add-In gratis downloaden? Ga naar Applicatiebouw, Industrieel Ontwerpen

6 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

7 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

8 OBJECTEN: SCHRIJF EEN RECEPT Class (eigenschappen en methoden) specificeren in een classdiagram (UML) {hst 6 boek} Analyseer de 'wereld' om je heen Methoden uitwerken in pseudo-code In gewone taal instructies opschrijven, stapsgewijs detailleren Applicatiebouw, Industrieel Ontwerpen

9 CLASSDIAGRAM TEKENEN Bijv. online, draw.io Data (wat het programma weet/onthoudt) class Hond { // eigenschappen: int haarlengte; int leeftijd; Beschrijving algoritmes (hoe het handelt) en/of (vormen van) gedrag } // methoden: loop(int snelheid); blaf(int volume); zit(); DPU1 Applicatiebouw, Industrieel Ontwerpen

10 PSEUDO PSEUDO CODE: METHODEN UITWERKEN 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 } // methode die het lopen regelt: public void 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(); } CODE: Pseudocode komt terug als commentaar Applicatiebouw, Industrieel Ontwerpen 10

11 THEORIE: GEBRUIKERSINTERFACES KNOPPEN, TEKSTVAKKEN ENZ. Hoofdstuk 2.8 en 2.9 boek Applicatiebouw, Industrieel Ontwerpen

12 THEORIE: GEBRUIKERSINTERFACES KNOPPEN, TEKSTVAKKEN ENZ. Label TextField Button Invoer: tekstveld is editable (=true) Uitvoer (resultaat): tekstveld is niet editable Hoofdstuk 2.8 en 2.9 boek Applicatiebouw, Industrieel Ontwerpen

13 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

14 IN- EN UITVOER MET TEKSTVELDEN HOOFDSTUK 2.8 EN 2.9 BOEK JTextField invoerveld; Invoer uit tekstvak lezen: gettext() methode String invoer = invoerveld.gettext(); Type voor tekst: String JTextField uitvoerveld; Uitvoer naar tekstvak: settext() methode double getal = 26.0; uitvoerveld.settext(""+getal); Applicatiebouw, Industrieel Ontwerpen

15 THEORIE HOOFDSTUK 3 EN 4 TM. 4.2 BOEK Variabelen Expressies Type conversie Mathematische functies Math class Niet in boek Applicatiebouw, Industrieel Ontwerpen

16 VARIABELEN DECLAREREN, TOEKENNEN int x, y; Variabele declaratie x = 20; y = 25; x = y * 2; Variabele: geheugenplaats met een naam x y 25 Variabele toekenning of assignment Applicatiebouw, Industrieel Ontwerpen

17 DE TYPEN INT EN DOUBLE int i; double d; int: geheel getal i = 3; d = ; i = 10; d = 10; i d i = i / 3; d = d / 3; double: double precision floating point getal Applicatiebouw, Industrieel Ontwerpen

18 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

19 OPBOUW VAN EXPRESSIES constante variabele 5 hoogte... operator... x + y + 1 (... ) x - (y + 1) expressie expressie Applicatiebouw, Industrieel Ontwerpen

20 OPERATOREN + - * / % + optellen - aftrekken * vermenigvuldigen / delen % rest bij deling (modulo) modulo operator Bij deling van int-waarden: cijfers achter de komma worden afgekapt! 14 / 3 geeft 4 want 14 is 4* % 3 geeft 2 Applicatiebouw, Industrieel Ontwerpen

21 PRIORITEIT VAN OPERATOREN Vermenigvuldigen en delen gaat voor optellen en aftrekken Bij gelijke prioriteit: van links naar rechts Wil je t anders: gebruik haakjes * 3 geeft geeft 3 (1+2) * 3 geeft 9 Applicatiebouw, Industrieel Ontwerpen

22 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; i = (int) d; van klein naar groot mag altijd, van groot naar klein alleen met een typecast typecast : expliciete conversie van double naar int Applicatiebouw, Industrieel Ontwerpen

23 TEKST UITVOER VAN VARIABELEN Print een regel naar de standaard uitvoer System.out.println("Hallo wereld!"); Tekst en variabelen mag je aan elkaar plakken met + operator System.out.println("gewicht=" + gewicht ); Verklarende tekst Waarde van de variabele Applicatiebouw, Industrieel Ontwerpen

24 CONVERSIE VAN STRINGS PARAGRAAF 3.9 EN BOEK String str; int n; str = Hallo ; n = 5; str = 5 ; n = str; str = String.valueOf(n); str = n; n = Integer.parseInt(str); double d = Double.parseDouble(str); er bestaat geen cast voor string naar int of double parse voor expliciete conversie van string naar int of double Applicatiebouw, Industrieel Ontwerpen

25 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

26 MATH: INGEBOUWDE DOCUMENTATIE Nadat je de punt achter Math getypt hebt, verschijnt de ingebouwde hulp met documentatie: Applicatiebouw, Industrieel Ontwerpen

27 MATH: AFRONDEN VAN GETALLEN double mijnvariable = Math.PI; System.out.println("mijnVariable=" + mijnvariable ); Wat is de uitvoer? mijnvariable= 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

28 DECLARATIE VARIABELE EN TOEKENNING Berekening oppervlakte 3D-object: bol Formule van Wiki-pagina: 4πr 2 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

29 AAN DE SLAG OPDRACHT 2 module4.io.utwente.nl/applicatiebouw Opdracht 2: Maak een applicatie die een of meer figuren kan tekenen in een door de gebruiker te bepalen kleur Applicatiebouw, Industrieel 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 De vraag gaat open zodra u een sessie en diavoorstelling start. Stemmen: 48 Gesloten Internet SMS Twitter Dit tekstvak wordt gebruikt om de verschillende stemmethodes uit te leggen. Deze presentatie is geladen zonder de Shakespeak Add-In. De juiste uitleg wordt hier ingevuld nadat u een sessie heeft gestart. Het is mogelijk om dit tekstvak aan te passen en te verplaatsen. Add-In gratis downloaden? Ga naar Applicatiebouw, Industrieel Ontwerpen

31 Hoe ver ben je met Opdracht 2? A. Is af 60,4% B. Bijna klaar 31,3% C. D. Moet nog veel doen Ik maak deze opdracht niet 0,0% 8,3% Internet SMS Twitter Dit tekstvak wordt gebruikt om de verschillende stemmethodes uit te leggen. Deze presentatie is geladen zonder de Shakespeak Add-In. De juiste uitleg wordt hier ingevuld nadat u een sessie heeft gestart. Het is mogelijk om dit tekstvak aan te passen en te verplaatsen. Gesloten Add-In gratis downloaden? Ga naar Applicatiebouw, Industrieel Ontwerpen

32 Welke variabele declaratie is geschikt voor het opslaan van de uitkomst van onderstaande expressie? Math.PI * diameter A. int omtrek; B. String omtrek; C. double omtrek; D. ik weet het niet De vraag gaat open zodra u een sessie en diavoorstelling start. Stemmen: 45 Gesloten Internet SMS Twitter Dit tekstvak wordt gebruikt om de verschillende stemmethodes uit te leggen. Deze presentatie is geladen zonder de Shakespeak Add-In. De juiste uitleg wordt hier ingevuld nadat u een sessie heeft gestart. Het is mogelijk om dit tekstvak aan te passen en te verplaatsen. Add-In gratis downloaden? Ga naar Applicatiebouw, Industrieel Ontwerpen

33 Welke variabele declaratie is geschikt voor het opslaan van de uitkomst van onderstaande expressie? Math.PI * diameter A. int omtrek; 8,9% B. String omtrek; 13,3% C. double omtrek; 73,3% D. ik weet het niet 4,4% Gesloten Applicatiebouw, Industrieel Ontwerpen

34 Stel iemand typt in bijgaand tekstvak het getal 7. Wat is de uitvoer van het programma? A. 3.5 B. resultaat=3.0 C. resultaat=3 D. resultaat=3.5 String waarde = textfield.gettext(); double resultaat = Integer.parseInt(waarde)/2; System.out.println("resultaat=" + resultaat ); De vraag gaat open zodra u een sessie en diavoorstelling start. Stemmen: 41 Gesloten Internet SMS Twitter Dit tekstvak wordt gebruikt om de verschillende stemmethodes uit te leggen. Deze presentatie is geladen zonder de Shakespeak Add-In. De juiste uitleg wordt hier ingevuld nadat u een sessie heeft gestart. Het is mogelijk om dit tekstvak aan te passen en te verplaatsen. Add-In gratis downloaden? Ga naar Applicatiebouw, Industrieel Ontwerpen

35 Stel iemand typt in bijgaand tekstvak het getal 7. Wat is de uitvoer van het programma? A ,4% B. resultaat=3.0 26,8% C. resultaat=3 36,6% D. resultaat=3.5 34,1% Gesloten Applicatiebouw, Industrieel Ontwerpen