GUI-Programmierung - Einführung

Transkript

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

2 Frames and Components 2 windows (frames) menus labels checkboxes radio buttons borders buttons die einzelnen GUI-Elemente sind in einem bestimmten Layout angeordnet

3 Event-Driven Programming (1) 3 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

4 Event-Driven Programming (2) 4

5 GUI-Bibliotheken in Java 5 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 enthält nur die wichtigsten Elemente Swing baut teilweise auf dem AWT auf sehr umfangreiche GUI-Bibliotkek

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

7 Programmieren mit Swing 7 beim Programmieren mit Swing benutzt man ausgiebig das Prinzip der Vererbung z.b. myinterface extends JFrame... die Benutzeroberfläche wird durch erweitern und kombinieren von Swing-Klassen aufgebaut die verwendenten Bibliothektsklassen enthalten Code, der den Programmcode des Anwendungsprogrammierers aufrufen kann, wenn das Grafikelement bei der Programmausführung benutzt wird z. B. Mausklick

8 Das java.awt Package (1) 8 ca. 40 GUI-Klassen: Container Graphikelemente (widgets), die andere Graphikelemente aufnehmen können Components z.b. Panel, Window, Dialog, Frame 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

9 Das java.awt Package (2) 9 event handling 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

10 Components und Container 10 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

11 Der Frame Container (1) 11 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

12 Der Frame Container (2) 12 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!

13 Programmbeispiel - Frame 13 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);

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

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

16 Die LayoutManager-Klassen 16 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

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

18 Programmcode zum Beispiel (1) 18 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"));...

19 Programmcode zum Beispiel (2) 19 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"));...

20 Programmcode zum Beispiel (3) 20 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);

21 Das GridBagLayout 21 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

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

23 Beispiel zu GridBagLayout (1) 23 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;

24 Beispiel zu GridBagLayout (2) 24 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;

25 Beispiel zu GridBagLayout (3) 25 l.setconstraints(ti, c); add(ti); c.gridx = 8; c.gridy = 11; c.gridwidth = 3; c.gridheight = 2; c.fill = GridBagConstraints.BOTH; c.anchor = GridBagConstraints.EAST; l.setconstraints(send, c); add(send);

26 Beispiel zu GridBagLayout (4) 26 c.gridx = 8; c.gridy = 13; c.gridwidth = 3; c.gridheight = 2; c.fill = GridBagConstraints.BOTH; c.anchor = GridBagConstraints.EAST; l.setconstraints(clear, c); add(clear); setsize(300, 200); setvisible(true); public static void main(string args[]) { new GridTest();

27 Zeichenoperationen 27 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 filloval fillpolygon fillrect fillroundrect

28 Die Klasse Color 28 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

29 Das Java-Event-Modell 29 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

30 Teilnehmer beim Event Handling 30 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

31 Beispiel zum Event Handling 31 Wo sind Event source object und listener? 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);

32 Event-Arten 32 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

33 Typen der Event-Objekte 33 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

34 Events Listeners und Callbacks 34 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");

35 Dialogs 35 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)

36 Dialog - Beispiel (1) import java.awt.*; import java.awt.event.*; 36 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); show();

37 Dialog - Beispiel (2) public void actionperformed(actionevent event) { 37 if (event.getactioncommand().equals("exit")) System.exit(0); else if (event.getactioncommand().equals("dialog")) new MyDialog(this); 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); show();

38 FileDialog 38 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);

39 Unterklassen von Komponenten 39 für Components mit speziellen Eigenschafen, z.b. ein TextField, das nur alphabetische Zeichen zulässt: 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();

40 40 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?

41 Callback - ein Beispiel (1) interface AlphaInputError { 41 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) { errorstring = "input error: " + new Character(errorInput).toString(); repaint(); public void paint(graphics g) { g.drawstring(errorstring, 10, 60); errorstring = " ";

42 Callback - ein Beispiel (1) 42 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) { public void keytyped(keyevent event) { if (event.getkeychar() >= '0' && event.getkeychar() <= '9') { settext(currentvalue); errorlistener.inputerror(event.getkeychar()); else { currentvalue = gettext();

43 Swing 43 irgendwann war das AWT nicht mehr gut genug... seit Java 1.1 gibt es Swing = stark erweiterte GUI-Bibliothek mit Buttons, die Bilder enthalten können Components mit Rändern Menüs auch in Applets und Panels Trees und Tables TabbedPane ersetzt das CardLayout spezielle Dialogfenster Color Chooser Übungsaufgabe: schreiben Sie einen einfaches Texteditor mit Hilfe der Swing- Bibliotheken