public void - Wiki

Entwurf und Implementation
interaktiver Systeme
SWT GUI, A. Dittmar & P. Forbrig
Rahmenmodell für interaktive Systeme (IS)
presentation
System with a
core language
performance
output
observation
User with a
task language
interface
input
articulation
(Abowd, 1991)
2
SWT GUI, A. Dittmar & P. Forbrig
Interaktionsstile
•
•
•
•
•
•
•
•
Kommandozeilen-Interface
Menüs
natürliche Sprache
Frage-Antwort Dialog
formularbasierter Dialog
WIMP (Windows, Icons, Menus, Pointers)
point and click
3D interfaces
Die Art des Interaktionsstils hat einen wesentlichen
Einfluß auf den Dialog zwischen Mensch und Computer...
3
SWT GUI, A. Dittmar & P. Forbrig
Graphische Benutzungsschnittstellen
• GUI (Graphical User Interface)
• aus Perspektive eines Nutzers:
Arbeit mit (unabhängigen) Interaktionsobjekten
Direktmanipulation
• bekannte Interaktionsobjekte (Widgets):
- Window
- Button
- Textfelder
- Scrollbar...
4
SWT GUI, A. Dittmar & P. Forbrig
Entwicklungswerkzeuge für GUIs
Einteilung in 3 Schichten möglich:
– windowing systems
– interaction toolkits
– user interface management systems (UIMS)
5
SWT GUI, A. Dittmar & P. Forbrig
Windowing
Systems
Voraussetzung für die
Programmierung von
GUIs:
- Unabhängigkeit von
spezieller Hardware
(und deren
Programmierung)
- Management von
nebenläufigen
Applikationen, die sich
dieselben Hardwareressourcen teilen
(Eingabefokus wechseln,
überlappende Fenster...)
6
SWT GUI, A. Dittmar & P. Forbrig
Programmierung von Applikationen
Interaktive Applikationen sind benutzer- bzw. ereignisgesteuert.
Die von der Anwendung ausgeführte Aktion wird durch eine
Nutzereingabe bestimmt.
Paradigmen zur Organisation des Steuerflusses in einer Anwendung:
read-evaluation loop
notification loop
• Server sendet strukturiertes
Ereignis zur Applikation.
• Hauptsteuerschleife für Ereignisverarbeitung nicht innerhalb der
Applikation.
• Zentraler Ereignismanager (notifier),
der Ereignisse vom Fenstersystem
filtert und die Ereignisse, für die eine
Anwendung Interesse bekundet hat,
an sie weiterleitet.
• Anwendung führt callbacks aus, bevor
Kontrolle wieder an Ereignismanager
zurückgegeben wird.
• Applikation liest jedes Ereignis
und bestimmt eine entsprechende
anwendungsspezifische Reaktion.
7
SWT GUI, A. Dittmar & P. Forbrig
Read-Evaluation Loop
(aus: Dix et al., 2004)
repeat
read-event(myevent)
case myevent.type
type_1:
do type_1 processing
type_2:
do type_2 processing
...
type_n:
do type_n processing
end case
end repeat
8
SWT GUI, A. Dittmar & P. Forbrig
Notification-based Paradigm
void main(String[] args) {
Menu menu = new Menu();
menu.setOption(“Save”);
menu.setOption(“Quit”);
menu.setAction(“Save”,mySave)
menu.setAction(“Quit”,myQuit)
...
}
int mySave(Event e) {
// save the current file
}
int myQuit(Event e) {
// close down
}
9
SWT GUI, A. Dittmar & P. Forbrig
Toolkits
Ein Toolkit liefert den Programmierern eine Menge von vorgefertigten Interaktionsobjekten (Interaktionstechniken/Widgets),
die sie zur Entwicklung ihrer Anwendung nutzen können.
(aus: Dix et al., 2004)
Vorteile:
• Interaktionsobjekte verbinden Ein- und Ausgabe, haben
vordefiniertes Verhalten.
• “Notification-based paradigm” wird unterstützt; Ereignisse auf
höherem Abstraktionsgrad verarbeitbar.
• Konsistenz und Verallgemeinerbarkeit wird durch ähnliches
“look and feel” der Widgets gefördert.
10
SWT GUI, A. Dittmar & P. Forbrig
GUI-Programmierung in Java
• Java toolkit – AWT (abstract windowing toolkit)
• Java classes for windows, buttons, menus, etc.
• Notification based;
– AWT 1.0 – need to subclass basic widgets
– AWT 1.1 and beyond -– callback objects
• Swing toolkit
– built on top of AWT – higher level features
– uses MVC architecture
• java.awt, javax.swing
11
SWT GUI, A. Dittmar & P. Forbrig
Swing-Komponenten
GUI-Programmierung “passt zur” objektorientierten Programmierung:
• Interaktionsobjekte (IO) als Instanzen von Klassen,
• Komplexe IOs als hierarchische Kompositionen aus einfacheren IOs,
• Vererbung zur Beschreibung von ähnlichen IOs.
GUI-Komponenten
Sichten:
Container-Klassen
Komponenten-Klassen
• Aufnahme anderer
GUI-Komponenten
• Grafische Repräsentation
von Interaktionsobjekten
• Positionierung der
aufgenommenen
Komponenten mittels
LayoutManager
• Stellen Methoden zur
Ereignisverarbeitung zur
Verfügung
12
SwingKlassenhierarchie
SWT GUI, A. Dittmar & P. Forbrig
13
SWT GUI, A. Dittmar & P. Forbrig
Hierachische Struktur von komplexen
Interaktionsobjekten
Beispiel:
Ursprünglich von:
http://java.sun.com/developer/onlineTraining/GUI/AWTLayoutMgr/shortcourse.html
14
SWT GUI, A. Dittmar & P. Forbrig
Container 1
Fenster “WS_FTP95...”
Container 1
Container 2
Container 2
Cont. 11
Choice
List
Cont. 12
Cont. 112
Cont. 13
Button
“<--”
...
...
Cont. 21
TextArea
Cont. 23
...
Checkbox
“ASCII”
...
Button
“Close”
Cont. 1121
Button
“ChgDir”
...
15
SWT GUI, A. Dittmar & P. Forbrig
Layout-Management
• Bestandteil von AWT,
• dient zum Anordnen von Komponenten in einem Container.
• Funktionsweise:
- Positionierung der Komponenten mittels qualitativer Angaben
(„Komponente A befindet sich links neben der Komponente B“),
statt absoluter Koordinaten.
- Größe der Komponenten wird gesteuert über die Parameter:
minimumSize, preferredSize und maximumSize.
• Vorteil:
- Vereinfachung des Oberflächenentwurfes,
- Flexibilisierung der Oberflächen
Bsp. eines Darstellungsfehlers bei absoluter Positionierung:
16
SWT GUI, A. Dittmar & P. Forbrig
Layout-Manager
Anwendung:
• Erzeugung eines Exemplars des gewünschten Layout-Managers,
• Registrierung des Layout-Managers beim Container (setLayout()),
• Einfügen der Komponenten in den Container (add()),
• FlowLayout: vordefiniertes Layout bei JPanel
public class FlowTest {
public static void main(String[] args) {
JFrame f = new JFrame("FlowTest");
f.setLayout(new FlowLayout());
f.add(new JButton("A"));
f.add(new JButton("B"));
f.add(new JButton("C"));
f.add(new JButton("D"));
f.add(new JButton("E"));
f.pack();
f.setVisible(true); }
}
17
SWT GUI, A. Dittmar & P. Forbrig
BorderLayout
JFrame f = new JFrame("");
f.setLayout(new BorderLayout());
f.add(new JButton("North"),BorderLayout.NORTH);
f.add(new JButton("South"), BorderLayout.SOUTH);
f.add(new JButton("East"), BorderLayout.EAST);
f.add(new JButton("West"), BorderLayout.WEST);
f.add(new JButton("Center"), BorderLayout.CENTER);
f.pack();
f.setVisible(true);
Ein “FlowLayout-Managed Container “
innerhalb eines “BorderLayout-Managed
Containers”.
18
GridLayout
• Anordnung der Komponenten in
einem gleichförmigen Gitter.
• Jede Komponente nimmt eine
Gitterzelle ein.
Es gibt weitere Layout-Manager.
“Before writing any GUI code, you should always do two things:
Draw a picture! You would be surprised how many people try to
visualize the GUI in their head. Drawing a picture makes the design
significantly easier to develop.
Describe the resize behavior. After drawing the picture, add
information about which parts of the GUI will expand/collapse when
the window is resized.”
http://java.sun.com/developer/onlineTraining/GUI/AWTLayoutMgr/shortcourse.html
SWT GUI, A. Dittmar & P. Forbrig
19
Ereignisbehandlung
Ereignis-Auslöser-Objekte:
• Aktionen des Nutzers lösen Ereignisse aus (z.B. Mausclick,
Mausbewegung, Drücken einer Taste).
• Ereignisse werden meist durch GUI-Objekte erzeugt.
Event-Objekte:
• Jedes Ereignis wird durch ein Objekt repräsentiert.
Listener-Objekte:
• Interessierte Objekte melden sich beim Auslöser-Objekt
an.
• Sie werden bei Ereignissen benachrichtigt.
• Stellen für die Ereignisbehandlung entsprechende
Methoden bereit.
• Bilden Schnittstelle zum funktionalen Kern der Anwendung.
SWT GUI, A. Dittmar & P. Forbrig
20
Ereignisklassen
• Alle Ereignisse der GUI
sind Objekte, die aus
Unterklassen der Klasse
java.awt.AWTEvent gebildet sind.
• In jeder Unterklasse sind noch
einmal Ereignisgruppen unter
einer ID zusammengefaßt (getID()).
• Beispiele:
- Klasse KeyEvent mit IDs:
KEY_PRESSED, KEY_RELEASED,
KEY_TYPED
- Klasse MouseEvent mit IDs:
MOUSE_CLICKED, MOUSE_DRAGGED,
MOUSE_ENTERED, MOUSE_EXITED,
MOUSE_MOVED, MOUSE_PRESSED,
MOUSE_RELEASED
...
- usw.
SWT GUI, A. Dittmar & P. Forbrig
21
Einige Ereignisauslöser
Auslöser
auslösende Aktion
ausgelöstes Ereignis
JButton
Aktivierung der Schaltfläche
ActionEvent
JScrollBar
Wertänderung
AdjustmentEvent
Component
Änderung der Sichtbarkeit
oder der Größe
ComponentEvent
Container
Änderung des Inhalts
ContainerEvent
JComponent
Tastatur
KeyEvent
JList
Auswahl
ItemEvent
JComponent
Bewegung
MouseEvent
JComponent
Betreten oder Verlassen
einer Komponente
MouseEvent
SWT GUI, A. Dittmar & P. Forbrig
22
Listener-Objekte
• Sind Objekte, die sich bei den Objekte anmelden, die Quellen
für die sie interessierenden Ereignisse sind.
• Für jedes Ereignis gibt es ein eigenes Listener-Interface. Die
Listener-Objekte müssen dieses Interface, d.h. die konkrete
Ereignisbehandlung implementieren.
Dazu werden den Listener-Objekten die entsprechenden
Ereignisobjekte übergeben.
Beispiele für Listener-Schnittstellen:
• ActionListener Schaltfläche o. Menü aktiviert, auf ein Textfeld gedrückt,
• WindowListener – Fenster schließen oder verkleinern,
• MouseListener – Maustaste gedrückt,
• MouseMotionListener – Maus bewegt.
SWT GUI, A. Dittmar & P. Forbrig
23
Beispiel - Variante 1:
GUI-Komponente und Listener in einem Objekt
public class Test_Button extends JButton implements MouseListener {
public Test_Button() {
super();
addMouseListener(this);
}
public void mouseClicked (MouseEvent e) {
if (e.getButton() == MouseEvent.BUTTON3) {
System.out.println("Maustaste rechts");
} else { System.out.println("Maustaste links");}
}
public void mouseExited (MouseEvent e) {}
public void mouseEntered (MouseEvent e) {}
public void mousePressed (MouseEvent e) {}
public void mouseReleased (MouseEvent e) {}
public static void main(String[] args) {
Test_Button button = new Test_Button();
button.setText("ListenerTest");
JFrame frame = new JFrame();
frame.getContentPane().add(button);
frame.pack();
frame.setVisible(true);
} }
SWT GUI, A. Dittmar & P. Forbrig
24
SWT Verhalten & GUI, P. Forbrig & A. Dittmar
Beispiel - Variante 2:
GUI-Komponente und Listener sind separate Objekte
import java.awt.event.MouseListener;
public class Test_Listener implements MouseListener {
String name;
public Test_Listener (String n) {
name = n;
}
public void mouseClicked (MouseEvent e) {
if (e.getButton() == MouseEvent.BUTTON3) {
System.out.println("Listener "+name+" hoert: Maustaste rechts");
} else {...} }
public void mouseExited (MouseEvent e) {}
public void mouseEntered (MouseEvent e) {}
public void mousePressed (MouseEvent e) {}
public void mouseReleased (MouseEvent e) {}
}
Test2_Button b = new Test2_Button();
Test_Listener l = new Test_Listener(“L1");
// Anmeldung von 2 Listener-Objekten
b.addMouseListener(l);
b.addMouseListener(new Test_Listener(“L2"));
...
SWT GUI, A. Dittmar & P. Forbrig
25
SWT Verhalten & GUI, P. Forbrig & A. Dittmar
Variante 2 unter Nutzung einer abstrakten
Adapterklasse für die Listener
public abstract class MouseListenerAdapter implements MouseListener {
public void mouseClicked (MouseEvent e) {}
public void mouseExited (MouseEvent e) {}
public void mouseEntered (MouseEvent e) {}
public void mousePressed (MouseEvent e) {}
public void mouseReleased (MouseEvent e) {}
}
public class Test_Listener_2 extends MouseListenerAdapter {
String name;
public Test_Listener_2 (String n) {
name = n;
}
public void mouseClicked (MouseEvent e) {
if (e.getButton() == MouseEvent.BUTTON3) {
...
}
}
SWT GUI, A. Dittmar & P. Forbrig
26
SWT GUI, A. Dittmar & P. Forbrig
Entwicklungswerkzeuge für GUIs
Einteilung in 3 Schichten:
– windowing systems
– interaction toolkits
• Unterstützung der Entwickler beim Verschmelzen des Ein- und
Ausgabeverhaltens des Systems.
• “Even experienced programmers will have difficulties
using toolkits to produce an interface that is
predictably usable.” (Dix et al., 2004)
– user interface management/development
systems (UIMS/UIDS)
27
SWT GUI, A. Dittmar & P. Forbrig
UIMS
• Konzeptionelle Architektur von interaktiven Systemen (IS),
• Techniken zur separaten Implementierung von Applikation
und Präsentation,
• verbessert:
- Portabilität
- Wiederverwendbarkeit von Komponenten
- multiple interfaces
- Anpaßbarkeit durch Entwickler und Nutzer
• Seeheim-Modell als erstes Architekturmodell für IS (1985):
presentation
dialogue
application
28
SWT GUI, A. Dittmar & P. Forbrig
Zur Trennung Applikation-Präsentation
IS
besteht aus
Applikation
ist abhängig von
beschreibt
Verhalten =
Menge von Applikationszustandsfolgen
BSS
beschreibt
beobachtbares Verhalten =
Menge von Dialogzustandsfolgen
Beispiele für Beschreibungsmittel
für Dialogabläufe:
• (Paper) Prototyping
• State Charts...
29
SWT GUI, A. Dittmar & P. Forbrig
Seeheim-Modell
USER
lexical
syntactic
semantic
Presentation
Dialogue
Control
Functionality
(application
interface)
APPLICATION
switch
direct communication
between application
and presentation,
regulated by dialogue control
Seeheim-Modell ist ein Schichtenmodell:
- große Komponenten,
- nur vertikale Dekomposition des IS
30
SWT GUI, A. Dittmar & P. Forbrig
Schichten- vs. objektbasierte Architekturmodelle
• Smalltalk nutzte bereits ein objektbasiertes Architekturmodell mit vertikaler und horizontaler Dekomposition:
MVC-Modell (model–view–controller)
– model: interner logischer Zustand der Komponente
– view: wie erfolgt die Darstellung auf dem Bildschirm
– controller: Verarbeitung der Nutzereingabe
Application
view
User Interface
model
controller
teilweise Umsetzung
in Java – siehe
Übungen...
31
SWT GUI, A. Dittmar & P. Forbrig
Architektur für MVC-Pattern
Subjekt
subjekt
beobachter
Beobachter
*
Model
View
Verantwortung
Stellt den funktionalen Kern der Anwendung bereit.
Registriert abhängige Views und Controller.
Benachrichtigt registrierte Komponenten, wenn sich sein
Zustand geändert
hat.
< holeDaten
Controller
Verantwortung
Verantwortung
Stell Informationen
dar.
Implementiert die
Aktualisierungsoperation.
Erfragt Daten beim
Model.
Erzeugt und initialisiert gegebenenfalls
ihre Steuerungen.
Erkennt Benutzungseingaben als Ereignis.
Übersetzt Ereignisse
in Dienstanforderungen an das Model
oder Darstellungsmöglichkeiten an die
View.
Implementiert die
Aktualisierungsoperation.
< holeDaten, ändere
32
SWT GUI, A. Dittmar & P. Forbrig
PAC-Modell
33
SWT GUI, A. Dittmar & P. Forbrig
Ein weiteres objektbasiertes Modell: PAC
• PAC-Modell dichter am Seeheim-Modell
– abstraction – logical state of component
– presentation – manages input and output
– control – mediates between them
• manages hierarchy and multiple views
– control part of PAC objects communicate
• PAC cleaner in many ways …
but MVC used more in practice
34
SWT GUI, A. Dittmar & P. Forbrig
Einordnung der Werkzeuge
...mit Bezug auf das Seeheim-Modell:
35
SWT GUI, A. Dittmar & P. Forbrig
Shneiderman’s Eight Golden Rules of Interface Design
1.
2.
3.
4.
5.
6.
7.
8.
Strive for consistency in action sequences, layout, terminology,
command use and so on.
Enable frequent users to use shortcuts, such as abbreviations,
special key sequences and macros, to perform regular, familiar
actions more quickly.
Offer informative feedback for every user action, at a level
appropriate to the magnitude of the action.
Design dialogs to yield closure so that the user knows when they
have completed a task.
Offer error prevention and simple error handling so that, ideally,
users are prevented from making mistakes and, if they do, they are
offered clear and informative instructions to enable them to recover.
Permit easy reversal of actions in order to relieve anxiety and
encourage exploration, since the user knows that he can always return
to the previous state.
Support internal locus of control so that the user is in control of the
system, which responds to his actions.
Reduce short-term memory load by keeping displays simple,
consolidating multiple page displays and providing time for learning
action sequences.
36
SWT GUI, A. Dittmar & P. Forbrig
DIN-Norm
• Die DIN EN ISO 9241-110 hat eine ähnliche
Sicht auf die Dinge. Dort wird allerdings eine
etwas detailliertere Charakterisierung
vorgenommen. Sie unterscheidet:
–
–
–
–
–
–
–
Aufgabenangemessenheit
Selbstbeschreibungsfähigkeit
Steuerbarkeit
Erwartungskonformität
Fehlertoleranz
Individualisierbarkeit
Lernförderlichkeit
37
SWT GUI, A. Dittmar & P. Forbrig
Viele Gesetze der Gestaltung
z.B. Gesetz der Nähe
38
SWT GUI, A. Dittmar & P. Forbrig
Alte Gliederung der ISO 9241
39
SWT GUI, A. Dittmar & P. Forbrig
Zusammenfassung
• Einordnen der Begriffe Windowing System,
Interaction Toolkit, User Interface
Management Systeme
• Java GUI-Programmierung und Listener
• Architekturmodelle für interaktive Systeme
• Golden Rules in Interface Design und Usability
(Wird in Module HCI und SE-Tools detaillierter
diskutiert.)
40

Download Report