Fag LO189D - Objektorientert programmering Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 10 Mer om programmering av GUI Dialoger.

Presentasjon om: "Fag LO189D - Objektorientert programmering Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 10 Mer om programmering av GUI Dialoger."— Utskrift av presentasjonen:

1 Fag LO189D - Objektorientert programmering Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 10 Mer om programmering av GUI Dialoger side 2 Ferdigdefinerte dialogbokserside 3-4 Å lage egen dialogboks, en meldingsboksside 5-6 Utveksling av data mellom eier og dialogvinduside 7-9 Arv og brukergrensesnitt side 10-15 GridLayoutside 16 GridBagLayoutside 17-18

2 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 10, side 2 Dialoger Eksempler: Meldingsbokser, ja/nei- bokser, innlesing av data Modal eller ikke-modal Har alltid en JFrame som eier, ved utprøving kan denne være null En JDialog kan ikke være en subklasse til CloseableFrame Vi må derfor selv –sette størrelsen –håndtere lukking Det fins en del ferdigdefinerte dialoger (JOptionPane). Dette er imidlertid ikke klasser som du kan lage ”extensions ” til. Object Component Container Window FrameDialog JComponent JOptionPane JDialog Closeable Frame JFrame

3 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 10, side 3 Ferdigdefinerte dialogbokser, eksempler Enkel meldingsboks Spørsmål med ja-/nei-svar Valgmuligheter! Inputfelt. Flere eksempler: Kjør Ex. 9-20 s. 508, OptionDialogTest.java

4 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 10, side 4 Mange muligheter! Type –navnet på metoden er showXxxDialog() Message Type (konstant) –bestemmer ikonet til venstre Message (Object) –meldingen! Confirm (konstant) –knappene nederst Option (Object[]) –brukernes valg ved Option-melding Input –input-metode ved Input- melding Statiske metoder i klassen javax.swing.JOptionPane. Returverdiene forteller de valg som brukeren har gjort.

5 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 10, side 5 class Meldingsboks extends JDialog { public Meldingsboks(JFrame eier, String tittel, String tekst) { super(eier, tittel, true); // true = modal setSize(200, 100); Container innhold = getContentPane(); JLabel teksten = new JLabel(tekst); innhold.add(teksten, BorderLayout.CENTER); JButton ok = new JButton("Ok"); innhold.add(ok, BorderLayout.SOUTH); ok.addActionListener(okKommando); addWindowListener(lukkKommando); } // Meldingsboks private class OkLytter implements ActionListener { public void actionPerformed(ActionEvent hendelse) { setVisible(false); } } // okLytter private class VindusLytter extends WindowAdapter { public void windowClosing(WindowEvent hendelse) { setVisible(false); } } // okLytter OkLytter okKommando = new OkLytter(); VindusLytter lukkKommando = new VindusLytter(); } // Meldingsboks Å lage en egen dialog, en enkel meldingsboks Testprogrammet kan prøve boksen slik: Meldingsboks test = new Meldingsboks (null, "Meldingsboks", ”Du trykket!"); test.show();

6 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 10, side 6 I praksis vil en dialog alltid være knyttet til en JFrame class TestMeldingsboks extends CloseableFrame { TestMeldingsboks() { Container innhold = getContentPane(); innhold.setLayout(new FlowLayout()); JButton knapp = new JButton("Trykk her!"); innhold.add(knapp); knapp.addActionListener(visMeldingKommando); } // TestMeldingsboks private class knappLytter implements ActionListener { public void actionPerformed(ActionEvent hendelse) { melding.setVisible(true); } } // okLytter private Meldingsboks melding = new Meldingsboks(this, "Meldingsboks", "Du trykket!"); private knappLytter visMeldingKommando = new knappLytter(); static public void main(String[] args) { TestMeldingsboks test = new TestMeldingsboks(); test.show(); } } // TestMeldingsboks

7 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 10, side 7 Utveksling av data mellom eier og dialogvindu Trykk her åpner dialogen med startdata Bruker kan endre dataene Ok fører til at data sendes tilbake til eiervinduet Avbryt og Lukk fører til at data ikke sendes tilbake Lag en egen klasse som inneholder dataene som skal overføres. Her bruker vi klassen Navn med to instansvariabler (fornavn og etternavn), samt konstruktør, sett- og finn-metoder. eiervindu dialogvindu

8 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 10, side 8 setVisible(true) returnerer ikke før setVisible(false) eller er kalt et annet sted i programmet class Dialogvindu extends JDialog {....konstruktør.... private class OkLytter implements ActionListener { public void actionPerformed(ActionEvent hendelse) { okData = true; // data skal sendes tilbake setVisible(false); } } // okLytter...lytter til avbrytknappen...lytter til vindushendelser (lukking) public boolean visDialog(Navn data) { fornavn.setText(data.finnFornavn()); etternavn.setText(data.finnEtternavn()); okData = false; setVisible(true); if (okData) { data.settFornavn(fornavn.getText()); data.settEtternavn(etternavn.getText()); } return okData; } // visDialog...instansvariabler... } // Dialogvindu Instansvariabler: boolean okData = false; JTextField fornavn = new JTextField(20); JTextField etternavn = new JTextField(20);...lytterobjekter... Programstruktur, Dialogvindu

9 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 10, side 9 fullstendig programliste vedlagt class TestDialogvindu extends CloseableFrame {....konstruktør... private class knappLytter implements ActionListener { public void actionPerformed(ActionEvent hendelse) { if (navnedialog.visDialog(etNavn)) { System.out.println("OK trykket"); } System.out.println("Navn er: " + etNavn.finnFornavn() + " " + etNavn.finnEtternavn()); } // actionPerformed } // knappLytter private Dialogvindu navnedialog = new Dialogvindu(this, "Navn"); private knappLytter visMeldingKommando = new knappLytter(); private Navn etNavn = new Navn("NN", "NN"); static public void main(String[] args) { TestDialogvindu test = new TestDialogvindu(); test.show(); } // main } // TestDialogvindu Programstruktur, TestDialogvindu

10 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 10, side 10 Arv og brukergrensesnitt I tillegg til standardhierarkiet er det ofte nyttig å lage sitt eget arvehierarki for å sette farger, skrifttyper, plassering av komponenter, etc. Eksempel: JDialog EnkelBoks MinDialogMeldingsBoks fra Swing Ok-knapp, størrelse, farge, skrifttype, etc. Avbryt-knapp melding vises

11 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 10, side 11 Klassen EnkelBoks public class EnkelBoks extends JDialog { public EnkelBoks(JFrame foreldre, String tittel) { super(foreldre, tittel, true); Container innhold = getContentPane(); p = new JPanel(); JButton bOK = new JButton("Ok"); bOK.addActionListener(new OkCommand()); p.add(bOK); innhold.add(p, BorderLayout.SOUTH); addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent e) { setVisible(false); } }); setSize(220, 150); setLocation(new Point(300,300)); } // enkelBoks, konstruktør …forts.

12 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 10, side 12 Klassen EnkelBoks, forts class OkCommand implements ActionListener { public void actionPerformed(ActionEvent evt) { settOk(true); setVisible(false); } protected void settOk(boolean verdi) { ok = verdi; } // sett Ok protected boolean finnOk() { return ok; } // finnOk protected JPanel finnKnappePanel() { return p; } // finnPanel private JPanel p; private boolean ok; } // EnkelBoks

13 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 10, side 13 Klassen Meldingsboks public class MeldingsBoks extends EnkelBoks { MeldingsBoks(JFrame foreldre, String tittel, String melding) { super(foreldre, tittel); Container innhold = getContentPane(); JPanel p = new JPanel(); tekst = new Label(melding); p.add(tekst); innhold.add(p, BorderLayout.CENTER); } // meldingsBoks, konstruktør public void settMelding(String nyMelding) { tekst.setText(nyMelding); } // settMelding private Label tekst; } // MeldingsBoks

14 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 10, side 14 Klassen MinDialog public class MinDialog extends EnkelBoks { MinDialog(JFrame foreldre, String tittel) { super(foreldre, tittel); JPanel p = finnKnappePanel(); JButton bAvbryt = new JButton("Avbryt"); bAvbryt.addActionListener(new AvbrytCommand()); p.add(bAvbryt); } // minDialog, konstruktør class AvbrytCommand implements ActionListener { public void actionPerformed(ActionEvent evt) { settOk(false); setVisible(false); } } // MinDialog

15 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 10, side 15 Og testprogrammet så slik ut: class TestArvehierarki { static public void main(String[] args) { EnkelBoks boks1 = new EnkelBoks(null, "En enkel boks"); boks1.show(); MeldingsBoks boks2 = new MeldingsBoks(null, "Meldingsboks", "Dette er en prøve"); boks2.show(); MinDialog boks3 = new MinDialog(null, "Skjelettet til en dialogboks"); boks3.show(); } Alle fire klassene ligger på egne filer.

16 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 10, side 16 LayoutManager GridLayout Konstruktører: –GridLayout(int antRader, int antKol); –GridLayout(int antRader, int antKol, int horisontGap, int vertGap); Rader og kolonner. Alle cellene er like store. Eksempel 9-15 s. 465. Calculator. –et panel med BorderLayout –tekstfeltet legges i nord –lager et panel med plass til tallene GridLayout(4,4) –legger dette panelet i sentrum GridLayout er ofte praktisk dersom man vil ha en rad eller en kolonne med knapper (eller andre komponenter) med samme størrelse.

17 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 10, side 17 LayoutManager GridBagLayout Her kan du få til det meste, men det krever god planlegging og nøyaktighet! Lag en skisse av vinduet. Del det opp i rader og kolonner slik at det ikke er mer enn en komponent i hver celle. En komponent kan legge beslag på mer enn en celle. (med pack() )

18 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 10, side 18 Hvordan lage GridBagLayout? La et objekt av klassen GridBagLayout være LayoutManager for beholderen: –Container innhold = getContentPane(); // eller et panel –GridBagLayout gbl = new GridBagLayout(); –innhold.setLayout(gbl); For hver komponent skal et objekt av klassen GridBagConstraints bestemme plasseringen. Komponenten legges inn i beholderen ved å oppgi både komponentnavn og GridBagConstraints-objekt –GridBagConstraints layoutKrav = new GridBagConstraints(); –... gi verdi til layoutKrav... –innhold.ass(knapp, layoutKrav);

19 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 10, side 19 GridBagConstraints Kravene settes opp ved å gi verdi til offentlige instansvariabler. Forutsetter at vinduet er delt inn i celler som forklart foran. Konstantnavnene nedenfor er definert i klassen GridBagConstraints Følgende variabler kan/må gis verdi –int gridx, intgridy - øverste venstre hjørne på komponenten –int gridwidth, gridheight - bredde og høyde på komponenten i antall kolonner. Standard er 1. –double weightx, weigthy. Boka anbefaler å sette denne til 100. Hvis du vil at komponenten aldri skal endre størrelse, kan du sette 0. –int fill - i hvilken retning skal komponenten strekke seg hvis den ikke fyller den avsatte plassen. BOTH, HORIZONTAL, VERTICAL. Standard er NONE. –int anchor - hvis komponenten har god plass, i hvilken ”ende” av den avsatte plassen skal den ha sitt feste? CENTER, NORTH, NORTHEAST, EAST, SOUTHEAST, SOUTH, SOUTHWEST, WEST, NORTHWEST. Standard er CENTER –int ipadx, ipady. Insets inset. - for å legge inn mellomrom mellom og rundt komponentene.

20 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 10, side 20 Eksempel Nummererer linjer og kolonner. –(0,0) i øverste venstre hjørne Listeboksen –gridx = 0, gridy = 0 –gridwidth = 1, gridheight = 3 –Kan fylle ut i alle retninger: fill = BOTH, anchor = CENTER Øverste avkrysningsboks –gridx = 2, gridy = 0 –gridwidth = 1, gridheight = 1 –Bør ikke fylle i noen retning fill = NONE, anchor = CENTER Nederste avkrysningsboks –som øverste, men gridy = 1 Label ”Size:” –gridx = 1, gridy = 2 –gridwidth = 1, gridheight = 1 –Bør ikke fylle i noen retning fill = NONE, anchor = EAST Tekstfelt med fontstørrelse –gridx = 2, gridy = 2 –gridwidth = 1, gridheight = 1 –Kan fylle horisontalt fill = HORIZONTAL anchor = CENTER Nederste tekstfelt –gridx = 0, gridy = 3 –gridwidth = 3, gridheight = 1 –Fyller i alle retninger fill = BOTH, anchor = WEST 0 1 2 0 1 2 3 se vedlagt programkode