GUI-Programmierung - Einführung

Transkript

1 GUI-Programmierung - Einführung Kernkonzepte Komponenten (components) ereignisgesteuerte Programmierung (event driven programming) Layout 1

2 Frames and Components windows (frames) menus labels checkboxes radio buttons borders buttons 2

3 Event-Driven Programming (1) traditionelle Programme ohne GUI z. B. DOS-Programme der Programmierer bestimmt den Programmfluß der Programmierer bestimmt die Sequenz der Ein-/Ausgaben GUI-Programme sind anders! ereignisgesteuert die Sequenz der Benutzereingaben bestimmt den Programmablauf selbstprogrammierter Code wird durch Betriebssystemcode aufgerufen user code is called by system code 3

4 Event-Driven Programming (2) 4

5 GUI-Bibliotheken in Java die integrierten GUI-Bibliotheken sind eine Besonderheit der Sprache Java enthält GUI- Widgets Grafikelemente mit zugehörigem Steuercode Java besitzt zwei GUI-Bibliotheken AWT Abstract Windowing Toolkit Swing enthält nur die wichtigsten Elemente baut teilweise auf dem AWT auf sehr umfangreiche GUI-Bibliotkek 5

6 AWT versus Swing Swing enthält neue Komponenten ersetzt einige alte AWT-Komponenten benutzt einige alte AWT-Komponenten 6

7 Die AWT und Swing Bibliotheken Sehen Sie sich die Klassen in der Java Dokumentation an: java.awt.* javax.swing.* siehe 7

8 Das java.awt Package (1) ca. 40 GUI-Klassen: Container Graphikelemente (widgets), die andere Graphikelemente aufnehmen können z.b. Panel, Window, Dialog, Frame Components atomare Graphikelemente z.b. Button, Menu, List Layout Manager 5 Klassen u. 1 Interface, um Komponenten in Containern anzuordnen einfache Graphikelemente z.b. Point, Rectangel, Polygon 8

9 Das java.awt Package (2) event classes Event-Klassen kapseln Informationen über GUI-Benutzereingaben z.b. KeyEvent, MouseEvent listener classes Listener-Klassen bekommen Event-Objekte von den GUI-Klassen zugestellt und reagieren auf die Benutzereingaben z.b. KeyListener, ActionListener 9

10 Components und Container Container können Components enthalten alle Container sind Components einige Components sind auch Container Container und Component sind abstrakte Klassen Frame meistens Basis für Applikationen Applet ist eine Unterklasse von Panel 10

11 Der Frame Container (1) Java GUI-Applikationen benutzen in der Regel Frame um ein Hauptfenster zu öffnen Frame = einfaches, größenänderbares Fenster mit Rand, Titelleiste u. ev. Menüleiste 11

12 Der Frame Container (2) Verwendung von Frame Instanz der Klasse Frame oder einer Unterklasse von Frame erzeugen new Frame() oder z.b. new MyFrame() Methode settitle() aufrufen Methode setsize() aufrufen Fenstergröße ist zunächst 0! Methode setvisible() aufrufen neu erzeute Fenster sind zunächst unsichtbar! 12

13 Programmbeispiel - Frame import java.awt.frame; public class MyFrame extends Frame { public static void main(string args[]) { new MyFrame(); public MyFrame() { settitle("andy's Frame"); setsize(200, 200); setvisible(true); 13

14 Komponenten hinzufügen (1) Aufgabe fürs Praktikum eine einfache GUI-Anwendung schreiben, die für jeder AWT- Komponente eine Instanz zu einem Frame hinzufügt wie in diesem Beispiel: Methode add() 14

15 Layout Manager Layout Manager ordnen Components in Containern an verschiedene Layout Manager benutzen dazu verschiedene Regeln implementieren das LayoutManager-Interface die add-methode des Containers reicht die Component an den Layout Manager weiter einem Container kann ein Layout Manager zugeordnet werden 15

16 Die LayoutManager-Klassen BorderLayout teilt Container in 5 Bereiche North, South, East, West, Center CardLayout erzeugt sich nach Art von Karteikarten überlappende Container FlowLayout ordnet Componenten zeilenweise hintereinander an GridBagLayout flexibel und komplex - etwa wie eine Tabelle in MS-Word BoxLayout vertikale und horizontale Anordnung in einer Box Klasse Box 16

17 Der Panel Container Ein Panel sieht man nicht Nutzen: Aufteilen eines Fensters in Bereiche jedem Bereich kann ein eigener Layout-Manager zugeordnet werden default: FlowLayout Beispiel: 17

18 Programmcode zum Beispiel (1) import java.awt.*; public class PanelTest extends Frame { public static void main(string args[]) { new PanelTest(); public PanelTest() { settitle("panel Test"); setlayout(new FlowLayout()); Panel borderpanel = new Panel(); borderpanel.setlayout(new BorderLayout()); borderpanel.setbackground(color.blue); borderpanel.add("north", new Button("north")); borderpanel.add("south", new Button("south")); borderpanel.add("east", new Button("east")); borderpanel.add("west", new Button("west")); borderpanel.add("center", new Button("center"));... 18

19 Programmcode zum Beispiel (2) add(new Label("BorderLayout")); add(borderpanel); Panel flowpanel = new Panel(); flowpanel.setlayout(new FlowLayout()); flowpanel.setbackground(color.red); flowpanel.add(new Checkbox("First")); flowpanel.add(new Checkbox("Second")); flowpanel.add(new Checkbox("Third")); add(new Label("FlowLayout")); add(flowpanel); Panel gridpanel = new Panel(); gridpanel.setlayout(new GridLayout(2, 2)); gridpanel.setbackground(color.green); gridpanel.add(new TextField("First"));... 19

20 Programmcode zum Beispiel (3) gridpanel.add(new TextField("Second")); gridpanel.add(new TextField("Third")); gridpanel.add(new TextField("Fourth")); add(new Label("GridLayout")); add(gridpanel); setsize(200, 300); setvisible(true); 20

21 Das GridBagLayout ist sehr flexibel teilt den Container in ein Netz von Zellen Components können mehr als eine Zelle bedecken benutzt ein GridBagConstraints-Objekt zur individuellen Beeinflussung des Layouts einzelner Components: gridx, gridy gibt die Plazierungsstelle an gridwidth, gridheight Anzahl der von der Component eingenommenen Zeilen und Spalten weightx, weighty gibt an, mit welcher Wichtung eine Component den zusätlichen Platz bei der Vergrößerung des Fensters beanspruchen darf 21

22 Das GridBagLayout (2) fill gibt an, welcher Flächenanteil der angegebenen Zellen bei einer Gößenänderung (resize) benutzt werden soll anchor Beispiel: Position innerhalb einer Zelle an der die Komponente verankert ist 22

23 Beispiel zu GridBagLayout (1) import java.awt.*; public class GridTest extends Frame { TextArea t = new TextArea(5, 30); TextArea ti = new TextArea(2, 20); Button send = new Button("Send"); Button clear = new Button("Clear"); GridBagConstraints c = new GridBagConstraints(); GridBagLayout l = new GridBagLayout(); public GridTest() { settitle("gridbaglayout Demo"); setlocation(200, 300); setlayout(l); c.weightx = 50; c.weighty = 50; c.fill = GridBagConstraints.NONE; c.anchor = GridBagConstraints.CENTER; 23

24 Beispiel zu GridBagLayout (2) c.gridx = 1; c.gridy = 1; c.gridwidth = 10; c.gridheight = 10; c.fill = GridBagConstraints.BOTH; c.anchor = GridBagConstraints.WEST; l.setconstraints(t, c); t.seteditable(false); add(t); c.gridx = 1; c.gridy = 11; c.gridwidth = 7; c.gridheight = 4; c.fill = GridBagConstraints.BOTH; c.anchor = GridBagConstraints.WEST; //usw... 24

25 Zeichenoperationen Zeichnen innerhalb eines Fensters Methode paint() überschreiben z.b. in Frame paint() bekommt ein Objekt der Klasse Graphics übergeben das Objekt enthält die Zeichenfläche und die Methoden um auf dieser Fläche zu zeichnen Zeichenmethoden: drawline! drawoval! drawpolygon! draw3drect! drawarc drawbytes! drawchars! drawimage! drawrect! drawroundrect drawstring!fill3drect!fillarc!! fillpolygon fillrect! fillroundrect filloval 25

26 Die Klasse Color wird hauptsächlich benutzt, um Components einzufärben Methoden setforeground() und setbackground() falls die Component ein Container ist, nehmen alle darin enthaltenen Components die gesetzte Farbe an Methode setcolor beeinflußt alle folgenden drawing-methoden der Klasse Graphics Constructor nimmt RGB-Werte entgegen 26

27 Das Java-Event-Modell GUI-Programme werden durch Ereignisse gesteuert Konzept des event driven programming user events Tastatur, Maus system events z.b. Abschluß eines Verarbeitungsschritts Konzept Event-Generatoren lösen Events aus Event-Listener werden benachrichtigt Realisierung in Java durch JDK-Packages java.awt.event enthält event handling framework event-klassen und Interfaces 27

28 Teilnehmer beim Event Handling drei Objekte sind beteiligt event object delivered to event listener event source Event-Quelle event listener (receiver) muß sich bei event source registrieren Konzept events are fired from a source 28

29 Beispiel zum Event Handling 29 import java.awt.*; import java.awt.event.*; public class MyFrameWithExit extends Frame implements ActionListener { public static void main(string args[]) { new MyFrameWithExit(); MyFrameWithExit() { settitle("heinz' Frame"); setsize(200, 100); Button b = new Button("Exit"); b.addactionlistener(this); add(b); setvisible(true); public void actionperformed(actionevent e) { System.exit(0); Wo sind event source und listener?

30 Event-Arten Typen der Event-Objekte low level events grundlegende Event-Arten Taste gedrückt, Taste losgelassen (Maus, Tastatur) Bewegung der Maus Eintreten und Verlassen des Mauszeigers (Fenster) semantic events Event-Arten für spezielle Components Bewegen eines Scrollbar Testeingabe Zustandsänderung einer Checkbox oder eines Radio Button 30

31 Typen der Event-Objekte 31 MouseEvent Bewegung der Maus, Bedienung der Maustasten ActionEvent Menüpunkt ausgewählt, Button gedrückt FocusEvent Eingabefokus gewonnen, verloren AdjustmentEvent Einstellung eines Scrollbar ItemEvent Anwahl eines Menüpunkts KeyEvent Tastaturtaste gedrückt, losgelassen TextEvent WindowEvent

32 Events Listeners und Callbacks Event-Quellen besitzen Methoden zur Registrierung von Listener-Objekten addxxxlistener( listener ) listener muß XXXListener implementieren Beispiel: class MainClass { public static void main(string[] args) { Button b = new Button(); b.addactionlistener(new MyListener()); class MyListener implements ActionListener { public void actionperformed(actionevent event) { System.out.println("The button was pressed"); 32

33 Dialogs Dialogfenster 2 Arten modal oder nicht modal modal: zwingt Benutzer zur Eingabe setzt einen parent frame voraus Erzeugung Unterklasse von java.awt.dialog definieren das BorderLayout ist voreingestellt Größe mit getsize() setzen setvisible() aufrufen der Konstruktor muß den Oberklassenkonstruktor aufrufen übergibt parent frame, title, und flag (entweder auf modal (true) oder modeless (false) gesetzt) 33

34 Dialog - Beispiel (1) import java.awt.*; import java.awt.event.*; 34 public class DialogTest extends Frame implements ActionListener { public static void main(string args[]) { new DialogTest(); DialogTest() { settitle("dialog Test"); setlayout(new FlowLayout()); Button dialogbutton = new Button("Dialog"); dialogbutton.addactionlistener(this); add(dialogbutton); Button exitbutton = new Button("Exit"); exitbutton.addactionlistener(this); add(exitbutton); setsize(200, 200);

35 Dialog - Beispiel (2) public void actionperformed(actionevent event) { if (event.getactioncommand().equals("exit")) System.exit(0); else if (event.getactioncommand().equals("dialog")) new MyDialog(this); 35 class MyDialog extends Dialog implements ActionListener { public MyDialog(Frame owner) { super(owner); setmodal(false); setlayout(new FlowLayout()); Button okbutton = new Button("OK"); okbutton.addactionlistener(this); add(okbutton); setsize(100, 100);

36 FileDialog public void actionperformed(actionevent event) { if (event.getactioncommand().equals("ok")) dispose(); spezieller Dialog - FileDialog: public void actionperformed(actionevent event) { if (event.getactioncommand().equals("open...")) { FileDialog openfile = new FileDialog(this, "Open", FileDialog.LOAD); openfile.setdirectory("."); openfile.show(); String selectedfile = openfile.getfile(); if (selectedfile!= null) System.out.println("Selected file: " + selectedfile); 36

37 Unterklassen von Komponenten für Components mit speziellen Eigenschafen, z.b. ein TextField, das nur alphabetische Zeichen zulässt: 37 class AlphaTextField extends TextField implements KeyListener { String currentvalue = ""; public AlphaTextField() { super(10); public void keypressed(keyevent event) { public void keyreleased(keyevent event) { public void keytyped(keyevent event) { if (event.getkeychar() >= '0' && event.getkeychar() < '9') { settext(currentvalue); else { currentvalue = gettext();

38 Verwendung von Callback-Methoden ein Objekt benachrichtigt andere Objekte beim Eintreffen eines Ereignisses wie beim Event Handling, aber mit Übergabe einer anwendungsdefinierten Nachricht z.b. das AlphaTextField aus dem letzten Beispiel soll ein anderes Objekt beim Tippen eines nicht-alpha-zeichens benachrichtigen und dabei das falsch eingegebene Zeichen übermitteln z.b. zur Anzeige eines Dialogfensters Input Error empfohlene Vorgehensweise caller muß verlangen, das ein called Object ein bestimmtes Interface implementiert Wie? 38

39 interface AlphaInputError { public void inputerror(char errorinput); public class AlphaTextFieldTest2 extends Applet implements AlphaInputError { AlphaTextField2 atf = null; String errorstring = ""; public void init() { atf = new AlphaTextField2(this); setlayout(new FlowLayout()); add(atf); atf.addkeylistener(atf); public void inputerror(char errorinput) { 39 Freitag, 6. Juni 14 errorstring = "input error: " + new Character(errorInput).toString(); repaint(); public void paint(graphics g) { g.drawstring(errorstring, 10, 60); errorstring = " ";

40 Callback - ein Beispiel (1) class AlphaTextField2 extends TextField implements KeyListener { String currentvalue = ""; AlphaInputError errorlistener = null; // hier nur einer möglich! public AlphaTextField2(AlphaInputError errorlistener) { super(10); this.errorlistener = errorlistener; public void keypressed(keyevent event) { public void keyreleased(keyevent event) { 40 public void keytyped(keyevent event) { if (event.getkeychar() >= '0' && event.getkeychar() <= '9') { settext(currentvalue); errorlistener.inputerror(event.getkeychar()); else { currentvalue = gettext();