Fag LO189D - Objektorientert programmering Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 9 GUI-komponenter De vanligste GUI-komponenteneside 2-3 Arvehierarkietside 4 Å programmere et vinduside 5-6 LayoutManager’e og Panelerside 7-10 Tekstkomponenterside Valg mellom alternativerside JCheckBox side 20 JRadioButton, ButtonGroupside 21 JList side 22

Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 9, side 2 De vanligste GUI-komponentene kategorikontroll (tab control) kategorikort (tab) avmerkingsboks (check box) lukket rullegardinliste (closed drop down list box) ledetekst (label) tekstboks (text box) verdisettingsboks (spin box) (kommando-) trykknapp ((command) button) Norske tekster i hht. ”The Windows Interface Guidelines for Software Design. Microsoft Press 1995”

Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 9, side 3 De vanligste GUI-komponentene, forts. Gruppebokser –Printer –Page range –Copies Inni boksen ”Page range” finner du tre alternativknapper. Ett av mange mulige alternativer - bruk alternativknapper Flere av mange mulige alternativer - bruk avkrysningsbokser Dersom antall alternativer er stort (>6-8) bruk listebokser

Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 9, side 4 Arvehierarkiet JComponent JTextComponent JTextArea JTextField HTMLEditorKit AbstractButton JComboBox JLabel JList JMenuBar JPane JPopupMenu JScrollbar JScrollPane JTable JTree JToggleButton JButton JMenuItem JCheckBoxJRadioButton JRadioButtonMenuItemJCheckBoxMenuItemJMenu Container ComponentObject

Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 9, side 5 Å programmere et vindu La klassen være en subklasse av CloseableFrame I konstruktøren gjør du følgende: –Henter peker til beholderen (Container innhold = getContentPane();) –Bestemmer eventuell oppdeling i paneler –Bestemmer LayoutManager (mer om det snart) for beholderen og for hvert panel. –For hver komponent som skal være med må du lage komponenten med å bruke new ta den med i riktig panel med add registrer eventuelle lytterobjekter husk at komponentnavnene bare er pekere. De behøver derfor ikke være instansvariabler, men kan være lokale inni konstruktøren Lag lytter-klasser –lag (ev. indre) klasser som implementerer den aktuelle interface eller er en subklasse av den tilhørende adapter-klassen (se oversikten side 334) Definer lytterobjektene som instansvariabler

Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 9, side 6 Eksempel (uten oppdeling i paneler) class Fargeknapp1 extends CloseableFrame { public Fargeknapp1() { innhold = getContentPane(); innhold.setLayout(new FlowLayout()); JButton gulKnapp = new JButton("Gul"); gulKnapp.setBackground(Color.yellow); innhold.add(gulKnapp); gulKnapp.addActionListener(skiftTilGul); } // Fargeknapp1 private class BliGulKommando implements ActionListener { public void actionPerformed(ActionEvent hendelse) { innhold.setBackground(Color.yellow); } // actionPerformed } // BliGulKommando private BliGulKommando skiftTilGul = new BliGulKommando(); private Container innhold; } // Fargeknapp1

Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 9, side 7 LayoutManager’e En LayoutManager bestemmer hvordan GUI- komponentene skal legges ut i vinduet FlowLayout - standard for paneler (JPanel) –Fyller opp med komponenter radvis. –Sentrerer på raden. Kan også høyre- eller venstrejustere. –Komponentene beholder størrelsen selv om vinduet endrer størrelse. BorderLayout - standard for ”contentpane” i JFrame –Kan plassere komponentene i sentrum, nord, sør, øst eller vest. –Bare en komponent i hvert område. –Den midterste komponenten endrer størrelse med vinduet. Fyller alltid ut resten av plassen. Bygger opp vinduet ved å legge GUI-komponentene inni paneler (flowlayout), som så plasseres nord, sør, øst eller vest.

Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 9, side 8 Eksempel på bruk av FlowLayout LayoutManager layout = new FlowLayout(); LayoutManager layout = new FlowLayout(FlowLayout.LEFT);

Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 9, side 9 Eksempel på bruk av BorderLayout LayoutManager layout = new BorderLayout(); innhold.add(gulKnapp, BorderLayout.WEST); innhold.add(roedKnapp, BorderLayout.CENTER); innhold.add(blaaKnapp, BorderLayout.EAST); innhold.add(gronnKnapp, BorderLayout.NORTH); innhold.add(lillaKnapp, BorderLayout.SOUTH); tre knapper i hvert område

Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 9, side 10 Paneler, eksempel class Fargeknapp6 extends CloseableFrame { public Fargeknapp6() { Container innhold = getContentPane(); // BorderLayout JPanel pNord = new JPanel(); // FlowLayout JButton gulKnapp = new JButton("Gul"); gulKnapp.setBackground(Color.yellow); pNord.add(gulKnapp); JButton roedKnapp = new JButton("Rød"); roedKnapp.setBackground(Color.red); pNord.add(roedKnapp); JPanel pSoer = new JPanel();...osv for blå og oransje knapp... JPanel pSentrum = new JPanel();...osv for rosa og grå knapp... innhold.add(pNord, BorderLayout.NORTH); innhold.add(pSoer, BorderLayout.SOUTH); innhold.add(pSentrum, BorderLayout.CENTER); } // Fargeknapp6 class TestPaneler { static public void main(String[] args) { Fargeknapp6 vindu = new Fargeknapp6(); vindu.show(); vindu.pack(); } } // TestPaneler Metoden pack( ) (fra Window) tilpasser størrelsen på vinduet til størrelsen på komponentene.

Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 9, side 11 Arv fra Component: –void validate( ); - regner om størrelsen på en komponent JTextComponent: –void setText(String t); –String getText( ); –void setEditable(boolean b); JTextField: –JTextField(int antKol); –JTextField(String tekst, int antKol); –void setColumns(int antKol); JPasswordField: –JPasswordField(String tekst, int antKol); –void set EchoChar(char echo); –char[ ] getPassword( ); JTextArea (mer enn en linje): –JTextArea(int antLinjer, int antKol); –JTextArea(String tekst, int antLinjer, int antKol); –void setColumns(int antKol); –void setRows(int antLinjer); –void append(String tekst); –void setLineWrap(boolean wrap); JLabel (ledeteksten) –JLabel(String tekst); –Jlabel(Icon ikon); Object Component JTextComponent JTextAreaJTextField JLabel Container JComponent JPasswordField Tekst- komponenter

Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 9, side 12 Eksempel class VinduMedTekstfelt extends CloseableFrame { public VinduMedTekstfelt() { setTitle("Vindu med tekstfelt"); Container innhold = getContentPane(); JPanel p1 = new JPanel(); p1.add(new JLabel("Skriv en linje: ")); JTextField enLinje = new JTextField(30); p1.add(enLinje); JPanel p2 = new JPanel(); p2.add(new JLabel("Skriv flere linjer: ")); JTextArea flereLinjer = new JTextArea(6, 30); flereLinjer.setLineWrap(true); flereLinjer.setWrapStyleWord(true); JScrollPane rullefeltOmraade = new JScrollPane(flereLinjer); p2.add(rullefeltOmraade); JPanel p3 = new JPanel(); p3.add(new JLabel("Skriv passord: ")); JPasswordField passord = new JPasswordField(30); p3.add(passord); innhold.add(p1, BorderLayout.NORTH); innhold.add(p2, BorderLayout.CENTER); innhold.add(p3, BorderLayout.SOUTH); } // VinduMedTekstfelt..pack() er brukt...

Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 9, side 13 Hvordan lytte til tekst? Å registrere alle endringer som skjer i tekstvinduet –interface DocumentListener Å registrere at brukeren trykker E NTER –gjelder bare JTextField (og JPasswordField), ikke JTextArea –interface ActionListener –getActionCommand( ) gir teksten som ble skrevet inn Å registrere at feltet mister fokus –interface FocusListener Å lytte til tastetrykkene, for f.eks. å forhindre at ugyldige tegn legges inn. Håndterer ofte tekst ved hjelp av menyvalg og/eller trykk- knapper.

Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 9, side 14 Eksempel på tekstlyttere class VinduMedTekstfelt extends CloseableFrame { public VinduMedTekstfelt() {... JTextField enLinje = new JTextField(30); enLinje.addActionListener(tekstlytter1); enLinje.getDocument().addDocumentListener(tekstlytter2); enLinje.addFocusListener(tekstlytter3); JTextArea flereLinjer = new JTextArea(6, 30); flereLinjer.getDocument().addDocumentListener(tekstlytter2); flereLinjer.addFocusListener(tekstlytter3); JPasswordField passord = new JPasswordField(30); passord.addActionListener(tekstlytter1); passord.getDocument().addDocumentListener(tekstlytter2); passord.addFocusListener(tekstlytter3);... } // VinduMedTekstfelt....lytterklassene er definert på neste side... LytterTilTekstLagtInn tekstlytter1 = new LytterTilTekstLagtInn(); LytterTilTekstEndret tekstlytter2 = new LytterTilTekstEndret(); LytterTilFokusEndret tekstlytter3 = new LytterTilFokusEndret(); } // VinduMedTekstfelt Utskrift: focusGained er kalt InsertUpdate er kalt..... InsertUpdate er kalt RemoveUpdate er kalt focusLost er kalt focusGained er kalt InsertUpdate er kalt focusLost er kalt

Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 9, side 15 class LytterTilTekstLagtInn implements ActionListener { public void actionPerformed(ActionEvent hendelse) { System.out.println ("LytterTilTekstLagInn: " + hendelse.getActionCommand()); } } // LytterTilTekstLagtInn class LytterTilTekstEndret implements DocumentListener { public void insertUpdate(DocumentEvent e) { System.out.println("InsertUpdate er kalt"); } public void removeUpdate(DocumentEvent e) { System.out.println("RemoveUpdate er kalt"); } public void changedUpdate(DocumentEvent e) { System.out.println("ChangedUpdate er kalt"); } // inntreffer ved endring av format i f.eks. html-tekster } // LytterTilTekstLagtInn class LytterTilFokusEndret implements FocusListener { public void focusGained(FocusEvent evt) { System.out.println("focusGained er kalt"); } public void focusLost(FocusEvent evt) { System.out.println("focusLost er kalt"); } } // LytterTilFokusEndret forts. fra forrige side

Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 9, side 16 Du skrev: 123 eller som tall: 0 Du skrev: abcd eller som tall: 0 Du skrev: 3456 eller som tall: 3456 Å kontrollere input - oppgave Programmer innholdet i klassen LytterTilMistetFokus. Dersom ugyldig tallverdi skal øverste tekstfelt blanke sut, og markøren skal stå der og vente på input. class VinduMedTekstfelt extends CloseableFrame { public VinduMedTekstfelt() { Container innhold = getContentPane(); innhold.setLayout(new FlowLayout()); innhold.add(new JLabel( "Skriv et tall i intervallet [1000, 9999]: ")); innhold.add(enLinje); enLinje.addFocusListener(fokuslytter); innhold.add(new JLabel("Bare for å kunne flytte markøren: ")); innhold.add(endaEnLinje); } // VinduMedTekstfelt class LytterTilMisteFokus..... private JTextField enLinje = new JTextField(15); private JTextField endaEnLinje = new JTextField(15); private LytterTilMistetFokus fokuslytter = new LytterTilMistetFokus(); } // VinduMedTekstfelt

Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 9, side 17 Hint til oppgaven Se på beskrivelsen av klassen TextField foran Klassen Component har en metode: void requestFocus( ); Klassen Integer har en metode for å omforme fra tekst til tall: static int parseInt(String s) throws NumberFormatException;

Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 9, side 18 Å gi brukeren valg mellom alternativer

Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 9, side 19 Object Component AbstractButton JCheckBoxJRadioButton Container JComponent JToggleButton JComboBox JList ButtonGroup Arvehierarkiet for valgknapper og listebokser

Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 9, side 20 programkode, se vedlegg JCheckBox, et eksempel En avmerkingsboks genererer en ActionEvent hver gang brukeren klikker på den. Utskrift til Dos-vindu etter avmerking av to bokser: Skal ha Lunsj f°rste dag Skal ikke ha Middag f°rste dag Skal ikke ha Lunsj andre dag Skal ikke ha Middag andre dag Skal ha Lunsj f°rste dag Skal ikke ha Middag f°rste dag Skal ikke ha Lunsj andre dag Skal ha Middag andre dag

Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 9, side 21 JRadioButton og ButtonGroup, et eksempel Radioknappen genererer en ActionEvent når brukeren trykker på den. Utskrift til Dos-vindu etter at brukeren har trykket på fire forskjellige knapper: Valgt st°rrelse er: Extra Large Valgt st°rrelse er: Extra Extra Large Valgt st°rrelse er: Extra Small Valgt st°rrelse er: Medium programkode, se vedlegg

Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 9, side 22 Listebokser: Jlist, med eksempel Dersom du skal ha rullefelt må listeboksen legges inni en instans av klassen JScrollPane Bredden bestemmes av LayoutManager Standard lengde er 8. Standard er flervalglister. –museklikk + CTRL for å gjøre flere enkeltvalg –museklikk + SHIFT for å velge flere etterhverandre Hvert valg genererer en ListSelectionEvent I eksemplet håndteres denne. Den nederste teksten endres for hvert enkelt valg. I en praktisk situasjon vil videre behandling, etter at alle valg er gjort endelig gjort, ofte være klikk på en trykknapp eller et menyvalg se vedlagt programkode

Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 9, side 23 Aktuelle metoder i klassen JList Jlist(Vector items); // kan vise alle typer objekter (s. 432) void setVisisbleRowCount(int antKol); // standard er 8 void setSelectionMode(int modus); –ListSelectionModel.SINGLE_SELECTION ListSelectionModel.SINGLE_INTERVAL_SELECTION ListSelectionModel.MULTIPLE_INTERVAL_SELECTION Object[] getSelectedValues(); // tom tabell hvis ingen verdier Object getSelectedevalue(); // den første eller NULL