GUI-Dynamik - Fachbereich Informatik Hochschule Darmstadt

Java Swing
CNAM
Praktikum Systementwicklung
Prof. Dr. Bernhard Humm
Hochschule Darmstadt – University of Applied Sciences
Wintersemester 2006/2007
Agenda
Agenda
 GUIs
GUIs
Java Swing
GUI-Statik
GUI-Dynamik
Referenzen
Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07.
13.12.2006
Seite 2
Grafische Benutzeroberflächen (GUIs)
Dialog stammt aus ARRIBA
8.0 der RIB Software AG (www.rib.de)
Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik.
Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006, Seite 3
Bausteine für das Dialoglayout (Bibliothek)
Kopfzeile
Datei
Bearbeiten
Teildialog
Ansicht
Spalte
Spalte
Spalte
Spalte
U
051111
000
051112
A
051115
001
051115
A
051115
001
051115
A
051115
001
051115
V
051117
000
051117
Hilfe
Reiter
Feld Wert
Button
Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006, Seite 4
Agenda
Agenda
GUIs
 Java
Java Swing
Swing
GUI-Statik
GUI-Dynamik
Referenzen
Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07.
13.12.2006
Seite 5
Java Swing
Java Swing
 Java Swing: Bibliothek von
Bausteinen zur Erstellung von
GUIs in Java
 Teil der JFC (Java Foundation
Classes
 Basierend auf AWT (Abstract
Windowing Toolkit, dem ersten,
einfachen GUI-Framework in
Java
 Portable, das heißt
betriebssystemunabhängige
GUIs
 Unser Beispiel: Calculator
Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006, Seite 6
Agenda
Agenda
GUIs
Java Swing
 GUI-Statik
GUI-Statik
GUI-Dynamik
Referenzen
Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07.
13.12.2006
Seite 7
GUI-Statik
JFrame:
Ein leeres Fenster anlegen
 javax.swing.*: Java Extensions
mit allen Swing-Klassen
 JFrame: Fenster mit Rahmen und
Inhaltsbereich (anfangs leer)
package gui;
import javax.swing.JFrame;
public class CalculatorFrame extends JFrame {
 JFrame wird initialisiert (damit
erst einmal noch nicht sichtbar)
public static void main(String[] args) {
CalculatorFrame calculatorFrame = null;
 Mit frame.setTitle(“Calculator“)
kann der Fenstertitel gesetzt
werden (alternativ mit
Konstruktor)
calculatorFrame = new CalculatorFrame ();
calculatorFrame.setVisible(true);
}
public CalculatorFrame() {
super("Calculator");
}
 Anzeigen: frame.setVisible(true);
}
Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006, Seite 8
GUI-Statik
Das Fenster füllen: statisches GUI-Layout
cd GUI elements
calculator:
JFrame
contentPane:
Container
calculatorPanel:
JPanel
operatorLabel:
JLabel
commandPanel:
JPanel
operatorTextField:
JTextField
quitButton:
JButton
Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006, Seite 9
GUI-Statik
Component Hierarchie
 Component: Objekt mit graphischer
Repräsentation (AWT und Swing); kann
Events verschicken und empfangen,
 Container: Behälter für andere
Components (Composite Pattern); kann
LayoutManager benutzen
 JComponent: Basisklasse für alle SwingKomponenten; kann Look and Feel
setzen
 JFrame, JDialog, JApplet: top-level
Swing-Container
 JPanel: eingebetteter Swing-Container
 JLabel, JTextField, JButton, …: SwingKomponenten
Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006, Seite 10
GUI-Statik
LayoutManager
 Der LayoutManager ist für die Anordnung der Dialogelemente im
Fenster verantwortlich
 Jeder LayoutManager verfolgt dabei eine eigene Strategie, Elemente
zu platzieren und in der Größe so anzupassen, dass sie aus seiner
Sicht optimal präsentiert werden
 Standard-LayoutManager:
– FlowLayout
– GridLayout
– BorderLayout
– CardLayout
– GridBagLayout
 Null-Layout: Handarbeit
Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006, Seite 11
GUI-Statik
FlowLayout
 Das FlowLayout ordnet
Dialogelemente nebeneinander
in einer Zeile an
 Wenn keine weiteren Elemente
in die Zeile passen, wird mit der
nächsten Zeile fortgefahren.
Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006, Seite 12
GUI-Statik
GridLayout
 Das GridLayout ordnet die
Dialogelemente in einem
rechteckigen Gitter an, dessen
Zeilen- und Spaltenzahl beim
Erstellen des Layoutmanagers
angegeben wird
 (Das GridBagLayout ist ein
komplexer Layoutmanager, der
die Fähigkeiten von GridLayout
erweitert und es ermöglicht, mit
Hilfe von Bedingungsobjekten
sehr komplexe Layouts zu
erzeugen)
Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006, Seite 13
GUI-Statik
BorderLayout
 Das BorderLayout verteilt die
Dialogelemente nach Vorgabe
des Programms auf die vier
Randbereiche und den
Mittelbereich des Fensters:
– NORTH
calculatorPanel:
CENTER
– SOUTH
– WEST
– EAST
– CENTER
commandPanel:
SOUTH
Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006, Seite 14
GUI-Statik
Das statische GUI-Layout programmieren
 Swing-Komponenten erzeugen
durch Instanziierung, zum
Beispiel new JLabel
private void layoutFrame() {
Container contentPane;
aLabel = new JLabel("a:");
aTextField = new JTextField();
calculatorPanel = new JPanel(new GridLayout(4, 2));
calculatorPanel.add(aLabel);
calculatorPanel.add(aTextField);
…
computeButton = new JButton("Compute");
commandPanel = new JPanel(new FlowLayout());
commandPanel.add(computeButton);
…
contentPane = this.getContentPane();
contentPane.setLayout(new BorderLayout());
contentPane.add(calculatorPanel,
BorderLayout.CENTER);
contentPane.add(commandPanel,
BorderLayout.SOUTH);
…
this.pack();
 JPanels erzeugen durch
Instanziierung
 Komponenten zu Containern
hinzufügen durch add
 Beispiele für 3 LayoutManager
 frame.pack() (aus
java.awt.Window): führt das
Layout durch und passt die
Fenstergröße an
}
Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006, Seite 15
Agenda
Agenda
GUIs
Java Swing
GUI-Statik
 GUI-Dynamik
GUI-Dynamik
Referenzen
Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07.
13.12.2006
Seite 16
GUI-Dynamik
Das Model View Controller (MVC) Muster
 Muster zur Gestaltung grafischer
Benutzeroberflächen (aus
Smalltalk 80)
 View: grafische Repräsentation,
kennt Controller und Model
 Controller: Ablaufsteuerung,
kennt View und Model
 Model: Anwendungsdaten und –
funktionen; kennt im Idealfall
weder Controller noch View;
meldet nur Änderungen
(Observer Pattern)
View:
grafische
Repräsentation
Controller:
Ablaufsteuerung
Model:
Anwendungsdaten und
funktionen
 JFrame implementiert View
Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006, Seite 17
GUI-Dynamik
Delegation-based Event Handling
 Kommunikation zwischen Betriebssystem und Anwendungsprogramm
erfolgt durch das Versenden von Nachrichten
 Ereignisquellen (Event Sources) sind die Auslöser der Nachrichten
 Ereignisempfängern (EventListeners) sind Objekte, die das zum
Ereignis passende Empfänger-Interface implementieren
 Damit ein Ereignisempfänger die Nachrichten einer bestimmten
Ereignisquelle erhält, muss er sich bei dieser registrieren
 Delegation Based Event Handling: Mechanismus in Swing (mächtiger,
aber auch komplexer als entsprechender Mechanismus in AWT)
Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006, Seite 18
GUI-Dynamik
Events (Ereignisse)
 Klassenhierarchie für alle
Ereignistypen; Wurzel:
java.util.EventObject, Events für GUIProgrammierung in
java.awt.AWTEvent
 Low-Level-Ereignisse
ComponentEvent: für den Transfer
von elementaren Nachrichten
zuständig, die von Fenstern oder
Dialogelementen stammen
 Semantische Ereignisse
ActionEvent, AdjustmentEvent,
ItemEvent und TextEvent: nicht an
ein bestimmtes GUI-Element
gebunden, sondern übermitteln
höherwertige Ereignisse wie das
Ausführen eines Kommandos oder
die Änderung eines Zustands
Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006, Seite 19
GUI-Dynamik
Listener (Ereignisempfänger)
 Damit ein Objekt Nachrichten
empfangen kann, muss es eine
Reihe von Methoden
implementieren, die von der
Nachrichtenquelle, bei der es
sich registriert hat, aufgerufen
werden können
  Interfaces implementieren, die
aus java.util.EventListener
abgeleitet sind
 Je Ereignisklasse gibt es ein
EventListener-Interface
Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006, Seite 20
GUI-Dynamik
Listener registrieren
 Listener muss ein EventListener
Interface implementieren
 Im Beispiel: Controller-Klasse
CalculatorController –
ActionListener
 Variante anonyme innere Klassen
auch gebräuchlich
 Ereignis-Auslöser: hier JButton
(ActionEvent)
 Registrierung von
calculatorController bei
computeButton durch
addActionListener
import java.awt.event.*;
public class CalculatorController
implements ActionListener {
CalculatorFrame calculatorFrame;
…
}
private void layoutFrame() {
...
computeButton = new JButton("Compute");
computeButton.addActionListener(
getCalculatorController());
...
}
Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006, Seite 21
GUI-Dynamik
Auf Events reagieren
 ActionListener muss die Methode
actionPerformed(ActionEvent e)
implementieren
import java.awt.event.*;
public class CalculatorController
implements ActionListener {
 Aufruf des Models, hier:
Calculator Klasse mit
Klassenmethode compute(a,
operator, b)
CalculatorFrame calculatorFrame;
public void actionPerformed(ActionEvent e) {
if(e.getActionCommand().equals("Compute")){
String a, operator, b, result;
a = calculatorFrame.getATextField().getText();
operator = calculatorFrame.getOperatorTextField().
getText();
b = calculatorFrame.getBTextField().getText();
result = Calculator.compute(a, operator, b);
calculatorFrame.getResultTextField().setText(result);
 Parameter auslesen aus View,
hier: calculatorFrame.
getATextField().getText();
 Ergebnis rückschreiben in View,
hier: calculatorFrame.
getResultTextField().
setText(result);
}…
}
}
Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006, Seite 22
GUI-Dynamik
Fenster schließen
 frame.setVisible(false): schließt
die Anzeige eines Fensters; das
Fenster kann durch
setVisible(true) jederzeit wieder
geöffnet werden
import java.awt.event.*;
public class CalculatorController
implements ActionListener {
CalculatorFrame calculatorFrame;
 frame.dispose(): schließt die
Anzeige des Fensters und räumt
alle Ressoucen auf. Das Fenster
kann nicht mehr geöffnet werden
 System.exit(0): beendet das
Programm
public void actionPerformed(ActionEvent e) {
…
if (e.getActionCommand().equals("Quit")){
calculatorFrame.setVisible(false);
calculatorFrame.dispose();
System.exit(0);
}…
}
Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006, Seite 23
Agenda
Agenda
GUIs
Java Swing
GUI-Statik
GUI-Dynamik
 Referenzen
Referenzen
Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07.
13.12.2006
Seite 24
Referenzen
Zum Weiterlesen
 Guido Krüger, Handbuch der Java-Programmierung, Kapitel 23 - 40
Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006, Seite 25