40
Prof. Dr. Nikolaus Wulff Oberflächenentwicklung mit AWT & Swing Eine Einführung in die Java Foundation Classes (JFC)

Oberflächenentwicklung mit JFC fileProf. Dr. Nikolaus Wulff Angewandte Informatik 2 Agenda • Das Model-View-Controller Konzept • Die Ereignisverarbeitung • Das Swing Modell

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

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