Oberflأ¤chenentwicklung mit . Dr. Nikolaus Wulff Angewandte Informatik 2 Agenda • Das Model-View-Controller

Embed Size (px)

Text of Oberflأ¤chenentwicklung mit . Dr. Nikolaus Wulff Angewandte Informatik 2 Agenda • Das...

  • 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 DM Q2 = 40 Mio DM Q3 = 40 Mio. DM Q4 = 50 Mio. DM

    Filiale Umsatz 1996 in Mio. DM 1.Quartal 2. Quartal 3. Quartal 4. Quartal

    Hamburg 60 80 20 40 Köln 20 50 30 35 München 40 40 40 50 Frankfurt 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- Objekte sind 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 Änderungen 3. Der Controller aktualisiert das Modell entsprechend

  • Prof. Dr. Nikolaus Wulff Angewandte Informatik 5

    MVC (II)

    Controlle r

    Obs e rve r (from util)

    M ode l

    upda te

    M ode lObs e rve r

    0 ..*0 ..*

    -obse rve r

    V iew

    Vie w Obs e rve r

    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 Konstruktor public 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)

    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)

    metal (from plaf)

    multi (from plaf)

    plaf (from swing)

    event (from awt)peer

    (from awt)

    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

    < >

    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)

    ButtonM ode l (from sw ing)

    DefaultButtonM ode l (from sw ing)

    ButtonGroup (from sw ing)

    Abstra c tButton (from sw ing)

    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)

    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?