Applicatiebouw 2015/2016 Opdracht 2 Inhoud Applicatiebouw op dag 2 College In het college worden de belangrijkste taalelementen van de Java programmeertaal benoemd. Je maakt kennis met numerieke data en variabelen en leert daarmee expressies maken. Werkcollege Op het werkcollege gebruik je kennis over de taalstructuur en taalelementen door eenvoudige programma s te schrijven en kun je mathematische expressies schrijven. Op het eind van dag 2 kun je basis componenten van Java taal herkennen een eenvoudig Java programma schrijven het proces van het maken en uitvoeren van Java programma s beschrijven verschillende datatypen voor numerieke gegevens benoemen en gebruiken expressies schrijven de standaard mathematische bibliotheek gebruiken methodes gebruiken Lezen tussen dag 2 en dag 3 Boek: Hoofdstuk 3 en 4 tm. 4.2 uit het boek Aan de slag met Java (Gertjan Laan). Extra oefening Opgaven behorend bij hoofdstuk 3 en 4 tm. 4.2 kan je doornemen om je de stof beter eigen te maken. Deze opdracht kan je gebruiken als basis voor veel van de oefeningen in hoofdstuk 3. Hoe je voorbeelden en opgaven uit het boek met Ecplise kan oefenen is in de bijlage van opdracht 1 uitgelegd. Universiteit Twente 1
Opdrachten controleren en uitvoeren Je mag opdrachten met 2 personen doen. Dat hoeft niet, je mag opdrachten dus ook alleen doen. Opdrachten met 3 of meer personen doen is dus niet toegestaan en zal zonder verdere controle automatisch leiden tot een onvoldoende beoordeling. Je laat opdrachten controleren op uiterlijk het eerstvolgende werkcollege (dat is dus de deadline!) door de docent of een assistent. Bedoeling van de controle is dat je aantoont de stof te begrijpen. De opdracht wordt beoordeeld met een voldoende (1) of onvoldoende (0). De opdrachten 2 tm. 7 tellen mee voor het cijfer (details zijn in het college gegeven). Eenvoudig object tekenen We gaan een applicatie maken die een eenvoudige figuur kan tekenen. Deze figuur vult het scherm, ook als we de applicatie groter of kleiner maken. De kleur van de figuur kan ingesteld worden dmv. invoer van de RGB-waarden (drie getallen) voor de kleur-componenten rood, groen en blauw. Deze getallen kunnen de waarden 0-255 hebben. Stappenplan 1. Ontwerp en maak de gebruikersinterface 2. Schrijf de code voor het tekenen 3. Kleur instellen 4. Lees de invoer van de gebruiker 5. Tekenen met de ingevoerde kleurwaarden 6. Teken de gekleurde figuur Hieronder worden die stappen uitgebreid behandeld. 2 Universiteit Twente
1. Ontwerp en maak de gebruikersinterface De gebruikersinterface bestaat uit twee delen: Een deel waarin de RGB-waarden kunnen worden ingevoerd Een deel waarin getekend wordt We kunnen voor beide delen een Panel gebruiken, dat is een component waarin je ook weer andere componenten kan stoppen, een soort container dus. In een Panel kan je ook tekenen. Maak een schets van de gebruikersinterface waarin de opdeling in Panels zichtbaar is. Een Panel bevat de drie invoervelden en een Ok-knop (Button) om het invoeren van de waarden uit te voeren. Als je het ontwerp klaar hebt, kan je de gebruikersinterface gaan maken. Begin met het maken van een nieuw project, via File > New > Java Project. Noem het project Opdracht2. Voeg een JFrame toe en noem deze Opdracht2GUI (sneltoets: CTRL-N, JFrame kan je vinden onder WindowBuilder > Swing Designer). Stel de layout in op GroupLayout : klik in de WindowBuilder in de lijst met Components het contentpane aan, en kies bij de Properties bij Layout: GroupLayout (onderaan in het lijstje). De stappen voor het maken van een gebruikersinterface worden snel doorlopen. Weet je niet meer precies hoe het ging, kijk dan terug bij opdracht 1. Je kan wisselen tussen de sourcecode Editor en de WindowBuilder (Design), dmv. de tabs onderaan: Tip: Mochten de tabs niet verschijnen, open dan de file via aanklikken rechter muisknop: Open With > WindowBuilder Universiteit Twente 3
Voeg nu twee JPanels toe, waarbij één Panel groot is (het Panel waarin getekend wordt) en de andere kleiner. JPanel kan je vinden onder het kopje Containers in de Palette. Geef beide Panels logische namen (Variable-veld bij Properties): Eea. komt er dan bijvoorbeeld zo uit te zien: Stel de layout van het kleinste Panel in op GroupLayout. Voeg nu een label (JLabel), drie tekst velden (JTextField) en een knop (JButton) toe aan het kleinste Panel en zorg dat het er ongeveer zo uit ziet: Geef de componenten zinvolle namen. De structuur ziet er dan ongeveer uit zoals hier onder. Let ook op de plek van de componenten. De nieuwe componenten zitten in het Panel dat we gebruiken voor de invoer: Het kan zijn dat je applicatie niet helemaal goed past in het Window. Dan kan je bijv. de grootte van de diverse componenten aanpassen zodat het beter past. Ook kan je in de code de methodeaanroep setbounds(...) opzoeken en de parameters hiervan evt. aanpassen. 4 Universiteit Twente
De gebruikersinterface is nu klaar. Voer nu je programma uit dmv. de Run-knop om te controleren of alles werkt. Mocht je de manier waarop de elementen van de gebruikersinterface worden weer gegeven niet mooi vinden, dan kan je de stijl daarvan veranderen, via de Look-and-feel knop rechts bovenaan de Window Builder: Kies je voor Windows Classic (te vinden onder JRE), dan zal eea. er meer als een Windowsgebruikersinterface uit zien. Let op: voordat dit werkt, moet je via Window > Preferences eerst de optie Apply choosen LookAndFeel aanzetten. Deze is te vinden in de Preferences onder WindowBuilder, Swing, LookAndFeel. 2. Schrijf de code voor het tekenen Voordat we dmv. methoden tekenopdrachten in het Panel kunnen geven, moeten we van het Panel een eigen variant maken. We voegen daarvoor een nieuwe class toe aan het project (File > New > Class). Geef deze de naam TekenPaneel en type bij Superclass javax.swing.jpanel : Let goed op hoofd- en kleine letters als je de hier gegeven waarden voor Name en Superclass overneemt. Bijvoorbeeld in javax.swing.jpanel moet je JPanel schrijven met een hoofdletter J en P! Bij Superclass kan je via de Browse-knop een keuze hulp krijgen waarmee je minder snel fouten maakt. Check voor je op Finish drukt dat de optie Inherited abstract methods aan staat en de rest uit. Universiteit Twente 5
Nu moeten we het Panel in de gebruikersinterface vertellen dat het een TekenPaneel wordt. Dat kan door dit Panel aan te klikken met de rechter muisknop en bij Morph Subclass uit het menu te kiezen: Check voor je gaat Morphen even of TekenPaneel.java is opgeslagen (CTRL + s) en foutloos is. Type in het tekstveld TekenPaneel en druk op Ok: Nu kan er een tekenmethode aan de class TekenPaneel toegevoegd worden. Selecteer TekenPaneel.java in de Package Explorer. Kies Source > Override/Implement Methods uit het menu. Zoek nu in de lijst die verschijnt de paintcomponent() methode van JComponent (klik op het driehoekje voor JComponent) en selecteer deze. Druk dan op Ok. 6 Universiteit Twente
De code ziet er daarna zo uit: Tekenen met Java en de technieken die daarbij horen worden uitgelegd in paragraaf 3.6 van het boek. Begrijp je wat hier gebeurd niet helemaal, lees dan eerst deze paragraaf. Aan de zojuist gemaakte methode kan je nu tekenmethoden toevoegen. Gebruik voorbeeld 0306 uit paragraaf 3.6 van het boek om een paar voorbeeldfiguren te tekenen. In het voorbeeld uit het boek heeft de parameter van de methode paintcomponent() de naam pen gekregen. Het is handig de naam jouw variabele arg0 ook te veranderen in pen. Jouw code van de paintcomponent() methode is dan gelijk aan die van voorbeeld 0306. Bij het gebruik van Color, kan je een foutmelding krijgen, te herkennen aan de rode kringeltjes en een lampje in de kantlijn: Dit komt omdat Color nog onbekend is. Wij gebruiken de Color class uit de grafische bibliotheek van AWT. Eclipse kan deze automatisch vinden in de bibliotheek. Klik het lampje in de kantlijn aan en kies Import Color : Universiteit Twente 7
Voer je programma uit dmv. de Run-knop getekend. om te controleren of de figuren goed worden Methoden en variabelen toevoegen aan een class In de volgende paragraaf worden methoden en variabelen toegevoegd aan een class. Variabelen worden meestal aan het begin van de class (class-variabelen) of aan het begin van een methode toegevoegd. Methoden worden meestal aan het eind van de class toegevoegd. Waar dat precies is wordt hieronder toegelicht. Begin van de class. Na de accolade openen '{' kan je class-variabelen toevoegen. Begin van de methode (kop). Na de accolade openen '{' kan je variabelen of code toevoegen. Eind van de class. Voor de accolade sluiten '}' kan je nieuwe methoden toevoegen. 3. Kleur instellen Om te kunnen tekenen met een bepaalde kleur, moet de class TekenPaneel de tekenkleur kunnen onthouden. Ook moeten we een methode maken waarmee de kleur ingesteld kan worden. Voeg eerst de variabele voor de kleur toe aan de class TekenPaneel. Doe dit bovenaan in de class, op een lege regel na de accolade openen { : Color tekenkleur; Tekenen met Java en de technieken die daarbij horen worden uitgelegd in paragraaf 3.6 van het boek. Begrijp je wat hier gebeurd niet helemaal, lees dan eerst deze paragraaf. Deze variabele is van het type Color. Dit is een type uit een Java bibliotheek. Als je deze nu voor het eerst gebruikt verschijnt er een uitroepteken in de kantlijn. Klik dit aan en kies voor de optie om Color uit de java.awt bibliotheek te gebruiken (dat wordt importeren genoemd): We gaan ervoor zorgen dat de standaard kleur zwart is, door de variabele tekenkleur een waarde te geven. Hiervoor veranderen we de zojuist gemaakte regel met de variabele in: Color tekenkleur = Color.black; // standaard tekenkleur zwart We moeten nu een methode toevoegen waarmee de kleur ingesteld kan worden. Deze methode krijg je aangeleverd. Voeg onderstaande code toe aan de class TekenPaneel. Let goed op de plek: Voeg de code toe onderaan in de class, op een lege regel voor de laatste 8 Universiteit Twente
accolade sluiten }. Deze methode krijgt drie getallen r, g en b als parameters en maakt daarmee een nieuwe kleur (new Color) die wordt toegekend aan de class variabele tekenkleur die we net hebben gemaakt. public void settekenkleur(int r, int g, int b) { tekenkleur = new Color(r % 256, g % 256, b % 256); repaint(); // teken opnieuw omdat de kleur veranderd is } 4. Lees de invoer van de gebruiker Dubbelklik op de knop in de gebruikersinterface om een EventHandler aan te maken. Dit heb je ook gedaan in de vorige opdracht. Om de ingevoerde waarden uit de tekstvelden te lezen moet je de gettext() methode van het tekstveld aanroepen. De uitvoer (het resultaat) van deze methode is een String. We declareren dus eerst een variabele van het type String en geven die als waarde de uikomst van de aanroep van de gettext() methode. Invoer van gehele getallen wordt behandeld in paragraaf 3.9 van het boek. Begrijp je wat hier staat niet helemaal, lees dan eerst deze paragraaf. Dit gaan als volgt: Type eerst de declaratie van de variabele met daarna een = teken voor de toekenning: String r = Daar achter typen we de variabele naam van het tekstveld: String r = textfieldr Als we direct daar achter een punt typen, krijgen we een lijstje met methoden van het tekstveld. In dat lijstje kunnen we de gettext() methode opzoeken en aanklikken om de documentatie van die methode te lezen: Na dubbelklikken op de methode wordt deze toegevoegd aan de code: String r = textfieldr.gettext() Je moet er dan nog een punt-komma achter typen als afsluiting van de regel Java code. Universiteit Twente 9
Nu kan je de ingevoerde waarde laten zien in de Console, door een aanroep van de printlnmethode: System.out.println("Ingevoerde waarde voor rood: "+r); Hiermee kan je als je het programma draait, controleren of het invoeren van getallen werkt. Voer nu je programma uit dmv. de Run-knop om te controleren of het invoeren van een getal in het veld voor rood werkt. Als het goed is zie je in het Console Window deze uitvoer: Als de Console niet zichtbaar is, kan je deze laten zien via het menu: Window > Show View > Console. Je mag nu deze stappen voor het inlezen en weergeven van de ingevoerde waarden zelf herhalen voor de groen (g) en blauw (b) tekstvelden en zorgen dat alle drie de waarden in de Console worden weergegeven. 5. Tekenen met de ingevoerde kleurwaarden Om te kunnen tekenen met de ingevoerde kleurwaarden moeten we in de EventHandler die we net gemaakt hebben de methode settekenkleur() van de class TekenPaneel aanroepen. Deze methode verwacht drie getallen (r, g en b) als parameters. Echter, in de In paragraaf 3.9 van het boek wordt uitgelegd hoe je tekst (String) kan omzetten naar een getal. EventHandler worden de drie getallen uit een tekstveld ingelezen als String (tekst). We moeten de String dus omzetten naar een getal (Integer). Dat doen we eerst. Voeg hiervoor deze code toe (aan het eind van de EventHandler): Herhaal dit voor de g en b waarden. Tip: als je niet meer precies weet waar de EventHandler (van een knop) is, kan je altijd nog een keer dubbelklikken op de knop in de WindowBuilder. Voeg nu de aanroep van de methode settekenkleur() toe aan de EventHandler: We gaan er hier van uit dat je het Panel waarin getekend wordt "paneltekenen" genoemd hebt (bij stap 1 helemaal aan het begin van de opdracht). Je merkt dat hierbij een fout optreedt. Het probleem is, dat de variabele paneltekenen niet in hetzelfde bereik Het gebied waarin een variabele (scope) gedefinieerd is. Als je met je muis beweegt over geldig is, wordt scope (bereik) de tekst met rode kringels eronder, dan zal je uitleg genoemd. krijgen en krijg je ook een Quick fix aangeboden. Die fix In paragrafen 3.9.1 tm. 3.9.4 gaan we echter niet gebruiken. We gaan de variabele op wordt hier meer uitleg over gegeven. de juiste plek definiëren, als class-variabele. Een classvariabele wordt ook wel attribuut of eigenschap van de class genoemd. Een class-variabele wordt altijd bovenin de class gedefinieerd. 10 Universiteit Twente
Zoek de declaratie van paneltekenen op. Deze staat een stukje naar boven in de code. Je kan ook CTRL-F gebruiken om te zoeken. De declaratie ziet er zo uit: Dit is een declaratie en een toekenning in 1 regel. De toekenning is het deel achter het = teken. We gaan de declaratie en de toekenning splitsen. De declaratie komt bovenin de class, het wordt dan een attribuut van de class. Hier onder is de declaratie in rood aangegeven en de toekenning in blauw. Kopieer de declaratie naar boven in de class: Verwijder op de oorspronkelijke plek het eerste woord zodat alleen de toekenning (het blauwe deel) overblijft: Als het goed is, is nu de foutmelding bij de aanroep van de methode settekenkleur() verdwenen, omdat de variabele paneltekenen nu in de hele class geldig is, ipv. alleen in de methode. 6. Teken de gekleurde figuur Om te zorgen dat er ook daadwerkelijk getekend wordt met de ingestelde kleur, moeten we in de paintcomponent() methode de tekenkleur instellen. Als je het eerder genoemde voorbeeld 0306 uit het boek hebt gebruikt, heb je de kleur al ingesteld dmv. een aanroep van de setcolor() methode. Deze moet nu als parameter de variabele voor de kleur, tekenkleur gebruiken. Zoek de aanroep van de methode setcolor() op en pas deze als als volgt aan: pen.setcolor(tekenkleur); Check of de eerder toegevoegde test-figuren nu met de opgegeven kleur getekend worden (vul waarden voor r, g en b in en druk op de knop). Je mag nu zelf een eenvoudige figuur bedenken om te tekenen. Enkele mogelijkheden: een paddenstoel, stoplicht of een dobbelsteen (de laatste 2 zijn oefening 3.14 en 3.15 uit het boek). De figuur moet uit minimaal 2 verschillende basisvormen bestaan. Voor het tekenen van de door jou gekozen figuur mag je je eigen creativiteit gebruiken. Bedenk dat je hulp kan krijgen om uit te zoeken wat voor tekenmethoden er allemaal bestaan. Die hulp krijg je op verschillende manieren: 1. In Eclipse: type het woord pen gevolgd door een punt en je krijgt alle methoden van de Graphics class, klik er 1 aan om te zien wat het is. De meeste tekenmethoden beginnen met draw of fill 2. Het boek. In hoofdstuk 3 worden een aantal tekenmethoden besproken. De methoden die je nodig zou kunnen hebben voor het tekenen van bijvoorbeeld een paddenstoel zijn bijv. fillrect en fillarc, die in paragrafen 3.6 en 3.8 worden besproken. (drawrect en fillrect zijn hetzelfde, alleen wordt in de laatste de figuur opgevuld) 3. De API beschrijving van de class Graphics Verwijder de eerder met teken methoden gemaakte test-figuren (of zet ze tussen commentaar). Universiteit Twente 11
Als je de afmetingen van de figuur afhankelijk wil laten zijn van de afmetingen van het Panel waarin wordt getekend kan je dat als volgt oplossen: De breedte en hoogte kan je opvragen met methoden: getwidth() voor de breedte en getheight() voor de hoogte. Om nu bijvoorbeeld een rechthoek te tekenen die een horizon-effect geeft aan de tekening (zie schermafdruk op eerste pagina van deze opdracht) kan je deze code gebruiken: Afronden Voorzie je applicatie van een titel en commentaar (zoals je hebt geleerd bij Opdracht 1 en paragraaf 2.4.7 en 2.10 van het boek). Doe dit voor beide Java files. Vergeet niet in het commentaar bij het @author veld je naam of jullie namen te vermelden. Extra uitdaging De applicatie is nog niet helemaal fool-proof. Wat gebeurt er als we de applicatie starten en gelijk op de Teken-knop drukken? Check de uitvoer in de Console. Dit is geen onderdeel van de opdracht maar mag je als je dat leuk vindt toevoegen. Waarschijnlijk verschijnt hier in rood een foutmelding. Als je naar boven scrollt zul je zien dat het hier gaat om een Exception : iets dat Java niet aan kan: Ook zie je op een van de bovenste regels een verwijzing naar een regelnummer in een Java-file. Op deze regel treedt dus de fout op. Waarschijnlijk betreft het 1 van de regels met een aanroep van de parseint() methode. Deze methode kan namelijk niet overweg met een parameter die geen getal is. In dit geval is het een lege String. Om dit probleem op te lossen zouden we kunnen checken of er in het betreffende veld wel een getal staat. En zo niet, dan zetten we in het veld een nul (0). Een check of de in variabele r ingelezen String alleen digits (getallen) bevat kunnen we doen met r.matches("\\d+"). Deze expressie levert true op als de String uit getallen bestaat. Met de booleaanse niet-operator, een!, kunnen we dan een if-statement bouwen dat eea. uitvoert: if (!r.matches("\\d+")) { r="0"; textfieldr.settext(r); } Voeg deze regel in op de plek na het inlezen van de String met gettext(). Herhaal de regel voor de g- en b-waarden. Test de applicatie. 12 Universiteit Twente
Samenvatting Op deze tweede dag heb je Java code geschreven en geleerd hoe je variabelen in expressies toepast om berekeningen uit te voeren. Verder heb je het volgende geleerd: Het maken van een gebruikersinterface. Uitlezen en gebruiken van waarden in een gebruikersinterface. Het gebruik van tekenmethoden. Gebruik van variabelen in expressies. Toepassen van mathematische functies. Gegevens opzoeken mbv. de online help. Universiteit Twente 13