Entwicklung nutzerorientierter Anwendungen

Entwicklung nutzerorientierter Anwendungen
Wintersemester 2013/2014
1. Einführung
Lernziele der Veranstaltung 2
Inhalte 3
Praktikum 4
Klausur 5
Literatur (HCI und UID) 6
Literatur (Java) 7
Entwicklungsumgebung 8
2. Softwaretechnik für Benutzungsschnittstellen
Übersicht: Analyse und Entwurf 9
Visionsdokument 10
2. 1 Benutzer kennen und verstehen
Admins und User - ein Zerrbild 11
Benutzer charakterisieren 12
Stereotype 13
Beispiel: Stereotype
Stereotype und Benutzerrollen 14
Anwendungsszenarien 15
Beispiel 1: Anwendungsszenario OBS
Beispiel 2: Anwendungsszenarien Mobida
Szenario Use Case Beschreibung 16
Methoden der Benutzerforschung 17
Fallen umgehen 18
z.B. Fahrkartenautomat 19
z.B. Online Belegsystem 20
z.B. Stundenplanungssystem 21
2. 2 Anwendungscharakter und Modell
Nicht-funktionale Anforderungen 22
Charakter von Anwendungen 23
Beispiel: Anwendungscharakter
Modelle eines Systems 24
Beispiel: Diskrepanz der Modelle
2. 3 Anwendungsfallanalyse
Anwendungsfälle (Use Cases) 25
Use Case Diagramm (Geldautomat) 26
Use Case Diagramm (Belegsystem) 27
z.B. Use Cases eines Buchs 28
z.B. Dokument- statt Datei-Menü 29
Beispiel: anwendungsfallorientiert 30
Gegenbeispiel: datenstrukturorientiert 31
Von Use Cases zu Screens 32
Use Case Spezifikation 33
Beispiel: Use Case Spezifikation
2. 4 Abläufe
Workflow 34
Beispiel zum Workflow 35
Assistent 36
Beispiele zu Assistenten 37
- 2 -

2. 6 Klarstellung:
2. 7 Vorbild
2. 8 Grenzen
2. 8 Rapid
2. 5 GUI-Diagramme
Sinn und Zweck 38
vgl. Flow Chart 39
vgl. Contentogramm 1
vgl. Contentogramm 2
vgl. Zustandsdiagramm 40
Navigationsübersicht (abstrakt) 41
Navigationsübersicht (detailliert) 42
Legende zur Navigationsübersicht 43
Screen-Diagramme (abstrakt, skizziert, detailliert) 44
=> Medero: Paper Prototyping
=> Rettig: Prototyping for Tiny Fingers
Varianten von Screen-Diagrammen 45
Vorgehensweise für Screen-Diagramme 46
vgl. Wireframes 1
vgl. Wireframes 2
Spezialfall Karteireiter (JTabbedPane) 47
UML-Sequenzdiagramme zur Erinnerung 48
vgl. Sequenzdiagramm "Geld holen" 49
Verbindung GUI => Sequenzdiagramm 50
Fokussteuerung definieren 51
Drag&Drop 52
Komplexität beherrschen 53
Diagramme - für wen ? 54
Architektur 55
der UML 56
Prototyping 57
=> YouTube: Hanmail Paper Prototype
3. Screen Design und Ergonomie
3. 1 Arten von Benutzungsoberflächen
Klassifikation 58
Menüs und Dialoge 59
Toolbars und Icons 60
Tastaturkürzel / Hotkeys 61
Direkte Manipulation 62
Multi-Touch Gesten 63
Web-Oberflächen 64
Konventionen berücksichtigen 65
3. 2 Formen
Gedanken zur Fenstergestaltung 66
z.B. Windows arabisch 67
Prioritäten für Gruppierung 68
Hinweise zur Gruppierung 69
z.B. MS Word Druckdialog 70
Natürliche Anordnung 71
Hervorheben von Komponenten 72
Minimal- und Maximalgrößen 73
Umrechnung des Sehwinkels 74
Abbildungsmaßstab 75
Dialog Units (DLU) unter Windows 76
- 3 -

3. 3 Schrift
Schriftarten 77
Gut lesbare Bildschirm-Schrift 78
Beschriftung mittels Label 79
Ausrichtung von Beschriftungen 80
Eingabe von Text 81
Hörsaalübung: Gestalten eines Eingabefenster 82
3. 4 Farbe
Was ist Farbe ? 83
Farbmodell RGB 84
Farbmodell CMYK 85
Farbmodell HSL 86
Physiologische Aspekte 87
Psychologische Aspekte 88
Farbkombinationen 89
Heller oder dunkler Hintergrund ? 90
Farbschema / Farbklima 91
Im Zweifelsfall 92
Farbcodierung 93
3. 5 Dynamisches Layout
Begriffserklärung 94
Wo macht es Sinn ? 95
Parameter dynamischer Layouts 96
Layout-Raster skizzieren 97
Vorgehensweise beim Layout 98
Auswahl anwendungsfallorientiert 99
Komponentengröße beeinflussen 100
Versuch mit geschachtelten Layouts 101
besser mit GridBagLayout 102
Hörsaalübung 103
"Datei öffnen" als GridBagLayout
Quellcode "Datei öffnen" als GridBagLayout
Anmerkung zur Schriftgröße 104
3. 6 Software-Ergonomie
Begriffe (1) 105
Begriffe (2) 106
Ergonomische Normen 107
Normen zur (Software-)Ergonomie 108
Normen zur Software-Ergonomie 109
(1a) Aufgabenangemessenheit 110
(1b) Aufgabenangemessenheit 111
(2a) Selbstbeschreibungsfähigkeit 112
(2b) Selbstbeschreibungsfähigkeit 113
(2c) Selbstbeschreibungsfähigkeit 114
(3) Steuerbarkeit 115
(4a) Erwartungskonformität 116
(4b) Erwartungskonformität 117
(5) Fehlertoleranz 118
(6) Individualisierbarkeit 119
(7) Lernförderlichkeit 120
3. 7 Usability Inspection
Evaluation der Usability 121
Methoden der Usability Inspection 122
Checkliste für Heuristik 123
- 4 -

3. 8 Usability Test
Vorbereitung des Tests 124
Prototypen 125
Usability Lab
Eröffnung 126
Durchführung: Thinking aloud - laut denken 127
Durchführung: Co-Discovery - zu zweit erforschen 128
Durchführung: Interviews und Fragebogen 129
Durchführung: Observierung 130
Auswertung (1) 131
Auswertung (2) 132
Auswertung (3) 133
4. Java
Interpreter-Prinzip 134
Dateitypen und Tools 135
Java Development Kit (JDK) 136
Entwicklung nur mit JDK 137
IDE Eclipse 138
4. 1 Programmtypen
Das einfachste Java-Programm (main) 139
Ausgabe auf die Konsole 140
Die einfachste GUI-Applikation 141
HelloWorld Klassendiagramm 142
Zur Lebensdauer von Objekten 143
Seitenblick: Applet 144
Applets und Sicherheit 145
4. 2 Grundlagen für Umsteiger
Klassen 146
Objekte 147
Initialisierung von Variablen 148
Zugriffsrechte 149
Datentypen 150
Zeichenketten: String 151
Arrays 152
Ausnahmebehandlung 153
Bibliotheken: Packages 154
4. 3 Weitere Details zu Java
Zeiger versus Referenzen 155
Typumwandlung (cast) 156
Interface 157
Klassenhierarchie 158
Mutter aller Klassen: class Object 159
plattformunabhängig ? 160
sicher ? 161
Gegenüberstellung Java / C++ in Stichworten
4. 4 Collection-Klassen
Collection-Klassen 162
Wrapper-Klassen 163
Interface Iterator 164
Klassenhierarchie 165
AbstractList implements List 166
AbstractSet implements Set 167
AbstractMap implements Map 168
Generics: typsichere Collections 169
- 5 -

4. 5 Dateien und Streams
Streams / Datenströme 170
Byte- und Character-Streams 171
Lesen aus Streams 172
Schreiben in Streams 173
Spezialisierte Streams 174
Beispiel: Kopieren einer Textdatei 175
Zerlegen von Texten: Scanner 176
Wahlfreier Datei-Zugriff 177
4. 6 Serialisierung
Serialisierung / Deserialisierung 178
Serialisierung in C++ 179
Interface java.io.Serializable 180
Standard-Implementierung in Java 181
Praktischer Einsatz 182
Portabilität serialisierter Objekte 183
Mögliche Probleme 184
Interface java.io.Externalizable 185
Marshalling / Unmarshalling 186
4. 7 Entwurfsphase mit statischem Layout
Dynamische und statische Layouts 187
Vorgehensweise beim Entwurf 188
Starter-Applikation 189
4. 8 GUI Klassenstruktur
Architektur für kleine GUI-Anwendungen 190
Model / View / Controller - Architektur 191
Beispiel Model / View 192
Beispiel Model / ViewController 193
Situation mit Eclipse WindowBuilder 194
Alle Widgets zu Instanzvariablen 195
Handler als Methoden der Fensterklasse 196
Statische GUI im Konstruktor verstecken 197
Zugriff auf Model-Objekt 198
main-Methode in Hauptfensterklasse 199
Partitionierung der GUI 200
Klassendiagramm 201
Reaktionszeit und Event Queue 202
Kurze Aktivitäten mit Wait-Cursor 203
Längere Aktivitäten im Worker Thread 204
Beispiel zu Wait-Cursor und Worker Thread
Swing & Worker Threa
Quellcode zu Wait-Cursor und Worker Thread
5. Fenster, Dialoge, Container
GUI-Bibliotheken in Java SE 205
Swing Components
Weitere Features von JFC/Swing 206
Container 207
Top Level Container 208
Bereits bekannt: JFrame 209
5. 1 Panels und Panes
Räumliche Gliederung 210
JPanel: einfache Fläche 211
Rand und Abstand mit Border 212
Beispiele zu Border
JScrollPane: verschiebbare Sicht 213
JSplitPane: zweigeteilt 214
- 6 -

JTabbedPane: Karteikarten mit Reitern 215
Beispiel zu JTabbedPane
CardLayout: reiterlose Karteikarten 216
5. 2 Dialoge
Überblick 217
JDialog 218
JOptionPane: Standard-Dialoge 219
Spezielle Dialoge 220
Datenübergabe 221
Beispiel zu Dialogen
Dialogklasse (JDialog)
Hauptfensterklasse (JDialog, JOptionPane)
5. 3 Layout-Manager
Layout-Manager in Swing 222
Überblick 223
Fließtext: FlowLayout 224
FlowLayout Programmfragment 225
Zeile oder Spalte: BoxLayout 226
BoxLayout Programmfragment 227
Mitte maximal: BorderLayout 228
BorderLayout Programmfragment 229
Gleiche Tabellenzellen: GridLayout 230
GridLayout Programmfragment 231
Universell: GridBagLayout 232
GridBagLayout Programmfragment 233
GridBagConstraints (1) 234
GridBagConstraints (2) 235
Weitere Layout-Manager 236
Gemischt: statisch und dynamisch 237
6. Ereignisbehandlung
Konsoledialoge 238
Ereignisorientierte Programmierung 239
Ereignisbegriff 240
Aktivitäten und Eventklassen 241
Zuordnung von Handlern 242
bei Komponenten 243
Systemvergleich 244
in Java AWT 1.0 (veraltet) 245
seit Java AWT 1.1 : Listener 246
Listener und Adapter 247
Anonyme innere Klasse 248
Innere Klasse im Vergleich zu C++ 249
Observer-Pattern zum Vergleich 250
So macht es Eclipse 251
So machte es JBuilder 252
Fenster als Listener seiner Komponenten 253
Beispiel zu Varianten der Ereignisbehandlung
Quellcode zu Varianten der Ereignisbehandlung
zum Vergleich: MFC (1) 254
zum Vergleich: MFC (2) 255
zum Abschluss: Visual Basic 256
- 7 -

7. Bausteine grafischer Bedienoberflächen
Begriffe 257
Visueller Index (aus Java Tutorial)
Swing Components in Eclipse 258
Klassenhierarchie 259
7. 1 Schaltflächen
Schaltflächen: Charakterisierung 260
JButton: löst nur Aktion aus 261
JToggleButton: Zustand + Aktion 262
JCheckBox: Wahrheitswert-I/O 263
JRadioButton: Auswahl 1 aus n 264
Beispiel zu RadioButtons
Quellcode zu RadioButtons (JRadioButton, ButtonGroup)
7. 2 Textfelder
Textfelder: Charakterisierung 265
JTextField: einzeilige I/O + Aktion 266
JTextArea: mehrzeilige I/O 267
Beispiel zu Textfeldern
Quellcode zu Textfeldern (JTextField, JTextArea, JScrollPane)
Wertebereichsüberprüfung 268
7. 3 Auswahllisten
Auswahllisten: Charakterisierung 269
JList: sichtbare Liste 270
JList: Auswahlmodus und Selektion 271
JComboBox: ausklappbare Liste 272
Dynamische Listen 273
ImageIcon: statische Bilder 274
Beispiele zu Auswahllisten
Quellcode zu Auswahllisten (JList, JComboBox, JScrollPane, ImageIcon)
7. 4 "Analogwerte"
JSlider: analog mit Einrasten 275
JProgressBar: reine Anzeige 276
JScrollBar: meist für Fenster 277
Beispiele zu "Analogwerte"
Quellcode zu "Analogwerte" (JSlider, JProgressBar, JScrollBar)
7. 5 Komplexe Datenstrukturen
Model / View / Controller - Architektur 278
Beispiel Model / View 279
Beispiel Model / ViewController 280
JTable: Charakterisierung 281
Model / View Architektur bei JTable 282
Model / View als Observer-Pattern 283
Zugriff über Interface TableModel 284
Abstract Class AbstractTableModel 285
Beispiele zu Tabellen
Quellcode zu Tabellen (JTable, AbstractTableModel)
JTree 286
DefaultMutableTreeNode 287
Tree als binärer Baum 288
DefaultTreeModel 289
Beispiele zu Baumstrukturen
Quellcode zu Baumstrukturen (JTree, DefaultTreeModel, DefaultMutableTreeNode)
- 8 -

7. 6 Menüs und Toolbars
Klassenhierarchie zu JMenu 290
JMenuBar, JMenu: Hauptmenü 291
Aufbau eines Menüs 292
JPopupMenu: Kontextmenü 293
Kontextmenü-Ereignisbehandlung 294
Beispiele zu Menüs (JMenuBar, JMenu, JPopupMenu)
Quellcode zu Menüs
Toolbars 295
JToolBar 296
Beispiel zu Toolbars
Quellcode zu Toolbars (JToolBar, BorderLayout)
7. 7 Grafik
Direkte Grafikausgabe 297
Grafik Kontext 298
Beispiel: Bild anzeigen 299
Grafikausgabe beschleunigen (1) 300
Grafikausgabe beschleunigen (2) 301
7. 8 Drag & Drop
Mentales Modell und Anwendungsbereiche 302
Zustandsdiagramm allgemein 303
Low Level mit Swing 304
Abstract Class DragAndDropable 305
High Level mit Swing 306
- 9 -