DE JAVA-GUI Programmeren in Java 1 Programmeren in Java Section Page Inleiding................................................. 1 1 De Java-GUI............................................. 2 1 Swing-componenten...................................... 5 4 Panelen................................................. 10 7 Interactie met de gebruiker............................... 17 10 De Flipflop.............................................. 19 12 Computerarchitectuur.................................... 22 14 Index................................................... 23 17 De Java-GUI Piter Dykstra 2 februari 2004 1. Inleiding. We zullen wat oefeningen maken met kleine apparaatjes. Geen fysieke dingen natuurlijk, maar machientjes die in Java gesimuleerd worden. Het kleinste ding is een flipflop, dat zijn schakelaars die aan en uit kunnen. Je kunt daar wat grotere objecten mee maken, zoals telregister s en opteller s. En dat zijn weer dingen waar een computerprocessor uit op is gebouwd. Je krijgt dus en passent ook nog wat computerarchitectuur mee. Maar het gaat uiteindelijk om eindige automaten, dat is een klasse van machines, de zich in één (of meer) eindige toestand(en) kunnen bevinden. En door bepaalde gebeurtenis sen kunnen ze van toestand veranderen. Eindige automaten zullen we gebruiken om genefinder s mee te maken. Natuurlijk is het ook leuk om die machientjes niet alleen in de vorm van Java-code te zien, maar ook levensecht in werking op het scherm. Daarvoor heb je een kleine cursus grafisch programmeren in Java nodig, waarmee we dan ook maar meteen beginnen. 2. De Java-GUI.
2 Programmeren in Java DE JAVA-GUI 2 De onderdelen van de Java GUI vormen een complexe klassenhiërarchie, zoals je in fig. 1 kunt zien. Op het op één na hoogste niveau vind je de belangrijkste. De Component s zijn de echte dingen, die je ook als een soor fysiek object ziet. De rest is nodig om ze te maken (kleur,tekst, positie,...). De Component s vormen ook nog een grote klasse. Laten we daarom eerst maar eens zien wat we minimaal nodig hebben om uberhaupt iets zichtbaar te maken. Wat je altijd zult zien is een Window. Die heb je in twee soorten: dialogen en gewone vensters. We beginnen met een gewoon venster, ofwel een Frame. Omdat we van de nieuwste grafische omgeving van Java, Swing, gebruik zullen maken en niet de wat oudere en meer beperkte AWT (Abstract Window Toolkit), hebben we een speciaal frame nodig: JFrame. Elke grafische applicatie met Swing is een extensie van een JFrame of een JApplet. En om tenminste iets te zien hoef je nu niet veel meer te doen: 1. Je moet het object maken (met new ). 2. Er voor zorgen dat het venster sluit bij het clicken op het kruisje rechtsboven, is ook nodig, anders krijg je een troep aan zombie-processen in het systeem. 3. Als je de grootte niet zet, blijft het een heel klein venster. 4. Met onzichtbare vensters kun je echt heel weinig. (LeegVenstertest.java 2) import java.awt. ; import javax.swing. ; public class LeegVenstertest extends JFrame { public static void main (String [ ] args ) { LeegVenstertest venster new LeegVenstertest (); venster.setdefaultcloseoperation(jframe.exit ON CLOSE ); venster.setsize (200, 200); venster.setvisible (true); 3. Het bovenstaande is pseudocode, maar een speciaal programma, javatangle, kan hier koffie van maken en dan onstaat de volgende tekst: import java.awt.* ; import javax.swing.* ;
3 DE JAVA-GUI Programmeren in Java 3 Object Dimension Font Color Component LayoutManager Container Panel Window JComponent Applet Frame Dialog JApplet JFrame JDialog Fig 1. De GUI-componenten. public class LeegVenstertest extends JFrame { public static void main (String [] args) { Venstertest venster = new LeegVenstertest() ; venster.setdefaultcloseoperation(jframe.exit ON CLOSE) ; venster.setsize(200, 200) ; venster.setvisible(true) ;
4 Programmeren in Java SWING-COMPONENTEN 3 Fig 2. Het eerste (lege) venster. Opdracht: 1 Voer dit programma in en neem dan het resultaat van je eerste grafische Java-programma waar. Het moet er uit zien als fig. 3. Gefeliciteerd! 4. Alle volgende programma s zullen op dezelfde manier van een JFrame gebruik maken. Daarom leggen we de code voor de main -methode in een macro vast. De maten geven we na de naam als parameter mee bij de aanroep. define nieuwjframe (naam, xval, yval ) public static void main (String [ ] args ) { naam venster new naam (); venster.setdefaultcloseoperation( JFrame.EXIT ON CLOSE ); venster.setsize (xval, yval ); venster.setvisible (true); 5. Swing-componenten. Dan is nu de beurt aan de grafische componenten. We willen natuurlijk knoppen, invulvelden, panelen, tekst- en teken-gebieden in dat venster plaatsen. Dat kan allemaal want Swing heeft het, tot database-tabellen en tab-bladen aan toe. (zie fig. 3) Het volgende voorbeeld heeft er drie: een label (tekst), een knop en een tekstveld. Om elementen toe te voegen moeten we een constructor definiëren.
5 SWING-COMPONENTEN Programmeren in Java 5 JComponent AbstractButton JTextComponent JLabel JPopupMenu JList JProgressBar JComboBox JToolTip JButton JEditorPane JMenuBar JSeparator JToggleButton JTextArea JPanel... JMenuItem JTextField JOptionPane JCheckBox JScrollBar JRadioButton JMenu JPassordField... JCheckBoxMrnuItem JRadioButtonMenuItem Fig 3. De Swing-componenten. Daarin worden de elementen geplaatst, d.w.z. in de ContentPane van het JFrame. De ContentPane is een Container waar de elementen met de methode add aan toe worden gevoegd. Hoe dat gebeurt hangt af van de opruimer, of LayoutManager. Elke container kan een layoutmanager hebben. Die moet wel eerst geïnstalleerd worden. De private variabele Layout bevat de LayoutManager. Er is keuze uit een heleboel layoutmanagers, maar de belangrijkste zijn: 1. FlowLayout. Vergelijk het met een tekstverwerker. Met add worden de elementen achteraan geplaatst op regels, met automatische regelafbreking. Wanneer je het venster resizet begrijp je sneller hoe het werkt, dan ik
6 Programmeren in Java SWING-COMPONENTEN 5 hier uit kan leggen. 2. GridLayout. Je geeft aan de constructor 2 ints mee (aantal kolommen, aantal rijen). Daar wordt een grid of rooster voor gemaakt en met add wordt dat van linksboven naar rechtsbeneden gevuld. De cellen hebben de afmetingen van het grootste element. 3. BorderLayout. Je kunt langs de randen aanvullen. Je moet dan wel een rand meegeven. De add -methode bij deze layoutmanager heeft dan ook twee parameters nodig. Na het element wordt de rand genoemd (één van de waarden: NORTH, SOUTH, WEST, EAST en ook CENTER). Voor de attributen van een component die gewijzigd kunnen worden, zijn er setvariabele-methoden. Evenzo kun je een waarde opvragen met een getvariabele -methode. Fig 4. Het tweede venster. (Venstertest.java 5) import java.awt. ; import javax.swing. ; public class Venstertest extends JFrame { nieuwjframe(venstertest, 200, 200)... De constructor public Venstertest () { Container c getcontentpane (); c.setlayout (new FlowLayout ()); Vensteronderdelen 6
5 PANELEN Programmeren in Java 7 6. Labels plaats je zo: Vensteronderdelen 6 c.add (new JLabel ("Hallo..")); c.add (new JLabel (" Wereld!")); See also sections 7 and 8. This code is used in section 5. 7. Knoppen kunnen ook een tekst hebben (zelfs een plaatje). Maar een kleurje kan ook. Vensteronderdelen 6 JButton knop new JButton (); knop.settext ("1"); knop.setbackground (Color.green ); c.add (knop); 8. Text is de inhoud van het JTextField. Je kunt het set ten, maar invoer van een gebruiker kun je ook get ten. Vensteronderdelen 6 JTextField tekst new JTextField (15); tekst.settext ("Twee"); tekst.setforeground (Color.red ); c.add (tekst ); 9. In Java komt het er ongeveer zo uit te zien: // De constructor public Venstertest(){ Container c = getcontentpane() ; c.setlayout(new FlowLayout()) ; c.add(new JLabel("Hallo..")) ; c.add(new JLabel(" Wereld!")) ; Opdracht: 2 Breid het programma van opdracht 1 zo uit dat er ook een knop en een tekstveld in voorkomt. Verander hier en daar ook een paar attributen.
8 Programmeren in Java PANELEN 10 10. Panelen. Het volgende programma, paneltest.java, is op het eerste oog meer van hetzelfde. Maar dat heeft een bedoeling; verschillende componenten worden in aparte verzamelvak jes of panel en opgeslagen om ze visueel als een groep te behandelen. Je kunt ze bij elkaar houden omdat de layoutmanager een panel als een eenheid behandelt Ze kunnen ook een speciale achtergrond of een rand krijgen. (Layoutpaneltest.java 10) import java.awt. ; import javax.swing. ; import javax.swing.border. ; public class Layoutpaneltest extends JFrame { nieuwjframe(layoutpaneltest, 500, 300)... De constructor public Layoutpaneltest () { settitle ("layout panelentest"); Container c getcontentpane (); c.setlayout (new FlowLayout ()); c.setbackground (Color.yellow ); Panel van 10 1 11 Junk 13 c.add (verzamelvak ); Panel van 5 2 met Struts 12 Junk 13 Een rand 14 Een tekstveld 15 c.add (verzamelvak ); 11. Hier gebruiken we de GridLayout voor een kolom van 10 elementen: Panel van 10 1 11 JPanel verzamelvak new JPanel (); verzamelvak.setlayout (new GridLayout (10, 1)); This code is used in section 10.
12 PANELEN Programmeren in Java 9 Fig 5. De Layout-panelen-tester. 12. Er zijn onzichtbare componenten, die toch zin hebben. Strut s zijn dingen met alleen een hoogte (VerticalStrut ) of alleen een breedte (HorizontalStrut ). Door die componenten op te nemen kun je garanderen dat andere componenten ook een minimale breedte of hoogte hebben. Panel van 5 2 met Struts 12 verzamelvak new JPanel (); verzamelvak.setlayout (new GridLayout (5, 2)); verzamelvak.add (Box.createHorizontalStrut (100)); verzamelvak.add (Box.createVerticalStrut (50)); This code is used in section 10. 13. Vulling voor de panel s. Junk 13 verzamelvak.add (new JLabel ("Hallo..")); verzamelvak.add (new JLabel (" Wereld!")); verzamelvak.add (new JButton (" ")); verzamelvak.add (new JButton (" ")); Er is zelfs een onzichtbare elastische component, die overigens glue heet; daarmee kun je centreren maar ook links of/en rechts uitlijnen.
10 Programmeren in Java INTERACTIE MET DE GEBRUIKER 13 verzamelvak.add (new JButton (" ")); verzamelvak.add (new JLabel ("Hallo..")); verzamelvak.add (new JLabel (" Wereld!")); This code is used in section 10. 14. Elke copmponent kan een rand krijgen en er zijn een heleboel soorten. Een rand 14 LineBorder b new LineBorder (Color.black ); verzamelvak.setborder (b); This code is used in sections 10 and 20. 15. De breedte van het tekstveld is 15 tekens. Een tekstveld 15 JTextField tekst new JTextField (15); tekst.settext ("Twee"); tekst.setforeground (Color.red ); verzamelvak.add (tekst ); This code is used in section 10. 16. Opdracht: 3 Plaats je componenten (knop en tekstveld ) boven elkaar in een panel. 17. Interactie met de gebruiker. Tot nu toe is het wel Grafisch, maar er is nog geen UserInteractie. We kunnen wel op de knop clicken; er gebeurt dan wel iets. En de tekst in het tekstveld is ook te wijzigen, maar daar wordt niets mee gedaan. We hebben ook niet aangegeven hoe. Het systeem reageert wel elke minimale aktie van een gebruiker (tot het knipperen van de ogen aan toe). Maar wil het programma het eigenlijk wel weten? Meestal niet: van een knop wordt b.v. vastgelegd wanneer de muis er boven aankomt en wanneer de muis het knopoppervlak verlaat, maar we zijn alleen geïnteresseerd in het aanclicken van de knop. Om aan te geven dat we in aanclick-gebeurtenis sen zijn geïnteresseerd moeten we die knoppen laten registreren bij een of meer ActionListener s. Click-gebeurtenissen zijn n.l. ActionEvent s. Meestal is dat het JFrame zelf. Die moet daarvoor de interface ActionListener implementeren. Vandaar de toevoeging
17 INTERACTIE MET DE GEBRUIKER Programmeren in Java 11 implements ActionListener in de declaratie. Dat houdt in dat het JFrame een methode public void actionperformed (ActionEvent e) moet hebben. Deze methode wordt door de GUI aangeroepen, wanneer er een ActionEvent wordt gegenereerd. Het registreren wordt uitgevoerd met knop.addactionlistener (this) in de constructor. Een knop weet dus hoe die zich moet registreren. En this is het ding, het JFrame dus, zelf. define writeln System.out.println define maakknop(knp, kleur ) knop@& knp new JButton (); knop@& knp. settext ( " knp " ) ; knop@& knp. setbackground (Color.kleur ); c.add (knop@& knp); knop@& knp. addactionlistener (this) (Knoptest.java 17) import java.awt. ; import java.awt.event.actionlistener ; import java.awt.event.actionevent ; import javax.swing. ; public class Knoptest extends JFrame implements ActionListener { private JButton knop1, knop2, knop3 ; nieuwjframe(knoptest, 200, 200)... De constructor public Knoptest () { Container c getcontentpane (); c.setlayout (new GridLayout (2, 2)); maakknop(1, red ); maakknop(2, green ); maakknop(3, pink ); public void actionperformed (ActionEvent e) { if (e.getsource() knop1 ) writeln ("Knop 1 is gedrukt."); else if (e.getsource() knop2 ) writeln ("Knop 2 is gedrukt."); else writeln ("Knop 3 is gedrukt.");
12 Programmeren in Java DE FLIPFLOP 17 18. Van een Event kun je met de methode getsource de bron achterhalen. Zo weet je op welke knop is gedrukt. Fig 6. Het Knoptestprogramma tegen de achtergrond van zijn eigen uitvoer. Opdracht: 3 Een teller. Gebruik je vorige programma om een teller te maken. Bij het opstarten staat het tekstveld op 0 en bij elke keer drukken wordt de waarde met 1 opgehoogd. Maak er ook een reset-knop bij, die de teller dus weer op 0 zet. 19. De Flipflop. (Flipflop.java 19) import java.awt. ; import javax.swing. ;
19 DE FLIPFLOP Programmeren in Java 13 Fig 7. De Flipfloptester. public class Flipflop extends JButton { private boolean stand ;... De constructor public Flipflop() { super(" "); stand false; setbackground (Color.red ); public void flip() { stand stand ; if (stand ) setbackground (Color.green ); else setbackground (Color.red ); 20. De Flipfloptest (Flipfloptest.java 20) import java.awt. ; import java.awt.event. ; import javax.swing. ; import javax.swing.border. ; public class Flipfloptest extends JFrame implements ActionListener { private Flipflop myflip new Flipflop(); nieuwjframe(flipfloptest, 200, 100)... De constructor public Flipfloptest () { Container c getcontentpane ();
14 Programmeren in Java COMPUTERARCHITECTUUR 20 c.add (new JLabel (" flip flop ")); JPanel verzamelvak new JPanel (); verzamelvak.setlayout (new FlowLayout ()); verzamelvak.setbackground (Color.darkGray ); Een rand 14 JButton but new JButton ("Inc"); verzamelvak.add (but ); but.addactionlistener (this); verzamelvak.add (myflip); c.add (verzamelvak );... geen zender settitle ("Flipfloptest"); c.setlayout (new FlowLayout ()); c.setbackground (Color.lightGray ); public void actionperformed (ActionEvent e) { myflip.flip(); 21. Opdracht: 4 Het stoplicht. Maak een variant met drie flipflop s; met een rode een oranje en een groene kleur voor aan of true en grijs voor uit (false). Een extra knop die events genereert waarop de lichten gaan branden in de volgorde: rood, oranje, groen, enz.. Als ze uit staan zijn ze grijs: b.v.: darkgray, gray, lightgray. 22. Computerarchitectuur. Bij de volgende opdrachten vang je drie vliegen in één klap. 1. Je doet wat meer ervaring op met grafisch programmeren. 2. Je raakt vertrouwd met kleine machine-onderdelen, die je in elkaar kunt zetten tot complexe en krachtige machines, zonder dat je daar evenredig meer programmeerkundigheid voor hoeft te hebben. Dat zal nog van pas komen bij volgende bioinformatica-programma s. 3. En passent die je ook nog wat computerarchitectuur op. Na afloop weet je ook hoe een processor optelt, vermenigvuldigt, enz..
22 COMPUTERARCHITECTUUR Programmeren in Java 15 flip (a) flipflop (b) bit Fig 8. Diagram van de flipflop en bit. stop Fig 9. 4-bits telregister. Inc Reset telregister Fig 10. Window-ontwerp voor de binaire teller. We zullen de flipflop in grotere strukturen, n.l. (=register s, gebruiken. Daarvoor is het handig om de flipflop voor te stellen met een diagram: Een register is in een computer een reeks van bit s, dat zijn aaneengeschakelde flipflops, die ook nog enkele berekeningen kunnen uitvoeren. Een register stelt een getal voor en de bitoperaties komen overeen met de rekenkundige bewerkingen (,,, /). Het is erg leerzaam om te zien hoe dat werkt. In de eerste plaats komt gewoon tellen neer op een soort voorwaardelijke flip. In de volgende tabel staan de getallen oplopend in binaire representatie. Beschouw de bits van rechts naar links. En stel vast dat een volgend getal, gelijk is aan het vorige, maar dan alle rechter bits, geflipt t.e.m. het eerste bit (meest rechtse) dat gelijk is aan 0 (dus alle 1-en plus een 0).
16 Programmeren in Java COMPUTERARCHITECTUUR 22 Dec. getal Binair getal 0 0000 1 0001 2 0010 3 0011 4 0100 5 0101 Opdracht: 5 Het bit. Breid de Flipflop-klasse uit tot de klasse Bit, door er een methode add1 aan toe te voegen, die hetzelfde doet als de methode flip, maar bovendien dezelfde message doorstuurt aan een volgende flipflop. De klasse moet daarvoor ook een extra attribuut: hogerbit hebben. Opdracht: 6 Het telregister. Maak een Register als uitbreiding van een JPanel bestaande uit 4 bits, met een increment -methode. Die methode wordt omgezet in een add1 -methode naar het least significant bit (meest rechtse). Maak ook een testapplicatie met een Inc- en een Reset -knop (zie fig. 9). Voor de laatste knop moet de klasse bit ook nog een extra methode makenull krijgen. stop stop 01c 01c 01c 01c 01c Fig 11. Optelregister. Opdracht: 7 De optelregisters. Maak twee register s, waarvan er één een optelregister is. D.w.z. met de methode plus kan bij dat register een ander register worden opgeteld. Daarvoor zijn de bits van het optelregister gekoppeld aan de overeenkomstige bits van het argumentregister. Dat vraagt ook weer om een extra bit-klasse: BitPlus. Die klasse zal behalve een attribuut argbit ook nog extra optelmethoden nodig hebben. Behalve add1 is er ook een add0 en een add met carry ofwel addc nodig.
23 INDEX Programmeren in Java 17 Opdracht: 8 Aftrekken met optelregisters. Aftrekken is eigenlijk hetzelfde als optellen: als je A B wilt bepalen, kun je hetzelfde resultaat bereiken door bij A het getal B op te tellen. Dan moet je natuurlijk wel B kunnen berekenen. In twoscomplement-notatie komt dat neer op het inverteren van B, (0 1 en 1 0) en er dan nog 1 bij op te tellen. Piece of cake! Inverteren is een onvoorwaardelijke flip. Voeg aan de binaire rekenmachine de aftrekoperatie toe. 23. Index. ActionEvent 17, 20. ActionListener 17, 20. actionperformed 17, 20. add 5, 6, 7, 8, 10, 12, 13, 15, 17, 20. add met carry 22. addactionlistener 17, 20. addc 22. add0 22. add1 22. argbit 22. args 2, 4. automaten 1. awt 2, 5, 10, 17, 19, 20. bit 22. Bit 22. BitPlus 22. black 14. border 10, 20. Box 12. but 20. CENTER 5. Color 7, 8, 10, 14, 15, 17, 19, 20. Component 2. constructor 5. Container 5, 10, 17, 20. ContentPane 5. createhorizontalstrut 12. createverticalstrut 12. darkgray 20, 21. EAST 5. eindige 1. event 17, 20. Event 18. EXIT ON CLOSE 2, 4. flip 19, 20, 22. flipflop 1, 21, 22. Flipflop 19, 20, 22. Flipfloptest 20. FlowLayout 5, 10, 20. Frame 2. gebeurtenis 1, 17. genefinder 1. get 8. getcontentpane 5, 10, 17, 20. getsource 17, 18. getvariabele 5. grafisch 1. gray 21. green 7, 17, 19. grid 5. GridLayout 11, 12, 17. GUI 2. hogerbit 22.
18 Programmeren in Java INDEX 23 HorizontalStrut 12. Inc 22. increment 22. JApplet 2. Java 2. java 2, 5, 10, 17, 19, 20. javatangle 3. javax 2, 5, 10, 17, 19, 20. JButton 7, 13, 17, 19, 20. JFrame 2, 4, 5, 10, 17, 20. JLabel 6, 13, 20. JPanel 11, 12, 20, 22. JTextField 8, 15. kleur 17. knop 7, 17. Knoptest 17. knop1 17. knop2 17. knop3 17. knp 17. Layout 5. LayoutManager 5. Layoutpaneltest 10. least significant 22. LeegVenstertest 2. lightgray 20, 21. LineBorder 14. links 22. maakknop [17]. macro 4. main 2, 4. makenull 22. myflip 20. naam 4. nieuwjframe [4], 5, 10, 17, 20. NORTH 5. opruimer 5. opteller 1. out 17. panel 10, 13. paneltest 10. pink 17. plus 22. println 17. programmeren 1. rechts 22. red 8, 15, 17, 19. Register 22. register 22. Reset 22. resize 5. rooster 5. set 8. setbackground 7, 10, 17, 19, 20. setborder 14. setdefaultcloseoperation 2, 4. setforeground 8, 15. setlayout 5, 10, 11, 12, 17, 20. setsize 2, 4. settext 7, 8, 15, 17. settitle 10, 20. setvariabele 5. setvisible 2, 4. SOUTH 5. stand 19. String 2, 4. Strut 12. swing 2, 5, 10, 17, 19, 20. Swing 2. System 17. tekst 8, 15. telregister 1. Text 8. venster 2, 4.
23 NAMES OF THE SECTIONS Programmeren in Java 19 Inc Reset telregister Plus Inc Min Reset Optelregister Fig 12. Window-ontwerp binaire calculator. Venstertest 5. VerticalStrut 12. verzamelvak 10, 11, 12, 13, 14, 15, 20. WEST 5. Window 2. writeln [17]. xval 4. yellow 10. yval 4. Names of the Sections. (Flipflop.java 19) (Flipfloptest.java 20) (Knoptest.java 17) (Layoutpaneltest.java 10) (LeegVenstertest.java 2) (Venstertest.java 5) Een rand 14 Used in sections 10 and 20. Een tekstveld 15 Used in section 10. Junk 13 Used in section 10. Panel van 10 1 11 Used in section 10. Panel van 5 2 met Struts 12 Used in section 10. Vensteronderdelen 6, 7, 8 Used in section 5.