Föreläsning 7. Grafiska användargränssnitt

Transkript

1 Föreläsning 7 Grafiska användargränssnitt

2 För att göra grafiska användargränssnitt: Måste man veta hur man skapar komponenterna i ett GUI och vilka det finns. Till lab 3 räcker det med att känna till de mest grundläggande som JFrame, JPanel, JButton och JLabel. Måste man veta hur man arrangerar komponenterna i ett fönster. Man kan använda sig av Måste man veta hur interaktionen med användaren sker. 2

3 Att tänka på när man gör designen på ett användarcentrerat GUI Låt användaren ha kontrollen Gör gränssnittet - behagligt och lätt att använda - effektivt, snabbt vid användning - lätt att lära sig - roligt att använda - klart (inte dunkelt) så att användaren kan fokusera på vad den ska göra Gör det svårare och inte lättare att göra misstag Förvåna inte användaren 3

4 Problemställning: Vi ska göra ett GUI som kan användas vid röstning. Användaren ska kunna rösta ja eller nej. Antalet som hittills röstat ska visas i fönstret och likaså skillnaden mellan ja- och nejröster. Analys: GUI:t måste ha två knappar, en för att rösta ja och en för att rösta nej. Vidare måste det ha två etiketter (label) för det totala antalet röster respektive differensen mellan ja- och nej-röster. När man trycker Ja ska det totala antalet röster och differensen båda öka med ett. När man trycker Nej ska det totala antalet röster öka med ett och differensen minska ett. 4

5 Design: I design-steget ska vi bestämma hur vi ska lösa problemet. Vi kan börja med att göra en skiss på hur GUI:t kan se ut: Ja -7-7 Totala antalet röster: Avsluta Nej Fyra fält (paneler). När man trycker Ja ska siffran i andra fältet öka med ett, när man trycker Nej ska den minska med ett. I det tredje fältet ska antalet tryckningar på ja/nej-knappar registreras. Trycker man på avsluta-knappen avslutas programmet. 5

6 Design: Nu kan vi börja fundera på vilka komponenter vi kan tänkas behöva för att bygga upp GUI:t. I ramen (JFrame) kan vi lägga en panel (JPanel) som är arrangerad enligt GridLayout-modellen (4 rader, 1 kolumn). Den första raden innehåller i sin tur en panel som är arrangerad enligt GridLayout-modellen (1 rad, 2 kolumner). Vi behöver 3 knappar (JButton) för Ja, Nej och Avsluta. Vi behöver också 2 etiketter (JLabel) för texterna i mittenfälten. Slutligen behöver vi något som minns hur många gånger vi tryckt på Ja- respektive Nej-knapparna. 6

7 Design: Nu kan vi börja fundera på vilka klasser vi måste göra och vilka vi kan återanvända (Swing, AWT). JFrame: Vi får göra en subklass till JFrame som blir själva GUI:t (Voting). JPanel: Vi gör en subklass till JPanel som bygger upp GUI:t (ControlPanel). Denna panel använder i sin tur flera andra paneler för att arrangera komponenterna. JButton: Eftersom vi vill att det ska hända något när vi trycker på knapparna kan vi inte använda JButtonklassen direkt utan vi får göra subklasser till den där vi kopplar på lyssnare som kan göra rätt sak vid tryckning. Gör tre subklasser (YesButton, NoButton, QuitButton. 7

8 JLabel: För de två etiketterna kan vi använda JLabel-klassen direkt. Tänk på att när vi trycker på någon av Ja- eller Nej-knapparna så ändras texten i etiketterna. Dessa knappar måste alltså ha etiketterna som peer -objekt. Slutligen måste vi ha en klass som minns antalet tryckningar annars vet vi ju inte vad som ska skrivas ut i mittenfälten. Gör en klass (kalla den Memory) som har instanvariabler för summan av antalet röster och differensen mellan ja- och nej-röster. Jaoch Nej-knapparna måste ha en Memory-instans som ett peer -objekt. 8

9 Design: Nu är vi redo att skissa på ett UML-diagram. JFrame JPanel JLabel Voting ControlPanel Memory JButton QuitButton YesButton NoButton 9

10 Lab 3 I lab 3 kan man resonera på liknande sätt, dvs analys- och design-faserna blir ungefär som i problemexemplet. I lab 3 kommer man också att behöva en Memory - klass med likartad funktion som i problemexemplet, den ska alltså minnas vad som tryckts in på räknaren. Vi kan tänka ut i förväg vad den här Memory-klassen ska innehålla och skriva ner detta med ord (ej kod). Vi får då något som kallas en abstrakt datatyp (ADT), dvs en beskrivning i ord av en samling data och operationer på denna data för att spara, komma åt och manipulera denna. 10