Vi lærte sist å lage vinduer. Om å lage et vindu. GUI (Graphical User Interface)-programmering. Inf GUI - del 2

Transkript

1 GUI (Graphical User Iterface)-programmerig If GUI - del 2 Stei Gjessig Ist for Iformatikk Uiv. i Oslo Tidligere Hvorda få laget et vidu på skjerme Grafikk (tegig i viduet) Hvorda legge ulike kompoeter i viduet (trykkapper, tekstfelter, tekst, bilder,) Ekel behadlig av kappetrykk mm. I dag: Kort repetisjo Layout av viduer Mer om iput fra brukere via viduer Grudig om evetmodelle (fage opp hedelser) og Javas store bibliotek for det Hedelser (Evet) Lyttere med gresesitt eller Adaptere Lyttemetodee 2 kompoeter (ie i e Cotaier) Vi lærte sist å lage viduer JFrame er selve bildet (ramme) Cotaier som er vidusflate, e egeskap til selve bildet, får vi tak i ved å kalle metode getcotetpae( ) 3 import java.awt.evet.*; import javax.swig.*; Om å lage et vidu public class Vidu exteds JFrame { JLabel etikett; JTextField tekstfelt; JButto kapp; public Vidu( ) { settitle( Test-vidu"); Cotaier samlig = getcotetpae(); samlig.setlayout(ew FlowLayout()); etikett = ew JLabel("Skriv i av"); samlig. add(etikett); tekstfelt = ew JTextField(30); samlig. add(tekstfelt); kapp = ew JButto( Ferdig"); samlig. add(kapp); setdefaultcloseoperatio(jframe.exit_on_close); setbouds(100, 250, 400,150); Magler å lytte på kappe / tekstfeltet 4

2 Vi har lærte å lytte på kapper Ka også lytte på CR i tekstfelt Dette objektet syes på skjerme (som et tekstfelt Ferdig kapp.addactiolisteer(kappelytter); setter opp e forbielse mellom kappe og objektet/metode som hådterer kapptrykk Dette objektet syes på skjerme (som e kapp) tekstfelt.addactiolisteer(tekstlytter); kapp kappelytter tekstfelt tekstlytter Ved CR Vidu-objekt, subklasse av JFrame Koblig i kjøre-systemet Vidu-objekt, subklasse av JFrame Koblig i kjøre-systemet < det som skal gjøres ved kappetrykk> actioperformed actioperformed < det som skal gjøres ved år CR trykkes, f.eks. tekstfelt.gettext(); > Lytte-objekt som implemeterer gresesittet ActioListeer 5 Lytte-objekt som implemeterer gresesittet ActioListeer 6 import java.awt.evet.*; import javax.swig.*; public class Vidu exteds JFrame { private JButto kapp; private Lytter kappelytter; Fullstedig mii-program public static void mai(strig[] args) {ew Vidu(); public Vidu( ) { super("hei test"); Cotaier samlig = getcotetpae(); samlig.setlayout(ew FlowLayout()); setbouds(100, 250, 300,200); kapp= ew JButto("Hei"); samlig. add(kapp); setdefaultcloseoperatio(jframe.exit_on_close); kappelytter = ew Lytter( ); kapp.addactiolisteer(kappelytter); // slutt Vidu kostruktør class Lytter implemets ActioListeer { public void actioperformed(actioevet e) { System.out.pritl("Noe sa hei til meg"); // slutt class Lytter // slutt class Vidu Her lager vi et kappe Her legges kappe i i vidusflate Her lager vi et lytterobjekt Her kobles kappe opp mot dette lytterobjektet 7 mai ew Vidu( ); Det er mulig å slå samme lytter-objektet med adre objekter f.eks.: Kjøresystemet Dette objektet syes på skjerme (som e kapp) Vidu kapp kapp = ew JButto(... ) kapp.addactiolisteer(this);... actioperformed objekt av klasse Vidu (subklasse av JFrame, implemeterer ActioListeer) Dette blir litt moolittisk 8

3 import java.awt.evet.*; import javax.swig.*; Vi slår samme Vidus-objektet og lytter-objektet Hvorda få data fra brukere fra viduet public class Vidu exteds JFrame implemets ActioListeer { private JButto kapp; private Lytter kappelytter; public static void mai(strig[] args) {ew Vidu(); public Vidu( ) { super("hei test"); Cotaier samlig = getcotetpae(); samlig.setlayout(ew FlowLayout()); setbouds(100, 250, 300,200); kapp= ew JButto("Hei"); samlig. add(kapp); kapp.addactiolisteer(this); setdefaultcloseoperatio(jframe.exit_on_close); // slutt Vidu kostruktør public void actioperformed(actioevet e) { System.out.pritl("Noe sa hei til meg"); // slutt class Lytter // slutt class Vidu Her lager vi lytterobjektet også Her kobles kappe opp mot lytterobjektet (som er det samme) 9 Vi må få de data brukere skriver i viduet i i vårt program. Mer spesifikt, vi må kue skille mellom ulike tig (museklikk, tastetrykk, tekstskrivig, mm) brukere gjør med viduee som programmet (via kall til operativsystemet) har teget opp på skjerme. Vi må direkte fie ut om brukere har f.eks. Trykket på e trykk-kapp (hvilke) Tastet i ett av tekstfeltee (hvilket felt og hva ble tastet) Hvor er musa (følge des bevegelser) Klikket med musa (hvor, hvilke, opp, ed) Trykket e tast på tastaturet mm Hva ka e bruker gjøre Typer av hedelser Bevege musa iefor e av våre viduer i i viduet ut av viduet over e av kompoetee (trykk-kapp, tekstfelt,..) - hvilke Klikke musa hvilke kapp eller hvor (x,y i viduet) klikke ed slippe opp Taste e tast hvilke trykke ed slippe opp Trykke CR i et tekstfelt 11 Evetmodelle hva gjør operativsystemet? Op-sys (Wi, Liux,..) Ditt Program ( Evet Dispatch Thread ) Hver tig brukere gjør med PCe (flytter eller klikker musa, trykker på tastaturet...) blir laget om til é pakke. E kø av slike pakker sedes over fra operativsystemet til ditt program hele tide år tig skjer. Hver gag f.eks musa flyttes ett eeste pukt bortover geereres e y slik pakke (køe ka forkortes) 12

4 Mer om pakke (subklasse av EvetObject) Eksempler Ieholder få tig Størrelse av pakke/objektet er avhegig av type hedelse : Type hedelse : musebevegelse museklikk, trykk på tast (ed eller sluppet)... Verdi, f.eks Museposisjo (x,y) i viduet Hvilke musekapp trykket Hvilke tast trykket verdi: f.eks type hedelse x-pos kompoet y-pos Hvilket Viduskompoet på skjerme dette tilhører Peker til eller tekst Hvorda vet operativsystemet det? 13 Class RulleLytter implemets ItemListeer { public void itemstatechaged(itemevet e) { Strig s = (Strig) e.getitem(); if (s.equals( Opp")) {fart++; else if (s.equals( Ned")) {fart - - ; else if (s.equals( Høyre")) {retig = hoyre; else if (s.equals( Vestre")) {retig = vestre; public void actioperformed(actioevet e) { if (e.getsource( ) = = stoppkapp) { setvisible(false); System.exit (0); else if (e.getsource( ) = = ekapp) { Mer om Evetmodelle e kø per program Op-sys (Wi, Liux,..) Ditt Program ( Evet Dispatch Thread ) Operativsystemet har viduer fra flere programmer på skjerme, me vet hvilket vidu og da program ett evet (hedelse) tilhører. Lager e slik kø for hvert program som har viduer på skjerme Hvert program får da bare sie hedelser. Hvorda kytte forbidelse program evetkøe Programmet må lage lyttere, (= køe av hedelser) For hver hedelse må det meldes på et bestemt objekt og tilhørede metode som mottager av hedelses-objekter/hedelses-pakker. Dee metode blir da kalt hver gag e slik hedelse itreffer Hvis flere metoder blitt registrert som lyttere av samme type hedelse, får de hver si kopi av pakka. Lyttere implemeterer et gresesitt (ulikt for hver type hedelse) med tilhørede lyttermetoder: Hyppigst brukt gresesitt / metode: ActioListeer / actioperformed(actioevet e) Javas kjøretidssystem (Java Virual Machie, >java) har e løkke som leser meldigee i evetkøe og starter Evet Dispatch Thread -e som fordeler dem (= kaller metodee) for de typer hedelser som har e lytter registrert. kaster de pakkee ige vil ha 15 16

5 >java fordeler pakkee Op-sys while (true) { <les este pakke> < fi evt. registrerte lyttemetoder> <kall de(m) med pakke som parameter> < kast pakker ige vil ha> Ditt javaprogram Evet Dispatch Thread 17 Viktigste lyttergresesitt Gresesitt og type av hedelser MouseListeer museklikk MouseMotioListeer musebevegelser ActioListeer Trykk på trykkapper / CR i tekstfelt KeyListeer Tastetrykk ItemListeer Valg i rullegardi + ca 80 adre lytter-gresesitt f.eks: ListSelectioListeer, MeuDragMouseListeer, MeuKeyListeer, MeuListeer, MetaEvetListeer, MouseIputListeer, MouseWheelListeer, NamespaceChageListeer, NamigListeer, NodeChageListeer, ObjectChageListeer, PopupMeuListeer, PrefereceChageListeer, PropertyChageListeer, RowSetListeer, SSLSessioBidigListeer, TableColumModelListeer, TableModelListeer, TextListeer, WidowFocusListeer, WidowListeer, WidowStateListeer 18 Hvorda lage et lytteobjekt to måter: Kappetrykk, tell opp og vis fram (este som MVC-progr. på forrige forelesig) 1 Implemetere det riktige gresesittet (KeyListeer, ActioListeer, ItemListeer) Husk at da må vi implemetere alle metodee i gresesittet Dette gjør vi som oftest bare for oe ekle gresesitt (der det bare er é metode i hvert gresesitt) : ActioListeer ItemListeer 2 Lage e lytterklasse som subklasse av e ferdiglaget klasse som allerede er laget og som implemeterer lytter-gresesittet NY De heter alle Adapter (KeyAdapter, MouseAdapter,..) og har implemetert tomme metoder for alle metodee i gresesittet. I e subklasse ka vi da ekelt omdefiere de metodee vi skal bruke (vi slipper å gi kode til reste av metodee) 19 Vi har tre kompoeter Overskrift Tekstfelt Trykkapp Bruker GridLayout 3 rader, 1 koloe Vi legger i e lytter på trykkappe Sier pig De teller opp atall gager trykket og skriver det ut i tekstfeltet Sjekk programmet vi lager og se vesetlige forskjelle på dette og det vi gjorde forrige gag 20

6 Kode for IputDemo - med idre klasse Lytter import javax.swig.*; import java.awt.evet.*; // NB! - for ilesig class IputDemo exteds JFrame { static it teller=0; JLabel etikett = ew JLabel("Her kommer svaret"); JTextField tekstfelt = ew JTextField(30); JButto kapp = ew JButto("Trykk her"); IputDemo() { super("iputdemo"); 21 void lagvidu() { tekstfelt.seteditable(true); Cotaier lerret = getcotetpae(); lerret.setlayout(ew GridLayout(3, 1)); lerret.add(etikett); lerret.add(tekstfelt); lerret.add(kapp); Lytter l1 = ew Lytter(); kapp.addactiolisteer(l1); setdefaultcloseoperatio(jframe.exit_on_close); pack(); class Lytter implemets ActioListeer { public void actioperformed(actioevet e) { teller ++; System.out.pritl( \07 ); tekstfelt.settext("du har trykket "+ teller + " gager"); public static void mai(strig[] args) { ew IputDemo().lagVidu(); // ed IputDemo Flere uavhegige Viduer A) Bare deklarere ulike klasser som subklasse av JFrame og lag objekt av dem i mai B) Lag flere viduer av samme type: Gå i løkke i mai og lag flere objekter på skjerme Plasserige på skjerme (øsker ikke alle oppå hveradre) Legger til følgede kode class Iput2Demo exteds JFrame { // som før... static JFrame last = ull; // peker til forrige vidu jeg har laget void lagvidu() { setlocatiorelativeto(last); // ed til høyre for last last = this;... public static void mai(strig[] args) { for (it i = 0; i< 3; i++) ew Iput2Demo().lagVidu(); 23 24

7 Når vi klikker på de ulike viduee KeyListeer Metoder i greseittet: char getkeychar() Returs the character associated with the key i this evet. it getkeycode() Returs the iteger keycode associated with the key i this evet. + ca 10 adre (så e ka forstå det blir litt tugt å implemetere dem alle hvis vi bare treger e eller to) iterface MouseListeer void mouseclicked(mouseevet e) Ivoked whe the mouse butto has bee clicked (pressed ad released) o a compoet. void mousepressed(mouseevet e) Ivoked whe a mouse butto has bee pressed o a compoet. void mousereleased(mouseevet e) Ivoked whe a mouse butto has bee released o a compoet. void mouseetered(mouseevet e) Ivoked whe the mouse eters a compoet. void mouseexited(mouseevet e) Ivoked whe the mouse exits a compoet. MouseEvet it getbutto() Returs which, if ay, of the mouse buttos has chaged state (blitt klikket på). it getclickcout() Returs the umber of mouse clicks associated with this evet (ekeltklikk, dobbeltklikk). it getx() Returs the horizotal x positio of the evet relative to the source compoet. it gety() Returs the vertical y positio of the evet relative to the source compoet. + ca. 10 adre metoder 27 28

8 KeyAdapter lytter på alle tastee Vil lytte på at brukere gir CR ( = eter-taste, vogretur på orsk) Telle opp hvor mage tastetrykk som tastes i i øverste felt Hvis det er CR, så oversette alt til STORE BOKSTAVER i ederste felt 12? 29 import javax.swig.*; import java.awt.evet.*; // Husk for hedelseshådterig class KeyDemo exteds JFrame { JLabel etikett = ew JLabel("Oversetter til store bokstaver"); JTextField tekstfelt = ew JTextField(30), svarfelt = ew JTextField(30) ; KeyDemo() { super("keydemo"); tekstfelt.seteditable(true); svarfelt.seteditable(true); Cotaier lerret = getcotetpae(); lerret.setlayout(ew GridLayout(3, 1)); lerret.add(etikett); lerret.add(tekstfelt); lerret.add(svarfelt); tekstfelt.addkeylisteer(ew Tast()); setdefaultcloseoperatio(jframe.exit_on_close); pack(); class Tast exteds KeyAdapter { it teller = 0; public void keyreleased (KeyEvet e) { if (e.getkeycode() == KeyEvet.VK_ENTER) { Strig s = tekstfelt.gettext(); svarfelt.settext(s.touppercase()); else { teller++; svarfelt.settext("du har å trykket på " + teller +" taster"); // slutt keyreleased og Tast public static void mai(strig[] args) { ew KeyDemo(); Rullegardidemostrasjo import javax.swig.*; import java.awt.evet.*; // Husk for hedelseshådterig class RulleDemo exteds JFrame { JLabel etikett; JTextField tekstfelt, svarfelt; JComboBox kopi; svarfelt.seteditable(false); Hit til gåte: RulleDemo() { super("rullegardidemostrasjo"); etikett = ew JLabel("Kopierig"); tekstfelt = ew JTextField(30); svarfelt = ew JTextField(30) ; tekstfelt.seteditable(true); kopi= ew JComboBox (); kopi.additem("kopier som er"); kopi.additem("kopier til store bokstaver"); kopi.additem("kopier til små bokstaver"); kopi.additem("slett"); kopi.seteditable(false); Cotaier lerret = getcotetpae(); lerret.setlayout(ew GridLayout(4, 1)); lerret.add(etikett); lerret.add(tekstfelt); lerret.add(svarfelt); lerret.add(kopi); Lytter lytt = ew Lytter(); tekstfelt.addkeylisteer(lytt); kopi.additemlisteer(lytt); setdefaultcloseoperatio (JFrame.EXIT_ON_CLOSE); pack(); // slutt kostruktør 32

9 Rulledemo. forts class Lytter exteds KeyAdapter implemets ItemListeer { it teller =0; public void keyreleased (KeyEvet e) { teller++; svarfelt.settext("du har å trykket på " + teller+" taster"): public void itemstatechaged(itemevet e) { Strig s = (Strig) 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 mai(strig[] args) { ew RulleDemo(); MouseEvet it getbutto() Returs which, if ay, of the mouse buttos has chaged state (blitt klikket på). it getclickcout() Returs the umber of mouse clicks associated with this evet (ekeltklikk, dobbeltklikk). it getx() Returs the horizotal x positio of the evet relative to the source compoet. it gety() Returs the vertical y positio of the evet relative to the source compoet. + ca. 10 adre metoder // slutt class Rulledemo E Muse-demo et frihåds tegeprogram Spesifikasjo Vi må lytte på musa (lage e ege klasse) og lagre alle posisjoee musa har vært på (f.eks de siste posisjoee musa har vært på). Hver gag musa røres (kapp-ede-trekkes-til-yttsted), legger vi til et ytt pukt og teger opp hele kurve om igje Samme flate som teger, ka også lytte på musa Oppgave 1: Rett opp e opplagt feil i programmet (sammehegede strek) Oppgave 2: Sjekk hva som skjer hvis vi ikke lagrer alle posisjoee musa har vært på (me for eksempel bare de 100 siste) 35 36

10 import javax.swig.*; import java.awt.evet.*; class Muse exteds JPael implemets MouseMotioListeer { it [] x = ew it[10000], y= ew it[10000]; it at = 0; class MuseDemo exteds JFrame { MuseDemo() { settitle("musedemo"); Muse mus = ew Muse(); mus.addmousemotiolisteer(mus); getcotetpae().add(mus, BorderLayout.CENTER); setdefaultcloseoperatio(jframe.exit_on_close); pack(); public static void mai(strig[] args) { ew MuseDemo(); Muse() { setpreferredsize(ew Dimesio(500, 500)); // De to metodee i MouseMotioListeer: public void mousemoved (MouseEvet e) { ; public void mousedragged (MouseEvet e) { if (at == x.legth) at = 0; x[at] = e.getx(); y [at] = e.gety(); at ++; repait(); // her ber vi om at vår paitcompoeet() skal kalles public void paitcompoet (Graphics g) { super.paitcompoet(g); // Her teger vi for (it i=1; i<at; i++) g.drawlie(x[i-1],y[i-1],x[i],y[i]);