Prof. Dr. Nikolaus Wulff
Oberflächenentwicklung mit AWT & Swing
Eine Einführung in die Java Foundation Classes (JFC)
Prof. Dr. Nikolaus Wulff Angewandte Informatik 2
Agenda
• Das Model-View-Controller Konzept
• Die Ereignisverarbeitung
• Das Swing Modell
• Ein SDI & MDI Modell mit Swing
• GUI Design
• Einheitliche Interaktionsformen in einer Anwendung
Prof. Dr. Nikolaus Wulff Angewandte Informatik 3
Das MVC Konzept
Umsatz Filiale München:Q1 = 40 Mio DMQ2 = 40 Mio DMQ3 = 40 Mio. DMQ4 = 50 Mio. DM
Filiale Umsatz 1996 in Mio. DM1.Quartal 2. Quartal 3. Quartal 4. Quartal
Hamburg 60 80 20 40Köln 20 50 30 35München 40 40 40 50Frankfurt 25 30 60 25
0
5
10
15
20
25
30
35
40
45
50
1 2 3 4
Umsatz 1996
1
2
3
4
München0
5
10
15
20
25
30
35
40
45
50
München
View - Objekte
(Controller- Objektesind nicht dargestellt)
Model - Objekt(enthält einen Datensatz)
Prof. Dr. Nikolaus Wulff Angewandte Informatik 4
Minimales MVC - Modell
Controlle r
M ode l
upda te
V iew
f ir e e v e nt
dis pla y
1. Das Modell informiert die Views über den Inhalt.2. Die View informiert den Controller über Änderungen3. Der Controller aktualisiert das Modell entsprechend
Prof. Dr. Nikolaus Wulff Angewandte Informatik 5
MVC (II)
Controlle r
Obs e rve r
(from util)
<<Inte rfa ce>>
M ode l
upda te
M ode lObs e rve r
<<In te rfa ce >>
0 ..*0 ..*
-obse rve r
V iew
Vie w Obs e rve r
<<In te rfa ce >>
0 ..*0 ..*fireEvent
Prof. Dr. Nikolaus Wulff Angewandte Informatik 6
AWT und Swing• Das AWT ist die graphische Benutzerschnittstelle, die als
Framework mit dem JDK ausgeliefert wird.
• Da es auf “jeder Plattform” zur Verfügung stehen soll, bietet es den kleinsten gemeinsamen Nenner aus Windows/NT, UNIX MacOS und OS/2 bezüglich des Fenstersystems.
• Das ursprüngliche AWT wurde im Frühjahr 1997 grundlegend geändert, mitsamt der Java Sprachsyntax (Innere Klassen).
• Die Ablösung des AWT durch Swing (JFC) ist im Frühjahr 1998 erfolgt. Jedoch eine Firma in Redmond hatte ihre eigenen Vorstellungen in einem Gegenentwurf (AFC mit dem MS J++) .
• Die Swing Klassen bieten ein einheitliches Look & Feel auf allen Plattformen. Das Eclipse SWT verwendet native Widgets...
Prof. Dr. Nikolaus Wulff Angewandte Informatik 7
Was ist das AWT?• Das AWT bietet die wesentlichen Elemente zur Erstellung einer
graphische Benutzerschnittstelle:
Fenster
Dialoge
Schalter und Schaltflächen
Textfelder und Textfenster
Schiebebalken
Listboxen
...
Prof. Dr. Nikolaus Wulff Angewandte Informatik 8
AWT Komponenten
Dia lo g
(from aw t)
Pane l
(from aw t)
Fr ame
(from aw t)
W indow
(from aw t)
Conta iner
(from aw t)
Com pone nt
(f rom aw t)
0 ..1 par ent
0 ..* com ponent[]0 ..*
Button
(from aw t)
La be l
(from aw t)
0 ..1
Te x tFie ld
(from aw t)
Te xtCom pone nt
(f ro m aw t)
Te x tArea
(from a w t)
Ch oice
(from aw t)
Composite Muster
Prof. Dr. Nikolaus Wulff Angewandte Informatik 9
Hello World
import java.awt.*;class Hello extends Frame {
public Hello() {super(“Hello”);
} // Hello Konstruktorpublic static void main(String[]args){ Hello hello = new Hello();
hello.setSize(300,200); hello.show();} // main routine
} // class Hello
Das Erzeugen einer Anwendung mit “Hauptfenster”:
Prof. Dr. Nikolaus Wulff Angewandte Informatik 10
Agenda
• Das Model-View-Controller Konzept
• Die Ereignisverarbeitung
• Das Swing Modell
• Ein SDI & MDI Modell mit Swing
• GUI Design
• Einheitliche Interaktionsformen in einer Anwendung
Prof. Dr. Nikolaus Wulff Angewandte Informatik 11
Die Ereignisverarbeitung
• In der herkömmlichen prozeduralen Programmierung läuft die Anwendung in einer festen, vom Programmierer vorgegebenen hierarchischen Reihenfolge.
• Erwartet der Programmierer die Eingabe einer Buchungsnummer, so springt das Programm in die entsprechende Routine und wartet dort mit einer Lese-Anforderung, bis der Benutzer diese eingibt.
• Die modernen GUI Schnittstellen stellen diese Reihenfolge auf den Kopf: Der Anwender bestimmt wann er eine Eingabe macht. Das Programm muss dann flexibel darauf reagieren.
Prof. Dr. Nikolaus Wulff Angewandte Informatik 12
Das Observer Muster• Das AWT verwendet das Beobachter Pattern (Observer) um auf
Ereignisse der Komponente zu reagieren.
– Ein Beobachter meldet sich bei der Komponente an.
– Der Beobachter verpflichtet sich eine von der Komponente definierte Schnittstelle zu implementieren, (xxxEventListener).
– Die Komponente garantiert den Beobachter, beim Eintreten des spezifizierten Ereignisses (xxxEvent) seine Schnittstelle aufzurufen.
• Im AWT werden die Schnittstellen per interface deklariert. Der Beobachter benutzt das Java implements Statement um die konkrete Schnittstelle zu implementieren. Da er die entsprechenden Methoden zur Verfügung stellt, kann er auf die Ereignisse reagieren.
Prof. Dr. Nikolaus Wulff Angewandte Informatik 13
Beispiel WindowListener
W indow Adapte r
w i n do w O pe ne d ()
w i n dow C los ing ()
w ind ow C lo s ed ()
w ind ow Icon if ied ()
w ind ow D e i co n if ie d ()
w ind ow Ac tiva te d ()
w ind ow D ea c tiva ted ()
(from ev ent)
Fra m e
(from aw t)W indow Lis tener
(from ev ent)
<<Inte rfa ce >>
0 ..*
Controlle r
inform s
0 ..*
Controlle r regis tr ie rt s ic h be im Fram e
Fr ame f = new Fra m e();
f.a ddW indow Lis te ne r (t his );
f.s et V is ible (tru e );
Prof. Dr. Nikolaus Wulff Angewandte Informatik 14
Sequenzdiagramm WindowListener : Controlle r : Fra m e
a ddW indow Lis te ne r(W indow Lis te ne r)
s e tV is ible (true )
s how ( )
w indow Ope ne d(W indow Eve nt)
Fra m e ( )
Prof. Dr. Nikolaus Wulff Angewandte Informatik 15
Das Beenden von HelloWorld
public static void main(String[]args){ Hello hello = new Hello();// **> Erzeugen und Anmelden des Beobachters hello.addWindowListener( new WindowAdapter() { // begin inner class public void windowClosing(WindowEvent e){ System.out.println(e.toString()); System.exit(0); } // windowClosing } // end inner class ); // addWindowListener// **> der Beobachter ist registriert hello.show();} // main routine
Prof. Dr. Nikolaus Wulff Angewandte Informatik 16
Agenda
• Das Model-View-Controller Konzept
• Die Ereignisverarbeitung
• Das Swing Modell
• Ein SDI & MDI Modell mit Swing
• GUI Design
• Einheitliche Interaktionsformen in einer Anwendung
Prof. Dr. Nikolaus Wulff Angewandte Informatik 17
Swing Package Hierarchie
basic(from plaf)
<<factory>>
metal(from plaf)
<<factory>>
multi(from plaf)
<<factory>>
plaf
(from swing)
<<factory>>
event
(from awt)peer
(from awt)
<<system>> awt
(from java)
event
(from swing)
text
(from swing)
tree
(from swing)
table
(from swing)
html
(from text)
swing
(from javax)
Prof. Dr. Nikolaus Wulff Angewandte Informatik 18
Swings MVC: model-delegate<<Com pone n t>>
< <UI-de le ga te >>
M ode l
View
Contro ll er
• View und Controller werden zu einer graphischen Schnittstelle dem UI-Delegate zusammengefasst.
• Delegate und Model arbeiten zusammen und bilden eine logische Swing Komponente.
Prof. Dr. Nikolaus Wulff Angewandte Informatik 19
JButton Klassendiagramm
JToggleButton.Toggle ButtonM ode l
(from sw ing)
<<in ne r clas s >>
ButtonM ode l
(from sw ing)
<<Inte rfac e>>
DefaultButtonM ode l
(from sw ing)
ButtonGroup
(from sw ing)Abstra c tButton
(from sw ing)
<<ab s tract>>
11
cont a in s
0 ..*0 ..*
groups
JM e nuIte m
(from sw ing)
JButton
( from
J ToggleButton
(from sw ing)
JRa dioButton
(from sw ing)
JCheck Box
( from sw in g)
Prof. Dr. Nikolaus Wulff Angewandte Informatik 20
JButton und sein Modell
• Der innere Zustand des JButtons wird im ButtonModel hinterlegt. Attribute sind z.B.:
– actionCommand
– enabled
– ...
• Das ButtonModel erlaubt die Registrierung von Listeners für:
– ActionEvent
– ChangeEvent
– ItemEvent
Prof. Dr. Nikolaus Wulff Angewandte Informatik 21
MVC für JTextField
J Tex tCom pone nt
(fro m text)
<<a bs trac t>>
J Tex tFie ld
(from sw ing)
J Tex tAre a
( from sw ing )
JTe x tPa ne
(from sw ing)
J Pass w ord Fie ld
( from sw in g)
JEditorPane
( from sw in g)
Wo ist das Modell?
Prof. Dr. Nikolaus Wulff Angewandte Informatik 22
JTextComponent und Document
J Tex tCom pone nt
(fro m text)
<<a bs trac t>>
J Tex tFie ld
(from sw ing)
J Tex tAre a
( from sw ing )
JTe x tPa ne
(from sw ing)
J Pass w ord Fie ld
( from sw in g)
JEditorPane
( from sw in g)
Docum ent
(from text)
<<Inte rfac e>>
11
Abs tr ac tDoc um ent
(from text)
<<abs tract>>
Pla inDocum ent
(from text)
De faultS tyledDocum e nt
(from text)
Htm lDoc um ent
( fr om html )
Prof. Dr. Nikolaus Wulff Angewandte Informatik 23
Das JTextField Modell
• Ein JTextField enthält ein Document als Modell
• ein JTextField ruft während seines Konstruktors die Methode protected Document createDefaultModel(), die ein Objekt vom Type PlainDocument zurückgibt.
• Eine interessante Methode des Documents ist:
– void insertString(int offset, String str, AttributeSet a)
• überlädt man diese Methode so erhält man ein anderes Modell für das Textfeld ...
Prof. Dr. Nikolaus Wulff Angewandte Informatik 24
Ein Textfeld mit Grossbuchstaben
JTex tFie ld
(from sw ing)
Uppe rCaseFie ld
P la inDocum ent
(from text)
UpperCase .UpperCaseFie ldDocum ent
Upper CaseFie ld übe rlädt die c r ea te
Def aultM ode l M e th ode und e rzeugt
se inen e igenen Form at ie r e r .. .
crea te D e fau ltMode l
crea teD e fau ltMode l
Prof. Dr. Nikolaus Wulff Angewandte Informatik 25
Erweiterung des JTextField
public class UpperCaseField extends JTextField {// Überladen der Modellerzeugungprotected Document createDefaultModel() {
return new UpperCaseDocument();} // Das neue Modell als innere Klassestatic class UpperCaseDocument extends PlainDocument {
public void insertString(int offs, String str, AttributeSet a)
throws BadLocationException { if (str == null)
return; else super.insertString(offs,str.toUpperCase(),a); } // method insertString
} // inner class UpperCassDocument} // class UpperCaseField
Prof. Dr. Nikolaus Wulff Angewandte Informatik 26
Das JList Klassenmodell
Abs tract Lis tM ode l
(from sw ing)
De fa ultLis tM ode l
(from sw ing)
De fa ultLis tCe llRe nde re r
(from sw ing)De fa ultLis tSe le c tionm ode l
Lis tCe lllRe nde re r
(from sw ing)
<<Inte rfa c e >>Lis tM ode l
(from sw ing)
<<Inte rfa c e >>
J Lis t
(from
ListSe le c tio nMod e l
(from sw ing)
<<Inte rfa c e >>
us e s us e s us e s
Sc rolla ble
(from sw ing)
<<Inte rfa c e >>
Prof. Dr. Nikolaus Wulff Angewandte Informatik 27
Das JTable Modell
Model
Controller
View
Scrollable(from swing)
<<Interface>>
AbstractTableModel<<abstract>>
DefaultTableModel
CellEditorListener(from event)
<<Interface>>TableColumnModelListener
(from event)
<<Interface>>ListSelectionListener
(from event)
<<Interface>>TableModelListener
(from event)
<<Interface>>
DefaultTableColumnModel TableColumn0..*0..*
contains
ListSelectionModel(from swing)
<<Interface>>
11
TableModel<<Interface>>
TableCellEditor<<Interface>>
11uses
TableCellRenderer<<Interface>>
22
uses
JTable(from swing)
uses
11
uses
0..*0..*
uses
uses
TableColumnModel<<Interface>>
uses
JTableHeader 11
uses
uses
Prof. Dr. Nikolaus Wulff Angewandte Informatik 28
Das JTree Modell
Scrol la ble
( fr om s w ing )
<<In te rface>>
M utableTreeNode
<<In te rface >>
De fa ultM utableTreeNode
ActionLis tener
(from ev ent)
<<In te rface>>
Tree Se lec tionLis tener
(fr om ev ent)
<< In te rface>>
Tree Node
<<In te rface >>
Defa ultTreeM ode l
0 ..*0 ..*
De faultTreeCe llRende re rDe faultTreeCe llEditor
TreePa th
Defa ultTreeSe lec tionM ode l
0 ..*
Row M apper
<<In te rface> >1
Tree Ce llEditor
<< In te rface>>
Tree Ce llRendere r
<<In te rface>>
TreeSe lec tionM ode l
<<In te rface>>
JTree
(from sw ing)
1 1 1
TreeM ode l
<<In te rface >>
11
1 1 1
conta ins
conta ins
0 ..*
conta ins
1
uses
uses uses uses
Model
UI - Delegate
Prof. Dr. Nikolaus Wulff Angewandte Informatik 29
Entwicklung eigener Modellklassen
• JList, JTable und JTree sind die komplizierteren der Swing Klassen
• Eigene Modelle lassen sich immer durch extends DefaultXXXModel erzeugen.
• Um ein einheitliches Erscheinungsbild zu erhalten, sollten die grundlegenden Views vorprogrammiert werden. Sie arbeiten dann generisch mit den entsprechenden Modellen zusammen, z.B. Suchlisten, Formulare ...
Prof. Dr. Nikolaus Wulff Angewandte Informatik 30
Das ScrollPanelLayout
Die Swing Komponenten wie JList oder JTable besitzen keine Fähigkeiten zum scrollen.Sie werden einfach in ein JScrollPane eingebettet, dass dann diese Arbeit abnimmt.
Column Header
Row
Hea
der
Horz. ScrollBar
Vert. Scroll
Viewport
Hot Spot
Column Header
Row
Hea
der
Prof. Dr. Nikolaus Wulff Angewandte Informatik 31
Layout und Swing PanesJCompo ne nt
( from s w ing )
Conta iner
(from aw t)
LayoutM anage r
(from aw t)
<<In te rfa ce>>
Overla yLayout
(from sw ing)
J Scr ollpa ne .Scr ollBar
(from s wing)
JSc r ollBa r
(from sw ing)
Sc rollPan e Layout
( from sw in g)
View portLayout
( from s w ing )
Box Layout
(from sw ing)
JSc rollPane
(from sw ing)
22
uses
11
J View port
(from sw ing)
11
1 ..31 ..3
usesJ SplitPane
(from sw ing)
Box
(from sw ing)
11
JTabbe dPa ne
( from sw in g)
Component
(from aw t)
0 ..40 ..411220 ..*0 ..*
conta ins
us es uses uses
Prof. Dr. Nikolaus Wulff Angewandte Informatik 32
JRootPane
• Alle wichtigen Swing „View“-Klassen wie JFrame, JDialog etc. besitzen eine „Wurzelebene“ zum Verwalten ihrer graphischen Widgets, die sogenannte JRootPane.
contentPane
menuBar
layeredPane
JRootPane
glassPane
unten
oben
Prof. Dr. Nikolaus Wulff Angewandte Informatik 33
LayeredPane Schichtenkonzept
• Die JRootPane ordnet Objekte in Schichten an.
• Leichtere verdecken schwerere Schichten
Vordefinierte Schichten
DRAG_LAYER
FRAME_CONTENT_LAYER
POPUP_LAYER
MODAL_LAYER
PALETTE_LAYER
DEFAULT_LAYER
Prof. Dr. Nikolaus Wulff Angewandte Informatik 34
JRootPane
RootPane Conta iner
(from sw ing)
<<In te rface>>
Component
(fr om aw t)
JFram e
(from sw ing)
J Inte rna lFram e
( from sw ing )
JDia log
( from sw ing )
JRootPane
(from sw ing)
1glassPane
con ta ins
JApple t
(from sw ing)
1
JM e nuBar
(from sw ing)
manages
Conta iner
(fr om aw t)
1 contentPane1
manages
JLayere dPane
( from sw ing )
11
conta ins1
1
1
11
1
1
1
conta ins
JCom ponent
(from sw ing)
Conta iner
(fr om aw t)
conta ins
Prof. Dr. Nikolaus Wulff Angewandte Informatik 35
JInternalFrameJCom ponent
(from sw ing)
J La yere dPa ne
(from sw ing)
De sk topM a na ger
<<In te rfa ce >>
De fault Desk t opM ana ger
J Des k topPa ne
J Inte rna lFram e
( fr om s w ing )
0 ..*0 ..*
conta ins
m a na ge dBy1
Inte rna lFram e Lis te ne r
<<In te rface >>
not if ie s0.. n
Inte rna lFram eAdapte r
Prof. Dr. Nikolaus Wulff Angewandte Informatik 36
Agenda
• Das Model-View-Controller Konzept
• Die Ereignisverarbeitung
• Das Swing Modell
• Ein SDI & MDI Modell mit Swing
• GUI Design
• Einheitliche Interaktionsformen in einer Anwendung
Prof. Dr. Nikolaus Wulff Angewandte Informatik 37
SDI & MDI Anwendung• Eine SDI Anwendung
– Eine SDI Anwendung besitzt ein Hauptfenster
– eine Statuszeile
– ein Menu und eine ToolBar
• Eine MDI Anwendung besitzt zusätzlich– Interne Fenster für die unterschiedlichsten Aufgaben/Objekte
– die Fenster werden von spezialisierten Controller Instanzen verwaltet.
• Legt man über Frame, Dialog und InternalFrame eine gemeinsame Abstraktion (View) so ergibt sich ein einheitliches Anwendungsmuster.
Prof. Dr. Nikolaus Wulff Angewandte Informatik 38
Eine SDI Anwendung
MainView<<package>>
MainStatusBar MainMenuBar
SDIAnw endung
11 11
MainToolBar11
View<<Interface>>
Controller<<Interface>>
ControllerImpl<<package>>
-view
-ctrl
getView
0..1
parent
0..1
getParent
JFrame(from swing)
<<create>>
Prof. Dr. Nikolaus Wulff Angewandte Informatik 39
Ein SDI Beispiel
Toolbar
Statusbar
MainView
Menubar
AppLauncher
Prof. Dr. Nikolaus Wulff Angewandte Informatik 40
Eine MDI Anwendung
JInternalFrame(from swing)
View<<Interface>>
ControllerImpl<<package>>
-view -ctrl
getView
MDIViewController
SDIAnwendungMainView
<<package>>
MDIAnwendung
MDIView<<package>>
MDIDesktop<<package>>
0..*0..*
<<create>>
<<create>>
<<create>>