Das Java Event-Modell Ereignisverarbeitung in Java/Swing Anwendungen Prof. Dr. Nikolaus Wulff
Ereignissverarbeitung GUI Anwendungen müssen auf die unterschiedlichsten Benutzereingaben reagieren: Tastatureingaben Drücken von normalen Tasten Beschleunigertasten Kombinationen, z.b. ALT-F3 Mauseingaben Mausbewegungen Mausgestiken Drag and Drop Drücken von Mausknöpfen Prof. Dr. Nikolaus Wulff Informatik III 2
Weitere Ereignisse Menu Auswahl Popup Menus Selektion(en) Fokus Ereignisse in einer Komponente Springen mit der Tab-Taste Spezielle Ereignisse der JList-, JTree, JTable Komponenten.... Prof. Dr. Nikolaus Wulff Informatik III 3
Java Events Zur Behandlung dieser unterschiedlichen Ereignisse verwendet die Java API eine Reihe von vordefinierten EventListenern, die an den entsprechenden Komponenten registriert werden können. Diese Listener implementieren eine bestimmte Schnittstelle, die dann von der jeweiligen Komponente aufgerufen wird, sobald ein entsprechendes Ereignis eintritt. Der Listener kann nun auf angemessene Weise kontextbezogen auf das Ereignis reagieren. Prof. Dr. Nikolaus Wulff Informatik III 4
MouseListener Klassendiagramm Interface Dummy Adapter Prof. Dr. Nikolaus Wulff Informatik III 5
Eigene MouseListener Eigene MouseListener werden erzeugt durch Ableitung vom MouseInputAdapter: class DeviceFlip extends MouseInputAdapter { public void mouseclicked(mouseevent evt) { if (evt.getbutton() == MouseEvent.BUTTON1 && evt.getclickcount() == 2) { flipat(evt.getx(), evt.gety()); } } protected void flipat(int x, int y) { DeviceView p = ctrl.findpaintableat(x, y); if (p!= null) { p.setflip(!p.getflip()); crtl.repaint(); } } // DeviceFlip Prof. Dr. Nikolaus Wulff Informatik III 6
Device Editor Der ElectronicDevice Editor zeigt einige Aspekte einer gut durchdachten Benutzerführung: Prof. Dr. Nikolaus Wulff Informatik III 7
GUI Design Muster Katalog Muster Interaction Style Window per Task Exploreable Interface Supplementary Window Step-by-Step Instructions Conversational Text, Little Language (Limited) Selection, Diabled Irrelevant Things Form Direct Manipulation Feedback Bedeutung Dem Kenntnisstand des Benutzers entsprechende Interaktionsform. Jedes Fenster erfüllt genau eine Aufgabe. Ermuntere zum Experimentieren. Benötigt ein Arbeitsablauf zusätzliche Informationen so öffne einen Dialog. Führe den Benutzer Schritt für Schritt durch schwierige Aufgaben. Interaktion durch direkte Texteingabe. Biete dem Benutzer kontextabhängige sinnvolle Auswahlalternativen. Gebe den Benutzer die Möglichkeit der strukturierten Eingabe. Visualisiere Objekte und erlaube graphische Manipulation. Rückkopplung ohne Behinderung im Arbeitsfluss. Prof. Dr. Nikolaus Wulff Informatik III 8
GUI Design Patterns Exploreable Interface Window per Task Little Language Conversational Text Supplementary Window Experte Interaction Style Step by Step Instruction Anfänger Direct Manipulation Form Selection Limited Selection Size Quelle: Mark Grand, Patterns in Java, Vol II Sachbearbeiter Feedback Disabled Irrelevant Things Prof. Dr. Nikolaus Wulff Informatik III 9
Window per Task Prof. Dr. Nikolaus Wulff Informatik III 10
Direct Manipulation Doppel- Click Prof. Dr. Nikolaus Wulff Informatik III 11
Ephemeral Feedback Click & Dragg Prof. Dr. Nikolaus Wulff Informatik III 12
InteractionStyle CrossWire Adjust Lines Prof. Dr. Nikolaus Wulff Informatik III 13
InteractionStyle: Grid Magnetic Grid Prof. Dr. Nikolaus Wulff Informatik III 14
Supplementary Window: Dialog Open Dialog Prof. Dr. Nikolaus Wulff Informatik III 15
Supplementary Window: Form Popup Formular Prof. Dr. Nikolaus Wulff Informatik III 16
Disable Irrelevant Things Disable Connections elect ode Create Mode enables R,L,C Show Selection Prof. Dr. Nikolaus Wulff Informatik III 17
Explorable Interface undo/redo possibilities Prof. Dr. Nikolaus Wulff Informatik III 18
Vielseitige Maus Fast alle vorliegenden Interaktionsmuster des DeviceEditors haben direkt oder indirekt mit Mausereignisverarbeitung zu tun: Auswahl per Button Malen/Erzeugung per Maus Move & Click Selektion per Maus Move Fadenkreuz per Maus Move Verbinden per Maus Click & Dragg Rotieren per Maus Doppel-Klick Kontextmenu per Maus Rechts-Klick Prof. Dr. Nikolaus Wulff Informatik III 19
Komplikationen Diese doch recht unterschiedlichen Gestiken und technischen Anforderungen in einem einzigen MouseListener zu implementieren bringt Probleme: Alle Reaktionen erfolgen nur auf eine aktuelle(x,y)- Mausposition und eventuell einer alten (x 0, y 0 )- Position. Es ist schwierig den Status genau zu verfolgen. Je nach selektierten Buttons und Kontext muss unterschiedlich reagiert werden. In einigen Fällen muss per XOR Operation der visuelle State gelöscht werden, wie viele verschiedene (x 0, y 0 ) Positionen sind nötig?. Eventuell ist ein Feedback an Buttons etc. notwendig Prof. Dr. Nikolaus Wulff Informatik III 20
Divide and Konqueror Die Kombinatorik und Vielfalt lässt sich durch eine Teile und Herrsche Strategie vereinfachen. Delegation der dynamischen Anteile an einen DeviceController entkoppelt den statischen vom dynamischen Anteil. Aufteilung in statische Anteile der View Buttons und Menus mit ihren ActionListenern Aufteilung in dynamische Anteile des Painters MouseListener und MouseMotionListener Prof. Dr. Nikolaus Wulff Informatik III 21
Mausereignisse MouseListener clicked pressed released entered exited moved dragged CrossWire X X X MouseMotion- Listener Creator X X Selector Flip X Remove Customize X Connect X >Visualize Tastenereignisse X X X Bewegungsereignisse Prof. Dr. Nikolaus Wulff Informatik III 22
Spezialisierte MouseListener Statt einen großen MouseListener zu implementieren, der dann lange if-else oder switchcase Konstrukte mit vielen internen State-Variablen erfordert werden mehrere kleine spezialisierte MouseListener entwickelt und am Controller registriert: ctrl.addmousemotionlistener(deviceselector); ctrl.addmousemotionlistener(deviceremover); ctrl.addmouselistener(devicecustomizer); ctrl.addmouselistener(deviceflip); ctrl.addmouselistener(devicecreator); ctrl.addmouselistener(deviceconnector); Prof. Dr. Nikolaus Wulff Informatik III 23
DeviceCustomizer class DeviceCustomizer extends MouseInputAdapter { DevicePopup popup; public void mousepressed(mouseevent evt) { if (evt.ispopuptrigger()) { int x = evt.getx(); int y = evt.gety(); Device d = ctrl.finddeviceat(x, y); if (d!= null) { setstatus("customize " + d); popup = new DevicePopup(); popup.setview(view); popup.setdevice(d); popup.init(); popup.show(view, x, y); } } } } // DeviceCustomizer Prof. Dr. Nikolaus Wulff Informatik III 24
Statusübergänge Häufig werden kontexbezogen bestimmte Buttons oder Menus freigeschaltet oder gesperrt. Hierbei handelt es sich meist um die Visualisierung eines inneren Status der Anwendung. Es ist wichtig diese Stati sauber zu modellieren. Hierzu dient das State-Transistion-Diagramm Die einzelnen Funktionale der Buttons etc. lassen sich z.b. mit Hilfe eines KV-Diagramms ermitteln. Das Zusammenspiel der Connect und Create ToggleButtons soll dies veranschaulichen. Prof. Dr. Nikolaus Wulff Informatik III 25
Status Diagramm Create Substate CO R L C Pick Connect Prof. Dr. Nikolaus Wulff Informatik III 26
Create/Connect KV Diagramm Die beiden ToggleButtons Connect und Create haben jeweils zwei interne Stati: Enabled und Selected. enabled!enabled enabled!enabled enabled!enabled Connect Prinzipielles Karnaugh-Diagramm für vier Variablen enabled!enabled!connect Create!Create Prof. Dr. Nikolaus Wulff Informatik III 27
Deadlock Falls beide Buttons disabled sind, so blockiert die Anwendung, es sind keine Eingaben möglich. enabled!enabled enabled!enabled enabled!enabled Connect enabled!enabled!connect kein Button reagiert mehr Create!Create Prof. Dr. Nikolaus Wulff Informatik III 28
Create KV Diagramm Bauteile werden im Create Modus mit disabled Connect Button erzeugt: enabled!enabled enabled!enabled keiner reagiert mehr enabled!enabled Connect Create Devices enabled!enabled!connect Create!Create Prof. Dr. Nikolaus Wulff Informatik III 29
Pick Devices Nach dem Wechsel zu!create können Devices im Pick Mode bearbeitet werden. enabled!enabled enabled!enabled enabled!enabled enabled!enabled Connect!Connect Select Devices Create!Create Prof. Dr. Nikolaus Wulff Informatik III 30
Connect Devices Der Connect Button ist im Pick Mode enabled. Wird er gedrückt so erfolgt der Wechsel in den Connect Mode und der Create/Pick Button wird disabled... enabled!enabled enabled!enabled enabled!enabled Connect Connect Devices enabled!enabled!connect Create!Create Prof. Dr. Nikolaus Wulff Informatik III 31
Übersicht behalten Gerade bei komplexen GUI Oberflächen ist es wichtig die Übersicht zu behalten. Die graphische Representation der Buttons korreliert nicht immer 1:1 mit dem inneren Status des Programms. Dies kann leicht zu Inkonsistenz führen. Hier hilft eine kritische Prüfung mit dem Status- und KV- Diagramm. Prof. Dr. Nikolaus Wulff Informatik III 32