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 Software ontwerpen Tekenen, lokale variabelen en attributen, type conversie {3-4.2} Math class Opdracht 2 module4.io.utwente.nl/applicatiebouw Applicatiebouw, Industrieel Ontwerpen

3 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

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

5 APPLICATIEBOUW BINNEN HET PROJECT TRAJECT VAN ONTWERP NAAR IMPLEMENTATIE (BOUW PROTOTYPE) Systeem architectuur O Beschrijving gedrag O Ontwerp UI ER+VM Ontwerp EL+VM Applicatiebouw Gebruikstest ER Test EL Functionele test O Ontwerp Implementatie (programmeren) Debuggen Test O = Ontwerpen (Project Colleges) ER = Ergonomie EL = Elektronica VM = Vormmethodiek Opsomming data Beschrijving algoritmes Pseudocode Module indeling Opzet: Software test Validatie Documentatie: Class diagram Flowchart Applicatiebouw, Industrieel Ontwerpen

6 DPU1 : SOFTWARE 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? DPU 1 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

7 DPU1: SOFTWARE SPECIFICATIES Deadlines DPU s aftekenen DPU 1: 13 mei DPU 2: 27 mei DPU 3: 17 juni DPU 1 (Nog) niet programmeren Maar specificaties schrijven Presenteren aan docent (op papier), max 2 A4 tekst + schetsen/diagrammen, feedback verwerken in logboek en specificaties inleveren na gesprek op BlackBoard: onder Applicatiebouw > DPU's/opdrachten inleveren Voorbeelden op site: colleges/dpu_voorbeelden Contactpersonen groepen ontvangen 1 week voor datum een uitnodiging voor reserveren tijdstip. Let op: slechts 1x per groep inschrijven Applicatiebouw, Industrieel Ontwerpen

8 TOP-DOWN ONTWERP GROF-MIDDEN-FIJN DPU 1 Van grof (overzicht, omgeving, gebruikers) naar fijn (details, objecten, eigenschappen, acties) Lanceerding Kijk in lanceer-richting (veiligheid) Lanceren Gebruiker(s) - vaststellen positie gebruiker - communicatie met gebruiker Applicatiebouw, Industrieel Ontwerpen

9 TOP-DOWN ONTWERP GROF-MIDDEN-FIJN DPU 1 Gebruiker Algoritmes/gedrag? Detectie positie gebruiker Bewegen motor handle (lanceren) Feedback geven Communicatie gebruiker: ontvangen opdrachten (aan/uit/richt/lanceer/ ) In/uitvoer? Positie gebruiker (x,y?) Opdracht Feedback/status (geluid/licht/scherm?) Bedieningspaneel/remote (LCD?) display Knoppen: Aan/uit/lanceer, richten Applicatiebouw, Industrieel Ontwerpen

10 Type van de actie TOP-DOWN ONTWERP GROF-MIDDEN-FIJN Communicatie: ontvangen opdrachten EventHandler: inkomende communicatie Vaststellen type (setup/instelling/opdracht) Opdracht: richten Sla opdracht op in lijst Actie (methode?) Eigenschap (ArrayList?) DPU 1 Eigenschap (integer?) DPU 2: Eigenschappen en methodes kunnen we omzetten naar classes. Methodes kunnen we uitwerken mbv. pseudocode. Applicatiebouw, Industrieel Ontwerpen

11 CLASSDIAGRAM TEKENEN Bijv. online, met draw.io Data (wat het programma weet/onthoudt) DPU 2 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(); Specs uit DPU1 omzetten naar class-ontwerp: class-diagram + class als pseudo code Applicatiebouw, Industrieel Ontwerpen

12 PSEUDO PSEUDO CODE: METHODEN UITWERKEN DPU 2 // 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 12

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

14 GEBEURTENISSEN: EVENT-AFHANDELING HOOFDSTUK 2.8 EN 2.9 BOEK Springt naar code EventHandler Dubbelklik (in Eclipse) 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

15 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

16 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

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

18 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

19 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

20 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

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

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

23 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

24 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

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

26 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

27 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

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

29 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

30 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

31 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

32 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 # Personen: 0 Gesloten Internet Dit tekstvak wordt gebruikt om de verschillende stemmethodes uit te leggen. Deze presentatie is geladen zonder de Shakespeak Add-In. SMS De juiste uitleg wordt hier ingevuld nadat u een sessie heeft gestart. Twitter Add-In Het gratis is mogelijk downloaden? om dit tekstvak Ga naar aan te passen en te verplaatsen. Applicatiebouw, Industrieel Ontwerpen

33 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% Gesloten Internet Dit tekstvak wordt gebruikt om de verschillende stemmethodes uit te leggen. Deze presentatie is geladen zonder de Shakespeak Add-In. SMS De juiste uitleg wordt hier ingevuld nadat u een sessie heeft gestart. Twitter Add-In Het gratis is mogelijk downloaden? om dit tekstvak Ga naar aan te passen en te verplaatsen. Applicatiebouw, Industrieel Ontwerpen

34 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: 0 Gesloten Internet Dit tekstvak wordt gebruikt om de verschillende stemmethodes uit te leggen. Deze presentatie is geladen zonder de Shakespeak Add-In. SMS De juiste uitleg wordt hier ingevuld nadat u een sessie heeft gestart. Twitter Add-In Het gratis is mogelijk downloaden? om dit tekstvak Ga naar aan te passen en te verplaatsen. Applicatiebouw, Industrieel Ontwerpen

35 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

36 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: 0 Gesloten Internet Dit tekstvak wordt gebruikt om de verschillende stemmethodes uit te leggen. Deze presentatie is geladen zonder de Shakespeak Add-In. SMS De juiste uitleg wordt hier ingevuld nadat u een sessie heeft gestart. Twitter Add-In Het gratis is mogelijk downloaden? om dit tekstvak Ga naar aan te passen en te verplaatsen. Applicatiebouw, Industrieel Ontwerpen

37 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% String waarde = textfield.gettext(); double resultaat = Integer.parseInt(waarde)/2; System.out.println("resultaat=" + resultaat ); Gesloten Applicatiebouw, Industrieel Ontwerpen