INF1010 Grafisk brukergrensesni3 (GUI) med Swing/awt. del 1

Transkript

1 INF1010 Grafisk brukergrensesni3 (GUI) med Swing/awt del 1 1 Hvordan lage et vindu på skjermen 2 Hvordan legge inn enkle elementer i vinduet 3 Hvordan lage et vindu med et sudokuspill 4 Hvordan lage en ly:ende knapp i vinduet

2

3 Hvordan lage et vindu på skjermen? Hvordan legge ulike komponenter i vinduet (trykknapper, teks>elter, tekst, bilder, mm)? Kort om layout (utlegg? utseende?) av vinduer Li: om hvordan Java- programmet vårt fanger opp knappetrykk Enklest mulig eksempel

4 GUI i INF1010 Data inn og ut i DOS- /kommandovinduet/shellet ore ikke hensiktsmessig eller brukervennlig. Vi dekker bare li: i INF1010, men nok Ul å gå videre selv. Gjør det le:ere å Uegne seg andre GUI- systemer, for eksempel JavaFX. Javas klassebibliotek for GUI har mer enn 300 metoder, men bare et lite antall av disse ny:es i praksis. ORe tar vi utgangspunkt i et eksempel som virker og dere:er utvider / innskrenker de:e.

5 Når man jobber i industrien, bruker man ofte verktøy for «drag-and-drop» konstruksjon av GUI. I INF1010 lærer vi GUI fra grunnen av og å løse oppgavene med Swing og awt (advanced window toolkit). Forståelse for hvordan Swing/awt er programmert er det viktigste læringsmålet. Javas GUI består av et litt eldre system awt, og et litt nyere system swing som er bygget på awt. Men ikke alt er skrevet om, så vi trenger i nesten alle programmer å importere begge (merk javax): import javax.swing.*; import java.awt.*; (De klasser som begynner med J er swing, resten er awt.)

6 Hvorfor ikke? har mange fordeler, men ikke i boka vi bruker ikke enklere å lære når man bare skal programmere li: GUI ikke enklere å bruke JavaFX er enda mer komplekst, men le:ere å integrere med f.eks. mobiltelefonprogrammer (apper).

7 For å lage et vindu bruker vi et objekt av klassen JFrame:

8

9 Lage vinduet/ramma ved å skape et ny: JFrame- objekt: (komponentmetoden) import javax.swing.*;! import java.awt.*;!! class Gui000 {! public static void main(string [ ] a) {!!!JFrame ramme = new JFrame( Dette er rammetittelen");!!ramme.setdefaultcloseoperation(jframe.exit_on_close);!!ramme.setsize(300, 200);!!ramme.setVisible(true);!! }! }!

10 Hvor mange metoder bruker vi her? Hvor mange finnes det i JFrame? import javax.swing.*;! import java.awt.*;!! class Gui000 {! public static void main(string [ ] a) {!!!JFrame ramme = new JFrame( Dette er rammetittelen");!!ramme.setdefaultcloseoperation(jframe.exit_on_close);!!ramme.setsize(300, 200);!!ramme.setVisible(true);!! }! }!

11 Bruke klassen JFrame som den er import javax.swing.*; import java.awt.*; (komponentmetoden) class Gui000 { public static void main(string [ ] a) { JFrame ramme = new JFrame( Dette er rammetittelen"); ramme.setdefaultcloseoperation(jframe.exit_on_close); ramme.setsize(300, 200); ramme.setvisible(true); } } Type: JFrame Navn: ramme Type: JFrame Navn: ramme Pluss mange Implementasjoner av forskjellige grensesnitt Object-del Component-del Container-del Window-del Frame-del JFrame-del Objekt av klassen JFrame i minne på skjermen

12 Hvordan gjør vi det: To måter Klassen JFrame lager vinduer. Kan enten bruke JFrame som den er, eller Lage en subklasse av JFrame og legge Ul den spesielle koden vi ønsker i subklassen. Eksempel:

13 Subklasse av JFrame (mest vanlig) import javax.swing.*; import java.awt.*; (subklassemetoden) class RammeDemo2 extends JFrame { RammeDemo2() { super( Første vindu"); // En annen måte å sette tittel på rammen setdefaultcloseoperation(jframe.exit_on_close); setsize(300,200); setvisible(true); } public static void main(string[] args) { new RammeDemo2(); } } Object-del Component-del Container-del Window-del Frame-del JFrame-del RammeDemo2-del Objekt av klassen RammeDemo2 i minne på skjermen

14 Standard avslutning De:e bør med i alle vinduer setdefaultcloseoperation(jframe.exit_on_close); Setter x i til å virke vanlig * setvisible(true); er nødvendig for at vinduet skal vise seg fram på skjermen Først lager vi vinduet med alle dens felter, trykknapper,..osv, så viser vi det fram * Prøv uten og se hva som skjer

15 Det er mange komponenter vi kan legge inn i et vindu

16 Hva gjør vi når vi lager et vindu forenklet versjon 1. Vi lager et objekt for vinduet, subklasse av JFrame og se:er navn på rammen 2. Kan se:e størrelsen setsize(300, 200); 3. Lager objekter for alle de komponentene vi vil ha i vinduet og legger alle disse inn i vindusflaten 4. Se:er inn at avslutningsknappen skal virke: setdefaultcloseoperauon(jframe.exit_on_close); 5. Sier fra at vinduet skal vise seg fram setvisible(true);

17 Noen komponenter vi kan legge inn JButton: JButton knapp = new JButton("Trykk her );! En knapp som brukeren kan trykke på. Parameteren i konstruktøren angir teksten på knappen. JLabel: JLabel etikett = new JLabel("Skriv inn navn");! En etikett som kan inneholde enten tekst eller bilder. Brukes ofte som ledetekst til JText-Field. JTextField: JTextField tekstfelt = new JTextField(30); Et tekstfelt hvor brukeren kan skrive inn tekst.

18 Noen komponenter vi kan legge inn JTextArea: JTextArea tekstvindu = new JTextArea(10, 30); Et tekstvindu hvor programmet kan vise fram tekst. JScrollPane: JScrollPane rullevindu = new JScrollPane(tekstvindu); Lager horisontale og vertikale rullefelt rundt et element. Brukes ofte i sammenheng med JTextArea som legges inn i rullevinduet. Parameteren er elementet vi ønsker lagt inn i rullevinduet. Jpanel: JPanel panel = new JPanel(); En flate som kan inneholde andre komponenter. Altså en «indre» ramme som igjen kan inneholde knapper, flater og paneler.

19 Mer om å lage et panel og legge Ung inn i det. Dere:er legges panelet inn i vindusflaten class Gui03 {! public static void main(string [] a) {!!JFrame ramme = new JFrame("Ramme laget med klassen Gui03");!!ramme.setSize(700, 400);!!!JButton knapp = new JButton("Trykk her");!!jlabel etikett = new JLabel("Skriv inn navn");!!jtextfield tekstfelt = new JTextField(30);!!JTextArea tekstvindu = new JTextArea(10, 30);!!JScrollPane rullevindu = new JScrollPane(tekstvindu);!!!JPanel panel = new JPanel();!!!panel.add(knapp);!!panel.add(etikett);!!panel.add(tekstfelt);!!panel.add(rullevindu);! // tekstvinduet er inne i rullevinduet!!!ramme.add(panel);!!ramme.setdefaultcloseoperation(jframe.exit_on_close);!!ramme.setvisible(true);! }! }!

20 class Gui03 {! public static void main(string [] a) {!!JFrameramme=n e w JFrame("Rammelagetm e d klasseng u i 0 3 " ) ;!!ramme.setsize(700, 400);!!!JButton knapp = new JButton("Trykk her");!!jlabel etikett = new JLabel("Skriv inn navn");!!jtextfield tekstfelt = new JTextField(30);!!JTextArea tekstvindu = new JTextArea(10, 30);!!JScrollPane rullevindu = new JScrollPane(tekstvindu);!!!JPanel panel = new JPanel();!!!panel.add(knapp);!!panel.add(etikett);!!panel.add(tekstfelt);!!panel.add(rullevindu);! // tekstvinduet er inne i rullevinduet!!!ramme.add(panel);!!ramme.setdefaultcloseoperation(jframe.exit_on_close);!!ramme.setvisible(true);! }! }!!

21 Et litt mer sammensatt eksempel

22 import javax.swing.* ; import java.awt.* ; class KnappeGrid { public static void main(string [ ] a) { JFrame ramme = new JFrame("Grid av knapper (JButton)"); ramme.setsize(300, 300); JPanel panel = new JPanel(); panel.setlayout(new GridLayout(5,5)); // 5 x 5 ruter..

23 . JButton knapp1 = new JButton("1"); knapp1.setborder(borderfactory.creatematteborder (4, 1, 1, 1, Color.black)); JButton knapp2 = new JButton("2"); knapp2.setborder(borderfactory.creatematteborder (1, 4, 1, 1, Color.black)); JButton knapp3 = new JButton("3"); knapp3.setborder(borderfactory.creatematteborder (1, 1, 4, 1, Color.black)); JButton knapp4 = new JButton("4"); knapp4.setborder(borderfactory.creatematteborder (1, 1, 1, 4, Color.green)); JButton knapp5 = new JButton("5"); knapp5.setborder(borderfactory.creatematteborder (5, 5, 1, 1, Color.red));..

24 . JButton knapp1 = new JButton("1"); knapp1.setborder(borderfactory.creatematteborder (4, 1, 1, 1, Color.black)); JButton knapp2 = new JButton("2"); knapp2.setborder(borderfactory.creatematteborder (1, 4, 1, 1, Color.black)); JButton knapp3 = new JButton("3"); knapp3.setborder(borderfactory.creatematteborder (1, 1, 4, 1, Color.black)); JButton knapp4 = new JButton("4"); knapp4.setborder(borderfactory.creatematteborder (1, 1, 1, 4, Color.green)); JButton knapp5 = new JButton("5"); knapp5.setborder(borderfactory.creatematteborder (5, 5, 1, 1, Color.red)); knapp1.setfont(new Font("SansSerif", Font.BOLD, 48)); knapp2.setfont(new Font("SansSerif", Font.BOLD, 48)); knapp3.setfont(new Font("SansSerif", Font.BOLD, 48)); knapp4.setfont(new Font("SansSerif", Font.BOLD, 48)); knapp5.setfont(new Font("SansSerif", Font.BOLD, 48));..

25 . panel.add(new JButton("1")); panel.add(knapp2); panel.add(new JButton("3")); panel.add(new JButton("4")); panel.add(new JButton("5")); panel.add(new JButton("1")); panel.add(new JButton("2")); panel.add(new JButton("3")); panel.add(knapp4); panel.add(new JButton("5")); panel.add(knapp1); panel.add(new JButton("2")); panel.add(new JButton("3")); panel.add(new JButton("4")); panel.add(new JButton("5")); panel.add(new JButton("1")); panel.add(new JButton("2")); panel.add(new JButton("3")); panel.add(new JButton("4")); panel.add(knapp5); panel.add(new JButton("1")); panel.add(new JButton("2")); panel.add(knapp3); panel.add(new JButton("4")); panel.add(new JButton("5"));..

26 class KnappeGrid { } public static void main(string [] a) { JFrame ramme = new JFrame("Grid av knapper (JButton)"); ramme.setsize(300, 300); JPanel panel = new JPanel(); } panel.setlayout(new GridLayout(5,5)); // 5 x 5 ruter < lager knappene > <legger inn knappene I panelet> ramme.add(panel); ramme.setdefaultcloseoperation(jframe.exit_on_close); ramme.setvisible(true);

27 En knapp med reaksjon Vi skal lage det aller enkleste programmet vi kan tenke oss med én knapp som reagerer på at vi trykker på den ved å gi en utskrift i kommando-vinduet: C:\javaprog> javac Vindu.java C:\javaprog> java Vindu noen sa hei til meg noen sa hei til meg noen sa hei til meg

28 Hvordan lage en knapp som ly:er JFrame ramme; JButton knapp; knapp= new JButton("Hei"); ramme.add(knapp); knapp.addactionlistener(knappelyttter); JButton knapp Hei Dette objektet vil synes på skjermen (som en knapp) Legger knappen inn i vinduet NYTT: Sier fra hvem som skal lytte etter trykk på denne knappen (mer på neste side)

29 import javax.swing.*; import java.awt.*; import java.awt.event.*; class Knappelytter { public static void main(string [] a) { JFrame ramme = new JFrame("En lyttende knapp"); ramme.setsize(300,200); JButton knapp= new JButton("Si «hei»"); ramme.add(knapp); ramme.setdefaultcloseoperation(jframe.exit_on_close); ramme.setvisible(true); ActionListener knappelytter = new Lytter( ); knapp.addactionlistener(knappelytter); } } class Lytter implements ActionListener { public void actionperformed(actionevent e) { System.out.println("Hvem sa hei!??"); } }

30 Hva skjer ved et knappetrykk? Dette objektet synes på skjermen (som en knapp) Si «hei» JButton ActionListener knapp.addactionlistener(knappelytter); forteller kjøresystemet at objektet som knappelytter peker på og som spiller rollen ActionListener, skal ha beskjed når noe skjer med knappen knapp. knapp knappelytter actionperformed( ) Kobling i kjøre-systemet Type: ActionListener Når noen trykker på knappen, kaller kjøresystemet metoden actionperformed i det objektet som er satt opp som lytter for denne knappen. Dette objektet spiller rollen ActionListener