GUI. Programmiermethodik. Eva Zangerle Universität Innsbruck

Transkript

1 GUI Programmiermethodik Eva Zangerle Universität Innsbruck

2 Überblick Einführung Java Ein erster Überblick Objektorientierung Vererbung und Polymorphismus Ausnahmebehandlung Pakete und Javadoc Spezielle Themen Generische Programmierung Java Collection-Framework Streams Unit-Tests Entwurfsmuster - Eine Einführung GUI-Programmierung Java Virtual Machine Ausblick Überblick Komponenten und Container Layout Ereignisbasierte Programmierung Programmiermethodik - GUI- 2

3 Überblick

4 GUI GUI = Graphical User Interface Grafische Benutzeroberfläche Steuerung der Anwendung durch Maus- und Tastatur mit Hilfe von GUI-Komponenten (Fenster, Buttons, Slider, Scrollbar etc.) Wichtige Konzepte bei der GUI-Programmierung Komponenten Hierarchische Anordnung der einzelnen Komponenten Layout Layout-Manager unterstützen die Anordnung der einzelnen Komponenten am Bildschirm. Ereignisgesteuerte Programmierung Komponenten haben eigene Funktionalität. Komponenten reagieren auf Ereignisse (Events). Abfolge der Benutzereingaben bestimmt den Programmablauf! Programmiermethodik - GUI-Programmierung 4

5 GUI-Programmierung in Java Java 1.0: Abstract Windowing Toolkit Bestandteil der Java API Minimalistisch Spezifisch (OS) Low-level Programmierung Java 1.2: Swing (leichtgewichtige Komponenten) Basiert auf AWT Bestandteil der Java Foundation Classes (JFC) JFC ist eine Sammlung von Programmierschnittstellen (APIs) für die Erstellung portabler Java GUIs. Plattformunabhängig Bessere Performance Wird in dieser Vorlesung besprochen! Alle praktischen Beispiele und Abbildungen wurden dem Java Tutorial entnommen: Programmiermethodik - GUI-Programmierung 5

6 Java Swing Viele Komponenten Leichtgewichtig (direkt von Java gerendert (gezeichnet)) Auf allen Plattformen sehen die Komponenten gleich aus. Look-and-Feel (Erscheinungsbild) konfigurierbar Windows, Motif, Metal, Nimbus Einige Komponenten zusätzlich zu AWT Drag and Drop Tooltips Automatisches Double Buffering (zuerst zeichen, dann anzeigen) Code der Bibliotheksklassen ruft den Programmcode des Anwendungsprogrammierers auf, wenn das entsprechende Grafikelement bei der Programmausführung benutzt wird (z.b. Mausklick). Programmiermethodik - GUI-Programmierung 6

7 Komponenten und Container

8 Grundlagen GUI wird aus einzelnen Komponenten aufgebaut. Container (spezielle Komponenten) können weitere Komponenten enthalten und anordnen. Alle Container sind auch wieder Komponenten. Container auf oberster Hierarchiestufe basieren auf AWT- Containern (schwergewichtig). Leichtgewichtige Komponenten erben von JComponent. JComponent ist die Basisklasse für die meisten Swing-Komponenten (Frames, Buttons etc.) Stellt die Infrastruktur für das Zeichnen der Komponenten zur Verfügung. API lesen Programmiermethodik - GUI-Programmierung 8

9 Swing-Komponenten (Basic Controls, Displays) JButton JCheckBox JComboBox JList JSlider JSpinner JRadioButton JTextField JPasswordField JMenu JProgressBar JSeparator JLabel JToolTip Programmiermethodik - GUI-Programmierung 9

10 Swing Komponenten (Interactive Display) JTextArea JColorChooser JEditorPane JTable JTree JFileChooser Programmiermethodik - GUI-Programmierung 10

11 Swing Komponenten (Container) JToolBar Applet JDialog JFrame JPanel JScrollPane JSplitPane JTabbedPane JInternalFrame JLayeredPane Programmiermethodik - GUI-Programmierung 11

12 Container und Komponenten Top-Level Container in Swing Können weitere Komponenten enthalten und anordnen. Stellen die Infrastruktur für das Zeichnen von Komponenten und zur Ereignisbehandlung bereit. Es gibt vier solche Container: JFrame, JDialog, JWindow, Japplet Container-Komponenten Können wie Top-Level Container weitere Komponenten enthalten und anordnen. Bestimmen die Größe und Position jeder Komponente. Container in Swing: JScrollPane, JTabbedPane, Basiskomponenten Benutzer interagiert mit diesen Komponenten. Beispiele: JComboBox, JTextField, Jtable, Programmiermethodik - GUI-Programmierung 12

13 Aufbau (1) Verwendete Komponenten lassen sich in einer Hierarchie anordnen. Wurzel ist immer ein Top-level Container. Der Top-level Container wird mit einem Fenster verbunden. In diesem Fenster werden seine (sichtbaren) Komponenten dargestellt. Ein Swing-Hauptfenster enthält eine Hauptkomponente (RootPane), die alle anderen Komponenten aufnimmt. Eine RootPane enthält folgende Komponenten: Eine GlassPane und eine LayeredPane. Die LayeredPane enthält ihrerseits zwei Unterkomponenten: Eine ContentPane und eine Menüleiste. Programmiermethodik - GUI-Programmierung 13

14 Aufbau (2) LayeredPane und GlassPane liegen übereinander und füllen das Fenster jeweils komplett aus. Die GlassPane ist normalerweise durchsichtig und wird meist nicht zur Grafikausgabe benutzt. Sie könnte dann verwendet werden, wenn Effekte erzielt werden sollen, die das Fenster als Ganzes betreffen. Die LayeredPane enthält das Menü und die Dialogelemente der Anwendung. Das Einfügen und Anordnen von Dialogelementen auf einem Hauptfenster erfolgt über dessen ContentPane. Programmiermethodik - GUI-Programmierung 14

15 Komponenten zu Containern hinzufügen Mit der add-methode werden Komponenten zu einem Container hinzugefügt (und damit zu Kindern des Containers in der Komponentenhierarchie). Ein Argument der add-methode spezifiziert die hinzuzufügende Komponente. Achtung: Eine Komponente kann immer nur zu einem Container gehören! Wird eine Komponente zu einem zweiten Container hinzugefügt, dann wird diese Komponente aus dem ersten Container entfernt und dann zum zweiten Container hinzugefügt. Beispiel: HelloWorldSwing.java Programmiermethodik - GUI-Programmierung 15

16 JFrame Java GUI-Applikationen benutzen sehr oft JFrame um ein Hauptfenster zu öffnen. JFrame = einfaches, größenänderbares Fenster mit Rand, Titelleiste und eventuell Menüleiste JFrame bildet das Bindeglied zwischen Swing und dem Betriebssystem. JFrame registriert sich als Fenster im Betriebssystem und kann wie ein herkömmliches Fenster benutzt werden. Unterstützt Methoden für Lesen/Setzen des Titels, Lesen/Setzen des Zustands, Sichtbarkeit eines Frames, Lesen/Setzen der Position, Lesen/Setzen der Größe Hinzufügen eines Komponente etc. Programmiermethodik - GUI-Programmierung 16

17 JLabel, JButton, JTextField JLabel Einfache Komponente zum Beschreiben anderer Komponenten. Unterstützt Methoden für Lesen/Setzen des Labels, Lesen/Setzen der Position (horizontal/vertikal), Anbinden an eine Komponente etc. JButton Die einfachste Komponente für die Interaktion (Anklicken). Bei einer Interaktion wird entsprechender Code ausgeführt. Muss vom Programmierer bereitgestellt werden (Events!). Methoden für das Verändern sind sehr ähnlich zu denen von JLabel. JTextField Einfachste Textkomponente in Swing (Texteingabe) Lesen/Setzen des Textes in der Komponente Programmiermethodik - GUI-Programmierung 17

18 Ein einfaches Swing-Programm (nicht Threadsafe) import javax.swing.jframe; import javax.swing.jlabel; public class HelloWorldSwing { private static void createandshowgui() { // Create and set up the window. JFrame frame = new JFrame("HelloWorldSwing"); frame.setdefaultcloseoperation(jframe.exit_on_close); // Add the ubiquitous "Hello World" label. JLabel label = new JLabel("Hello World"); frame.getcontentpane().add(label); } // Display the window. frame.pack(); frame.setvisible(true); } public static void main(final String[] args) { createandshowgui(); //... weiterer Code } Programmiermethodik - GUI-Programmierung 18

19 Beispiel 2 TopLevelDemo Eclipse Programm findet man unter Aufbau Hierarchie (Containment hierarchy) der Komponenten Programmiermethodik - GUI-Programmierung 19

20 Layout-Manager

21 Layout-Manager Zu jedem Container gibt es einen Layout-Manager. Durch diesen werden die Komponenten im Container angeordnet. Dieser bestimmt die Größe und Position jeder Komponente. Mit der setlayout-methode kann der Layout-Manager bestimmt werden. Dieser übernimmt das Platzieren aller Komponenten, die mit nachfolgenden add-aufrufen hinzugefügt werden. Die Argumente der add-methode hängen vom Layout-Manager ab. Alle JPanel-Objekte benutzen standardmäßig den FlowLayout Manager. Alle ContentPanes (die Container in JApplet, JDialog, JFrame) benutzen standardmässig den BorderLayout-Manager. Layout-Manager kann auf null gesetzt werden. Dann kann man die Komponenten explizit platzieren. Programmiermethodik - GUI-Programmierung 21

22 Verfügbare Layout-Manager Programmiermethodik - GUI-Programmierung 22

23 Beispiel BorderLayout BorderLayout-Objekt hat 5 Teile (Konstanten) PAGE_START, PAGE_END, LINE_START, LINE_END, CENTER CENTER bekommt am meisten Platz, der Rest passt sich an. Beispiel Eclipse Komponenten werden zu einem Frame hinzugefügt. Die ContentPane benutzt automatisch das BorderLayout! Programmiermethodik - GUI-Programmierung 23

24 Beispiel GridLayout Beim GridLayout werden die Komponenten in einem Gitter von Zellen angeordnet. Jede Komponenten verbraucht den gesamten Platz in einer Zelle. Wird die Fenstergröße verändert, dann wird jede Zellengröße entsprechend angepasst. Beispiel Eclipse Programmiermethodik - GUI-Programmierung 24

25 Ereignisbasierte Programmierung

26 Ereignisbasierte Programmierung Der Kontrollfluss eines Systems wird durch Ereignisse und nicht durch Kontrollstrukturen oder Funktionsaufrufe bestimmt. Beispiele für Ereignisse Mausklick Eingabe per Tastatur etc. Typische Anwendung Interaktive Systeme Interaktion zwischen Benutzer und grafischer Benutzerschnittstelle Programmierung von Sensoren Messwerte bestimmen weiteren Ablauf Programmiermethodik - GUI-Programmierung 26

27 Generelle Idee Zuhörer (Listener) registrieren sich für bestimmte Ereignisse. Die Quelle schickt eine Benachrichtigung wenn ein Ereignis eintritt. register Listeners Event source notify Programmiermethodik - GUI-Programmierung 27

28 Entwurfsmuster? Teilnehmer Event-Source (Quelle) Event-Listener (registriert sich bei der Quelle) Event-Objekt (wird zum Listener geschickt) Rollen Source = Subjekt Listener = Beobachter Push - Variante besser Listener kann sich bei mehreren Quellen registrieren. Alle Quellen benutzen die gleiche Methode (Callback-Methode) für Benachrichtigungen. Beobachter sollten sofort reagieren. Programmiermethodik - GUI-Programmierung 28

29 Event-Objekte Ein Ereignis wird durch ein Objekt repräsentiert. Es gibt unterschiedliche Ereignistypen, von denen Objekte angelegt werden können. Alle Ereignistypen erben von AWTEvent. Ereignisse werden meist von Komponenten erzeugt. Ein Ereignisobjekt beinhaltet Informationen über das Ereignis sowie die Quelle des Ereignisses. Typische Verarbeitung Endlosschleife (Event-Schleife) in der die Ereignisse generiert werden (auf Aktionen warten). Interne Verwaltung eines Puffers für die einzelnen Ereignisse. Kontrollfluss der Event-Schleife sollte unabhängig vom Kontrollfluss der Empfänger sein. Nebenläufigkeit! Programmiermethodik - GUI-Programmierung 29

30 Listener Möchte ein Objekt von einer Komponente über bestimmtes Ereignis benachrichtigt werden, dann muss die Komponente: ein passendes Interface implementieren und sich als Listener bei der Komponente (Source) registrieren. Implementieren eines passenden Interfaces bedeutet eine Methode zur Verfügung stellen, die das Ereignis behandeln kann. Diese Implementierung wird als Event Handler bezeichnet. Sehr oft als innere (anonyme) Klasse implementiert. In Swing gibt es eine große Anzahl an Listener-Interfaces. Manche Interfaces haben noch zusätzliche Adapter-Klassen, die für größere Interfaces Implementierungen bereitstellen (man muss nur mehr davon ableiten und benötigte Funktionalität implementieren). Liste der Listener-APIs siehe: Programmiermethodik - GUI-Programmierung 30

31 Listener-Interfaces (mit Beispielen) ActionListener Benutzer klickt z.b. einen Button an, drückt die Enter-Taste in einem Textfeld oder wählt einen Menüeintrag aus. WindowListener Benutzer öffnet/schließt ein Fenster. MouseListener Benutzer klickt eine Maustaste während der Mauszeiger über einer Komponente ist. MouseMotionListener Benutzer bewegt die Maustaste über einer Komponente. ComponentListener Komponente wird sichtbar. FocusListener Komponente bekommt den Focus. Programmiermethodik - GUI-Programmierung 31

32 Beispiel Mausklick auf Button Der Mausklick führt dazu, dass der Button ein Ereignis vom Typ ActionEvent erzeugt. Dieses Ereignis(-Objekt) hat alle Informationen über das Ereignis und seine Quelle und weiters eine Beschreibung der ausgeführten Aktion. Dieses Ereignis wird an alle bei dem Button registrierten ActionListener-Objekte geschickt. Jeder Listener implementiert eine Methode für die Ereignisbehandlung. In diesem Fall wird mit der Methode actionperformed festgelegt, was beim Eintreten des Ereignisses passieren soll. Damit ruft dann der Button bei einer Aktion (Mausklick) diesen Code auf! Eclipse Programmiermethodik - GUI-Programmierung 32

33 Registrieren Ein Listener muss explizit mit dem Ereignisauslöser verbunden werden. Dafür gibt es unterschiedliche Methoden der Form addereignislistener(ereignislistener). Nicht jede Komponente kann jedes Ereignis auslösen. Daher gibt es die entsprechenden add-methoden nur für Ereignisse, die die Komponenten tatsächlich auslösen! JFrame-Klasse bietet zum Beispiel addwindowlistener() für Fensterereignisse, aber kein addactionlistener(). Ein JButton hingegen bietet addactionlistener() an, damit er die Aktivierung der Schaltfläche melden kann. So lassen sich über die angebotenen add-methoden gut die Ereignisse ablesen, die eine Komponente auslösen kann. Programmiermethodik - GUI-Programmierung 33

34 Beispiel für mehrere Listener Beispiele für mehrere Listener-Implementierungen (Action- Listener) html ActionListener: Einfachste und am meisten benutzte Variante ActionDemo, Programmiermethodik - GUI-Programmierung 34

35 Aktionen Ein Action-Objekt ist ein ActionListener Damit werden der Zustand und die Funktionalität einer Komponente getrennt. Ein Action Objekt wird mit der Methode setaction zu einer Komponente hinzugefügt. Der Zustand der Komponente wird dem Zustand des Action-Objektes angeglichen. Das Action-Objekt wird als ActionListener bei der Komponente registriert. Wenn sich der Zustand des Action-Objektes ändert, wird der Zustand der Komponente ebenfalls geändert. Um ein Action Objekt zu erzeugen, leitet man eine Klasse von der Klasse AbstractAction ab. Die Unterklasse muss die Methode actionperformed implementieren, da das Action Objekt auch als ActionListener fungiert. Beispiel: Programmiermethodik - GUI-Programmierung 35

36 Threads Die Ereignisbehandlung erfolgt immer im Event Dispatching Thread. Ein Event-Handler nach dem anderen. Auch die Zeichenroutinen der Komponenten laufen im Event Dispatching Thread ab. Während ein Event Handler abgearbeitet wird, ist die GUI eingefroren (reagiert nicht). Event Handler sollten immer nur wenig Rechenzeit verbrauchen! Langfristige Berechnungen müssen asynchron in extra Threads ausgeführt werden. Programmiermethodik - GUI-Programmierung 36

37 MVC (Ausblick) Anstatt den gesamten Code in eine einzelne Klasse zu packen, werden beim MVC-Konzept drei unterschiedliche Bestandteile eines grafischen Elements unterschieden: Das Modell enthält die Daten des Dialogelements und speichert seinen Zustand. Die View ist für die grafische Darstellung der Komponente verantwortlich. Der Controller wirkt als Verbindungsglied zwischen beiden. Er empfängt Tastatur- und Mausereignisse und stößt die erforderlichen Maßnahmen zur Änderung von Model und View an. Bei den Swing-Dialogelementen wird eine vereinfachte Variante von MVC verwendet (Model-Delegate-Prinzip). Dabei wird die Funktionalität von View und Controller in einem UI Delegate zusammengefasst. Dadurch wird einerseits die Komplexität reduziert und andererseits die in der Praxis mitunter unhandliche Trennung zwischen View und Controller aufgehoben. Programmiermethodik - GUI-Programmierung 37