Grafisk Brukergrensesnitt

Transkript

1 Grafisk Brukergrensesnitt Repetisjonskurs

2 Hva må kunnes? JFrame JPanel JComponents Layouts Listeners

3 jframe Representerer et vindu JComponents legges på vinduet Har en tittel og størrelse Komponenter struktureres med BorderLayout Elementer puttes på panelet med metoden

4 jframe import javax.swing.jframe; JFrame frame = new JFrame("Min JFrame tittel"); // Avslutt når vi fjerner vinduet (Frame n) frame.setdefaultcloseoperation(jframe.exit_on_close); // Lager en knapp JButton knapp = new JButton( En knapp ); // Putter knappen på framen frame.getcontentpane().add(knapp, BorderLayout.CENTER); // Setter vinduet i midten av skjermen frame.setlocationrelativeto(null); // Setter størrelsen til å romme alle elementer frame.pack(); // Viser vinduet på skjermen frame.setvisible(true);

5 JPANEL Brukes til å nøste sammenhengende grafiske komponenter Kan ha borders og layouts Elementer puttes på panelet med metoden add(jcomponent) Komponenter struktureres automatisk vannrett (FlowLayout)

6 JPANEL import javax.swing.*; JPanel p = new JPanel(); // Lager et tekstfelt JLabel minlabel = new JLabel( Min tekst label ); // Lager en knapp JButton minknapp = new JButton( Min knapp ); // Putter tekstfeltet of knappen på panelet p.add(minlabel); p.add(minknapp); // Sett border p.setborder(borderfactory.createlineborder(color.black); // Endre layout p.setlayout(new BorderLayout()); // Putt panelet på frame n frame.add(p);

7 Oppgave Vi skal lage et simpelt vindu med et tekstfelt (JLabel) og en knapp (JButton) Lag en klasse med en main metode som oppretter en JFrame, et JPanel, de to komponentene våre, og putter disse komponentene på panelet. Panelet skal puttes på framen, og framen skal vises til slutt.

8 jcomponents Grafiske elementer JButton, JTable, JLabel, JTextField etc Fine metoder: gettext(), settext( en tekst ) Puttes på et JPanel, eller en JFrame Lyttes på med listeners

9 Layouts Bestemmer hvordan komponenter (subklasser av JComponent) skal legges ut Settes på et JPanel med metoden setlayout(layout) BorderLayout, BoxLayout, FlowLayout, GridLayout etc JFrame bruker BorderLayout, JPanel bruker FlowLayout

10 Layouts JPanel p = new JPanel(); Diverse layout eksempler // 2 * 2 matrise layout GridLayout matriselayout = new GridLayout(2,2); p.setlayout(matriselayout); p.add(new JButton( 1 )); p.add(new JButton( 2 )); p.add(new JButton( 3 )); //... // Evig mange rader, 4 kolonner layout GridLayout kollayout = new GridLayout(0,4); p.setlayout(kollayout); p.add(new JButton( 1 )); p.add(new JButton( 2 )); p.add(new JButton( 3 )); //... // Komponenter legges ut vannrett FlowLayout vannrett = new FlowLayout(); p.setlayout(vannrett); p.add(new JButton( 1 )); p.add(new JButton( 2 )); p.add(new JButton( 3 )); //...

11 Layouts Kombinere JPanels og layouts JPanel høyere = new JPanel(); JPanel venstre = new JPanel(); JPanel toplayout = new JPanel(); // toplayout.setlayout(new FlowLayout()); venstre.setlayout( new BoxLayout(venstre, BoxLayout.PAGE_AXIS) ); høyere.setlayout( new BoxLayout(høyere, BoxLayout.LINE_AXIS) ); toplayout.add(venstre); toplayout.add(høyere); venstre.add(new JLabel( linje 1 )); venstre.add(new JLabel( linje 2 )); venstre.add(new JLabel( linje 3 )); venstre.add(new JLabel( linje 4 )); høyere.add(new JButton( knapp 1 )); høyere.add(new JButton( knapp 2 )); høyere.add(new JButton( knapp 3 )); høyere.add(new JButton( knapp 4 )); // Må alltid putte panelet på frame n til slutt frame.add(toplayout);

12 Oppgave Vi skal lage en simpel kalkulator (kun det visulle, ingen listeners enda) Lag en klasse (KalkulatorView) med en main metode. I main: Opprett et vindu med 3 paneler: Panel 1 skal ha et tekstfelt, og en reset knapp ved siden av. Hint: BoxLayout.LINE_AXIS, eller FlowLayout. Tekstfeltet skal vise tallet 0. Panel 2 skal være 3*3 matrise av knappene 1-9 Hint: GridLayout. Panel 3 skal være knappene -, +, *, / plassert nedover. Hint: BoxLayout.PAGE_AXIS Putt de 3 panelene på en JFrame. Panel 1 skal ligge øverst, panel 2 og 3 skal ligge under panel 1. Hint: JFrame bruker BorderLayout. Denne kan man bruke med: BorderLayout.PAGE_START, BorderLayout.CENTER, og

13 Listeners Brukes til å reagere på events En komponent registreres til å lytte på en hendelse: minknapp.addactionlistener( new MinLytteKlasse() ); En bestemt metode blir kalt når hendelsen inntreffer Events: Trykke på knapp, trykke return i en JTextField, velge et meny element

14 Listeners //... JButton minknapp = new JButton( Trykk på meg ); minknapp.addactionlistener( new MinLytteKlasse() ); //... Class MinLytteKlasse implements ActionListener { public void actionperformed(actionevent e) { JButton knappen = (JButton) e.getsource(); System.out.println( Jeg var trykket på! + knappen.gettext() ); } }

15 Oppgave Vi skal lage lyttere til kalkulator programmet vårt og utføre en matematisk operasjon på en-siffrede tall Lag en klasse CalculatorController som implementerer ActionListener grensesnittet Opprett en instanse av denne klassen fra main og sett pekeren til å lytte på klikk på samtlige knapper.

16 Oppgave (forts) Vi skal implementere actionperformed metoden i controller klassen Metoden må vi vite hvilken knapp som ble trykket på. Opprett if-else setninger for hver mulige verdi for resultatet av e.getsource().gettext() Hvis tastetrykket er en tall-knapp må vi ta vare på tallet. Opprett to intvariable i controller klassen som tar vare på disse. Dersom det ikke er et tall er det en operasjon, ta vare på operasjonen som en String. Dersom det er reset-knappen skal vi sette de tre variablene til 0/null. I dette tilfellet setter vi også tekst-input feltet til å vise tallet 0 ( hint: settext() ). Etter if-else kodesnutten: dersom begge tallene er forskjellig fra 0 kan vi utføre operasjonen. Opprett en egen metode som utfører regne-operasjonen på de to tallene og setter svaret i tekst-input feltet.

17 utvide gui klasser Ofte ønsker man å utvide java s egne GUI klasser for å kunne ha bedre kontroll over disse class MinKnapp extends JButton, class MittPanel extendsjpanel I tillegg ønsker man å neste disse klassene inni hverandre for å kunne enkelt dele variabler. class MittPanel extendsjpanel { class MittPanel2 extendsjpanel { } }

18 DEMO: Utvide kalkulatoren til å heller extende Swing klasser og nøste disse, til fordel for renere kode.