Das Java Event-Modell

Transkript

1 Das Java Event-Modell Ereignisverarbeitung in Java/Swing Anwendungen Prof. Dr. Nikolaus Wulff

2 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

3 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

4 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

5 MouseListener Klassendiagramm Interface Dummy Adapter Prof. Dr. Nikolaus Wulff Informatik III 5

6 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

7 Device Editor Der ElectronicDevice Editor zeigt einige Aspekte einer gut durchdachten Benutzerführung: Prof. Dr. Nikolaus Wulff Informatik III 7

8 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

9 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

10 Window per Task Prof. Dr. Nikolaus Wulff Informatik III 10

11 Direct Manipulation Doppel- Click Prof. Dr. Nikolaus Wulff Informatik III 11

12 Ephemeral Feedback Click & Dragg Prof. Dr. Nikolaus Wulff Informatik III 12

13 InteractionStyle CrossWire Adjust Lines Prof. Dr. Nikolaus Wulff Informatik III 13

14 InteractionStyle: Grid Magnetic Grid Prof. Dr. Nikolaus Wulff Informatik III 14

15 Supplementary Window: Dialog Open Dialog Prof. Dr. Nikolaus Wulff Informatik III 15

16 Supplementary Window: Form Popup Formular Prof. Dr. Nikolaus Wulff Informatik III 16

17 Disable Irrelevant Things Disable Connections elect ode Create Mode enables R,L,C Show Selection Prof. Dr. Nikolaus Wulff Informatik III 17

18 Explorable Interface undo/redo possibilities Prof. Dr. Nikolaus Wulff Informatik III 18

19 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

20 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

21 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

22 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

23 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

24 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

25 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

26 Status Diagramm Create Substate CO R L C Pick Connect Prof. Dr. Nikolaus Wulff Informatik III 26

27 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

28 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

29 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

30 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

31 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

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