Laboration 12 Avsikten med denna laboration är att du ska göra några grafiska program. Börja med att skapa paketet laboration 12. Grundläggande uppgift Uppgift 12a Uppgiften går ut på att göra en enkel kalkylator där användaren ska kunna mata in ett par tal och sedan klicka på en knapp och få ett resultat. Instruktionerna i uppgift 12a leder dig steg för steg till ett färdigt program 1. Skapa en grafisk klass Högerklicka paketet laboration12 och välj New JFrame Form Välj namnet Kalkylator som namn på klassen. Nu kommer NetBeans att visa en rektangel i mitten av fönstret och diverse grafiska komponenter till höger. Du ska använda några av komponenterna i programmet. Den ljus gula rektangeln visar fönstrets storlek. Det är på denna ytan som du ska placera några knappar, texter och inmatningsfönster. DA129A, Programmering 1 1
2. Ge fönstret lämplig storlek och titel. Vänsterklicka på fönsterytan. Nu blir fönstret aktivt och fönstrets egenskaper visas som en lista till höger under komponenterna. Nu ska du göra några inställningar i fönstret: Klicka på knappen till höger om title. Skriv Kalkylator i fönstret som visar sig och klicka sedan på OK. Det går även bra att klicka till höger om title, under E:et i Exit och skriva in Kalkylator. Gå neråt i listan tills du hittar egenskapen resizeable. Klicka i check-boxen så att resizeable inte är valt (ingen bock). Detta innebär att användaren inte kommer att kunna ändra storleken på fönstret. Nu kan du studera hur fönstret kommer att se ut genom att klicka på Preview Design-knappen ovanför fönstret -. Stäng fönstret sedan fönstret. 3. Placera komponenter i fönstret Nu är det dags att placera några knappar, några texter och ett par inmatningsfönster i fönstret. Du hittar komponenter i Paletten till höger i NetBeans. Klicka på Button i paletten. Den blir vitmarkerad. Flytta musmarkören till fönstret. Som du ser blir en knapp synlig under musmarkören. Flytta knappen till övre vänster hörnet och klicka med vänsterknappen på musen. Nu placeras knappen i fönstret. Fyrkanterna runt knappen visar att komponentenn är markerad. När en komponent är markerad kan man ändra egenskaper mm. Det går dessutom att flytta komponenten eller ändra storleken på den. Nu ska du ändra på lite egenskaper och ändra på knappens storlek och innehåll. Knappen måste vara markerad för att egenskaper ska kunna ändras. Klicka till höger om text (på texten jbutton1 eller på knappen). Ändra texten jbutton1 till +. Klicka på knappen till höger om font. Välj storleken 24 och klicka på OK. Knappen bör ges ett bra variabelnamn. Klicka först på Code (till höger om Properties) och klicka sedan till höger om Variable Name. Ändra jbutton1 till btnadd. Ändra knappens storlek så den blir kvadratisk. Nu ska du placera en ny knapp på fönstret. Skillnaderna mot föregående knapp är att Variable Name ska vara btnsub och text ska vara -. Efter att du lagt till den andra knappen ska ditt fönster ungefär se ut som fönstret till höger. 2
Nu ska du placera in ett par texter i fönstret. Klicka på Label i paletten. Placera sedan texten till höger om btnadd. Du ska ändra text Tal 1 font Storlek 18 Variable Name lblnumber1 Klicka på Label i paletten. Placera sedan texten nedanför lblnumber1. Du ska ändra text Tal 2 font Storlek 18 Variable Name lblnumber2 Klicka på Label i paletten. Placera sedan texten nedanför lblnumber2. Du ska ändra text Resultat (kommer att ändras under programkörning) font Storlek 18 Variable Name lblresult När du placerat in text-komponenterna kan ditt fönster se ut ungefär så här: Till slut ska två inmatningsfönster placeras efter texterna Tal 1 respektive Tal 2. Klicka på Text Field. Placera inmatningsfönstret till höger om lblnumber1. Du ska ändra font Storlek 14 Horizontal Size 105 text ingen text Variable Name tfnumber1 Klicka på Text Field. Placera inmatningsfönstret nedanför tfnumber1. Du ska ändra font Storlek 14 Horizontal Size 105 text ingen text Variable Name tfnumber2 Nu ska fönstret ungefär se ut så här: 3
Prova att exekvera Kalkylator.java (högerklicka och välj Run File). Som du ser får du upp ett fönster med knappar, texter och inmatningfönster. Testa knapparna och inmatningsfönstren. Sedan kan du stänga fönstret. Fönstret är mycket större än den plats komponenterna kräver. Ändra fönstrets storlek genom att peka med musmarkören på fönstrets kant, tryck ner vänster musknapp, flytta markören och släpp vänster musknapp. När du är färdig så ska fönstret se ut ungefär så här: 4. Händelser reagera på användarens klick Nu är det dags att lägga till några händelser i programmet. Markera btnadd. Klicka på Events till höger om Properties. Klicka på <none> till höger om actionperformed. Nu ändras texten till jbutton1actionperformed. Detta är den metod i programmet som exekveras så fort användaren klickar på btnadd-knappen. Klicka på Source / på btnadd-knappen. Nu ändras innehållet i mitten av NetBeans från design-läge till kod-läge. Nu kan du lägga till den kod du vill i metoden jbutton1actionperformed. Skriv in instruktioner så att metoden ser ut så här: Förklaringar: nbr1str = tfnumber1.gettext(); 4
// gettext returnerar strängen i tfnumber1. Strängen lagras i nbr1str. nbr1 = Double.parseDouble( nbr1str ); // nbr1str görs om till ett decimaltal vilket lagras i nbr1 Testa programmet genom att välja Run File. Skriv in några lätta värden i inmatningsfönstren och klicka på btnadd. Stäng sedan fönstret. Upprepa ovanstående för btnsub. Enda skillnaden är att näst sista instruktionen i metoden btnsubactionperformed ska anpassas så att resultatet av en subtraktion (minus) skrivs ut. Så här bör programmet fungera i praktiken: När du skrev in koden i metoderna btnaddactionperformed och btnsubactionperformed. Så la du kanske märke till att radnumren vid metoderna var över hundra. När du lägger till komponenter, ändrar i egenskaper osv så genereras automatiskt instruktioner som exekveras när fönstret skapas. Och när du lägger till händelsehantering så genereras ännu mer kod. Om du vill se hur koden ser ut kan du klicka till vänster om Generated Code (på plustecknet) i editorn. Du får absolut inte ändra i denna kod. 5
Fördjupande uppgift Uppgift 12b Gör ett program som ändrar mellan Fahrenheitgrader och Celsiusgrader. Följande information behöver du: Formel för att ändra från Celsius till Fahrenheit: F = 32 + 1.8 * C Formel för att ändra från Fahrenheit till Celsius C = ( F - 32 ) / 1.8; För att formatera doublevärden i en sträng till ett bestämt antal decimaler kan du använda metoden String.format: double tal1 = 12.7366542; double tal2 = 4.8928221; String res = String.format("1 dec: %1.1f, 3 dec: %1.3f", tal1, tal2 ); // res har värdet "1 dec: 12.7, 3 dec: 4.893" efter ovanstående rader För att avsluta ett program gör du anropet: System.exit( 0 ); 6
Extra uppgift Uppgift 12c Du ska tillverka en enkel bildvisare som består av ett antal JLabel-komponenter. Valet av komponent beror på att JLabel-komponenten är lämplig för visning av bild. Bilder visas alltid i naturlig storlek, dvs. de skalas inte om till Komponentens storlek. Programmet nedan består av 9 st JLabel-komponenter, en stor (bredd = 640, höjd = 480), och 8 små (bredd = 80, höjd = 60). När användaren klickar på en av de små bilderna så visas bilden i den stora Jlabel-komponenten. Följande behöver du veta för att skriva programmet: Egenskapen icon bestämmer vilken bild som ska visas. Högerklicka till höger om egenskapen, markera File och skriv in bildfilens namn (t.ex. C:\bilder\grekland\rhodos80.jpg). Lägg märke till att du endast ska ange enkla back-slashtecken. Egenskaperna Horisontal Size och Verical Size ska ändras så att JLabel-komponenten får korrekt storlek För att registrera klick på en JLabel ska du använda mousepressed-händelsen. För att ändra bild som visas i en JLabel-komponent ska du använda metoden seticon( filnamn ) i kombination med att skapa ett ImageIcon-objekt. Om den stora JLabel-komponenten heter storbild så kan anropet se ut så här: storbild.seticon(new javax.swing.imageicon( C:/bilder/grekland/rhodos640.jpg )); // OBS! forward-slashar i filnamnet alternativt dubbla back-slashar!!! Samtliga bilder behövs i två storlekar. 7
Förslag till lösningar Uppgift 12b endast händelse-metoderna private void btnavslutaactionperformed(java.awt.event.actionevent evt) { System.exit( 0 ); private void btncelsiusactionperformed(java.awt.event.actionevent evt) { double grader = Double.parseDouble( tfgrader.gettext() ); double res = 32 + 1.8 * grader; String txt = String.format( "Resultat: %1.1f C är %1.1f F", grader, res ); lblresultat.settext( txt ); private void btnfahrenheitactionperformed(java.awt.event.actionevent evt) { double grader = Double.parseDouble( tfgrader.gettext() ); double res = ( grader - 32 ) / 1.8; String txt = String.format( "Resultat: %1.1f F är %1.1f C", grader, res ); lblresultat.settext( txt ); Uppgift 12c endast händelsemetoderna private void bild1mousepressed(java.awt.event.mouseevent evt) { storbild.seticon( new javax.swing.imageicon( "D:/Bilder/Grekland2005/Grekland/IMGP3372_640.JPG" ) ); : private void bild8mousepressed(java.awt.event.mouseevent evt) { storbild.seticon( new javax.swing.imageicon( "D:/Bilder/Grekland2005/Grekland/IMGP3371_640.JPG" ) ); 8