Föreläsnings 11 - GUI, Händelsestyrda program, MVC

Transkript

1 Föreläsnings 11 - GUI, Händelsestyrda program, MVC Josef Svenningsson Tisdag 20/11

2 Boken Denna föreläsning går igenom följande sektioner i boken: 10.1 och Notera att kapitel 11 inte finns i boken utan måste laddas ned från nätet.

3 Skapa fönster Den mest basala funktionen när man vill skriva grafiska gränssnitt är att visa ett fönster. För detta används klassen JFrame. För att skapa ett fönster behöver man gå igenom följande fem steg: 1. Konstruera ett objekt av typ JFrame. JFrame frame = new JFrame(); 2. Sätt storleken på fönstret. final int FRAME_WIDTH = 300; final int FRAME_HEIGHT = 500; frame.setsize(frame_width,frame_height); 3. Om man vill kan man också sätta titeln på fönstret. frame.settitle("an empty frame"); 4. Ange vad som ska hända när fönstret stängs. frame.setdefaultcloseoperation(jframe.exit_on_close); 5. Gör fönstret synligt. frame.setvisible(true);

4 Ett fönsterprogram import javax.swing.jframe; public class EmptyFrameViewer { public static void main(string[] args) { JFrame frame = new JFrame(); final int FRAME_WIDTH = 300; final int FRAME_HEIGHT = 500; frame.setsize(frame_width,frame_height); frame.settitle("an empty frame"); frame.setdefaultcloseoperation(jframe.exit_on_close); frame.setvisible(true);

5 Panel Ett tomt fönster är ju ganska tråkigt. För att lägga till saker i ett fönster behöver man först skapa en JPanel som kan innehålla flera olika grafiska komponenter. JPanel panel = new JPanel(); panel.add(button); panel.add(label); frame.add(panel); Såhär kan vi skapa en knapp och en label: JButton button = new JButton("Click me!"); JLabel label = new JLabel("Hello World!");

6 En knapp och en label import javax.swing.*; public class FilledFrameViewer { public static void main(string[] args) { JFrame frame = new JFrame(); JButton button = new JButton("Click me!"); JLabel label = new JLabel("Hello World!"); JPanel panel = new JPanel(); panel.add(button); panel.add(label); frame.add(panel); final int FRAME_WIDTH = 300; final int FRAME_HEIGHT = 100; frame.setsize(frame_width,frame_height); frame.settitle("an empty frame"); frame.setdefaultcloseoperation(jframe.exit_on_close); frame.setvisible(true);

7 Händelsestyrda program Just nu gör knappen ingenting när man trycker på den. Hur kan vi ändra på det? Vi behöver göra vårt program händelsestyrt. Många program har följande principiella beteende: Programmet är i vila i väntan på en extern händelse (knapptryckning, musklick, inkommande paket över nätet,... ). När en händelse inträffar, sker en mängd reaktioner i programmet; därefter återgår programmet till vila, i väntan på nästa händelse

8 Lyssnare Händelsestyrda program skrivs genom att definiera lyssnare, som beskriver vad programmet ska göra när en viss händelse inträffar. Lyssnaren registreras hos en komponent som kan känna igen en händelse. Lyssnaren anropas när händelsen inträffar. Slogan Don t call us; we ll call you! Exempel på komponenter och deras händelser: Knappar (knapptryck) Paneler/ritytor (musklick) Menyer (menyval)

9 Lyssna på knapptryck Klassen JButton har en metod för att lägga till en lyssnare som anropas när man trycker på knappen. public void addactionlistener(actionlistener l); Interfacet ActionListener: public interface ActionListener { public void actionperformed(actionevent e);

10 Lyssna på knapptryck Låt oss lägga till en lyssnare till vår knapp i exempelprogrammet. import java.awt.event.actionevent; import java.awt.event.actionlistener; public class ClickListener implements ActionListener { public void actionperformed(actionevent event) { System.out.println("I was clicked."); Vi behöver lägga till följande rader i vårt program: ActionListener listener = new ClickListener(); button.addactionlistener(listener);

11 Den nya klassen import java.awt.event.actionlistener; import javax.swing.*; public class FilledFrameViewer2 { public static void main(string[] args) { JFrame frame = new JFrame(); JButton button = new JButton("Click me!"); ActionListener listener = new ClickListener(); button.addactionlistener(listener); JLabel label = new JLabel("Hello World!"); JPanel panel = new JPanel(); panel.add(button); panel.add(label); frame.add(panel); final int FRAME_WIDTH = 300; final int FRAME_HEIGHT = 100; frame.setsize(frame_width,frame_height); frame.settitle("an empty frame"); frame.setdefaultcloseoperation(jframe.exit_on_close); frame.setvisible(true);

12 Lokala klasser Ofta när man skriver lyssnar-klasser kan det underlätta att använda en konstruktion i Java som kallas lokala klasser (eng. inner classes). Det tillåter att man kan deklarera en klass inuti en klass. public class Enclosing {... private class Inner {... Den lokala klassen har tillgång till privata instansvariabler och privata metoder i den yttre klassen. Detta kan underlätta när man skriver metoder i den inre klassen eftersom man inte behöver skicka t.ex. instansvariabler som parametrar.

13 Anonyma lokala klasser Lokala klasser gör att koden blir lite mer organiserad men vi måste fortfarande skriva en hel klass för att kunna lyssna på händelser. Java tillhandahåller också anonyma lokala klasser (eng. anonymous inner classes). button.addactionlistener(new ActionListener() { public void actionperformed(actionevent e) { System.out.println("I was clicked."); ); När vi skriver på detta sätt skapas en ny klass som implementerar ActionListener interfacet och som har metoden actionperformed. Klassen kallas anonym eftersom den inte har något namn.

14 Anonyma lokala klasser import java.awt.event.*; import javax.swing.*; public class FilledFrameViewer3 { public static void main(string[] args) { JFrame frame = new JFrame(); JButton button = new JButton("Click me!"); button.addactionlistener(new ActionListener() { public void actionperformed(actionevent event) { System.out.println("I was clicked."); ); JLabel label = new JLabel("Hello World!"); JPanel panel = new JPanel(); panel.add(button); panel.add(label); frame.add(panel); final int FRAME_WIDTH = 300; final int FRAME_HEIGHT = 100; frame.setsize(frame_width,frame_height); frame.settitle("an empty frame"); frame.setdefaultcloseoperation(jframe.exit_on_close); frame.setvisible(true);

15 Layout När man skapar ett grafiskt gränssnitt så vill man ofta ha kontroll på hur de olika komponenterna läggs ut i ett fönster. För att åstadkomma detta använder Java Layout management. Klassen JPanel använder sig av en standard layout manager som lägger till komponenter från vänster till höger. Det finns flera olika sätt att skapa egna layouter. Vi ska lära oss mer om dessa två: Border Layout Grid Layout

16 Byta Layout Manager För att en panel ska få en annan layout manager kan man göra på två sätt: När man skapar en JPanel kan man anropa konstruktorn med en layout manager. JPanel panel = new JPanel(new BorderLayout()); Man kan sätta en layout manager med hjälp av metoden setlayout. panel.setlayout(new BorderLayout());

17 Border Layout En Border Layout skapar fem regioner där man kan lägga grafiska komponenter. panel.add(component,borderlayout.north);

18 Grid Layout En Grid Layout kan användas när man vill att komponenter ska hamna i ett fixt antal rader och kolumner. Konstruktorn till GridLayout tar två heltal som anger hur många rader och kolumner layouten ska ha. JPanel buttonpanel = new JPanel(); buttonpanel.setlayout(new GridLayout(4,4)); buttonpanel.add(button7); buttonpanel.add(button8); buttonpanel.add(button9); buttonpanel.add(buttonplus); buttonpanel.add(button4);...

19 Grid Layout På så sätt kan man skapa en layout för, t.ex. en miniräknare.

20 Nästla layouter Det finns mer komplicerade layout managers men det räcker i princip alltid med BorderLayout och GridLayout om man nästlar paneler, dvs. paneler inuti paneler. JPanel keypadpanel = new JPanel(); keypadpanel.setlayout(new BorderLayout()); JPanel buttonpanel = new JPanel(); buttonpanel.setlayout(new GridLayout(4,4)); buttonpanel.add(button7); buttonpanel.add(button8); //... keypadpanel.add(buttonpanel, BorderLayout.CENTER); JTextField display = new JTextField(); keypadpanel.add(display, BorderLayout.NORTH);

21 Nästla Layouter

22 Counter Låt oss säga att vi vill skapa ett grafiskt program som implementerar en räknare.

23 Counter modell En enkel klass för räknare. public class Counter { private int value; public Counter() { value = 0; public void incr() { value++; public int getvalue() { return value;

24 CounterPanel import java.awt.*; import javax.swing.*; public class CounterPanel extends JPanel { private Counter ctr; public CounterPanel(Counter ctr) { this.ctr = ctr; setpreferredsize(new Dimension(100,100)); setfont(new Font(Font.SANS_SERIF,Font.BOLD,50)); setbackground(color.magenta); setopaque(true); public void paintcomponent(graphics g) { super.paintcomponent(g); g.drawstring("" + ctr.getvalue(),20,80);

25 CounterPanel förklaring CounterPanel ärver från JPanel. På detta sätt skapar man en ny komponent. I lite större applikationer är det lättare att skapa nya komponenter istället för att initialisera hela gränssnittet i main-metoden. Denna klass innehåller detaljer som jag inte kommer gå in vidare på, t.ex. Font, Dimension, pointcomponent, osv. Om ni är nyfikna på att veta mer, läs i Javas dokumentation och testa själva.

26 Counter Main import java.awt.*; import java.awt.event.*; import javax.swing.*; public class CounterMain { public static void main(string[] args) { final Counter ctr = new Counter(); final CounterPanel panel = new CounterPanel(ctr); JButton incrbutton = new JButton("Incr"); JPanel view = new JPanel(new BorderLayout()); view.add(panel,borderlayout.north); view.add(incrbutton,borderlayout.south); incrbutton.addactionlistener(new ActionListener() { public void actionperformed(actionevent e) { ctr.incr(); panel.repaint(); ); JFrame f = new JFrame(); f.add(view); f.pack(); f.setdefaultcloseoperation(jframe.exit_on_close); f.setvisible(true);

27 Counter Main förklaring När vi uppdaterar räknaren anropar vi metoden repaint i vår panel. Detta gör att den ritas om vilket innebär att metoden paintcomponent anropas. Istället för att sätta storleken på vår JFrame så använder vi metoden pack. Den lägger samman alla komponenter och skapar ett fönster som är lagom stort för att innehålla alla dessa komponenter. För att använda lokala variabler inuti en lokal klass krävs att dessa variabler deklareras final.

28 MVC En allmänt accepterad princip för program med grafiskt gränssnitt är att separera de tre rollerna Modell (eng. model); den bakomliggande datastruktur som programmet bearbetar. I exemplet klassen Counter. Vy (eng. view); den visuella presentationen av modellen som användaren ser tillsammans med komponenter för åtgärder. I exemplet klassen CounterPanel. Styrfunktion (eng. controller); den klass som noterar användarens åtgärder samt ber först modellen och sedan vyn att uppdatera sig. I exemplet den anonyma lokala klassen. När man skriver styrfunktionen så har man ofta ett val mellan att skapa en ny fristående klass eller att använda anonyma lokala klasser. Det finns inget entydigt svar på vilket som är bäst, det varierar från applikation till applikation.

29 Lab 7 I laboration 7 kommer ni att implementera ett Yatzy-spel. Laboration kommer att göras tillgänglig någon gång under veckan. Börja i tid! Detta är en betydligt större lab än de tidigare i kursen.