Java Objectgeoriënteerd Programmeren in Java met BlueJ Hoofdstuk 8: Gebruikersinterface © 2014, Gertjan Laan, versie 2.

Presentatie over: "Java Objectgeoriënteerd Programmeren in Java met BlueJ Hoofdstuk 8: Gebruikersinterface © 2014, Gertjan Laan, versie 2."— Transcript van de presentatie:

1 Java Objectgeoriënteerd Programmeren in Java met BlueJ Hoofdstuk 8: Gebruikersinterface © 2014, Gertjan Laan, versie 2

2 2 Soorten Java-programma’s

3 3 Gebruikersinterface Het maken van een gebruikersinterface is een belangrijke stap in het ontwikkelen van een programma voor algemeen gebruik Zo’n interface maak je in Java met behulp van verschillende componenten Zoals knoppen, tekstvakken, labels, schuifbalken, keuzelijstjes en randen

4 4 JPanel De verschillende componenten plaats je in een zogeheten container die alles bij elkaar houdt Een belangrijke container is een JPanel Je kunt aan zo’n JPanel (een paneel) bijvoorbeeld een knop en een label toevoegen

5 5 Een JPanel maken JPanel paneel; JButton knop; JLabel label; paneel = new JPanel(); knop = new JButton( "klik" ); label = new JLabel("Hartelijk welkom!!"); paneel.add( knop ); paneel.add( label );

6 6 Een JPanel in een applet AdJava08\WelkomApplet.htm Zie voor details paragraaf 8.3.1 Merk op dat je wel op de knop kunt klikken, maar dat er verder weinig reactie is

7 7 JPanel in applicatie Op ongeveer dezelfde manier kun je een applicatie met dit paneel maken

8 8 Event-afhandeling Als je het klikken op een knop wilt afhandelen moet je het volgende doen: Je maakt een aparte klasse, een zogeheten event-handler met een methode die actionPerformed() heet Van die klasse maak je een instantie Die instantie koppel je aan de knop Als je dan op de knop klikt zal automatisch de methode actionPerformed() worden aangeroepen

9 9 De handler class KnopHandler implements ActionListener { public void actionPerformed( ActionEvent e ) { label.setText( "Bedankt!" ); }

10 10 Een instantie van de handler JButton knop;... knop = new JButton( ”klik” ); KnopHandler kh = new KnopHandler(); knop.addActionListener( kh ); Zie ook paragraaf 8.5

11 11 Inwendige klasse Een event-handler wordt meestal als inwendige klasse gedefinieerd Dat wil zeggen dat de definitie van de klasse zich bevindt binnen de klasse waarin (bijvoorbeeld) de knop is gedefinieerd waarvan de handler de events afhandelt Het voordeel hiervan is dat een inwendige klasse toegang heeft tot alle (private) attributen van de omhullende klasse

12 12 Applicatie

13 13 Applet

14 14 Meer componenten in een paneel Een gebruikersinterface zal in het algemeen bestaan uit verschillende componenten Als programmeur wil je graag weten waar die componenten in het paneel geplaatst worden

15 15 Lay-outmanagers Een JPanel heeft een lay-outmanager, een object dat gekoppeld is aan het JPanel De lay-outmanager zorgt voor de plaatsing van de componenten in het paneel De standaard lay-outmanager van een JPanel is FlowLayout

16 16 FlowLayout FlowLayout begint links boven met het plaatsen van een component en vult de bovenste rij Als de rij vol is gaat hij verder met de volgende rij Net zoals wij lezen of schrijven

17 17 FlowLayout (1)

18 18 FlowLayout (2)

19 19 Lay-outmanager uitschakelen Je kunt de lay-outmanager uitschakelen met setLayout(null) Je moet dan wel voor elke component precies aangeven waar je hem wilt hebben en wat zijn afmeting is Dat is nogal vervelend Bijvoorbeeld: knop = new JButton( "Klik hier" ); knop.setBounds( 100, 10, 120, 20 );

20 20 Andere lay-outmanagers Er zijn andere lay-outmanagers, zoals BorderLayout GridLayout

21 21 BorderLayout

22 22 BorderLayout met 2 componenten

23 23 GridLayout

24 24 BorderLayout en GridLayout Zie voor details paragraaf 8.12 en 8.13

25 25 Invoer van getallen Een tekstvak is een component waar je als gebruiker tekst in kunt tikken Je programma kan de tekst uit het tekstvak opvragen en verder verwerken De tekst komt altijd als String binnen Bij de invoer van een getal als 23 of 3.14 doet zich dus een probleem voor

26 26 Conversie Je moet de ingevoerde string converteren naar een int of naar een double Omgekeerd kun je vanuit je programma in een tekstvak tekst plaatsen Als je een getal in een tekstvak wilt plaatsen moet je dat eerst converteren naar een String

27 27 Voorbeeld AdJava08\Optellen.htm Dategene wat je intikt in een tekstvak kun je opvragen met getText() Je krijgt dan een String Met een String-object kun je niet rekenen Je moet de String converteren naar int

28 28 Conversie van String naar int (1) tekstvakStringint getText() ?

29 29 Conversie van String naar int String invoerstring1 = invoervak1.getText(); int getal1 = Integer.parseInt( invoerstring1 ); String invoerstring2 = invoervak2.getText(); int getal2 = Integer.parseInt( invoerstring2 ); int resultaat = getal1 + getal2; resultaatVak.setText( "" + resultaat );

30 30 Conversie: String -> int -> String Klik

31 31 Conversie van int naar String resultaatVak.setText( “” + resultaat ) lege string int “313”

32 32 Broncode AdJava08\Optellen\Optellen.docx vak1 vak2 resultaatvak plusknop

33 33 Object-variabelen Merk op dat in het vorige voorbeeld sommige variabelen bovenin paneelklasse zijn gedeclareerd private JTextField invoervak1, invoervak2, resultaatVak; private JLabel label; private JButton isKnop; Dit zijn objectvariabelen (instance variables)

34 34 Lokale variabelen public void actionPerformed( ActionEvent e ) { String invoerstring1 = invoervak1.getText(); int getal1 = Integer.parseInt( invoerstring1 ); String invoerstring2 = invoervak2.getText(); int getal2 = Integer.parseInt( invoerstring2 ); int resultaat = getal1 + getal2; resultaatVak.setText( "" + resultaat ); }

35 35 Einde