Uke mars 2005 GUI - del 2. GUI (Graphical User Interface)-programmering

Transkript

1 Uke mars 2005 GUI - del 2 Stein Gjessing Inst for Informatikk Univ. i Oslo GUI (Graphical User Interface)-programmering Forrige gang Hvordan få laget et vindu på skjermen Hvordan legge ulike komponenter i vinduet (trykknapper, tekstfelter, tekst, bilder,) Layout av vinduer Enkel behandling av knappetrykk mm. I dag: Kort repetisjon Mer om input fra brukeren via vinduer Grundig om eventmodellen (fange opp hendelser) og Javas store bibliotek for det Hendelser (Event) Lyttere med grensesnitt eller Adaptere Lyttemetodene Grafikk (tegning i vinduet) 2

2 Vi lærte sist å lage vinduer JFrame er selve bildet (rammen) komponenter (inne i en Container) Container som er vindusflaten, en egenskap til selve bildet, får vi tak i ved å kalle metoden getcontentpane( ) 3 import java.awt.*; import java.awt.event.*; import javax.swing.*; Om å lage et vindu public class Vindu extends JFrame { JLabel etikett; JTextField tekstfelt; JButton knapp; public Vindu( ) { settitle( Test-vindu"); Container samling = getcontentpane(); samling.setlayout(new FlowLayout()); etikett = new JLabel("Skriv inn navn"); samling. add(etikett); tekstfelt = new JTextField(30); samling. add(tekstfelt); knapp = new JButton( Ferdig"); samling. add(knapp); setdefaultcloseoperation(jframe.exit_on_close); setbounds(100, 250, 400,150); setvisible(true); Mangler å lytte på knappen / tekstfeltet 4

3 Vi lærte sist å lytte på knapper Dette objektet synes på skjermen (som et tekstfelt Ferdig knapp.addactionlistener(knappelytter); setter opp en forbinelse mellom knappen og objektet/metoden som håndterer knapptrykk knapp knappelytter Vindu-objekt, subklasse av JFrame Kobling i kjøre-systemet < det som skal gjøres ved knappetrykk> actionperformed Lytte-objekt som implementerer grensesnittet ActionListener 5 Kan også lytte på CR i tekstfelt Dette objektet synes på skjermen (som en knapp) tekstfelt.addactionlistener(tekstlytter); tekstfelt tekstlytter Ved CR Vindu-objekt, subklasse av JFrame Kobling i kjøre-systemet actionperformed < det som skal gjøres ved når CR trykkes, f.eks. tekstfelt.gettext(); > Lytte-objekt som implementerer grensesnittet ActionListener 6

4 import java.awt.*; import java.awt.event.*; import javax.swing.*; Fullstending mini-program public class Vindu extends JFrame { private JButton knapp; private Lytter knappelytter; public static void main(string[] args) {new Vindu(); public Vindu( ) { super("hei test"); Container samling = getcontentpane(); samling.setlayout(new FlowLayout()); setbounds(100, 250, 300,200); knapp= new JButton("Hei"); samling. add(knapp); setdefaultcloseoperation(jframe.exit_on_close); setvisible(true); knappelytter = new Lytter( ); knapp.addactionlistener(knappelytter); // slutt Vindu konstruktør class Lytter implements ActionListener { public void actionperformed(actionevent e) { System.out.println("Noen sa hei til meg"); // slutt class Lytter // slutt class Vindu Her lager vi et knappen Her legges knappen inn i vindusflaten Her lager vi et lytterobjekt Her kobles knappen opp mot dette lytterobjektet 7 main new Vindu( ); Det er mulig å slå sammen lytter-objektet med andre objekter f.eks.: Dette objektet synes på skjermen (som en knapp) objekt av klassen Vindu (subklasse av JFrame, implementerer ActionListener) Kjøresystemet Vindu knapp knapp = new JButton(... ) knapp.addactionlistener(this);... Dette blir litt monolittisk actionperformed 8

5 import java.awt.*; import java.awt.event.*; import javax.swing.*; Vi slår sammen Vindus-objektet og lytter-objektet public class Vindu extends JFrame implements ActionListener { private JButton knapp; private Lytter knappelytter; public static void main(string[] args) {new Vindu(); public Vindu( ) { super("hei test"); Container samling = getcontentpane(); samling.setlayout(new FlowLayout()); setbounds(100, 250, 300,200); knapp= new JButton("Hei"); samling. add(knapp); knapp.addactionlistener(this); setdefaultcloseoperation(jframe.exit_on_close); setvisible(true); // slutt Vindu konstruktør public void actionperformed(actionevent e) { System.out.println("Noen sa hei til meg"); Her lager vi lytterobjektet også Her kobles knappen opp mot lytterobjektet (som er det samme) // slutt class Lytter // slutt class Vindu 9 Hvordan få data fra brukeren fra vinduet Vi må få de data brukeren skriver i vinduet inn i vårt program. Mer spesifikt, vi må kunne skille mellom ulike ting (museklikk, tastetrykk, tekstskriving, mm) brukeren gjør med vinduene som programmet (via kall til operativsystemet) her tegne opp på skjermen. Vi må direkte finne ut om brukeren har f.eks. Trykket på en trykk-knapp (hvilken) Tastet i ett av tekstfeltene (hvilket felt og hva ble tastet) Hvor er musa (følge dens bevegelser) Klikket med musa (hvor, hvilken, opp, ned) Trykket en tast på tastaturet mm... 10

6 Hva kan en bruker gjøre Typer av hendelser Bevege musa innenfor en av våre vinduer inn i vinduet ut av vinduet over en av komponentene (trykk-knapp, tekstfelt,..) - hvilken Klikke musa hvilken knapp eller hvor (x,y i vinduet) klikke ned slippe opp Taste en tast hvilken trykke ned slippe opp Trykke CR i et tekstfelt 11 Eventmodellen hva gjør operativsystemet? Op-sys (Win, Linux,..) Ditt Program Hver ting brukeren gjør med PCen (flytter eller klikker musa, trykker på tastaturet...) blir laget om til én pakke. En kø av slike pakker sendes over fra operativsystemet til ditt program hele tiden når ting skjer. Hver gang f.eks musa flyttes ett eneste punkt bortover genereres en ny slik pakke (køen kan forkortes) 12

7 Mer om pakken (subklasse av Event) Inneholder få ting Størrelsen av pakken/objektet er avhengig av type hendelse : Type hendelse : musebevegelse museklikk, trykk på tast (ned eller sluppet)... Verdi, f.eks Museposisjon (x,y) i vinduet Hvilken museknapp trykket Hvilken tast trykket verdi: f.eks type hendelse x-pos komponent y-pos Hvilket Vinduskomponent på skjermen dette tilhører Peker til eller tekst Hvordan vet operativsystemet det? 13 Eksempler Class RulleLytter implements ItemListener { public void itemstatechanged(itemevent e) { String s = (String) e.getitem(); if (s.equals( Opp")) {fart++; else if (s.equals( Ned")) {fart - - ; else if (s.equals( Høyre")) {retning = hoyre; else if (s.equals( Venstre")) {retning = venstre; public void actionperformed(actionevent e) { if (e.getsource( ) = = stoppknapp) { setvisible(false); System.exit (0); else if (e.getsource( ) = = enknapp) {... 14

8 Mer om Eventmodellen en kø per program Op-sys (Win, Linux,..) Ditt Program Operativsystemet har vinduer fra flere programmer på skjermen, men vet hvilket vindu og da program ett event (hendelse) tilhører. Lager en slik kø for hvert program som har vinduer på skjermen Hvert program får da bare sine hendelser. 15 Hvordan knytte forbindelsen program eventkøen Programmet må lage lyttere, (= køen av hendelser) For hver hendelse må det meldes på et bestemt objekt og tilhørende metode som mottager av hendelses-objekter/hendelses-pakker. Denne metoden blir da kalt hver gang en slik hendelse inntreffer Hvis flere metoder blitt registrert som lyttere av samme type hendelse, får de hver sin kopi av pakka. Lyttere implementerer et grensesnitt (ulikt for hver type hendelse) med tilhørende lyttermetoder: Hyppigst brukt grensesnitt / metode: ActionListener / actionperformed(actionevent e) Javas kjøretidssystem (Java Virual Machine, >java) har en løkke som leser meldingene i eventkøen og fordeler dem (= kaller metodene) for de typer hendelser som har en lytter registrert. kaster de pakkene ingen vil ha 16

9 >java fordeler pakkene Op-sys Kjøresystemet for Javaprogrammet ditt (>java ) while (true) { <les neste pakke> < finn evt. registrerte lyttemetoder> <kall de(m) med pakken som parameter> < kast pakker ingen vil ha> Ditt javaprogram 17 Viktigste lyttergrensesnitt Typer av hendelser MouseListener museklikk MouseMotionListener musebevegelser ActionListener Trykk på trykknapper / CR i tekstfelt KeyListener Tastetrykk + ca 80 andre lytter-grensesnitt f.eks: ListSelectionListener, MenuDragMouseListener, MenuKeyListener, MenuListener, MetaEventListener, MouseInputListener, MouseWheelListener, NamespaceChangeListener, NamingListener, NodeChangeListener, ObjectChangeListener, PopupMenuListener, PreferenceChangeListener, PropertyChangeListener, RowSetListener, SSLSessionBindingListener, TableColumnModelListener, TableModelListener, TextListener, WindowFocusListener, WindowListener, WindowStateListener 18

10 Hvordan lage en lytter to metoder: 1 Implementere det riktige grensesnittet (KeyListener, ActionListener, ItemListener) Husk at da må vi implementere alle metodene i grensesnittet Dette gjør vi som oftest bare for noen enkle grensesnitt (der det bare er én metode i hvert grensesnitt) : ActionListener ItemListener 2 Lage en lytterklasse som subklasse av en ferdiglaget klasse som allerede er laget og som implementerer lytter-grensesnittet NY De heter alle Adapter (KeyAdapter, MouseAdapter,..) og har implementert tomme metoder for alle metodene i grensesnittet. I en subklasse kan vi da enkelt omdefinere de metodene vi skal bruke (vi slipper å gi kode til resten av metodene) 19 Knappetrykk, tell opp og vis fram (nesten som før påske) Vi har tre komponenter Overskrift Tekstfelt Trykknapp Bruker GridLayout 3 rader, 1 kolonne Vi legger inn en lytter på trykknappen Sier ping Den teller opp antall ganger trykket og skriver det ut i tekstfeltet Sjekk programmet vi lager og se vesentlige forskjellen på dette og det vi gjorde før påske 20

11 Kode for InputDemo - med indre klasse Lytter import javax.swing.*; import java.awt.*; import java.awt.event.*; // NB! - for innlesning class InputDemo extends JFrame { static int teller=0; JLabel etikett = new JLabel("Her kommer svaret"); JTextField tekstfelt = new JTextField(30); JButton knapp = new JButton("Trykk her"); InputDemo() { super("inputdemo"); 21 void lagvindu() { tekstfelt.seteditable(true); Container lerret = getcontentpane(); lerret.setlayout(new GridLayout(3, 1)); lerret.add(etikett); lerret.add(tekstfelt); lerret.add(knapp); Lytter l1 = new Lytter(); knapp.addactionlistener(l1); setdefaultcloseoperation(jframe.exit_on_close); pack(); setvisible(true); class Lytter implements ActionListener { public void actionperformed(actionevent e) { teller ++; System.out.println( \07 ); tekstfelt.settext("du har trykket "+ teller + " ganger"); public static void main(string[] args) { new InputDemo().lagVindu(); // end InputDemo

12 Flere uavhengige Vinduer A) Bare deklarere ulike klasser som subklasse av JFrame og lag objekt av dem i main B) Lag flere vinduer av samme type: Gå i løkke i main og lag flere objekter på skjermen Plasseringen på skjermen (ønsker ikke alle oppå hverandre) Legger til følgende kode class Input2Demo extends JFrame { // som før... static JFrame last = null; // peker til forrige vindu jeg har laget void lagvindu() { setlocationrelativeto(last); // ned til høyre for last last = this;... public static void main(string[] args) { for (int i = 0; i< 3; i++) new Input2Demo().lagVindu(); 23 24

13 Når vi klikker på de ulike vinduene 25 KeyListener Metoder i grensenittet: char getkeychar() Returns the character associated with the key in this event. int getkeycode() Returns the integer keycode associated with the key in this event. + ca 10 andre (så en kan forstå det blir litt tungt å implementere dem alle hvis vi bare trenger en eller to) 26

14 KeyAdapter eksempel lytter på alle tastene Vil lytte på at brukeren gir CR ( = entertasten, vognretur på norsk) Telle opp hvor mange tastetrykk som tastes inn i øverste felt Hvis det er CR, så oversette alt til STORE BOKSTAVER i nederste felt 12? 27 import javax.swing.*; import java.awt.*; import java.awt.event.*; // Husk for hendelseshåndtering class KeyDemo extends JFrame { JLabel etikett = new JLabel("Oversetter til store bokstaver"); JTextField tekstfelt = new JTextField(30), svarfelt = new JTextField(30) ; KeyDemo() { super("keydemo"); tekstfelt.seteditable(true); svarfelt.seteditable(true); Container lerret = getcontentpane(); lerret.setlayout(new GridLayout(3, 1)); lerret.add(etikett); lerret.add(tekstfelt); lerret.add(svarfelt); tekstfelt.addkeylistener(new Tast()); setdefaultcloseoperation(jframe.exit_on_close); pack(); setvisible(true); class Tast extends KeyAdapter { int teller = 0; public void keyreleased (KeyEvent e) { if (e.getkeycode() == KeyEvent.VK_ENTER) { String s = tekstfelt.gettext(); svarfelt.settext(s.touppercase()); else { teller++; svarfelt.settext("du har nå trykket på " + teller +" taster"); // slutt keyreleased og Tast

15 public static void main(string[] args) { new KeyDemo(); svarfelt.seteditable(false); Hint til gåten: Rullegardindemonstrasjon import javax.swing.*; import java.awt.*; import java.awt.event.*; // Husk for hendelseshåndtering class RulleDemo extends JFrame { JLabel etikett; JTextField tekstfelt, svarfelt; JComboBox kopi; RulleDemo() { super("rullegardindemonstrasjon"); etikett = new JLabel("Kopiering"); tekstfelt = new JTextField(30); svarfelt = new JTextField(30) ; tekstfelt.seteditable(true); kopi= new JComboBox (); kopi.additem("kopier som er"); kopi.additem("kopier til store bokstaver"); kopi.additem("kopier til små bokstaver"); kopi.additem("slett"); kopi.seteditable(false); Container lerret = getcontentpane(); lerret.setlayout(new GridLayout(4, 1)); lerret.add(etikett); lerret.add(tekstfelt); lerret.add(svarfelt); lerret.add(kopi); Lytter lytt = new Lytter(); tekstfelt.addkeylistener(lytt); kopi.additemlistener(lytt); setdefaultcloseoperation (JFrame.EXIT_ON_CLOSE); pack(); setvisible(true); // slutt konstruktør 30

16 Rulledemo. forts class Lytter extends KeyAdapter implements ItemListener { int teller =0; public void keyreleased (KeyEvent e) { teller++; svarfelt.settext("du har nå trykket på " + teller+" taster"): public void itemstatechanged(itemevent e) { String s = (String) e.getitem(); if (s.equals("kopier som er")) svarfelt.settext(tekstfelt.gettext()); else if (s.equals("kopier til store bokstaver")) svarfelt.settext(tekstfelt.gettext().touppercase()); else if (s.equals("kopier til små bokstaver")) svarfelt.settext(tekstfelt.gettext().tolowercase()); else if (s.equals("slett")) { svarfelt.settext(""); tekstfelt.settext(""); public static void main(string[] args) { new RulleDemo(); // slutt class Rulledemo 31 2D grafikk tegning i flaten (en firkant) Alle klassene i Swing og awt har paint() metoder som kalles når systemet får beskjed om å vise noe på skjermen eks. setvisble(true). Vi kaller aldri disse direkte bare indirekte via repaint() og setvisible(true) metodene Vi lager selv vår versjon av paint() eller paintcomponent() når vi vil lage grafikk i en flate f.eks. et JPanel Når metodene paint() eller paintcomponent() som vi har laget, kalles fra systemet, får de med en parameter, Graphics g, og det er på denne g vi skal tegne 32

17 import javax.swing.*; import java.awt.*; class Firkant extends JPanel { Firkant() { // angir foretrukket størrelse på dette lerretet. setpreferredsize(new Dimension(200, 200)); public void paintcomponent(graphics g) { // Her tegner vi g.drawrect(50, 50, 100, 100); class FirkantDemo extends JFrame { FirkantDemo() { settitle("firkantdemo"); JPanel firkant = new Firkant(); getcontentpane().add(firkant, BorderLayout.CENTER); setdefaultcloseoperation(jframe.exit_on_close); pack(); setvisible(true); // gjør komponentene synlig også public static void main(string[] args) { new FirkantDemo(); 10 firkanter public void paintcomponent (Graphics g) { for (int i = 0; i < 100; i += 10) g.drawrect(50+i, 50+i, 100+i, 100+i); public void paintcomponent (Graphics g) { for (int i = 0; i < 100; i += 10){ g.setcolor(color.cyan); g.fillrect(10+i, 10+i, 100+i, 100+i); g.setcolor(color.white); g.drawrect(10+i, 10+i, 100+i, 100+i); 34

18 Tekst og linjer Bytter ut class Firkant i eksempelet: class Firkant extends JPanel { int topp = 50, kant= 100, vside= 40; Firkant( ) { setpreferredsize(new Dimension(vside+kant+vside, topp+kant+30)); public void paintcomponent(graphics g) { super.paintcomponenet(g); // prøv med og uten g.setcolor(color.cyan); g.fillrect(vside, topp, kant, kant); g.setcolor(color.black); Font skrift = new Font("SansSerif",Font.BOLD,12); g.setfont(skrift); g.drawstring("firkant",vside+5,topp + kant/2); g.setcolor(color.white); g.drawline(vside+5,topp+kant/2+5,vside+kant-5,topp+kant/2+5); 35 MouseEvent int getbutton() Returns which, if any, of the mouse buttons has changed state (blitt klikket på). int getclickcount() Returns the number of mouse clicks associated with this event (enkeltklikk, dobbeltklikk). int getx() Returns the horizontal x position of the event relative to the source component. int gety() Returns the vertical y position of the event relative to the source component. + ca. 10 andre metoder 36

19 En Muse-demo et frihånds tegneprogram 37 Spesifikasjon Vi må lytte på musa (lage en egen klasse) og lagre alle posisjonene musa har vært på (f.eks de siste posisjonene musa har vært på). Hver gang musa røres (knapp-nede-trekkes-til-nyttsted), legger vi til et nytt punkt og tegner opp hele kurven om igjen Samme flaten som tegner, kan også lytte på musa Oppgave 1: Rett opp en opplagt feil i programmet (sammenhengende strek) Oppgave 2: Sjekk hva som skjer hvis vi ikke lagrer alle posisjonene musa har vært på (men for eksempel bare de 100 siste) 38

20 import javax.swing.*; import java.awt.*; import java.awt.event.*; class MuseDemo extends JFrame { MuseDemo() { settitle("musedemo"); Muse mus = new Muse(); mus.addmousemotionlistener(mus); getcontentpane().add(mus, BorderLayout.CENTER); setdefaultcloseoperation(jframe.exit_on_close); pack(); setvisible(true); public static void main(string[] args) { new MuseDemo(); class Muse extends JPanel implements MouseMotionListener { int [] x = new int[10000], y= new int[10000]; int ant = 0; Muse() { setpreferredsize(new Dimension(500, 500)); // De to metodene i MouseMotionListener: public void mousemoved (MouseEvent e) { ; public void mousedragged (MouseEvent e) { if (ant == x.length) ant = 0; x[ant] = e.getx(); y [ant] = e.gety(); ant ++; repaint(); // her ber vi om at vår paint() skal kalles public void paintcomponent (Graphics g) { super.paintcomponent(g); // Her tegner vi for (int i=1; i<ant; i++) g.drawline(x[i-1],y[i-1],x[i],y[i]);