Bouw van een interactief prototype van een Userinterface met Eclipse/Java

Transcriptie

1 Bouw van een interactief prototype van een Userinterface met Eclipse/Java Eclipse is een ontwikkelplatform (IDE) voor het maken van oa. applicaties en websites. Wij hebben als voorbeeld een Nederlandstalige tutorial gemaakt waarin we een eenvoudig prototype van een userinterface van een pinautomaat programmeren in Java. De pinautomaat zou er bijv. uit kunnen zien als onderstaande afbeelding. De focus van deze tutorial is het realiseren van de interactie, en niet op vormgeving of ergonomie. Voor het volgen van deze tutorial is enige kennis van Java en Eclipse aan te bevelen. Een demoversie kan je hier downloaden en uitproberen. 1

2 De handleiding bestaat uit negen stappen: Bouw van een interactief prototype van een Userinterface met Eclipse/Java... 1 Stap 1. Maak het hoofd-display... 3 Stap 2. Maak de pas en de sleuf voor de pas en realiseer invoer van de pas in de sleuf Stap 3. Invoer PIN code Stap 4. Controle pincode Stap 5. Keuze bedrag Stap 6. Uitvoer van geld Stap 7. Stoppen na uitgifte geld en afbreken mogelijk maken Stap 8. Verkeerde interacties voorkomen Stap 9. Vormgeving interface Stap 10 Publiceren/delen van prototype Start Maak een nieuw Java Project via File > New > Java Project. Noem het project "Geldautomaat". Maak vervolgens een nieuw JFrame via File > New > Other, WindowBuilder > Swing Designer > JFrame. Noem deze ook "Geldautomaat". Vergroot het JFrame tot ongeveer 570 x 430 door aan de buitenste randen te trekken. Stel vervolgens de Layout van het contentpane in op Absolute Layout (klik het aan met rechter muisknop en kies Set Layout). We kunnen nu de Userinterface gaan opbouwen. 2

3 Stap 1. Maak het hoofd-display Het hoofd-display wordt een JPanel met daarin een JTextPane met een welkomsttekst en de naam "maintext". We tekenen eerst het JPanel: klik (met de linker muisknop) onder Palette op JPanel. Klik vervolgens in het tekengebied. Plaats het JPanel bovenaan in het midden, zodat je genoeg ruimte er onder overhoudt voor het cijfer-panel etc. Door te trekken aan de puntjes kan je de grootte instellen, zie hier onder. Geef 'm ongeveer dezelfde afmetingen als onderstaande voorbeeld: in het vlakje ernaast zie je de afmetingen (300 x 175). Stel nu de Layout van het panel in op Absolute Layout en stel de achtergrondkleur in op een lichte tint, bijv. lichtblauw. Instellen van de achtergrondkleur (background) en Layout gaat via Properties, zie hiernaast. Je kan evt. ook een andere rand instellen, bij border. We gebruiken hier een LineBorder van 2 pixels dik en afgeronde hoeken. 3

4 Plaats vervolgens een JTextPane in het midden van het panel. Stel de tekst in: "Welkom bij IO Bank, voer uw pas in aub." en verander de variabele naam van het JTextPane in "maintext". Geef het JTextPane dezelfde achtergrondkleur als het panel en geeft het een wat groter font. Wij gebruiken hier een Bold 14 punts Arial font. Verwijder het vinkje bij editable. Eea. ziet er nu zo uit: Sla je werk op door op Save te klikken. Het is verstandig dit regelmatig te doen. 4

5 Stap 2. Maak de pas en de sleuf voor de pas en realiseer invoer van de pas in de sleuf. We voegen deze componenten toe aan het contentpane (zorg dus dat deze is geselecteerd). We tekenen de pas en de sleuf, dit zijn beide JPanel's. Plaats de pas helemaal aan de linker kant. Stel de breedte in op 60, pas de achtergrondkleur aan (Fill Color) en verander de tekst in "Pas". Plaats de sleuf rechts onder het hoofd-display, maak deze 20 pixels breder dan de pas, dus 90. Geef de panels de naam "pas" en "sleuf". De sleuf krijgt een wat dikkere rand (border): een LineBorder met afgeronde hoeken van 4 pixels breed. Omdat we de pas willen gaan animeren, maken we voor de pas een aparte class waaraan we een methode kunnen toevoegen die de pas laat bewegen naar de sleuf en in de sleuf laat verdwijnen. Voeg een nieuwe class toe aan het project (File > New > Class). Geef de class de naam "Pas" (met een hoofdletter P) en type bij Superclass "javax.swing.jpanel" (de Pas wordt een afgeleide class van JPanel). Druk op Finish om de class toe te voegen. Omdat we de pas gaan bewegen (van positie laten veranderen) en ook van grootte laten veranderen (we maken de pas steeds kleiner om de illusie te wekken dat deze in de sleuf verdwijnt), moet de class de positie en de grootte kunnen onthouden. Dit doen we met 4 variabelen: x, y, width en height. Dit worden 4 integers (type int), die we toevoegen als class-variabelen: Omdat de pas naar een doel (de sleuf) heen gaat bewegen, moeten we de doelpositie ook kunnen vastleggen. Hiervoor voegen we de variabelen targetx en targety toe: 5

6 Om een animatie te realiseren in Java kunnen we een object (in dit geval de pas) met een Timer steeds op een andere plek tekenen. We moeten dan een Timer toevoegen aan de class, en zorgen dat deze bij elke kloktik van de timer de pas op een andere positie tekent. Ook moeten we vanuit de Userinterface de animatie kunnen laten starten. We maken voor beide acties een methode. De methode die wordt aangeroepen bij elke kloktik noemen we 'update' (we updaten elke kloktik de pas) en de methode die de animatie start noemen we 'movetotarget', want we gaan de pas naar een doel (de sleuf) toe bewegen. Hieronder een opzet voor de twee methodes, met ook al pseudo-code toegevoegd als commentaar: private void update() { // bepaal een nieuwe positie // teken de pas op de nieuwe positie // als de target-positie is bereikt: stop timer (stop bewegen) } public void movetotarget(int tx, int ty) { // leg target positie vast // leg uitgangspositie vast (de positie waarop de pas oorspronkelijk getekend is) // leg afmetingen vast // start de Timer, zodat de klok begint met tikken: } Je kan bovenstaande code met copy-paste kopieeren in de class Pas. We beginnen met het verder uitwerken van de movetotarget-methode. Deze heeft al twee parameters gekregen, de tx en ty, dit is de positie van het target (de plek waarheen we gaan bewegen). Het vastleggen van de target positie is een eenvoudige toekenning van de class-variabelen die we daarvoor al gemaakt hadden: targetx = tx; targety = ty; Het vastleggen van de uitgangspositie en de afmetingen kunnen we doen door het object te vragen wat z'n huidige waarden zijn. Omdat de class Pas is afgeleid van JPanel, die weer een standaard Userinterface-component is, kunnen we de daarvoor al aanwezige methoden gebruiken om positie en afmetingen op te vragen. Dit zijn de methoden getx() en gety() voor de positie, en getwidth() en getheight() voor de afmetingen. De toekenning voor de x wordt dus: x = getx(). De rest (y, width en height) kan je dan zelf wel invullen. De laatste regel van de methode 'start de Timer...' is nog een beetje lastig, want we hebben nog geen Timer. Dit is echter een standaard class uit de Swing-bibliotheek, die Timer heet. We voegen deze toe als class-variabele (bovenaan in de class!): Timer timer = new Timer(5, (e) -> update()); 6

7 Zoals je kan zien hebben we 'm ook al gelijk geinitialiseerd (met new). De 2 parameters van de constructor zijn de tijd van 1 kloktik in milliseconden, hier dus 5, en de methode die moet worden aangeroepen, dat is onze updatemethode. We hebben hiermee dus een Timer toegevoegd aan onze class, die elke 5ms tikt en bij elke kloktik de methode update() aanroept. We kunnen nu de laatste regel van de methode invullen, daar moet de timer gestart worden. Dat kan door de methode start() van de timer aan te roepen: Methoden van een object aanroepen: type de naam van het object, gevolgd door een punt. Als je de naam van de methode weet, begin je met typen, en zie je de methode in de lijst verschijnen: Een dubbelklik op de naam van de methode zorgt er dan voor dat deze wordt ingevoegd. De methode update() Deze methode bestond uit drie delen: // bepaal een nieuwe positie // teken de pas op de nieuwe positie // als de target-positie is bereikt: stop timer (stop bewegen) Bij bepaal een nieuwe positie moeten we ervoor zorgen dat de x en y van de pas dichterbij de target komen. Omdat de sleuf de target is, weten we dat deze een hogere x-positie heeft, en een lagere y-positie. We moeten x dus verhogen en y verlagen. Het verschil in y-positie is maar heel klein. Die van de x groter. We kiezen met deze beredenering om x met 10 te verhogen en y met 1 te verlagen: y = y - 1; x = x + 10; Je kan naar eigen inzicht variëren met deze waarden. Om vervolgens de pas op de nieuwe positie te tekenen moeten we de pas zijn nieuwe positie vertellen. Dat kan door de methode setlocation(x, y) aan te roepen en vervolgens de methode repaint(). Om te checken of de pas de sleuf heeft bereikt, kan je onderstaande if-statement gebruiken. De aanroep van de methode om de timer te stoppen is daar toegevoegd. Om nu deze class in de Userinterface te gebruiken moeten we het panel dat we daar hebben aangemaakt voor de pas nog morphen naar de zojuist gebouwde class Pas. 7

8 Let op: Bewaar voor je verder gaat alle bestanden in het project door op Save All te drukken. Klik in de Userinterface op de pas met de rechter muisknop en kies Morph > Subclass. Type vervolgens in het zoekveld "Pas", selecteer deze en druk op Ok. We gaan er nu voor zorgen dat als op de pas geklikt wordt, de animatie wordt uitgevoerd. We doen dit door een eventhandler toe te voegen aan de pas die reageert op mouse-clicks. Selecteer de pas. Klik achter Properties op het icon voor de events. Open de mouse-events door op het plusje voor mouse te klikken. Dubbelklik in het lege vak achter clicked. 8

9 In de Source code wordt nu de eventhandler toegevoegd: Voordat we hier code kunnen toevoegen moeten we eerst zorgen dat de sleuf een class-variabele wordt. (Het is nu een lokale variabele in de constructor) We hebben namelijk de positie van de sleuf nodig in de eventhandler (dit is het target van de animatie van de pas). Zoek de definitie van de sleuf op in de code, klik deze aan met de rechter muisknop en kies Refactor > Convert Local Variable to Field...: We kunnen nu in de eventhandler mouseclicked() de methode van de pas aanroepen die de animatie start. Weet je nog welke methode dat was? Nee? Geef niet, we zoeken 'm. Het was iets met 'move...' we typen dus: pas.mo...: Dubbelklik op de gevonden methode (movetotarget). Het doel van de animatie (het target) is de sleuf. Vervang dus de parameters door de positie van de sleuf, dus sleuf.getx() + 10 en sleuf.gety() Door de kleine offset van 10 komt de pas straks precies binnen de sleuf. Druk op Save All. En voer je programma uit om het te testen via de Run knop. De pas schiet waarschijnlijk de sleuf voorbij. Dat komt doordat in de update-methode van de pas het if-statement alleen maar controleert of zowel de x- als de y-waarde voorbij het target zijn. Beter zou zijn als we bij het ophogen aan het begin van de methode ook checken of het target gehaald is, en de x en y-waarden alleen ophogen als de target nog niet gehaald is. Dat kan door er twee if-statements aan toe te voegen: 9

10 Als het goed is zou nu de pas wel netjes voor de sleuf uit moeten komen. We gaan nu het tweede deel van de animatie maken, het deel waarin we de hoogte van de pas verkleinen zodat het lijkt alsof de pas in de sleuf verdwijnt. Het if-statement aan het eind van de update() methode van de pas bepaald of de pas al bij de sleuf is gearriveerd. Is dat zo, dan kunnen we in plaats van direct te stoppen ( timer.stop() ) ook nog even doorgaan: we gaan dan de height verlagen tot nul. Is de height op 0, dan kunnen we stoppen. Nog even in pseudo-code: Het verlagen van de height doen we zo: height = height - 1; Voor het aanpassen van de afmetingen kunnen we de setsize() methode gebruiken: setsize(width, height); De laatste regel wordt dan een nieuw if-statement: if (height==0) De complete code voor het laatste deel van de update() methode ziet er nu zo uit: Test het programma via de Run knop. Als het goed is verdwijnt de pas in de sleuf. 10

11 Stap 3. Invoer PIN code. TUTORIAL JAVA Nadat er op de pas geklikt is kan in het hoofd-display (maintext) de tekst voor invoer van de pincode verschijnen: "Voer uw PIN code in aub. en druk op OK.". Zoek in de Userinterface de mouseclicked()-eventhandler op en voeg na de aanroep van de methode movetotarget() van de pas de settext()-methode van maintext toe die deze tekst instelt. Voeg nu onder het hoofd-panel een nieuw panel toe waarin we de cijfertoetsen gaan opmaken. Noem dit panel btnpanel, zet de layout op GridLayout en stel het Grid in op 3 columns en 4 rows: De pincode zal worden ingevoerd met cijfertoetsen die worden aangeklikt. Voeg nu 12 JButtons toe aan het panel btnpanel: Klik nu op de button linksboven, en noem deze btn1 en stel de tekst in met "1". Klik dan de button er naast, noem deze btn2 met tekst "2" enz: 11

12 Op de onderste rij wordt de middelste button de "0" en de button rechtsonderin de "C", noem deze btnc. De button links onderin gebruiken we niet en mag je een blanco tekst geven. Eea. komt er dan zo uit te zien: Je kan evt. naar eigen inzicht de opmaak van de knoppen wijzigen. Je kan bijv. de C-knop een rode background geven. De background van een button is zichtbaar als een dunne rand. Wil je dat de gehele background zichtbaar wordt, voeg dan onderstaande code in, voor de aanroep van btnc.setbackground(). btnc.setui((buttonui) BasicButtonUI.createUI(btnC)); Voeg nu een class-variabele pincode_invoer van het type String toe aan de class Geldautomaat en maak deze leeg: We kunnen nu de knoppen voorzien van eventhandlers door er in de designer op te dubbelklikken. Doe dit voor btn1 en voeg deze code toe aan de eventhandler: Herhaal dit voor de overige cijferknoppen, met steeds de juiste waarde. Hiermee wordt de String pincode_invoer steeds verlengd met het cijfer dat hoort bij de betreffende knop. Als je steeds switchen naar de Designer en dan dubbelklikken op de button te omslachtig vindt, kan je ook alles via de code doen door steeds het stukje code van de eventhandler te kopiëren, waarbij je dan het cijfer achter btn aanpast en het cijfer in de String: 12

13 Bij btnc mag je de pincode_invoer een lege string toekennen: Er mag geen pincode ingevoerd worden als de pas nog niet is ingevoerd. Daarom kan je de pincode wissen (leeg maken) nadat de pas is ingevoerd. Voeg daarom bovenstaande regel ook nog toe aan de mouseclicked-eventhandler van de pas. Wil je dat er een sterretje in beeld komt elke keer als er op een cijfertoets wordt gedrukt? Voeg dan aan elke eventhandler van de cijferknoppen nog het volgende toe: Om te zorgen dat de sterretjes op de volgende regel van de maintext komen, moet er in de mouseclicked()- evanthandler van de pas nog een nieuwe-regel karakter '\n' worden ingevoegd: 13

14 Stap 4. Controle pincode. We voegen 8 buttons zonder tekst toe naast het hoofd-display. Zorg dat ze netjes uitgelijn worden. Je kan er eerst vier aan 1 kant maken, daarna ze alle 4 selecteren (shift-toets vasthouden) en ze dan kopiëren naar de andere kant. Ook voegen we op vergelijkbare manier voor de 2 onderste knoppen Labels "Afbreken" en "Ok" toe die op het scherm worden weergegeven: Noem de knop links onderaan BtnStop en de knop rechts onderaan BtnOk. Noem de Labels LblStop en LblOk. De namen van de overige buttons en de labels erbij stellen we later in. We zorgen ervoor dat de Labels pas zichtbaar worden als er om een pincode wordt gevraagd. Selecteer lblstop ("Afbreken"), klik bij de Properties op het advanced properties icon: Scroll helemaal naar beneden in de lijst en verwijder het vinkje bij "visible": 14

15 Doe het zelfde voor het label lblok ("Ok"). Om de labels zichtbaar te maken op het moment dat de pas is ingevoerd, kan je in de mouseclicked-eventhandler van de pas van beide labels de setvisible() methode aanroepen met als parameter true: Doe dit ook voor lblstop. Controleer of de labels onzichtbaar zijn bij starten van de Applicatie en zichtbaar worden na aanklikken van de pas. Nu kunnen we als op de Ok-knop wordt gedrukt de pincode gaan controleren. Selecteer de Ok-knop (BtnOk) en dubbelklik erop om een eventhandler aan te maken. 15

16 We gaan controleren of de waarde van de variabele pincode_invoer gelijk is aan "1234". We gebruiken hier (voor de demo) de waarde "1234" als goede waarde voor de pincode. Een String met een waarde vergelijken kan met de compareto()-methode van de String. Deze methode krijgt als parameter de string waarmee vergeleken wordt. De methode geeft een 0 terug als de String hetzelfde zijn. De aanroep van de compareto()-methode komt er dan zo uit te zien: pincode_invoer.compareto("1234") Een if-statement dat deze expressie controleert of er 0 uitkomt, zou er dan zo uit kunnen zien: De vervolg actie voor de pinautomaat als de pincode in orde is, is het vragen om een bedrag te kiezen. Dit wordt in de volgende stap behandeld. Als de ingevoerde pincode niet juist was, geven we de boodschap "PIN was incorrect. Probeer opnieuw." weer en wordt de variabele pincode_invoer weer leeg gemaakt. Roep in het else-deel van bovenstaand if-statement de settext()-methode van het label maintext aan om deze boodschap weer te geven en maak de variabele pincode_invoer leeg. Test de applicatie met zowel een goede als een verkeerde pincode voor je verder gaat. 16

17 Stap 5. Keuze bedrag. TUTORIAL JAVA Voor het mogelijk maken van het kiezen van een vast bedrag voegen we de resterende labels toe. Noem het label links boven lbl20 en geef het als tekst "20". Doe op dezelfde manier de andere 6 labels. Maak alle labels onzichtbaar (advanced properties: visible uitzetten). Noem de bijbehorende knoppen btn20, btn50 enz. Net als bij de pincode invoer maken we voor het bedrag een nieuwe class-variabele. Noem deze "bedrag", het type mag ook String zijn. Vervolgens kunnen we deze variabele in de eventhandlers van de knoppen voor de bedragen een waarde geven. Dubbelklik op de knop Btn20 om de eventhandler toe te voegen en voeg onderstaande 2 regels code toe: Herhaal dit voor de overige knoppen (Btn50...Btn200). Na het invoeren van de pincode moeten de labels van de bedragen zichtbaar worden en moet de tekst in het hoofddisplay de volgende boodschap weergeven: "Kies bedrag en druk op Ok.". Dit doen we met de settext()-methode van het maintext label. Zichtbaar maken van de labels kan als volgt: Doe dit voor de 6 labels waarmee de bedragen worden weergegeven. De code komt in de eventhandler van de Ok-knop (BtnOk), die er daarmee als volgt komt uit te zien: Het kan zijn dat je bij het gebruik van lbl20 of een van de andere labels een fout krijgt. Kijk dan even aan het eind van dit hoofdstuk (volgende bladzijde). 17

18 (Bovenstaande code bevat voor slechts 1 label de setvisible()-methode aanroep, dit moet uiteraard voor 6 labels gedaan worden). Test de applicatie. Wordt het gekozen bedrag weergegeven? Krijg je een fout bij gebruik labels in eventhandler van de Ok-knop? (ga door naar de volgende stap als je geen fouten kreeg) Dit komt dan waarschijnlijk door dat de definitie van de Ok-knop voor de definitie van de labels komt. Dan bestaat op dat moment dat label dus nog niet. Je kan dit oplossen door de complete code van de Ok-knop (BtnOk) te verplaatsen zodat deze na de labels komt. Selecteer de complete code van BtnOk: Knip deze (Cut). En plak (Paste) de code aan het eind van de constructor. 18

19 Stap 6. Uitvoer van geld. TUTORIAL JAVA Als nu op de Ok knop gedrukt wordt, hebben we een probleem, de code in de evenhandler van de Ok-knop is nog van het invoeren van de pincode. We kunnen onderscheid maken tussen deze twee fasen in het proces door te kijken naar de variabele bedrag. Heeft deze een waarde (groter dan nul), dan zitten we in de fase voor uitvoer van het geld. We gaan daarom na de fase daarvoor (invoer pin) de variabele bedrag op nul zetten. Voeg in de eventhandler van de Ok-knop aan het eind de regel toe die de variabele bedrag leeg maakt: Vervolgens kunnen we in de methode, aan het begin van het if-statement nog een if-statement toevoegen waarmee we checken of er een bedrag is gekozen: Het nieuwe stukje code is rood omkadert. Let ook op de afsluitende accolade-sluiten }! Het gekozen bedrag wordt via System.out.println in de tekstuitvoer (Console) weer gegeven. Voeg direct hierna ook nog een mededeling toe via maintext.settext(). Bijvoorbeeld "Uitgifte geld...". We nu dus direct testen of eea. werkt. We maken nu een animatie van een biljet dat uit een sleuf komt. Kopieer de sleuf van de pasinvoer en noem deze sleufuitgifte. Maak 'm iets breder. Plaats nu een nieuw JPanel in deze sleuf en zorg dat die op een bankbiljet lijkt: Geef het nieuwe JPanel de naam "biljet". Zorg dat deze op de voorgrond komt via rechter muisklik, Order > Bring to Front: 19

20 Voor het maken van de animatie gaan we de hoogte van het biljet laten animeren van 0 naar de hoogte. Hiermee lijkt het biljet uit de sleuf te 'rollen'. We kopiëren de class Pas, want daar zit al genoeg code in die we gaan gebruiken voor deze animatie. Klik in het project op Pas.java met de rechter muisknop en kies Copy: Geef de kopie de naam "Biljet" (met een hoofdletter B!): De class Biljet komt er als volgt uit te zien: 20

21 public class Biljet extends JPanel { int width, height, maxheight; private Timer timer = new Timer(5, (e) -> update()); private void update() { // verhoog de height height = height + 1; // stel afmetingen opnieuw in setsize(width, height); // teken opnieuw: repaint(); // als height maximaal is, stop dan de timer if (height==maxheight) timer.stop(); } } public void startanimatie(string bedrag) { // maak het biljet zichtbaar this.setvisible(true); // leg afmetingen vast width=getwidth(); height=0; maxheight=getheight(); // doe direct een eerste update update(); // start de Timer, zodat de klok begint met tikken: timer.start(); } Je kan deze code overnemen met Copy > Paste. Bewaar alle bestanden via Save all. Morph nu in de userinterface het JPanel biljet naar deze class Biljet. Zorg dat het biljet verborgen wordt als de pagina geladen wordt (advanced properties: visible uit). Roep in de userinterface op de juiste plek de methode startanimatie() van het panel biljet aan. Om het bedrag zichtbaar te maken op het biljet kan je de file Biljet.java openen met de Window Builder (rechter muisknop, Open With > WindowBuilder Editor). Voeg via de Designer een JLabel toe voor weergave van het bedrag en noem dit lblbedrag. Switch naar de Source code en maak van lblbedrag een class-variabele. Voeg in de methode startanimatie() een regel code toe die met settext() het lblbedrag instelt met het bedrag (is parameter van deze methode). 21

22 Stap 7. Stoppen na uitgifte geld en afbreken mogelijk maken. We laten nadat de animatie van de gelduitgifte klaar is, na een korte wachttijd de interface terugkeren naar de uitgangssituatie. We beginnen met het laatste. Maak van maintext, pas en biljet class-variabelen: zoek ze op in de code, klik aan met rechter muisknop en kies Refactor > Convert Local Variable to Field. Voeg een methode toe aan de class Geldautomaat en noem deze reset(). Hiermee gaan we alles terugzetten naar de uitgangssituatie. Voeg aan deze methode toe: Twee regels code die de variabelen pincode_invoer en bedrag leeg maken. Een regel code die het biljet weer onzichtbaar maakt, via een methode aanroep van setvisible(false). Een regel code die de pas op de oorspronkelijke plek zet en oorspronkelijke afmetingen geeft. Voor dit laatste zoek je de definitie van de pas op (in de constructor) en kan je de regel met de methode aanroep setbounds(...) kopiëren. Een regel code die de oorspronkelijke welkomsttekst weer terugzet in maintext. Roep deze methode reset() aan in de eventhandler van de Afbreken-knop (BtnStop) en test of hij werkt. Kan je na afbreken weer opnieuw beginnen? We voegen nu een Timer toe aan de class Geldautomaat, die we gaan gebruiken om als het geld is uitgegeven na 5 seconden de reset() methode aan te roepen. Voeg onderstaande definitie van de timer toe als class-variabele in de class Geldautomaat (bovenin de class): De parameters zijn 5000ms voor de tijd (is 5 seconden) en reset() is de methode die aangeroepen zal worden. Omdat we de methode maar 1x willen laten aanroepen, voegen we aan de methode reset() een aanroep van de methode stop() van de timer toe: Vervolgens roepen we de start() methode van de timer aan in de eventhandler van de Ok-knop (btnok), na de plek waar de animatie van het geld gestart wordt (methode aanroep startanimatie() van biljet). 22

23 Stap 8. Verkeerde interacties voorkomen. Zoals je misschien bij het testen hebt gemerkt kan het voorkomen dat ergens op geklikt kan worden terwijl dat (nog) niet de bedoeling is. We hebben dat al deels opgelost door te zorgen dat variabelen bij het starten een goede waarde hebben en waardes worden gecontroleerd. Het aanklikken van knoppen die eigenlijk nog niet gebruikt mogen worden kan je daar echter niet mee voorkomen. Een oplossing hiervoor is om te kijken of het label "Ok" (lblok) al zichtbaar is. Deze wordt nu namelijk zichtbaar gemaakt als de Ok-knop ook gebruikt mag worden. Als je aan het begin van de eventhandler van de Ok-knop deze controle toevoegt: zal de eventhandler afgebroken worden (dmv. return) als het label "Ok" niet zichtbaar is. Als je deze check ook toevoegt aan de 6 eventhandlers van de knoppen voor keuze van de bedragen heb je de meeste verkeerde interacties al afgevangen. 23

24 Stap 9. Vormgeving interface. TUTORIAL JAVA We voegen nog een kader toe waarmee we iets duidelijker maken dat de interface een geheel vormt. Ook voegen we een logo toe. Teken een JPanel om de hele automaat heen en zet deze in de achtergrond via het rechter muisknop menu: Order, Send to Back. Verzorg de opmaak van dit kader door bijvoorbeeld achtergrond kleur, rand en afronding van de hoeken in te stellen. We voegen nog een afbeelding toe als logo van de automaat. Kopieer de afbeelding naar de project-map van Eclipse, in het map src van het project. Voeg een JLabel toe en stel het icon in met de afbeelding: Een voorbeeld van het eindresultaat: Denk bij het afronden ook aan het instellen van een titel van de applicatie. 24

25 Stap 10 Publiceren/delen van prototype Met Eclipse kan je het resultaat Exporteren naar bijv. een Jar-file. Hiermee verpak je je project in een bestand dat je bijv. op een website kan publiceren of op een andere manier verspreiden. Voor het uitvoeren van een Jar-file is alleen de Java-runtime environment nodig, die op veel computers al aanwezig is of anders via Java.com eenvoudig geïnstalleerd kan worden. Om het project te exporteren kies je File > Export en vervolgens Java, Runnable JAR File. Daarna geef je op welk project je wil exporteren en waarheen (map en filename): Als je op Finish drukt wordt de Jar-file aangemaakt. 25