Upload
wilfried-stuedemann
View
124
Download
6
Embed Size (px)
Citation preview
Entwicklung nutzerorientierter Anwendungen
Wintersemester 2013/2014
Prof. Dr.-Ing. Bernhard Kreling
Hochschule Darmstadt
Fachbereich Informatik
2
1. Einführung
Lernziele der Veranstaltung
Benutzerzentrierung verinnerlichen human computer interaction Kundenorientierung
Grafische Benutzungsoberflächen intuitiv und ergonomisch gestalten visuell ansprechend entwerfen objektorientiert konstruieren
Konzept der Ereignisorientierung verstehen Bausteine grafischer Oberflächen kennen lernen ... und das alles in Java mit Swing
3
1. Einführung
Inhalte
User Research: Stereotypen, Szenarien SW-Technik: Use Case Analyse, GUI-Diagramme
Trennung Datenverarbeitung/Oberfläche, Dokument/Ansicht Screen Design und Ergonomie
Gruppierung, Formen, Farben, statisches / dynamisches Layout
Java Kurs für Kenner von C++ GUI-Implementierungstechniken
Bausteine: Datentypen, Attribute, Ereignisse Fenster und Dialoge, Layout-Manager Ereignisbehandlung
Gute Beispiele, schlechte Beispiele
Voraussetzung:PG1 bestanden, PG2 begonnen
4
1. Einführung
Praktikum
Semesterprojekt: Entwurf, prototypische Realisierung und Optimierung eines Systems
vage Aufgabenstellung (wie im richtigen Leben) kein Erfolgserlebnis: man findet immer noch bessere
Lösungen – darin liegt der Erfolg ! Problembewusstsein wird erst im Lauf des Semesters
entstehen, deshalb sind optimierende Iterationen wichtig
Projektmappe mit Dokumentation und Software semesterbegleitend erstellen und pflegen zu Beginn jeder Übung mit Ergebnissen der vorigen
vorlegen dient Ihnen selbst in jeder Übung als Planungsunterlage
top-down
bottom-up
?
5
1. Einführung
Klausur
mit Papier und Bleistift Hilfsmittel: das Skript und sonstige eigene Unterlagen
(nicht die des Nachbarn) auf Papier sind als Hilfsmittel zugelassen
Termin und Anmeldung im Online Belegsystem
Zulassungsvoraussetzung: regelmäßige und erfolgreiche Teilnahme am Praktikum Vorlage der vollständigen Projektmappe beim 6. Termin
6
1. Einführung
Literatur (HCI und UID)
Keith Andrews: Human-Computer Interaction http://courses.iicm.tugraz.at/hci/hci.pdf
M. Dahm: Grundlagen der Mensch-Computer-Interaktion Shneiderman, Plaisant: Designing the User Interface Alan Cooper: About Face - The Essentials of User Interface
Design Ivo Wessel: GUI-Design Oracle: Java Look and Feel Design Guidelines
http://www.oracle.com/technetwork/java/jlf-135985.html Frank Thissen: Screen Design Handbuch
Hans-Peter Wiedling: Skript zur Parallelveranstaltung Ralf Hahn: Skript "Objektorientierte Analyse und Design"
7
1. Einführung
Literatur (Java)
Guido Krüger: Handbuch der Java-Programmierung http://www.javabuch.de/
David Flanagan: Java in a Nutshell, O'Reilly
Oracle: The Java Tutorial http://docs.oracle.com/javase/tutorial/
Oracle: Java Standard Edition API http://docs.oracle.com/javase/7/docs/api/
Oracle: Java Language Specification http://docs.oracle.com/javase/specs/
Eclipse Online Hilfe F2, Open External Javadoc
8
1. Einführung
Entwicklungsumgebung
Eclipse mit WindowBuilder Java Applikation für Windows, Linux, Mac OS X braucht viel Arbeitsspeicher und großes Display
Windows: 512 MB mindestens; 768 MB empfohlen
Linux, Mac OS: 1 GB empfohlen Netbooks eher nicht geeignet
kostenlos im Web Variante "Eclipse IDE for Java Developers" enthält als GUI Editor den "WindowBuilder"
Homepage mit Download http://www.eclipse.org/
9
2. Softwaretechnik für Benutzungsschnittstellen
Übersicht: Analyse und Entwurf
Visionsdokument Erforschung der Benutzer und Anwendungsszenarien
auch Workflows Anwendungscharakter und Modell
Nicht-funktionale Anforderungen Anwendungsfallanalyse
Use Case Diagramm (UML) und Beschreibung Navigationsübersicht Screen-Diagramme
abstrakt: Bedien- und Anzeigeelemente nur aufgelistet konkret: Layout-Skizze
Klassen- und Sequenzdiagramme (UML) jeder Screen wird Objekt einer eigenen Klasse
UOAD User Oriented Analysis and Design
Ergänzung zu OOAD,nicht Gegenposition
10
2. Softwaretechnik für Benutzungsschnittstellen
Visionsdokument
Sinn und Zweck der Anwendung/Website welche Ziele sollen erreicht werden? welche (Geschäfts-)Prozesse sollen unterstützt
und optimiert werden?
Beispiel Online Belegsystem:
- Gerechte Verteilung knapper Plätze- verbesserte Verfügbarkeit von Restplätzen- Verhinderung von Mehrfachbelegungen- Teilnehmerlisten, die der Realität entsprechen- Gleichmäßige Auslastung der Parallelzüge- Vorrang für Studierende im Regelablauf
11
2.1 Benutzer kennen und verstehen
Admins und User – ein Zerrbild
so unterteilen Informatiker gerne die Menschheit
Admins kennen sich aus und haben die Macht User haben keine Ahnung
Worst Case Betrachtung:DAU – dümmster anzunehmender User
völlig falscher Ansatz
12
2.1 Benutzer kennen und verstehen
Benutzer charakterisieren
welche Leute sollen mit dem System arbeiten ? was sind ihre eigentlichen Aufgaben und Ziele ?
in welchem Zusammenhang nutzen sie das System ? wie kann man sie im Allgemeinen und
im Hinblick auf das System charakterisieren ? seltene / häufige / ständige Nutzer,
Anfänger / Fortgeschrittene / Profis bezüglich der Anwendungsdomäne bezüglich der Anwendung bezüglich Rechner und Betriebssystem
interessiert / widerwillig ? lernfähig / starr ? Kontextwissen ( inhaltliche Tiefe und Terminologie) ?
Der DAU ist nicht blöd !Er hat einfach nurWichtigeres zu tun
im Stress ?
13
2.1 Benutzer kennen und verstehen
Stereotype
lebendige, anschauliche Steckbriefe typischer Vertreter der Benutzergruppen Name, Bild, Alter, Geschlecht, Ausbildung, Vorlieben,
Hobbys, Charaktereigenschaften typisches Verhalten, auch im Hinblick auf das System nicht durchschnittlich, lieber markant, dennoch
glaubwürdig
"Durchschnittsbenutzer" führen zu durchschnittlichen Entwürfen
"Stereotyp" ist hier sozialwissenschaftlich gemeint,
nicht im Sinn der UML
14
2.1 Benutzer kennen und verstehen
Stereotype und Benutzerrollen
reale BenutzerInnen werden zusammengefasst zu Benutzergruppen
Benutzergruppen werden veranschaulicht durch Stereotype realitätsnahe Schilderung vordergründig irrelevanter Details wenn echte Menschen bekannt sind, braucht man keine
Stereotype dient der Überprüfung der folgenden Abstraktion
Benutzergruppen werden abstrahiert zu Benutzerrollen haben unterschiedliche Anwendungsfälle bekommen differenzierte Zugriffsrechte bekommen unterschiedliche Hilfe-Informationen
Benutzerrollen werden später implementiert erscheinen als Akteure im Use Case Diagramm
nicht zu früh die
Vielfältigkeit der
BenutzerInnen wegabstrahiere
n!
englisch: Persona
15
2.1 Benutzer kennen und verstehen
Anwendungsszenarien
ein Hilfsmittel, um den Gesamtzusammenhang zu sehen, bevor man sich dem Systementwurf widmet
das künftige System und seine Benutzer in größerem Kontext schildern hilfsweise kann man vorab Szenarien für das bisherige System
schreiben Szenarien werden für bestimmte Stereotype geschrieben
"Geschichten" über Benutzer und Nicht-Benutzer
z.B. Verwaltungsmitarbeiter und deren Kunden Ziele und Aufgaben Lebenssituation, Arbeitsumfeld, Workflows
Beispiele: http://www.fbi.h-da.de/online-belegsystem/dokumentation/ein-szenario.html Übung: Ingo I. braucht ein Zwischenzeugnis für eine Bewerbung
16
2.1 Benutzer kennen und verstehen
Szenario Use Case Beschreibung
Anwendungsszenario anschaulich auch Umfeld der Akteure umfassend, überlappend unvollständig und
ungenau ignoriert Fehler
Use Case Beschreibung trocken nur Akteure und System klar abgegrenzt vollständig und präzise berücksichtigt Fehler
Use Cases werden später aus den Anwendungsszenarien erarbeitet
17
2.1 Benutzer kennen und verstehen
Methoden der Benutzerforschung
Interviews / Expertengespräche informelle Gespräche mit Kennern der
Anwendungsdomäne Fokusgruppe
moderierte Diskussion einer kleinen Gruppe künftiger AnwenderInnen
geringer Aufwand, qualitative Ergebnisse bringt neue Aspekte, auch Antworten auf nicht gestellte
Fragen Fragebogen
quantitative (evtl. statistisch gesicherte) Ergebnisse Ergebnisse können nicht besser sein als die Fragen
die "richtigen" Fragen zu stellen ist nicht trivial
woher kommt das Material für Stereotype und Szenarien ?
18
2.1 Benutzer kennen und verstehen
Fallen umgehen
Benutzer(in) beschreibt seine/ihre eigene Aufgabe, definiert nicht das System umgangssprachlich, informell, inkonsistent zwischen den Zeilen lesen – auf Feinheiten achten
gängige Regeln des guten Brainstormings einhalten "schwierige" oder unkonventionelle Ideen aufgreifen, nicht
im Keim ersticken
Interviewer/Moderator ohne vorgefasste Meinung keine vorzeitige Festlegung auf Architektur- oder
Implementierungsideen Gesprächspartner nicht beeinflussen
19
2.1 Benutzer kennen und verstehen
z.B. Fahrkartenautomat
kleine, große, alte, junge, mit Sehschwäche ... und dann scheint noch die Sonne auf's Display
wegfahren zu Termin / Besuch / ... ganz unterschiedliche Nutzungshäufigkeit interessiert? nein lernfähig? manche Stress? aber sicher!
die Straßenbahn droht abzufahren
20
2.1 Benutzer kennen und verstehen
z.B. Online Belegsystem
Studierende Fb Informatik, Fb Media, sonstige Fb, Austausch, CNAM ein Anwendungsszenario:
http://www.fbi.h-da.de/online-belegsystem/dokumentation/ein-szenario.html
Lehrende Sekretärinnen Fachbereichsassistentin Anwendungs-Administrator System-Administrator ESE-Tutoren Laboringenieure
21
2.1 Benutzer kennen und verstehen
z.B. Stundenplanungssystem
Sekretärin: Eingabe von WunschzettelnAusdrucken von PlänenBeantworten von Anfragen
Prodekan: Lehrveranstaltungsplanung(wer macht was)
Stundenplaner: Stundenplanung(wann und wo)
charakterisieren Sie die Benutzergruppen !
ist der LV-Bedarf klar?
hat er eine
Strategie?
22
2.2 Anwendungscharakter und Modell
Nicht-funktionale Anforderungen
technisch möglichst gering halten Client: Browser ab HTML 4.1, CSS, Frames, JavaScript aktiviert Client Bildschirm 1024 x 768 Pixel minimale Transferrate 56 kBaud Benutzer muss E-Mail-Adresse haben mindestens 100 Benutzer gleichzeitig; Meldung bei Überlast ...
gestalterisch Creative Design Brief Anwendungscharakter, Stil, Stimmung
freundlich, hilfsbereit, seriös, verspielt, nüchtern, provokativ, ... Anrede des Benutzers: Du / Sie
Corporate Identity Farbschema ...
23
2.2 Anwendungscharakter und Modell
Charakter von Anwendungen
U-Software Spiele Funware Fotoalbum, Videoschnitt
E-Software Bildbearbeitung, Videoschnitt Office-Anwendungen Kommerzielle Datenverarbeitung
in diesem Stil machen wir das Praktikum ! Maschinensteuerungen
wohin gehören Fahrplanauskunft, Geldautomat, Ticketservice, ... ?
in Anlehnung anU- und E-Musik
fließende Übergänge
24
2.2 Anwendungscharakter und Modell
Modelle eines Systems
Modelle sind vereinfachte Darstellungen einer Wirklichkeit vgl. Atommodelle in der Chemie
a) mentales Modell Sicht des Benutzers; anwendungsorientiert
b) augenscheinliches Modell wie sich das System nach außen darstellt
c) Implementierungsmodell Sicht des Entwicklers; technologisch orientiert interessant für die Wartung, nicht für den Benutzer
kein Modellentspricht der
"Wahrheit"
Ziel von Analyse und Entwurf:Diskrepanz dieserModelle vermeiden !
25
2.3 Anwendungsfallanalyse
Anwendungsfälle (Use Cases)
hier nur zur Erinnerung siehe Skript R. Hahn: Objektorientierte Analyse und
Design
Teil der Unified Modeling Language UML High-Level-Beschreibung eines Systems
erfasst die Benutzerrollen / Akteure erfasst, was diese mit dem System machen das System wird als Black Box betrachtet
rückt immerhin den Menschen in den Blick ! nicht Datenstrukturen und -flüsse
beschreibt nicht die Struktur des Systems !
aber arg abstrakt
26
2.3 Anwendungsfallanalyse
Use Case Diagramm (Geldautomat)
Kontostandabfragen
Geld holen
Geldvorratprüfen
Geldkarteladen
Geldnachfüllen
Kunde
Geldautomat
eingezogeneScheckkartenentnehmen
Mitarbeiter
Use Cases entsprechen
oft derobersten
Menüebene
eine Benutzerrolle sieht oft nicht die Funktionen der anderen
ein Mitarbeiter kann zugleich Kunde seiner Bank sein,
muss sich dann aber separat per EC-Karte authentifizieren
(d.h. ein Benutzer kann auch zwei Rollen haben)
zur Übersicht vor dem Entwurf der Benutzungsoberfläche
27
2.3 Anwendungsfallanalyse
Use Case Diagramm (Belegsystem)
Student
Fachschaft
Sekretariat
Passwort ändern
Zeitwünscheeinsehen/ändern
Persönliche Datenkontrollieren/ändern
Belegwünscheeingeben
sich über OBSinformieren
Zuteilungenabfragen/freigeben
Restplätze belegen
vergessenesPasswort freischalten
Nachzüglereintragen
Studentendatenändern
Studenten andererFBs eintragen
Zugzuordnung fürErstsemester eintragen
OBS Web Front-End
die Sekretärin braucht keinen
zusätzlichen Fachschafts-Account um
die Zugzuordnun
g einzutragen, d.h. jede(r) hat nur eine
Rolle
zur Übersicht vor dem Entwurf der Benutzungsoberfläche
28
2.3 Anwendungsfallanalyse
z.B. Use Cases eines Buchs
der Leser? der gründliche Leser, der eilige Sucher, der Schenkende Fachbuch = System zur Informationsspeicherung
von Anfang bis Ende lesen umblättern Überblick bekommen Inhaltsverzeichnis Information zu einem Thema suchen Inhaltsverzeichnis Detailinformation / Stichwort suchen Index Wiederauffinden einer Stelle Lesezeichen weiterführende Information finden Literaturliste Kaufentscheidung treffen Inhaltsverz., Klappentext, Leseprobe
vgl. Grundfunktionen eines Browsers vgl. dagegen einen Roman
29
2.3 Anwendungsfallanalyse
z.B. Dokument- statt Datei-Menü
das bekannte Datei-Menü ist nahe am Betriebssystem für einige Funktionen muss
man die Datei erst schließen wie wollen Benutzer mit
Dokumenten arbeiten ? offenes Dokument
umbenennen oder verschieben versionsorientiert: Meilensteine Änderungen vergessen statt
Schließen und wieder Öffnen das Beispiel ist problematisch,
weil Benutzer dateiorientiertes Arbeiten gewohnt sind ...
32
2.3 Anwendungsfallanalyse
Von Use Cases zu Screens
Screen = Fenster, Maske, Seite, View jeder Use Case wird in einen Screen abgebildet
Name des Use Case wird Titel des Screens ggf. weitere untergeordnete Dialoge bei komplexen Use
Cases keine Funktionen oder Daten in einen Screen,
die nicht unmittelbar zu diesem Use Case gehören ! Gruppierung der Screens nach Benutzerrollen
besser: Identifikation des Benutzers durch Anmeldung und Ausblendung der Use Cases anderer Benutzerrollen; jeder Benutzer bekommt nur Screens "seiner" Rolle zu sehen
Hauptfenster enthält Übersicht der Use Cases und verzweigt dorthin
Entwurf der Grobstruktur des Dialogsystems
im primitivsten Fall eine Liste
ein Ansatz, aber kein Rezept,sondern ein kreativer Prozess
33
2.3 Anwendungsfallanalyse
Use Case Spezifikation
Use Case Name
Primary Actor
(Further Actors)
(Stakeholders and their Interests)
(Success Guarantees)
(Minimal Guarantees)
Trigger
Basic Course
(Alternative Course)
vgl. Skript R. Hahn:
Objektorientierte Analyse und
Design
kann bei Bedarf erweitert werden ...
im Praktikum: Konzentration auf
das Wesentliche
im Detail nach dem Entwurf der Benutzungsoberflächemit Bezug auf die geplanten Bedienelemente
34
2.4 Abläufe
Workflow
ein Arbeitsablauf (Workflow) verkettet mehrere Anwendungsfälle verschiedener Benutzer (Mitarbeiter) Beispiel:
Bestellung verbuchen Lieferung zusammenstellen Lieferschein schreiben Rechnung schreiben Zahlungseingang verbuchen
Metapher: der Weg einer Akte durch eine Verwaltung typischerweise wird der nächste Mitarbeiter vom System
durch eine Botschaft informiert, wenn der vorige seine Teilaufgabe erledigt hat
kann mit Flussdiagramm / Programmablaufplan oder spezialisierten Tools dargestellt werden
35
2.4 Abläufe
Beispiel zum Workflow
Stundenplaner
Prodekan
Sekretärin
auf Benutzungsoberfläche visualisiert
36
2.4 Abläufe
Assistent
Assistenten geben dem Benutzer einen Ablauf vor Assistenten serialisieren
die Abfrage mehrerer Eingabewerte eines Use Cases oder mehrere Use Cases, die nacheinander ausgeführt werden
müssen wichtig: später Abbruch nur auf Wunsch des Benutzers !
Vorteil: Benutzer muss zu einem Zeitpunkt nur über eine Frage nachdenken sinnvoll für selten benutzte Anwendungsfälle oder
für unerfahrene Benutzer
Nachteil: langsam und schwerfällig für Profis
37
2.4 Abläufe
Beispiele zu Assistenten
a) Geldautomaten kennen wir nur als Assistenten die Benutzung ist i.a. schon zäh ... zum Vergleich der bekannte
Geldautomat mal nicht als Assistent:
b) Online Shop Ware in Warenkorb Adresse eingeben Versandart wählen Zahlungsweise wählen Bestellen
38
2.5 GUI-Diagramme
Sinn und Zweck
kein geeignetes Diagramme für GUI-Entwurf in UML UML konzentriert sich auf die Architektur von SW-Systemen vernachlässigt den visuellen Aspekt
ein GUI wird zwar mit Klassen realisiert, anhand eines Klassen- oder Kommunikationsdiagramms kann man sich aber kein Bild von Aussehen und Benutzung machen !
Vorschlag: Navigationsübersicht + Screen-Diagramme im Grunde abgewandelte Zustandsdiagramme
39
2.5 GUI-Diagramme
vgl. Flow Chart
zum Vergleich eine Flow Chart aus dem Bereich Design (auch Seitenstruktur oder Contentogramm genannt)
ausFröbisch, Lindner, Steffen: "MultiMediaDesign - Das Handbuch zur Gestaltung interaktiver Medien"
40
2.5 GUI-Diagramme
vgl. Zustandsdiagramm
aus
ando/leuchten
ausschalteneinschalten
Lampe
offen
geschlossen
öffnenschließen/rumms
Tür
Übergangsaktion
Zustandsaktion
41
2.5 GUI-Diagramme
Navigationsübersicht (abstrakt)
Session
spezielle Form eines Zustandsdiagramms
übersichtlichdurch "Bus"
Knoten = Screens/Fenster/Seiten
Übergänge = Bedienelemente
Login fürStudierende
leer
Stunden-pläne
Was tunwenn...
Tipps &FAQ
Restplatz-belegung
Passwortändern
PersönlicheDaten
MeineBelegungen
Logout
timeout
Kontakt
1A WP Inf. alle belegte
FAQBelegungenkontrollieren
Terminplan
Belegfristen
Vermerkezu ...
Legende zu ...
am Beispiel des OBS (Ausschnitt) Passwort
vergessen?
1. Login
1. Login
42
2.5 GUI-Diagramme
Navigationsübersicht (detailliert)
Dozenten
Deputatserm. Studienprog. Lehrverans. Raum+Zeitw. Stundenplan
Dep.
Hauptmenü
FBSchwerp.St.gang
Dup.Bel. Dup.Kür.
Kontextm.
Übersicht
mitWorkflo
w
Use Cases
Pop-Ups
Rrechter
Mausklick
Raum
zurück Notation und Vereinfachungen:– Zustände als Screenshots– Übergänge i.a. mit Linksklick– R mit Rechtsklick– Rücksprung / Schließen
43
2.5 GUI-Diagramme
Legende zur Navigationsübersicht
Anwendung starten beenden
Aktionen neues Hauptfenster neuer Dialog/PopUp Rücksprung
Ereignisse keine Angabe: linker
Mausklick rechter Mausklick R
Zustände Screen-Name (abstrakt im
Entwurf) Layout-Skizze (konkret im
Entwurf) Screenshot (konkret für
Dokum.)
Bedingungen mit Shift/Umschalttaste S mit Ctrl/Strg-Taste C mit Alt-Taste A
44
LvPlanungAusgeben
+ Sortierung : {Semester, Dozent, ImpExp}+ Fachbereich : String
+ VorschauAnzeigen()+ Drucken()+ inDateiAusgeben()+ Schließen()"Klassendiagram
m"beschränkt
auf I/O-Elemente(im OOAD-Sinne:
Analyseklasse der Oberfläche) Screenshot
2.5 GUI-Diagramme
Screen-Diagramme
mehrereHandskizzen(Wireframes,
Paper Prototypes)
Verfeinerung der Knoten aus der
Navigationsübersicht
abstrakt
skizziert
detailliert
konkret
45
2.5 GUI-Diagramme
Varianten von Screen-Diagrammen
abstrakt kein echtes Klassendiagramm der implementierten Fensterklasse
entspricht eher der Analyse-Klasse des Fensters Attribute: die Ein-/Ausgabe-Parameter des Fensters Methoden: die für den Benutzer verfügbaren Funktionen
skizziert verschiedene Entwürfe mit unterschiedlichen Bedienelementen bewusst nur Handskizzen um die Vorläufigkeit zu dokumentieren grobe Anordnung,
grobe Gestaltung
detailliert Festlegung auf bestimmte Bedienelemente Gestaltung mit allen Details, ggf. Screenshot im Nachhinein
Links zu Paper Prototyping:http://www.carmster.com/hci/uploads/Lectures/PrototypingForTinyFingers.pdfhttp://www.alistapart.com/articles/paperprototyping
46
2.5 GUI-Diagramme
Vorgehensweise für Screen-Diagramme
theoretisch: abstrakt n * skizziert konkret abstrakt zu beginnen fällt aber vielen Leuten schwer,
deshalb folgender iterativer Ansatz: Skizze eines konkreten Entwurfs Verallgemeinerung zu abstraktem Diagramm mehrere weitere konkrete Skizzen von Entwurfsalternativen Bewertung der Entwurfsalternativen und Auswahl der besten detaillierte Ausarbeitung des ausgewählten Entwurfs
es sollten unbedingt mehrere Alternativen betrachtet werden !
47
2.5 GUI-Diagramme
Spezialfall Karteireiter (JTabbedPane)
jede Karteikarte wird als eigener Screen abgebildet
den wahlfreien Wechsel zwischen den Karteikarten implementiert die JTabbedPane automatisch
Allgemein Freigabe AnpassenAllgemein Freigabe Anpassen
Eigenschaften1. Entwurf
Verfeinerung bildet Einbettung ab
48
2.5 GUI-Diagramme
UML-Sequenzdiagramm zur Erinnerung
stellt Objekte und deren Interaktion dar Interaktion: eine Methode ruft eine andere Methode auf
Zeitachse von oben nach unten Lebensdauer des Objekts durch "Lebenslinie"
dargestellt
bietet sich an zur Modellierung ereignisorientierter Systeme
gesucht: Verknüpfung zwischen Oberfläche und inneren Abläufen
49
2.5 GUI-Diagramme
vgl. Sequenzdiagramm "Geld holen"
Ich:CBenutzer
Geldholen
VolksbankAutomat1:CGeldautomat
EC-Karte einlesen
PIN-Nummer einlesen
Use Case wählen
Betrag einlesen
EC-Karte ausgeben
Geld ausgeben
EC-Karte entnehmen
Geld entnehmen
RuhestellungHauptmenüPIN-Dialog...
in dieseRichtungkann mandas innereVerhaltenweitermo-dellieren
Screens =Zustände
Negativbeispielabstrahiert von GUI:
so bringt es uns nichts
50
2.5 GUI-Diagramme
Verbindung GUI Sequenzdiagramm
LvPlanungView:CLvPlanungAusgDlg
OnSortClick
OnFbChange
OnDiskClick
OnPrintClick
OnPreviewClick
OnExitClick
LvPlanungModel:CLvPlanungAusg
SetSort(Sort)
SetFb(Fb)
Output(P)
Output(V)
Output(D)
hier wird deutlich, woherdie Aufrufe kommen
51
2.5 GUI-Diagramme
Fokussteuerung definieren
vollständiger Weg mit TAB dabei können auch einzelne Elemente übersprungen
werden
abgekürzter Weg für häufig benötigten Sonderfall mit RETURN hilfreich bei Eingabe großer Datenmengen per Tastatur
1 2 3 54 67 8
OnReturn OnReturn
52
2.5 GUI-Diagramme
Drag&Drop
Raum festlegen
verschieben
löschen
Shift:vertauschen
Ctrl:duplizieren
Raum löschen
Anzeigezeileumschalten
das beschreibt manbesser in Listenform
53
2.5 GUI-Diagramme
Komplexität beherrschen
Diagramme beanspruchen generell viel Platz Problem beim Zeichnen Problem beim Verstehen
sinnvolle Zerlegung in Teildiagramme ist wichtig insbesondere auch hierarchische Gliederung Abstraktion nicht einfach orientiert an der Papiergröße zerschneiden
aussagekräftige Bezeichnung für jedes Teildiagramm analog zu sinnvollen Klassen- und Funktionsnamen
54
2. Softwaretechnik für Benutzungsschnittstellen
Klarstellung: Diagramme - für wen ?
Diagramme aus der Softwaretechnik sind nicht geeignet um mit Auftraggebern / Benutzern zu kommunizieren selbst konkrete Screen-Diagramme nicht ! allenfalls, wenn die Auftraggeber selbst Informatiker sind
zur Kommunikation mit Auftraggebern und Benutzern braucht man Prototypen visuell und funktional konkret, nicht erklärungsbedürftig zumindest Paper Prototypes oder "Clickable Wireframes"
(erlauben das Umschalten zwischen einzelnen Wireframes)
Diagramme helfen dem Entwickler beim Entwurf,dem Wartungsprogrammierer zum Verständnis
55
2. Softwaretechnik für Benutzungsschnittstellen
Vorbild Architektur
Rückverfolgbarkeitbei der Modellierung
(auch) visueller Objekte
56
2. Softwaretechnik für Benutzungsschnittstellen
Grenzen der UML
viele Autoren versuchen UML zu erweitern, aber:SWT / UML veranschaulicht durch Diagramme
ist ein Gewinn, solange der Gegenstand der Modellierung ein
abstraktes / virtuelles Konzept ist
Objekte, Klassen, Methodenaufrufe, Zustände, Zustandsübergänge... ist ungenügend, sobald der Gegenstand der Modellierung
eine ureigene visuelle Ausprägung besitzt
GUI-Objekte haben ein "Gesicht" Konsequenz: Designer und Benutzer können keinen Bezug
zur natürlichen Sicht auf das System herstellen SWT sollte lernen von Disziplinen mit Erfahrung in
der Modellierung gegenständlicher Objekte
57
2. Softwaretechnik für Benutzungsschnittstellen
Rapid Prototyping
ob ein Entwurf "funktioniert", erkennt man nicht mit Hilfe von Diagrammen Begriff "funktionieren" unter Designern: "seinen Zweck erfüllen"
frühzeitiger Test mit Benutzern ist notwendig erfordert weitgehend arbeitsfähigen Prototyp Benutzertest braucht eigentlich mehr als nur die Oberfläche ... Benutzer zu fragen will gekonnt sein ...
mit geeigneten Tools ist die Erstellung einer Bedienober-fläche nicht aufwändiger als mit einem Zeichenwerkzeug vgl. Photoshop / Flash Visual Basic / Visual C++ / Eclipse
58
3.1 Arten von Benutzungsoberflächen
Klassifikation
veraltet: Kommandozeile, textbasierte Bildschirmmasken Arbeitspferd: WIMP-Oberflächen
Windows, Icons, Menus & Pointing "seriöse Datenverarbeitung"
Webbasierte Anwendungen (HTML im Browser) Infokiosk mit Touchscreen Mobile Endgeräte (Handy, PDA, Smartphone) Multitouch Table (MS Surface) Home & Fun: Multimedia-Freiform-Oberflächen Joystick / Spielekonsole (Spiele, Flugsimulator) natürlichsprachliche Kommunikation
unserFokus
damit beschäftigtsich SW-Ergonomie
Bedien-Paradigmen
59
3.1 Arten von Benutzungsoberflächen
Menüs und Dialoge
für ungeübte oder gelegentliche Benutzer in der Bedienung eher schwerfällig soll eine schnelle Einarbeitung ermöglichen
logische hierarchische Gliederung der Befehle hoffentlich !
vollständige Übersicht aller Befehle Lernhilfen zum Umstieg auf schnellere Bedienweisen
zugehörige Icons zugehörige Tastaturkürzel
Menüs sind platzsparend, lassen Arbeitsfläche frei Dialoge für differenziertere / erklärungsbedürftige Interaktion
60
3.1 Arten von Benutzungsoberflächen
Toolbars und Icons
schnelle Bedienung für einigermaßen geübte Benutzer Direktzugriff ohne stufenweises Aufblättern von Menüs empfehlenswert für häufig benutzte Funktionen
lockern visuell auf Icons müssen gelernt werden !
kaum ein Icon ist selbsterklärend; z.B. Lesezeichen/Favoriten:Mozilla Internet Explorer DVB-T-Tuner
Icons sollten unbedingt durch Tooltips "beschriftet" werden manche Standard-Icons sind bekannt,
aber zumeist plattformabhängig gegenständliche Bilder für abstrakte Funktionen ?
wird oft verkannt
61
3.1 Arten von Benutzungsoberflächen
Tastaturkürzel / Hotkeys
moderner Ersatz für Kommandosprachen in WIMP-Systemen sehr effizient, aber nur für sehr geübte Benutzer
besonders zweckmäßig, wenn große Datenmengen eingegeben werden müssen Hand sollte nicht zur Maus greifen müssen
Qualitätskriterien: durchgängige Bedienung möglich? alle Tastaturkürzel im Menüsystem dokumentiert? eigene Tastaturkürzel definierbar (Makros)? durch zweckmäßige, am Arbeitsablauf orientierte
Fokussteuerung unterstützt?
62
3.1 Arten von Benutzungsoberflächen
Direkte Manipulation
intuitive, problemorientierte Bedienung Beispiele:
Drag&Drop im Windows Explorer Textblock verschieben in Textverarbeitung Pinsel, Radierer etc. in Malprogrammen Veranstaltung verschieben im Stundenplan
klassisch mit der Maus; feinmotorisch anspruchsvoll "Feinarbeit" bei Bedarf mit Pfeil-Tasten
mit dem Finger auf Touchscreens besonders intuitiv, auch für ungeübte Benutzer
Manipulation und Visualisierung hängen eng zusammen adäquate grafische Darstellung ist nicht trivial
meist aufwändigerzu programmierenals Menüs+Dialoge
63
3.1 Arten von Benutzungsoberflächen
Multi-Touch Gesten
ohne weitere Hilfsmittel (Stift, Maus) aber nicht selbstdokumentierend müssen entdeckt und gelernt werden
Tap iPhone
Double Tap
Flick
Drag
Pinch Open
Pinch Close
Touch and Hold
64
3.1 Arten von Benutzungsoberflächen
Web-Oberflächen
richten sich an völlig ungeübte Benutzer dürfen absolut keine Einarbeitung verlangen fun factor ist teilweise wichtig
wenige und einfache Funktionen häufig "Blättermaschinen" im weitesten Sinne nicht zu vergleichen mit Software-Tools aber neuer Trend: Rich Client Applications mit AJAX
geringste motorische Anforderungen auf einfachen Mausklick reduziert kein Doppelklick, kein Drag&Drop, kein Rechtsklick
keine "Arbeitsfläche", aber viel Platz für "Beschriftung"
zu engeBeschränkungfür manche
Client/Server-Anwendungen
65
3.1 Arten von Benutzungsoberflächen
Konventionen berücksichtigen
Vertrautheit, Gewohnheit gleiches Verhalten in ähnlichen Situationen
Gewohnheiten sind oft unbewusst Konventionen sind kulturabhängig
Lichtschalter nach unten: in Amerika aus, in England an Wasserhahn öffnen: in Amerika links-, in England
rechtsdrehen Anwendung starten: Windows Doppelklick, Mac Einfachklick
Dilemma: was tun, wenn das Gewohnte nicht gut ist ... radikaler Bruch mit den Konventionen: Ribbons
http://msdn.microsoft.com/en-us/library/windows/desktop/cc872782.aspx
übergeordneter Aspekt
66
3.2 Formen
Gedanken zur Fenstergestaltung
Führung der Augen von links oben nach rechts unten Fenster eher breit als hoch (analog zum Bildschirm und
Sichtfeld) Mehrspaltigkeit erleichtert das Lesen (vgl. Zeitung)
Kanten der Komponenten bilden Fluchtlinien Anzahl der Fluchtlinien minimieren, ohne jedoch
Komponenten sinnlos zu vergrößern nicht die ganze Fläche mit Komponenten pflastern;
Freiflächen sind wichtige Gestaltungsmittel ! Proportionen, Balance, (Symmetrie), Einfachheit
einheitliche Schriftart, abgestimmte Farben (Farbklima)
68
3.2 Formen
Prioritäten für Gruppierung
inhaltliche Gemeinsamkeiten (Funktionsgruppen)
aufgabenbezogene Folge von Arbeitsschritten
Benutzungshäufigkeit aber nicht dynamisch verändern !
alphabetische Anordnung, Nummerierung etc.
69
3.2 Formen
Hinweise zur Gruppierung
Elemente im oberen Bereich einer Gruppe werden schneller entdeckt als im unteren
Komponenten in Gruppe besser spalten- als zeilenweise anordnen
Gruppenrahmen mit Überschriften erhöhen die Übersichtlichkeit besser Freiflächen als Gruppenrahmen ohne Überschrift 4-5 Gruppen, 4-5 Komponenten pro Gruppe Gruppen sollten als solche erkennbar sein und sich von
Nachbargruppen abgrenzen Gruppen so ausrichten, dass nur wenige Fluchtlinien entstehen Eigene Gestaltungsregeln in allen Gruppen konsistent
anwenden
71
3.2 Formen
Natürliche Anordnung
(Um-)Denken vermeiden
natural mapping
das Herdplattenproblem
Cursortasten
Border
left
right
top
bottom
Border
72
3.2 Formen
Hervorheben von Komponenten
Hervorhebungen trennen Informationen, gewichten, erleichtern Suchen und Finden, lenken Aufmerksamkeit
Größe der hervorzuhebenden Komponente abweichende Orientierung oder Form Isolierung, Einzelstellung, Umrandung Farben (wenige !), Hell-Dunkel-Kontrast, Inversdarstellung fetter Schriftfont oder Großbuchstaben Blinken (aber sparsam und nur an einer Stelle)
nicht mehr als 10-20% aller Informationen hervorheben gewählte Darstellungsart der Hervorhebung durchgängig
benutzen
beliebtesterFehler
73
3.2 Formen
Minimal- und Maximalgrößen
physiologische Gegebenheiten des durchschnittlichen menschlichen Auges berücksichtigen empirisch ermittelt und in Normen festgehalten der Entwickler darf nicht das eigene Auge als Maßstab
nehmen !
begrenzte Sehschärfe erfordert Mindestgröße für ermüdungsfreies Lesen Schriftgröße mindestens 0.3 Grad Sehwinkel, besser 0.5
Grad schnelle Fixation empfiehlt Maximalgröße
für schnelles Erfassen "auf einen Blick" Komponentengruppe maximal 5 Grad Sehwinkel
unabhängigvon System-konfiguration
~ 10pt bei 40cm Leseabstand auf
Papier
74
3.2 Formen
Umrechnung des Sehwinkels
http://www.fbi.h-da.de/fileadmin/personal/b.kreling/dscriptdata/Ena/Vorlesun/Sehwinkel.xls
Gruppe, Text- länge
maximal
Schrift- höhe
minimal
Sehwinkel 5 0,3 Grad= 0,087 0,005 Radiant = (Sehwinkel / 360) * 2 * pi
Betrachtungsabstand 40 40 cm BenutzerverhaltenObjektgröße 3,5 0,2 cm = Betrachtungsabstand * tan (Sehwinkel in Radiant)
Displaygröße 15 15 Zoll KaufentscheidungDisplaybreite 30,5 30,5 cm Kaufentscheidung
Auflösung (horizontal) 1400 1400 Pixel GrafikkarteneinstellungAbbildungsmaßstab 96 96 dpi Grafikkarteneinstellung
Objektgröße 160,7 9,6 Pixel = (Objektgröße / Bildbreite) * Auflösung= 120,6 7,2 pt = Objektgröße in Pixel * (72 / Abbildungsmaßstab)
(Notebook)
in Wahrheit117 dpi
75
3.2 Formen
Abbildungsmaßstab
Angabe von Schriftgrößentraditionell in "Punkt" 1 pt = 1/72 Zoll; 1 Zoll = 1 inch = 2,54 cm korrekt auf Papier, problematisch am Bildschirm
Abbildungsmaßstab systemabhängig MacIntosh 72 dpi, Unix GUIs (Motif, KDE, ...) ?,
Windows 96 dpi (kleine) / 120 dpi (große Schriften) plattformübergreifend: Java 72 dpi
kein echter Zoom bei gemischter Bemaßung vgl. Windows: Schriften und Controls in pt, Fenster in Pixel vgl. altes HTML: Schriften in pt, sonstige Maße in Pixel
unterschiedlicheMonitorgröße u.Grafikauflösung
alles Fiktion:800x600auf 17"
gibt 67 dpid.h. 1 Pixel = 1 pt
76
3.2 Formen
Dialog Units (DLU) unter Windows
Windows unterstützt nur statische Layouts jeder Dialog hat
einheitlichen Font Schriftgröße in pt Controls passen sich an in .RC-Datei stehen
absolute Maße als DLUs DLU ist abhängig von Schriftgröße und
damit auch vom Abbildungsmaßstab hor. DLU = mittlere Breite der Dialogschriftart / 4
vert. DLU = mittlere Höhe der Dialogschriftart / 8
MS Sans Serif 8pt Dauphin-Normal 14pt
nicht so exakt wie Layout-Manager, aber in der Praxis passt's
77
3.3 Schrift
Schriftarten
mit Serifen Times "Führungslinien" für das Auge erfordern hohe (Druck-)Auflösung; am Bildschirm
nur unvollkommen / unschön darstellbar serifenlos Helvetica, Arial
schlechter lesbar; bei geringer Auflösung jedoch zu bevorzugen Bildschirmschrift MS Sans Serif, Fixedsys
serifenlos, auf Pixelraster optimiert (vorteilhaft für kleine Schrift)
nur in ausgewählten Größen verfügbar Druckerschrift
78
3.3 Schrift
Gut lesbare Bildschirm-Schrift
serifenlos für Bildschirm (Serifen nur für Druck) Proportionalschrift, Groß-/Kleinschreibung nicht unterstrichen, nicht blinkend, nicht kursiv
horizontal ausgerichtet, linksbündig, kein Blocksatz begrenzte Spaltenbreite (vgl. Zeitungsspalten)
Schrifthöhe mindestens 0.3° Sehwinkel besser 0.5° 12 pt (bei 15" Notebook, 1400x1050, 40 cm
Abstand) deutlicher Kontrast zum Hintergrund
Text- und Hintergrundfarbe beachten
Problem niedriger Auflösung;relativiert sich bei Retina Display
79
3.3 Schrift
Beschriftung mittels Label
Label deutlich dem Steuerelement zuordnen minimaler Abstand = 1 Zeichenbreite aber kein Doppelpunkt zwischen Label und Steuerelement
Label-Text kurz, aussagekräftig, eindeutig, präzise, allgemein bekannt, informativ, aber keine Abkürzung vorzugsweise nur ein Wort erst "ausführlich" formulieren, dann "verdichten"
Label-Text nicht breiter als 5° Sehwinkel (= 1 Fixation) ca. 120 Pixel (bei 15" Notebook, 1400x1050, 40 cm Abstand)
80
3.3 Schrift
Ausrichtung von Beschriftungen
einzeilige Steuerelemente: Label links; horizontal zentriert
mehrzeilige Steuerelemente: Label links oberhalb
mehrere verschieden lange Labels:etwa gleich: linksbündig
sehr unterschiedlich: rechtsbündig
einzeilig
mehrzeilig
minimal
mittel
maximal
Tabulator
Makro
Einblendezeit
81
3.3 Schrift
Eingabe von Text
Kommandos Auswahl aus Textliste Freitexteingabe
generell mit Enter abschließen Kurzformen für Kommandos und Auswahlworte
anbieten Auto-Vervollständigen in Combo-Boxen mnemonisch günstiger als Tastaturkürzel
beliebige Groß-/Kleinschreibung zulassen
optimal !
82
Hörsaalübung
Gestalten eines Eingabefensters
Was ist hier schlecht ?
Verbessern Sie den Entwurf !
83
3.4 Farbe
Was ist Farbe ?
Physikalische Sicht Spektralfarben = "Regenbogenfarben"
eine Frequenz; Wellenlänge in nm Rest: Überlagerung mehrerer Freq.
Physiologische Sicht dieselbe Farbempfindung kann durch
verschiedene Mischungen von mind. 3 Farben erzeugt werden
Darstellung in der Farbtafel Spektralfarben auf Bogen, Rot-Blau-Mischung auf
Purpurgerade Ordnungsprinzip: Mischfarben liegen auf Verbindungsgeraden Dreieck umschließt mögliche Mischfarben aus 3
Primärvalenzen berücksichtigt nicht die Luminanz
"unbunt"
780
520
380
nichtdarstell-
bareFarben
Wellenlänge550 nm
500
480
84
Grün
Rot
Blau
3.4 Farbe
Farbmodell RGB
Mischung von farbigem Licht Grundfarben Rot, Grün, Blau
additive Farbmischung Projektion der Primärvalenzen auf dieselbe Fläche
Einsatzgebiete Wiedergabe über Monitor
Primärvalenzen durch Leuchtstoffe bestimmt Aufnahme mit Scanner oder Kamera
Primärvalenzen durch Farbteiler/Farbfilter bestimmt
3D-Farbraum mit kartesischen Koordinaten Mischung entspricht vektorieller Addition
85
Cyan
Magenta
Yellow
Papier
weißesLicht
3.4 Farbe
Farbmodell CMYK
Mischung von Farbstoffen (Farbfiltern) Grundfarben Cyan, Magenta, Yellow, Key (blacK)
subtraktive Farbmischung Beleuchtung mit weißem Licht
Cyan schluckt R transparent für B und G Magenta schluckt G transparent für R und B Yellow schluckt B transparent für R und G
Mischung von CMY ergibt (fast) Schwarz Schwarz als 4. Grundfarbe wegen Unsauberkeit
Einsatzgebiet: Wiedergabe über Drucker typische Probleme: geringere Farbsättigung als Bildschirm;
schlechtere Dosierbarkeit = weniger Farbabstufungen; starke Abhängigkeit von Papierqualität
86
S
H
L
0.75
0.25
0.5
S
H
L
3.4 Farbe
Farbmodell HSL
anwendungsorientiert,zielgerichtet manipulierbar Farbart Hue Sättigung Saturation Helligkeit Luminance
Lightness
auch HSI IntensityHSB BrightnessHSV Value
87
3.4 Farbe
Physiologische Aspekte
höhere Auflösung für Helligkeit als für Farbe Kanten u. Formen werden besser anhand der Helligkeit erkannt wird bei Videokompression ausgenutzt
unterschiedliche Auflösung (Schärfe) für verschiedene Farben besonders schlecht: Blau
farbabhängige Helligkeitsempfindung grün wirkt heller, blau dunkler
kleine Objekte auf hellem Grund wirken dunkler als große die Iris (= Blende) passt sich an
Farb- und Helligkeitsempfinden wird auch von der Umgebung beeinflusst, nicht nur vom Monitor
Farbenblindheit http://www.ichbinfarbenblind.de/ Galerie
88
3.4 Farbe
Psychologische Aspekte
im allgemeinen kulturspezifisch Ägypten: Tod, Amerika: Gefahr, China: Glück, Indien: Leben
bei uns: weiß neutral rot Anhalten, Gefahr, Fehler, Alarm, Hitze orange Warnung, Achtung, Aufmerksamkeit grün Losfahren, ok, Verfügbarkeit, Wachstum blau Kälte, Ferne, Hintergrund
89
3.4 Farbe
Farbkombinationen
Vordergrund- und Textfarben Weiß, Schwarz, mittel- bis langwellige Farben (Rot, Gelb,
Grün) kein Blau
Hintergrundfarben hell (Positivdarstellung), schwach gesättigt (Pastelltöne) kurzwellige (Blau, Cyan) und unbunte Farben (helles Grau) kein gesättigtes Rot oder Braun
kritische Farbkombinationen vermeiden: Rot/Grün, Gelb/Blau, Rot/Blau Gelb/Weiß wird leicht verwechselt
90
3.4 Farbe
Heller oder dunkler Hintergrund ?
Dunkel auf Hell ? freundlich Papiermetapher Monitor-Flimmern unangenehm bei großen hellen Flächen
Hell auf Dunkel ? finster Farben leuchten intensiver auf dunklem Untergrund dunkler Hintergrund zur Hervorhebung von Bildern weiß überstrahlt leicht, weil Iris weit geöffnet ist
mittlere Hintergrundhelligkeit gibt Spielraum für helle und dunkle Kontraste angenehm für das Auge: entspricht der
Umgebungshelligkeit
dagegen hilft hohe Bildwiederholrate oder LCD
91
3.4 Farbe
Farbschema / Farbklima
±5 verschiedene Farben + schwarz + weiß
siehe auch http://kuler.adobe.com/#create/fromacolor
92
3.4 Farbe
Im Zweifelsfall
eher weniger Farbe als mehr
eher weniger Farbsättigung als mehr
Codierung und Unterscheidung eher mittels Layout und Form als mittels Farbe
Farben visuell überprüfen, nicht "berechnen"
93
3.4 Farbe
Farbcodierung
Farbe dient als "Skala" eines (physikalischen) Wertes vgl. Landkarte, Wetterkarte
suggestive Zuordnung von Farbcode zu Bedeutung
unterschiedliche Farbarten wirken leicht "ungeordnet" sicherer: Abstufungen nur in Helligkeit und/oder Sättigung,
nicht in Farbart (Hue) Hervorhebung durch Intensivierung "aktiv", "selektiert" höhere Helligkeit oder Sättigung
http://www.wetter3.de/animation.html
94
3.5 Dynamisches Layout
Begriffserklärung
bisher: Größe und Position von Komponenten in der Entwicklungsphase festgelegt
jetzt: Komponenten bekommen eine zur Laufzeit variable Größe und/oder variable Position
a) abhängig von der Fenstergröße kann sich an der Grafikkartenauflösung orientieren
b) abhängig von der Größe der Komponente jede Komponente hat eine Wunschgröße (preferred size) z.B. abhängig von der Schriftgröße
auch ein typisches Problem beim Web-Design
zweckmäßiger Einsatzist nicht trivial
95
3.5 Dynamisches Layout
Wo macht es Sinn ?
abhängig von der Fenstergröße:alle Komponenten mit Scrollbalken z.B. JList, JTree, JTable; evtl. auch JTextArea Scrollbalken können verschwinden mehr Inhalt wird sichtbar
abhängig von der Schriftgröße:Buttons, Checkboxen, Labels, Ränder Größenverhältnis visueller Objekte
ist wesentlich für den Gesamteindruck !(Schrift/Komponente, Komponente/Freifläche)
Buttons abhängig von Fenstergröße belegen nur sinnlos Fläche(beliebter Fehler bei Java-Programmierern)
sorgfältig überlegen,welche Komponenten
dynamisch werden sollen
sofern mandie Schriftgröße
überhauptvariabel gestaltet
96
3.5 Dynamisches Layout
Parameter dynamischer Layouts
Fenstergröße großes Fenster ermöglicht Darstellung von mehr Information
und bessere Gestaltung mit Hilfe von Freiflächen begrenzt durch Bildschirmgröße und -auflösung
Schriftgröße idealerweise vom Benutzer wählbar entsprechend individueller
Sehkraft (vgl. Browserschriftgröße und Windows Grafiktreiber) sollte bei hochauflösenden Bildschirmen vergrößert werden Extremfall Touchscreen: dicker Finger statt spitzer Maus
Textlänge abhängig von der Sprache Speichern unter
Save as
97
3.5 Dynamisches Layout
Layout-Raster skizzieren
Fehler
S
Fenstergröße
Schriftgrößeu. TextlängeF(0.5)F(0.5)
F
S
S
S,TRestS,T Rest
IcongrößeF
max(I,S)
Abstände u. Ränder=f(Schriftgröße)
klicken Sie um die Skizze aufzubauen
98
3.5 Dynamisches Layout
Vorgehensweise beim Layout
notwendige Komponenten aus Use Cases ermitteln Komponenten freihändig gruppieren und positionieren Flucht- und Symmetrielinien identifizieren / definieren
Anzahl der Fluchtlinien klein halten Fluchtlinien können gezeichnete Linien
ersetzen: "gutes Design braucht keine (gezeichneten) Linien" Rasterzeilen und -spalten bemaßen
dyn. Layout: abhängig von Schrift-, Fenster- und Icongröße bei mehrsprachigen Anwendungen auch abhängig von Textlänge im allgemeinsten Fall sind alle Maße variabel
(statisches Layout: absolute Koordinaten in Pixel)
Analy
se
Gesta
ltung
K
on
struktio
n
das Auge istsehr empfindlich !
99
3.5 Dynamisches Layout
Auswahl anwendungsfallorientiert
möglichst viel Platz für eine Komponente BorderLayout: im CENTER GridBagLayout: constraint.fill = GridBagConstraints.BOTH
ein paar Komponenten kompakt in einer Zeile oder Spalte in deren jeweils eigener Standardgröße auf JPanel mit FlowLayout (nur Zeile) oder BoxLayout
ein paar Komponenten gleicher Größe GridLayout (evtl. nur 1 Zeile oder 1 Spalte)
komplexes Layout mit vielen Komponenten GridBagLayout und/oder mehrere geschachtelte Panels feste und variable Zellengrößen frei kombinierbar
100
3.5 Dynamisches Layout
Komponentengröße beeinflussen
Eigenschaften von Component können vom LayoutManager berücksichtigt werden
setMinimumSize, setPreferredSize, setMaximumSize gleiche Größe für mehrere Komponenten:
jComp2.setPreferredSize (jComp1.getPreferredSize()); PreferredSize eines Buttons ist z.B. abhängig von der
Schriftgröße dieser Default wird durch explizites Setzen (Wert != null) zerstört
manche Layout-Manager respektieren manche Attribute: Minimum Preferred Maximum
BorderLayout eine RichtungBoxLayout X X XFlowLayout XGridBagLayout (X) fill hat Vorrang (X)GridLayout
Führungselement
Preferred wenn der Platz reicht, sonst
Minimum
101
3.5 Dynamisches Layout
Versuch mit geschachtelten Layouts
SOUTH: 3 horizontale Boxen in 1 vertikalen Box
NORTH: 1 horizontale Box
EAST:vertikale
Box
WEST:entfällt
CENTER:GridLayout
1 Zeile, 2 Spalten
erfordert Feinjustage mittels preferredSize
offenes Problem:variable Breite
kaum einzuhalten
Grid- und Box- in BorderLayout
102
3.5 Dynamisches Layout
besser mit GridBagLayout
Spalte: 0 1 2 3 4
Zeile
1
234
0
Grid;fill=HOR.
horizontale Box; gridwidth=3
gridwidth=2fill=BOTH
alle Zellen in Zeilen 0,2,3,4: fill=HORIZONTAL
gridwidth=2fill=BOTH
größte preferredSize setzt sich durch
103
3.5 Dynamisches Layout
Hörsaalübung
Notepad Editor Bearbeiten, Schriftart Datei, Seite einrichten Bearbeiten, Suchen
DScript Autor Suchen Update, Verzeichnispfade Konfiguration, Betriebsart
"Vorlesung"
Windows Explorer Extras, Ordneroptionen
Windows Taschenrechner
Eigenschaften von Anzeige Darstellung, Farbauswahl
Windows Media Player im Design "Business"
Skizzieren Sie das Layout-Raster und wählen Sie geeignete Layout-Manager !
104
3.5 Dynamisches Layout
Anmerkung zur Schriftgröße
Änderung der Schriftgröße erfordert neues Font-Objekt Methode setFontSize fehlt
Zuordnung des Font-Objekts zu allen betroffenen Komponenten mit setFont
oder setFont(null) für alle
dann erben sie vom Parent nur contentPane bekommt
gewünschtes Font-Objekt zugeordnet
Größe von Buttons besser nicht mittels setPreferredSize manipulieren: die Größe ist damit festgelegt
und orientiert sich nicht mehr an Schriftgröße und Textinhalt
?Bug? beim Erben des Font zusätzliche Aufrufe
erforderlich für JComboBox
setPrototypeDisplayValue(null)
für deren CellRendererPane setFont(font)
105
3.6 Software-Ergonomie
Begriffe (1)
Teilgebiet der Mensch-Computer-Interaktion (human computer interaction HCI) berücksichtigt Psychologie und Physiologie des Benutzers
Software-Ergonomie bezieht sich primär auf Bildschirm-Arbeitsplätze z.B. vorgeschrieben in Bildschirmarbeitsverordnung
(1996, Gesundheitsschutz bei Arbeit an Bildschirmen) übertragbar auf vielerlei Software, Themen nach wie vor aktuell
aktueller unter der Bezeichnung Usability auch für Websites, Mobile Devices, Embedded Systems, ...
106
3.6 Software-Ergonomie
Begriffe (2)
Usability / Gebrauchstauglichkeit ISO 9241-11 definiert Gebrauchstauglichkeit als
"das Maß, in dem ein Produkt von bestimmten Benutzern benutzt werden kann um bestimmte Ziele in einem bestimmten Umfeld effektiv, effizient und zufriedenstellend zu erreichen"
effektiv: Ziel wird genau und vollständig erreicht effizient: Aufwand im Verhältnis zum Ergebnis zufriedenstellend: Wohlbefinden, positives Gefühl bei
Benutzung
Usability Engineering (vgl. Software Engineering) alle Aktivitäten im Produktlebenszyklus, die der
Verbesserung der Usability dienen; iterativer Prozess
107
3.6 Software-Ergonomie
Ergonomische Normen
haben immer nur Richtliniencharakter ergonomischer und technischer Gestaltungsspielraum keine Normung eines Softwareproduktes es gibt nicht "den" Benutzer;
Benutzerrollen müssen individuell charakterisiert werden Rahmenbedingungen (z.B. Arbeitsorganisation,
Arbeitsumgebung) sind unterschiedlich sollen keine bestimmte Implementierung nahelegen
enthalten meist nur Mindestanforderungen Vorschriften und Checkliste helfen nur begrenzt –
entscheidend ist die Sensibilität für Benutzerbelange
notwendig,aber nicht
hinreichend
Standardsversus
Innovation
108
3.6 Software-Ergonomie
Normen zur (Software-)Ergonomie
DIN EN ISO 9241: Ergonomische Anforderungen für Bürotätigkeiten mit Bildschirmgeräten Hardware und Arbeitsplatzgestaltung
- 1: Allgemeine Einführung- 4: Anforderungen an die Tastatur- 5: Anforderungen an Arbeitsplatzgestaltung und Körperhaltung
- 6: Leitsätze für die Arbeitsumgebung- 7: Anforderungen an visuelle Anzeigen bezüglich Reflexionen- 8: Anforderungen an Farbdarstellungen- 9: Anforderungen an Eingabemittel, ausgenommen Tastaturen
http://www.din.de h_da Bibliothek online
sehr praxisorientiertund reichhaltig illustriert:http://www.ergo-online.de
hoch aktuell durch Verbreitung von Notebooks !
109
3.6 Software-Ergonomie
Normen zur Software-Ergonomie
Fortsetzung DIN EN ISO 9241 Aussagen zur Softwareergonomie
- 10: Grundsätze der Dialoggestaltung- 11: Richtlinien zur Gebrauchstauglichkeit- 12: Informationsdarstellung- 13: Benutzerführung- 14: Dialogführung über Menüs- 15: Dialogführung über Kommandosprachen- 16: Dialogführung über direkte Manipulation- 17: Dialogführung über Bildschirmformulare
DIN EN ISO 13407Benutzer-orientierte Gestaltung interaktiver Systeme
enthalten diefolgenden
7 Prinzipien
Usability
110
3.6 Software-Ergonomie
(1a) Aufgabenangemessenheit
Bietet das System die "richtigen" Funktionen ? orientiert an der (Arbeits-)Aufgabe, nicht an der Technik erforscht mittels Anwendungsszenarien bzw. Use Cases
Unterstützung gängiger Arbeitsabläufe Bedienfolgen, Assistenten, Workflow (ggf. mit Anleitung)
Einfachheit statt Featuritis nicht Benötigtes muss der Benutzer gedanklich
herausfiltern
Gewichtung: häufiges einfach, seltenes aufwändiger Nachrangiges erst auf zusätzlichen Knopfdruck keine unnötigen Informationen anzeigen
"Ein interaktives System ist aufgabenangemessen, wenn es den Benutzer unterstützt, seine Arbeitsaufgabe zu erledigen, d. h., wenn Funktionalität und Dialog auf den charakteristischen Eigenschaften der Arbeitsaufgabe basieren, anstatt auf der zur Aufgabenerledigung eingesetzten Technologie."
111
3.6 Software-Ergonomie
(1b) Aufgabenangemessenheit
Effizienz, Antwortzeiten, sinnvolle Vorgabewerte am schnellsten ist eine vermiedene Eingabe
Direktheit: kurze Wege zur Information / Funktion mehrere Dialogebenen Karteireiter Assistenten geschachtelte Pulldown-Menüs Anzahl Mausklicks, Weglänge zur Position, Wechsel zur
Tastatur flexible + schnelle Navigation: Querverweise
(Orientierung?!)
Unterstützung für wiederkehrende Aufgaben Formatierung übertragen, Makro(-recorder),
Tastatursteuerung
112
3.6 Software-Ergonomie
(2a) Selbstbeschreibungsfähigkeit
Systemzustand muss auf einen Blick erkennbar sein
Wo bin ich ? Ort momentaner Aufenthaltsort im System
Was kann ich hier tun ? Modus zur Verfügung stehende Operationen
Wie kam ich hierher ? Weg Vorgeschichte, Kontext
Wohin kann ich gehen ? Weg Ziel eines Buttons (Verweises) soll erkennbar sein
nicht zu verwechseln mit Dokumentation
"Ein Dialog ist in dem Maße selbstbeschreibungsfähig, in dem für den Benutzer zu jeder Zeit offensichtlich ist, in welchem Dialog, an welcher Stelle im Dialog er sich befindet, welche Handlungen unternommen werden können und wie diese ausgeführt werden können."
113
3.6 Software-Ergonomie
(2b) Selbstbeschreibungsfähigkeit
aktuellen Zustand und Kontext darstellen Kontextinformationen (z.B. Verzeichnispfad bei Datei öffnen)
aktuelle Möglichkeiten zeigen Bedienelemente inaktiv machen: besserer Überblick Bedienelemente verbergen: aufgeräumteres Design
visuell direkt erkennbare sensitive Bereiche nicht erst durch "Scannen" (Webseiten , Adventure Games
)
Reaktion / Rückkopplung / Feedback Tasten lassen sich "drücken" bereichs-/objektabhängig veränderlicher Mauscursor
114
3.6 Software-Ergonomie
(2c) Selbstbeschreibungsfähigkeit
keine versteckten Funktionen / Tastaturkürzel alle Tastaturkürzel in Menüs aufführen;
eine Seite in der Dokumentation genügt nicht Icons mit Tooltips beschriften
Information über länger dauernde Abläufe Sanduhr, Fortschrittsanzeige, Zwischenergebnisse Ablauf abbrechbar
Anwender- und problemkompatible Terminologie Begriffe, Befehle, Fehlermeldungen Begriffe aus Anwendungsdomäne aufgreifen
(wie reden künftige Benutzer über ihre Arbeit ?)
115
3.6 Software-Ergonomie
(3) Steuerbarkeit
kein "Eigenleben" des Systems, Benutzer ist der Chef beenden ohne "wollen Sie wirklich ?"
freie Eingabereihenfolge auch bei Validierung von Eingabewerten
(Validierung auf Fensterebene, nicht auf Elementebene)
mehrstufige Rückgängig- (Undo-) Funktion Dialogfolgen und längere Abläufe jederzeit
abbrechbar dem Arbeitstempo angepasste Steuerungsformen
Menü Toolbar Tastatur
"Ein Dialog ist steuerbar, wenn der Benutzer in der Lage ist, den Dialogablauf zu starten sowie seine Richtung und Geschwindigkeit zu beeinflussen, bis das Ziel erreicht ist."
116
3.6 Software-Ergonomie
(4a) Erwartungskonformität
im Widerspruch zu Originalität und Innovation ?! leider wird es oft nur schlechter ...
plattformspezifisches Standardverhalten (Look & Feel) definiert in Style Guides gewohnt, aber leider nicht immer optimal besonders kritisch, weil unterbewusst: Tastatur +
Klickverhalten
Erwartungen aus der Anwendungsdomäne erfassen nicht immer "logisch", historisch gewachsen oft unbewusst (Interview und Fragebogen hilft nicht) Erforschung: Gehwegplanung mittels Trampelpfad auf Gras
"Ein Dialog ist erwartungskonform, wenn er den aus dem Nutzungskontext heraus vorhersehbaren Benutzerbelangen sowie allgemein anerkannten Konventionen entspricht."
117
3.6 Software-Ergonomie
(4b) Erwartungskonformität
Wiedererkennbarkeit und Konsistenz Einsatz von Steuerelementen für typische Aufgaben
Checkbox für einzelnes boolean (schließt kein Fenster) Radiobuttons als Gruppe gegenseitig auslösend
Standarddialoge verwenden Datei öffnen/speichern, Farbauswahl,
Schriftauswahl, Seite einrichten, Drucken typische Mauszeiger-Formen
schlechte Beispiele Strg+Alt+Del zum Anmelden Start Beenden
gute Lösungenfallen nicht auf
118
3.6 Software-Ergonomie
(5) Fehlertoleranz
"Urängste" etwas (am Computer) verkehrt zu machen vertrauensbildende Maßnahmen erforderlich Gefühl Einarbeitung durch Entdeckungsreise ermöglichen
Vorbeugung: Bedienelemente deaktivieren Rückfrage/Warnung bei "gefährlicher" Aktion
Vorsicht: viele lesen nicht, sondern nehmen unbesehen Default
Anwender- und problemkompatible Terminologie kann man das Problem visualisieren?
Möglichkeiten zur Fehlerbehebung vorsehen Rückgängig/Undo, Abbrechen, Papierkorb
Entwickler konzentrieren sich lieberauf die "eigentliche" Funktion
Zustandsanzeige
"Ein Dialog ist fehlertolerant, wenn das beabsichtigte Arbeitsergebnis trotz erkennbar fehlerhafter Eingaben entweder mit keinem oder mit minimalem Korrekturaufwand seitens des Benutzers erreicht werden kann."
StandarddialogJOptionPaneist zu einfach
119
3.6 Software-Ergonomie
(6) Individualisierbarkeit
Anpassung an persönliche Benutzungshäufigkeit Gewohnheiten aus anderen Anwendungen persönliches Systemumfeld
konfigurierbare Toolbars und Menüs eigene Teilmenge definieren; eigene Funktionen als Makros
Favoriten, Last Used, Most Used Zeitabhängigkeiten
Erscheinen von Tooltips, Doppelklick, Repeat-Funktion individuelle Einstellungen sichern und "mitnehmen"
auf anderen Rechner oder bei SW-Upgrade
kein Ersatz fürsorgfältig abgestimmte
Grundeinstellung !
AnpassungmachtArbeit
mal was neues:konfig. Fokussteuerung
"Ein Dialog ist individualisierbar, wenn Benutzer die Mensch-System-Interaktion und die Darstellung von Informationen ändern können, um diese an ihre individuellen Fähigkeiten und Bedürfnisse anzupassen."
120
3.6 Software-Ergonomie
(7) Lernförderlichkeit
damit Einsteiger zu Fortgeschrittenen und Profis werden
ausführliche Hinweisdialoge für Einsteiger mit Checkbox "Dialog künftig nicht mehr anzeigen"
Tooltips für Icons und Buttons viele Bilder und Begriffe müssen erst gelernt werden
Statuszeilentexte für Eingabefelder Tooltip würde Eingabefeld verdecken
kontextabhängige Hilfe für ausführlichere Erklärungen Guided Tour vermittelt Arbeitsabläufe
bei(nicht vor)der Arbeit
lernen
"Ein Dialog ist lernförderlich, wenn er den Benutzer beim Erlernen der Nutzung des interaktiven Systems unterstützt und anleitet."
121
3.7 Usability Inspection
Evaluation der Usability
Systematische Evaluation von Prototypen (mangels fertigem Produkt)
durch QS-Abteilung: Usability Inspection vgl. Code Inspection im Software Engineering Prüfung gegen Richtlinien und Checklisten
durch echte Benutzer: Usability Test Benutzer urteilen subjektiv und unbewusst wichtig: ohne jede Erläuterung / Beeinflussung kann sehr aufwändig werden zum Glück genügen oft schon wenige Test-Benutzer, um die
Hauptprobleme zu identifizieren messbare Kriterien suchen
subjektiv objektiv, qualitativ quantitativ, pauschal konkret
Probleme aus der Anwendungsdomäne
werden leichter übersehen
122
3.7 Usability Inspection
Methoden der Usability Inspection
Heuristische Auswertung einige wenige erfahrene Inspektoren prüfen (einzeln!) gegen
eine kurze Checkliste allgemeiner Regeln siehe nächste Folie vgl. die 7 Grundsätze der Dialoggestaltung im Abschnitt 3.6
auch für neuartige Ansätze geeignet
Cognitive Walkthrough kleine Gruppe spielt typische Anfängeraufgaben durch
Richtlinien Prüfung oder Wertung einzelner Inspektor prüft/wertet gegen detailliertes Regelwerk wird leicht stupide
123
3.7 Usability Inspection
Checkliste für Heuristik
System Status erkennbar was passiert gerade?
System und reale Welt passen Begriffe, Konzepte, Metaphern
Steuerbarkeit und Freiheit Notausgang, Undo, Redo
Konsistenz und Standards Einheitlichkeit der Begriffe,
Konventionen der Plattform Fehlervermeidung
Auswahl statt Eingabe; Zustands-abhängigkeiten vermeiden
Erkennbarkeit statt Erinnerung (Kurzzeit-)Gedächtnis nicht
beanspruchen
Flexibilität und Effizienz Tastaturkürzel, Makros,
Bearbeiten früherer Befehle Ästhetisches und
minimalistisches Design keine unnötigen Informationen
zeigen; weniger ist mehr Erkennung, Diagnose und
Behebung von Fehlern Problembeschreibung im
Klartext, Lösungsvorschlag Hilfe und Dokumentation
aufgabenorientiert, keine reine Replikation der Oberfläche
frei nach Keith Andrews: "Human-Computer Interaction"
124
3.8 Usability Test
Vorbereitung des Tests
Testgegenstand festlegen (der Prototyp, ggf. Teilbereich) Test-Moderator organisiert den Test und wertet ihn aus
Mitarbeiter der Qualitätssicherung oder UI-Designer, nicht Entwickler ggf. zusätzliche Test-Beobachter zur Unterstützung
Test-Benutzer führen den Test durch und werden beobachtet entsprechen idealer weise den Stereotypen mehrere/viele Personen pro Stereotyp für statistische Auswertungen
Testumgebung (Usability Lab) vorbereiten Beobachtung und Protokollierung der Benutzer-Aktivitäten Eye Tracking Systeme, Mouse Capture, Screen Capture
Aufgabenstellung formulieren ganze Anwendungsszenarien und gezielte Teilaufgaben (vorab selbst
testen) Testkritierien definieren (evtl. nur Teilaspekte)
messbare und vergleichbare Daten
besser einerals keiner
125
3.8 Usability Test
Prototypen
Tiefeder
Funktio-nalität
Funktionsumfang
horizontaler Prototyp
Funktionsumfang
vertikaler Prototyp
ganze Oberflächemit nichts darunter
kleiner Ausschnittkomplett realisiert
Handskizzen genügen:"Paper Prototyping"
126
3.8 Usability Test
Eröffnung
Moderator begrüßt Test-Benutzer stellt sich und die Beobachter nur mit Namen vor keine Titel, keine Information über Rolle im Projekt oder
über Beziehung zum Produkt erläutert Zweck des Tests: Sammlung von Infos zur
Verbesserung der Benutzungsschnittstelle betont: das System wird getestet, nicht der Benutzer das System ist neu und kann fehlerhaft arbeiten
erklärt, was und wie aufgezeichnet wird fordert Test-Benutzer auf, Fragen zu stellen
die Fragen werden aber erst nach dem Test beantwortet weist Test-Benutzer auf jederzeitige Abbruchmöglichkeit hin lässt Vertraulichkeitserklärung und Einverständniserklärung
zur Aufzeichnung unterschreiben
127
3.8 Usability Test Durchführung
Thinking aloud – laut denken
Test-Benutzer spricht eigene Gedanken aus bei der Abarbeitung der Aufgabe was er tun will; was er liest; Fragen, die sich stellen;
Verwirrendes; Entscheidungen
Methode liefert massenhaft Informationen, auch unerwartete (besonders wertvoll !)
Auswertung muss eventuelle Missverständnisse nicht aus Aktivitäten erraten
Test-Moderator animiert nur zu lautem Denken Was tun Sie jetzt? Ich kann Sie nicht hören! Was denken Sie? Keinesfalls: Warum tun Sie das? Haben Sie jenes nicht
gesehen?
128
3.8 Usability Test Durchführung
Co-Discovery – zu zweit erforschen
zwei Test-Benutzer erforschen eine Oberfläche gemeinsam
sie interagieren und kommunizieren dabei spontan das wird protokolliert
vermeidet unnatürliche Situation des lauten Denkens
aber: ist eine Benutzung zu zweit realistisch für die Anwendung?
129
3.8 Usability Test Durchführung
Interviews und Fragebogen
Interview Test-Benutzer soll zunächst frei reden später gezielte Fragen und Nachhaken zeitaufwändig, schwer zu vergleichen
Fragebogen Erstellung ist eine Wissenschaft für sich kann eine große Zahl von Test-Benutzern erreichen leicht statistisch auswertbar liefert keine Antworten auf nicht gestellte Fragen ...
130
3.8 Usability Test Durchführung
Observierung
Aufzeichnung typischer Aktivitäten im echten Betrieb Produktivbetrieb vorab mit Testern simulieren eventuell auch noch im Beta-Test
Speicherung in Log-Datei ausgewählte Kenndaten mit Zeitstempel viele Test-Benutzer, statistische Analyse welche Features werden häufig / selten / nie genutzt ?
Videoauswertung ist sehr zeitaufwändig Benutzer sind oft abgeneigt, fühlen sich ausspioniert
erfordert intensive Aufklärung über das Verfahren Anonymisierung, keine persönlichen Daten, Abschaltbarkeit
131
3.8 Usability Test
Auswertung (1)
Effizienz der Interaktion Wie lange dauert die Durchführung einer Aufgabe? Wie viele Aufgaben können in einer vorgegebenen Zeit
durchgeführt werden? Welche Reaktionszeiten zeigen die Testpersonen? Welche Aktionen treten besonders häufig auf? Wie häufig treten ineffiziente Interaktionen auf? Welche Strecke/Fläche wird mit den Augen abgesucht? Welche Strecke wird mit der Maus zurückgelegt? Wie viele Klicks werden benötigt, um eine Aufgabe zu
lösen?
Zeit
Fein-motorik
132
3.8 Usability Test
Auswertung (2)
Auftreten von Bedienfehlern Wie viele Aktionen sind erfolgreich bzw. fehlerhaft? Welche Bedienfehler treten besonders häufig auf? Wie lange dauert die Korrektur von Bedienfehlern? Wie viele positive/negative Kommentare werden geäußert? Wie groß ist der Anteil der Test-Benutzer, der eine Aufgabe
richtig/schnell genug/auf optimalem Weg durchgeführt hat? Wie viele Kommandos (von den verfügbaren) werden
genutzt? Wie oft und wie lange werden Anleitungen oder andere
Hilfsmittel studiert?
133
3.8 Usability Test
Auswertung (3)
Erlernbarkeit Wie lange braucht ein Test-Benutzer, um die
Durchführung einer Aufgabe zu lernen? Wie ist die Vergessenskurve für die Anwendung nach
einer bestimmten Zeit (Tage, Wochen, Monate)?
Subjektive Zufriedenheit Wie fühlt sich der Benutzer / die Benutzerin mit der
Software? sollte erfragt und dokumentiert werden
134
4. Java
Interpreter-Prinzip
Compiler übersetzt Quellcode in Byte Code Quellcode in .java-Datei Bytecode in .class-Datei Bytecode ist hardware-unabhängiger Befehlssatz für
einen Interpreter wird z.B. im Internet übertragen
Java Virtual Machine interpretiert Byte Code zur Geschwindigkeitssteigerung:
Just-In-Time-Compiler übersetzt Byte Code in Maschinencode der Zielhardware
Hotspot VM tut dies partiell für häufig durchlaufenen Code
135
4. Java
Dateitypen und Tools
java
java
class
classEditor Compiler Virtual Machine
Editor Compiler
HH
LIBLIB
Bibliotheken classjar
mindestens eine Klasse
enthält main
hauch IDE mit GUI-Editor
136
4. Java
Java Development Kit (JDK)
http://java.sun.com/javase/7/docs/
137
4. Java
Entwicklung nur mit JDK
JDK enthält alle nötigen Werkzeuge Aufruf von der Kommandozeile (DOS-Box)
Vorgehensweise MeineKlasse.java mit Notepad erstellen JAVAC MeineKlasse.java
Compiler-Aufruf; erzeugt MeineKlasse.class SET CLASSPATH=Pfad1;Pfad2 oder auch
SET CLASSPATH=. damit die Java VM weiß, wo sie die Anwendungsklassen suchen soll
JAVA MeineKlasse oder auchJAVA -classpath Pfad1;Pfad2 MeineKlasse
Aufruf der Java Virtual Machine (Interpreter) MeineKlasse muss eine Methode main enthalten
138
4. Java
IDE Eclipse
Visuelle Objekte "Java-Bean"
Klassenstruktur "Gliederung"
WindowBuilder mit Kompo-
nenten-Palette
Quellcode Editor
vgl. Visual Studio, NetBeans, JBuilder, Rational Application Developer
139
public class HelloCon { // muss in Datei HelloCon.java public static void main(String[] args) { System.out.println ("Hello, World!"); }}
4.1 Programmtypen
Das einfachste Java-Programm
jede .java-Datei muss genau ein public Klasse enthalten Klassenname = Dateiname; Groß-/Kleinschreibung beachten ! weitere Klassen ohne Angabe von public sind möglich
die Java VM braucht ein Klasse mit einer Methode main als Start es gibt keine freistehenden Funktionen in String[] args werden Kommandozeilenparameter übergeben
siehe BeispielApplCon
140
public class System { public static PrintStream out;}public class PrintStream extends FilterOutputStream { public void println(String x) {...} public void println(Object x) {...}}
4.1 Programmtypen
Ausgabe auf die Konsole
der println-Aufruf verwendet obige Klassen der StandardbibliothekSystem.out.println ("Hello, World!");
println ist überladen für alle einfachen Datentypen boolean, int, ... jede Klasse, die von Object abgeleitet ist, hat eine Methode, die
eine Textdarstellung des Objekts abliefert: void toString() neu: System.out.printf wie in C
141
4.1 Programmtypen
Die einfachste GUI-Applikation
Hauptfensterklasse abgeleitet von JFrame (extends) Klassen-Methode static main erzeugt ein einziges Objekt wird nur in temporärer Referenz gespeichert
Schließen des Fensters ist Standardmethode setDefaultCloseOperation sorgt für Beenden der Java VM Alternative zum Beenden der Java VM: System.exit
JPanel wird erzeugt und mit JFrame.setContentPane zugeordnet Attribut setzen: setLayout=null;
JLabel wird erzeugt und mit JPanel.add zugeordnet
siehe BeispielApplMin
142
4.1 Programmtypen
HelloWorld Klassendiagramm
JFrame
MainWindow
JPanel
JLabel
erbt von
Aggregation:optionales Teil
Komposition: notwendiges Teil
Assoziation: kennt
143
4.1 Programmtypen
Zur Lebensdauer von Objekten
grundsätzlich existiert ein Objekt in Java so lange, wie eine Referenz darauf existiert ! manchmal auch ein bisschen länger, wie es dem Garbage
Collector gerade gefällt
warum wird dann die Referenz auf das Hauptfenster in Eclipse GUI-Applikationen nicht gespeichert ? main ist gleich wieder zu Ende die Klasse Frame verwaltet eine eigene Liste von Referenzen
auf alle ihre Instanzen – dadurch bleiben diese am Leben jede Instanz hat einen eigenen Thread – dadurch läuft die VM
weiter
Tricks im generierten Code
144
4.1 Programmtypen
Seitenblick: Applet
zur Einbettung in eine HTML-Seite meist nur für "kleine" Aufgaben – Downloadzeit bedenken ! inzwischen weitgehend von Adobe Flash und HTML+JavaScript
verdrängt spezialisierte Fensterklasse JApplet
Größe wird in der HTML-Seite festgelegt ansonsten Bestückung mit Komponenten wie bei JFrame
Steuerung durch den Browser init Initialisierung beim ersten Aufruf der HTML-Seite start Applet wird sichtbar gemacht (z.B. Animation
starten) stop Applet wird verborgen (z.B. Animation stoppen) destroy das Applet wird entladen (Wechsel der HTML-Seite)
siehe BeispielApplet
145
4.1 Programmtypen
Applets und Sicherheit
Applets aus dem Web sind Code unbekannter Programmierer der Programmierer könnte böse Absichten haben Beschränkungen zur Sicherheit der Nutzer
ein Applet wird in einer "Sandbox" ausgeführt, d.h. es darf nicht auf das lokale Dateisystem zugreifen
es sei denn, der Benutzer lässt es ausdrücklich zu keine Verzeichnisse ansehen, Existenz von Dateien prüfen keine Dateiattribute (Größe, Zugriffsrechte) prüfen keine Dateien lesen, schreiben, löschen, umbenennen keine Netzwerkverbindungen zu irgendeinem Computer
aufbauen die Ausführung nicht über exit() beenden
146
4.2 Grundlagen für Umsteiger
Klassen
public class NeueKlasse extends Basisklasse { ... }
Konstruktor Vorinitialisierungsliste gibt es nicht super(...) ruft den Konstruktor der Basisklasse auf Attribute können an der Deklarationsstelle
oder im Konstruktor initialisiert werden
alle Methoden sind standardmäßig virtuell Schlüsselwort final (="nicht-virtuell") verhindert
Überschreiben
keine separaten Header-Dateien jede Klasse kann zum Testen eine main-Methode
haben
Ableitung
wollten Sie doch schon immer
147
4.2 Grundlagen für Umsteiger
Objekte
Objekte werden immer dynamisch allokiert new liefert einen Zeiger auf das neue Objekt Klasse Objektreferenz = new Klasse (Parameter);
delete gibt es nicht dynamisch allokierter Speicher wird automatisch vom Garbage
Collector freigegeben, nachdem kein Zeiger mehr darauf zeigt der Aufrufzeitpunkt des Garbage Collector ist undefiniert;
das macht das Laufzeitsystem, wann es will
Destruktor gibt es nicht stattdessen Methode protected void finalize(); Aufruf vor dem Garbage Collector – d.h. unter Umständen nie !
148
4.2 Grundlagen für Umsteiger
Initialisierung von Variablen
automatisch initialisiert werden Klassenvariable (=static) Instanzvariable (=Attribute) Array-Komponenten
Initialisierungswerte sind 0 für Zahlentypen false für boolean null für Objektreferenzen
lokale Variable werden nicht automatisch initialisiert ! Zugriff auf nicht initialisierte Variable bringt Fehler
die Initialisierung zu vergessen ist eine
beliebte Fehlerquelle in C++
149
4.2 Grundlagen für Umsteiger
Zugriffsrechte
public, protected, private (fast) wie in C++ protected ermöglicht auch Zugriff aus eigenem Package
jedes Element muss sein eigenes Zugriffsrecht haben Definition gilt (im Gegensatz zu C++) nicht für die folgenden
ohne Angabe bedeutet: private für Klassen public für Interfaces für Attribute und Methoden
nur innerhalb des eigenen Packages verfügbar nicht in abgeleiteten Klassen
stattfriend
inC++
150
4.2 Grundlagen für Umsteiger
Datentypen
Primitive Typen byte (8 Bit), short (16 Bit), int (32 Bit), long (64 Bit),
alle als vorzeichenbehaftete 2er-Komplementdarstellung char (16 Bit vorzeichenlos, Unicode) float (32 Bit), double (64 Bit); beide IEEE Standard 754 jetzt auch enum; früher Klassen mit Konstanten (static final
int) Referenztypen
"Zeiger" für Klassen, Interfaces, Arrays C++ macht dagegen keinen Unterschied zwischen
primitiven Typen und Klassen neue primitive Typen werden in C++ als Klassen realisiert
(CBruch, CComplex, CString)
plattformunabhängig definiert
ab Version 1.5 / 5.0 verfügbar
151
4.2 Grundlagen für Umsteiger
Zeichenketten: String
Klasse String (ähnlich wie STL string) char* gibt es nicht !
Operator + zur Verkettung akzeptiert Werte beliebiger Typen oder Objekte beliebiger Klassen
als Operand; verwendet Methode toString Besonderheit: Operator + allokiert implizit einen neuen String
== ist Referenz- (d.h. Pointer-) Vergleich s1.equals(s2) vergleicht Textinhalte
class Object hat die Methode toString() liefert eine textliche Repräsentation des Objekts jede abgeleitete Klasse sollte diese Methode sinnvoll überschreiben nützlich auch zur Fehlersuche
152
4.2 Grundlagen für Umsteiger
Arrays
sicher durch Indexprüfung zur Laufzeit vgl. Container in STL, CArray in MFC
dynamisch allokierte Objekte float[] vector = new float[3]; float[][] matrix = new float[3][3]; int[] x = {1, 2, 3, 4, 5}; Parameterübergabe als Objekt-Referenz
Zugriff wie gewohnt vector[2] = 5.3; matrix[0][1] = vector[2]; for (int i=0; i<vector.length; i++) { vector[i] = 0; }
Array ist eigentlich 1-dimensional Array.clone() klont bei n-dimensionalen Arrays nur 1 Dimension
Größe wird zur Laufzeit festgelegt und ist dann nicht
mehr änderbar
ein Sprachkonstrukt: Klasse mit spezieller
Syntax
153
4.2 Grundlagen für Umsteiger
Ausnahmebehandlung
wie in C++, aber: throw-Deklaration im Funktionskopf ist ein Muss
der Compiler erzwingt es (ausgenommen RuntimeException) alle möglichen Ausnahmen sollten auch eingefangen werden nur für Objekte von Klassen, die von Throwable abgeleitet sind
hat als direkte Unterklassen: Error (Systemfehler, nicht behandeln) und Exception (Anwendungsfehler, behandeln)
finally-Block hinter try...catch wird in jedem Fall ausgeführt anwendbar beispielsweise zum Freigeben von Ressourcen in C++ macht das der Destruktor automatisch
Exception-Konstruktoren haben i.a. String als Parameter kann mit e.getMessage() zurückgewonnen werden
154
4.2 Grundlagen für Umsteiger
Bibliotheken: Packages
Package ist ein Ordner im Dateisystem enthält mehrere .java-Dateien und Subpackages
(=Unterordner) Zugehörigkeit zu Package package meinpackage;
Import-Anweisung macht andere Packages verfügbar eine Klasse: import
java.util.Vector; alle Klassen: import java.util.*; alle Klassen mit Kurzreferenz: import java.util;
Kurzreferenz ist dann: util.Vector;
weltweit eindeutige Namen für wichtige Packages package de.h-da.fbi.projekt.meinpackage; spiegelt die Schachtelung der Ordner wider
155
4.3 Weitere Details zu Java
Zeiger versus Referenzen
Java Referenzen entsprechen gesicherten C++ Zeigern Java Referenz kann null sein man kann damit z.B. verkettete Listen schreiben Zugriff auf Elemente des Objekts mit . statt ->
ein Pendant zu C++ Referenzen gibt es nicht Objekte werden immer per "call by reference" übergeben primitive Typen immer per "call by value"
größere Sicherheit gegen Programmierfehler es gibt keine Zeigerarithmetik (so kann man sich auch
nicht verrechnen...) man kann kein Objekt löschen, auf das noch Zeiger zeigen
156
4.3 Weitere Details zu Java
Typumwandlung (cast)
Typumwandlung zwischen primitiven Typen ist wohldefiniert nicht einfach andere Interpretation des Bitmusters keine beliebigen Casts zwischen irgendwelchen
Datentypen
Typumwandlung zwischen Objektreferenzen wird zur Laufzeit überprüft nur die Umwandlung zwischen Basisklasse und
abgeleiteter Klasse ist zulässig
157
4.3 Weitere Details zu Java
Interface
ein Interface ist eine abstrakte Basisklasse ohne Elementvariablen, besteht also ausschließlich aus abstrakten Methoden (abstract = pur virtuell in C++) Konstantendefinitionen (public final static) lokalen Klassen
ein Interface kann anstelle einer Klasse zur Typisierung von Variablen und formalen Parametern verwendet werden
spezielle Form der Vererbung class Klasse implements Interface die Klasse muss alle Methoden des Interface implementieren ein Programm hat eine Interfacereferenz und ruft deren
Methoden auf die Interfacereferenz kann dann auf Objekte von Klassen
zeigen, die dieses Interface implementieren
Spezialfall einer abstrakten Klasse
158
4.3 Weitere Details zu Java
Klassenhierarchie
class NeueKlasse extends Basisklasse implements Interface1, Interface2 keine Mehrfachvererbung, nur Einfachvererbung
aber Implementierung mehrerer Interfaces möglich damit wird das Problem in verschiedenen Basisklassen
eventuell doppelt vorhandener Elementvariablen umgangen; virtuelle Ableitung ist daher überflüssig
Besonderheiten eine Klasse muss mit abstract markiert werden, wenn sie
abstract Methoden enthält eine Klasse, die als final markiert ist, kann nicht mehr als
Basisklasse dienen (Anonyme) innere Klassen siehe Kapitel 6. Ereignisbehandlung
159
4.3 Weitere Details zu Java
Mutter aller Klassen: class Object
alle Klassen sind implizit von class Object abgeleitet
public class Object {// liefert Textdarstellung des Objekts:
public String toString() {...}// vergleicht Objekt-Inhalte:
public boolean equals(Object obj) {...}// dupliziert das Objekt:
protected Object clone() // Kopierkonstruktor aus C++ throws CloneNotSupportedException {...}
// Aufruf vor der Garbage Collection: protected void finalize() throws Throwable {...}}
160
4.3 Weitere Details zu Java
plattformunabhängig ?
gut: Wertebereiche primitiver Datentypen festgelegt die Sprache ist meist nicht das Problem,
sondern die Bibliotheken AWT 1.0, AWT 1.1, Swing, SWT vgl. MFC, OWL, Qt Zugriff auf Betriebssystemfunktionen
die Implementation der Virtual Machine und ihrer Bibliotheken wird zur neuen Plattform VMs von Sun, Netscape, Microsoft, ... Versionsnummern
hohe HW-Anforderung: viel Rechenleistung, viel RAM
Java SE, Java EE, Java ME
alter Informatikertraum
161
4.3 Weitere Details zu Java
sicher ?
etliche Methoden mittlerweile "deprecated", weil "inherently unsafe" z.B. Thread.stop(), Runtime.runFinalizersOnExit(...)
Ausführungszeitpunkt von finalize und garbage collector undefiniert Echtzeitanwendungen
Zuweisungen für double und long (64-Bit-Werte) sind nicht atomar d.h. können als 2 Maschinenbefehle implementiert und
damit unterbrechbar sein (müssen aber nicht) Swing ist nicht thread safe
Programmierer machen in jeder Sprache Fehler...
162
4.4 Collection-Klassen
Collection-Klassen
vgl. Standard Template Library STL in C++
JDK 1.0: Vector, Stack, Dictionary, Hashtable, BitSet Enumeration (unübliche Bezeichnung für Iterator); thread safe
JDK 1.2: List, Set, Map empfohlen Iterator; nicht thread safe mehrere Implementierungen (als Array, als verkettete Liste)
"thread safe" bedeutet: bequem, sicher, aber langsam vergeudet Performance wenn nur in einem Thread verwendet
Elemente vom Typ Object d.h. von beliebiger Klasse wegen impliziter Typkonversion einfache Datentypen nur über Wrapper-Klassen
(Integer für int, Double für double, ...) primär zu diesem Zweck eingeführt
die Größe ist (im Gegensatz zum Array)
auch nach der Erzeugung noch
änderbar
163
4.4 Collection-Klassen
Wrapper-Klassen
Klassen Integer, Long, Double ... kapseln einfache Datentypen int, long, double ...
Anwendungen Elemente von Collection-Klassen Datentyp mit null-Wert in Datenbankanwendungen Reflection-API
Ermittlung der Klasse gegebener Objekte zur Laufzeit nicht geeignet für call by reference Parameter, da "immutable"
dafür muss man bei Bedarf eigene Wrapper-Klassen schreiben Automatische Umwandlung bei Bedarf
Autoboxing / Autounboxing bei Wrappern Methode equals anstelle von == verwenden !
VM kann gleiche Zahlen durch ein Objekt darstellen (da "immutable"), muss es aber nicht
Wert kann nicht
verändert werden
164
4.4 Collection-Klassen
Interface Iterator
zum Abarbeiten aller Elemente einer Collection abstrahiert Endebedingung und Fortschalteoperation einer Schleife Nachfolger der veralteteten "Enumeration" (unüblicher Name)
Collection liefert Objekt einer passenden Iterator-KlasseIterator i = c.iterator();
Methodenboolean hasNext(); // vgl.
Enumeration.hasMoreElements() Object next(); // vgl. Enumeration.nextElement()
void remove(); // fehlt in Enumeration
Anwendungwhile (i.hasNext())
verarbeite(i.next());
165
4.4 Collection-Klassen
Klassenhierarchiekurios: einige Methoden sind optional, d.h. sie dürfen beim Aufruf eine Exception werfen ...
diese Klassen sind zurAnwendung vorgesehen
+iterator() : Iterator
«interface»Iterable
+isEmpty() : bool+size() : int+add(ein : Object)+remove(ein : Object)+contains(ein : Object) : bool+addAll(ein : Collection)+removeAll(ein : Collection)
«interface»Collection
+get(ein : int) : Object+set(ein : int, ein : Object)+add(ein : int, ein : Object)+remove(ein : int) : Object+indexOf(ein : Object) : int
«interface»List
«interface»Set
+containsKey(ein k : Object) : bool+containsValue(ein v : Object) : bool+get(ein k : Object) : Object+put(ein k : Object, ein v : Object)+remove(ein k : Object) : Object
«interface»Map
AbstractSet
HashSet
AbstractMapAbstractList
ArrayList LinkedList HashMap
+hasNext() : bool+next() : Object+remove()
«interface»Iterator
AbstractSequentialList
AbstractCollection
Object
TreeSet TreeMap
166
4.4 Collection-Klassen
AbstractList implements List
geordnete Liste von Elementen Zugriff
wahlfrei per Index 0 .. n-1 sequentiell
Implementierungen ArrayList: sich bei Bedarf erweiterndes Array
schneller wahlfreier Zugriff; Einfügen/Entfernen langsam LinkedList: doppelt verkettete Liste
wahlfreier Zugriff langsam; Einfügen/Entfernen schnell add(index, value); get(index); set(index, value);
167
4.4 Collection-Klassen
AbstractSet implements Set
ungeordnete Menge kein Element doppelt - basierend auf Object.equals()
wird beim Einfügen verhindert spätere Änderung eines Elements kann Set ungültig
machen
Implementierung HashSet
add(value); contains(value); remove(value);Vereinigungsmenge: addAll(set); Schnittmenge: retainAll(set);
im Mittel gleicher Aufwand für Einfügen, Löschen und Zugriff
168
4.4 Collection-Klassen
AbstractMap implements Map
assoziativer Speicher bildet Schlüssel auf Werte ab Einfügen eines Schlüssel-Wert-Paares, dessen Schlüssel
bereits vorhanden ist, überschreibt den bisherigen Wert
Implementierung HashMap
get(key); put(key, value); Iterator verfügbar über
values().iterator();"Collection View"
Speicherort wird mit Hash-Funktion berechnet; kollidierende Elemente werden dort in verketteter Liste abgelegt
Hashkey
169
4.4 Collection-Klassen
Generics: typsichere Collections
seit Java 5 kann die Klasse der Elemente definiert werden früher generell class Object,
i.a. per Typecast gewandelt auch weiterhin möglich
(Generics sind optional) keine einfachen Datentypen
als Elemente; dazu weiterhin Wrapper
Überprüfung zur Compile-Zeit Typecast wird überflüssig nicht verwechseln mit
C++ Templates !
ArrayList<Integer> a = new ArrayList<Integer>(50);for (int i=0; i<5; i++) a.add(i, new Integer(i));
Iterator<Integer> it = a.iterator();while (it.hasNext()) { Integer I = it.next(); System.out.println(I);}
for (Integer I : a) System.out.println(I);
oder Autoboxing
Schleife mit
Iterator
neue for-
Schleife statt
Iterator
170
4.5 Dateien und Streams
Streams / Datenströme
Abstraktion für sequentielle Ein-/Ausgabe bzw. Kommunikation (vgl. C++) Datei, Netzwerk, anderer Thread
einheitliches Zugriffsprinzip
Einlesen:
Stream öffnenwhile (Daten im Stream) Daten lesenStream schließen
Ausgeben:
Stream öffnenwhile (Programm liefert Daten) Daten schreibenStream schließen
D P DP
im Package java.io
171
4.5 Dateien und Streams
Byte- und Character-Streams
Byte-Streams abstrakte Basisklassen InputStream und OutputStream Byte-weises Lesen und Schreiben von Binärdaten
Audio, Video, Bilder, Executables
Character-Streams abstrakte Basisklassen Reader und Writer Lesen und Schreiben von Text, d.h. 16 Bit Unicode-Zeichen Zugriff aus verschiedenen Threads ist möglich (synchronized)
ähnliche Methoden für beide Varianten Konstruktor öffnet den Stream Methode close schließt den Stream
wenn close-Aufruf fehlt, tut es der Garbage Collector via finalize
Datentyp byte
Datentyp char
172
4.5 Dateien und Streams
Lesen aus Streams
int read() liest einzelnes Byte/Zeichen und liefert es als Ergebnis ab
int read(byte/char cbuf[]) liest verfügbare Bytes/Zeichen in Array cbuf berücksichtigt Länge des Arrays liefert Anzahl gelesener Bytes/Zeichen als Ergebnis
int read(byte/char cbuf[], int offset, int length) liest maximal length Bytes/Zeichen in cbuf, beginnend an
Position offset alle liefern –1 wenn das Ende des Streams erreicht ist
leider keine benannte Konstante endOfStream o.ä. werfen ggf. IOException
173
4.5 Dateien und Streams
Schreiben in Streams
void write(int c) schreibt Byte/Zeichen c in den Stream
void write(byte/char cbuf[]) schreibt alle Bytes/Zeichen aus cbuf in den Stream
void write(byte/char cbuf[], int offset, int length) schreibt length Bytes/Zeichen aus cbuf in den Stream,
beginnend an Position offset void write(String str)
nur in Klasse Writer void flush()
gibt Pufferinhalt sofort aus (sofern Stream gepuffert ist)
174
4.5 Dateien und Streams
Spezialisierte Streams
Byte-Streams Character-Streams
Datei FileInputStreamFileOutputStream
FileReaderFileWriter
Arbeitsspeicher
ByteArrayInputStreamByteArrayOutputStream
CharArrayReader, StringReaderCharArrayWriter, StringWriter
Thread-Kommunikation
PipedInputStreamPipedOutputStream
PipedReaderPipedWriter
Ausgabeformat
PrintStream (System.out)
PrintWriter
zusätzliche Pufferung
BufferedInputStreamBufferedOutputStream
BufferedReaderBufferedWriter
Zeilen zählen LineNumberInputStream
LineNumberReader
Konvertierung (Zeichensatz)
InputStreamReader liest Bytes, liefert CharactersOutputStreamWriter bekommt Char., schreibt Bytes
I/O
-Medie
nFi
lter
175
4.5 Dateien und Streams
Beispiel: Kopieren einer Textdatei
File inputFile = new File("Source.txt");File outputFile = new File("Destination.txt");FileReader in = new FileReader(inputFile);FileWriter out = new FileWriter(outputFile);int c = in.read();while (c != -1) { out.write(c); c = in.read();}in.close();out.close();
zum Kopieren einer Binärdatei einfach ersetzen durch FileInputStreamFileOutputStream
176
4.5 Dateien und Streams
Zerlegen von Texten: Scanner
zerlegt Text in einfache Datentypen und Strings anhand von regulären Ausdrücken
Scanner s = new Scanner( new BufferedReader( new FileReader("Input.txt")));
einfachen Datentyp extrahieren boolean hasNextDouble() double nextDouble()
String mit Trennzeichen extrahieren void useDelimiter(String pattern) String next()
Alternative falls dasFormat festliegt:DataInputStream
Beispiel "Einlesen einer CSV-Datei"
verbessert die Performance
177
4.5 Dateien und Streams
Wahlfreier Datei-Zugriff
Lesen und Schreiben an beliebiger Position, nicht nur sequentiell verwaltet mittels gemeinsamen read/write-FilePointer
Klasse RandomAccessFile (kein Stream!) Öffnungsmodus: r = nur Lesen, rw = Lesen und Schreiben übliche read- und write-Methoden zusätzlich readType und writeType
mit Type = Boolean, Char, Float, Int, ... long getFilePointer() liefert aktuellen Wert des FilePointer seek(long pos) positioniert FilePointer auf pos
siehe auch java.nio für systemnahe
Zugriffe
haben Streams nicht
178
4.6 Serialisierung
Serialisierung / Deserialisierung
Umwandlung von Objekten in einen Stream (und zurück) insbesondere auch Referenzen auf andere Objekte
verschiedene Streamformate sind möglich Bytestream
nur maschinenlesbar, kompakt, effizient verarbeitbar im Trend: XML-Format
notfalls vom Menschen lesbar, selbstdokumentierend großer Speicherbedarf aufwändiges Generieren und Parsen (aufwändig für die Maschine,
unaufwändig für Entwickler durch vorgefertigte Klassen) Anwendungsbereiche
Persistente Speicherung (typischerweise in Dateien) für Datenbanken wird man Objekte eher in Datensätze abbilden
Übertragung im Netz (remote procedure call, Verteilte Systeme)
179
4.6 Serialisierung
Serialisierung in C++
Serialisierung gibt es in den meisten Sprachen mit spezieller Syntax oder als reguläre Bibliothek
z.B. Bibliotheken für C++ passend zur STL Boost Serialization
http://www.boost.org/libs/serialization/doc/index.html libs11n
http://s11n.net/ Sweet Persist
http://www.sweetsoftware.co.nz/overview.php
z.B. integriert in MFC mit Unterstützung für MFC-Container
180
4.6 Serialisierung
Interface java.io.Serializable
class MeineKlasse implements Serializable "implements Serializable" bedeutet nur:
Entwickler gibt sein OK zur Serialisierung dieser Klasse Vorsicht, wenn die Superklasse nicht serialisierbar ist ! alle Unterklassen sind zwangsläufig serialisierbar
vergleichbar mit einer versteckten impliziten Basisklasse, denn wenn die Standard-Implementierung nicht passt, kann man überschreiben:private void writeObject(ObjectOutputStream out)private void readObject(ObjectInputStream in) private void readObjectNoData() // Initialisierung im SonderfallObject writeReplace() // ersetzen durch anderes
ObjektObject readResolve()
"Markierungsschnittstelle" (definiert keine
Methoden)
181
4.6 Serialisierung
Standard-Implementierung in Java
serialisiert Informationen über die Klasse, aber nicht die Klassendefinition selbst
serialisiert in einen Bytestream serialisiert alle nicht-transienten
und nicht-statischen Elemente serialisiert referenzierte Objekte rekursiv
vorausgesetzt, deren Klasse ist ebenfalls serialisierbar kann auch mit zyklischen Referenzen umgehen
transiente Elemente werden bei der Deserialisierung mit ihrem parameterlosen Konstruktor initialisiert
class Point implements Serializable { int x, y; transient float rho, theta;}
= nicht persistent
182
4.6 Serialisierung
Praktischer Einsatz
Serialisieren FileOutputStream f = new FileOutputStream("datei.ser");ObjectOutputStream s = new ObjectOutputStream(f);s.writeObject("Today"); // ruft string.writeObjects.writeObject(new Date());s.flush(); // optional: Puffer ausgebens.close();
DeserialisierenFileInputStream in = new FileInputStream("datei.ser");ObjectInputStream s = new ObjectInputStream(in);String today = (String)s.readObject();Date date = (Date)s.readObject();s.close();
Typ muss man wissen
183
4.6 Serialisierung
Portabilität serialisierter Objekte
serialisierte Objekte setzen passende Version der Klasse voraus Swing-Objekte sind serialisierbar, aber nicht auf eine andere
Version der Java VM (d.h. der Swing Bibliothek) übertragbar
Kompatibilität wird erkannt anhand einer Versionsnummer explizit vom Entwickler verwaltet:
private static final long serialVersionUID = 27L; alternativ implizit von Java ermittelt
Vorsicht: stark compilerabhängig !
InvalidClassException bei unterschiedlichen Versionen
184
4.6 Serialisierung
Mögliche Probleme
Serialisierung kann heikel sein wenn die Semantik des Objektzustands umgebungsabhängig ist
z.B. Thread-Objekt nur sinnvoll in der aktuellen Virtual Machine z.B. Klasse zur Kapselung einer Datenbank
das Objekt sensible private Elemente beinhaltet, z.B. Passworte
unterschiedliche Versionen der Klasse bei Seriali-sierung und Deserialisierung eingesetzt werden
Serialisierung ist i.a. unproblematisch bei reinen Datenklassen mit kurzer Persistenz nicht für Langzeitarchivierung wegen Abhängigkeit
von der Version der Klasse und der Virtual Machine
Alternative: "handgemachtes" versioniertes (Datei-)Format
mit Fallunterschei-
dung beim Einlesen
Externalizable
185
4.6 Serialisierung
Interface java.io.Externalizable
für Sonderfälle: flexibler, aber aufwändiger das Objekt ist für seine Ein-/Ausgabe selbst
zuständig keine Standard-Implementierung
"normales" Interface: definiert Methoden, die implementiert werden müssenvoid readExternal (ObjectInput in)void writeExternal (ObjectOutput out)
formal ein Subinterface von Serializableinterface Externalizable extends Serializable
186
4.6 Serialisierung
Marshalling / Unmarshalling
allgemeinere Problemstellung Serialisierung ist ein Sonderfall
anordnen / arrangieren von Daten zwecks Austausch zwischen Programmiersprachen Austausch zwischen Prozessen z.B. CORBA, RMI, Microsoft COM, Mozilla XPCOM
Ziel: Plattform- und Sprachunabhängigkeit Byte Ordnung (little-endian, big-endian) Wortbreite (32 Bit, 64 Bit) Repräsentation von Gleitkommazahlen Repräsentation von Zeigern
zur Abgrenzung
und Einordnung
187
4.7 Entwurfsphase mit statischem Layout
Dynamische und statische Layouts
statisches Layout Definition von Koordinaten die Größe und Position der einzelnen Komponenten ist in
einem absoluten Koordinatensystem (z.B. Pixel) festgelegt Bildschirmmaske ist für eine bestimmte Gesamtgröße
gemacht unter Windows gewisse Anpassung über
Bildschirmschriftgröße
dynamisches Layout Definition von Regeln die Größe und Position der einzelnen Komponenten kann von
der Größe bzw. Auflösung des Bildschirms und von der Fenstergröße abhängen
kann plattform- bzw. bildschirmunabhängig gemacht werden aber: schwieriger zu entwickeln
Visual C++
188
4.7 Entwurfsphase mit statischem Layout
Vorgehensweise beim Entwurf
Java unterstützt dyn. Layout mit Layout-Managern Container-Klassen haben default Layout-Manager
wir bauen als Vorstufe zunächst statische Layouts vergleichbar der Arbeitsweise mit MS Visual C++
entscheidende Vorteile: man entwirft visuell und konzentriert sich auf die
Oberfläche; Gestaltung wird nicht durch Realisierungsprobleme eingeengt
man bekommt mit wenig Aufwand einen Prototypen und hat weniger Hemmungen, diesen mehrfach zu ändern
wenn der Entwurf schließlich steht, dann wird ein dynamisches Layout konstruiert
unüblichin Java
189
4.7 Entwurfsphase mit statischem Layout
Starter-Applikation
ausgehend von einer Eclipse Applikation mit Hauptfenster abgeleitet aus JFrame wird eine geeignete Größe für das Hauptfenster gesetzt das BorderLayout durch null (= absolute layout) ersetzt für alle visuellen Komponenten die Größe und
Platzierung im Design-Editor manuell festgelegt
das Beispiel "die einfachste GUI-Applikation" kann als Ausgangspunkt für das Praktikum dienen
190
4.8 GUI Klassenstruktur
Architektur für kleine GUI-Anwendungen
Trennung von GUI, Programmlogik und Datenhaltung vgl. Model / View / Controller Architektur (MVC) View + Controller implementiert durch Fensterklassen
View: Generierung der Widgets im Konstruktor Controller: Event-Handler als Methoden
Model implementiert durch "normale" Klasse(n) wird ggf. persistent durch Serialisierung oder kapselt Datenbank
Partitionierung / Modularisierung der GUI orientiert an Screens und Blöcken innerhalb von Screens
Kapselung spezieller Hardware durch eigene Klasse(n) z.B. Elektronik des Fernsehers (Tuner, Verstärker, ...)
Konkretisierungder
Domänen-modellierung
aus OOAD
191
4.8 GUI Klassenstruktur
Model / View / Controller – Architektur
View
Controller
Model
ViewGUI-Objekte
ControllerEreignisbehandlung
Model(Geschäftslogik)
Datenhaltung
übliche Darstellung angepasst für OO-GUIs
192
4.8 GUI Klassenstruktur
Beispiel Model / View
0102030405060
a b c
0102030405060
a b c
a 20b 50c 30
Mehrere Sichten auf
gemeinsames Datenmodell
Änderungen der Daten
aktualisieren alle Sichten
193
4.8 GUI Klassenstruktur
Beispiel Model / ViewController
Beide Sichten sind interaktiv
und ermöglichen eine Änderung
der Daten
Daten-bank
oft zusammen
194
4.8 GUI Klassenstruktur
Situation mit Eclipse WindowBuilder
generiert Widgets und deren Attribute im Konstruktor
referenziert manche Widgets als Instanzvariable (JTextField),manche im Konstruktor als lokale Variable (JButton)
registriert Event-Handler im Konstruktor (add...Listener)
wird schnell chaotisch ... Zugriff aus Handlern auf das
Fenster und manche Widgets ist schwierig
aufräumen !
private JTextField txtInput;
public MainWindow() {...txtInput = new JTextField();txtInput.setColumns(10);contentPane.add(txtInput);
JButton btnOK = new JButton("OK");
btnOK.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent a) {
}});
contentPane.add(btnOK);}
195
4.8 GUI Klassenstruktur
Alle Widgets zu Instanzvariablen
Problem: lokale Variable im Konstruktor sind aus Event-Handlern nicht erreichbar z.B. für btnOK.setEnabled
to do: im WindowBuilder sofort sinnvolle Namen für jedes Widget eintragen
to do: alle lokalen Widget-Referenzen zu Instanzvariablen machen
private JTextField txtInput;private JButton btnOK;
public MainWindow() {txtInput = new JTextField();txtInput.setColumns(10);contentPane.add(txtInput);
JButton btnOK = new JButton("OK");
btnOK.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent a) {
}});
contentPane.add(btnOK);}
196
4.8 GUI Klassenstruktur
Handler als Methoden der Fensterklasse
to do: neue Methode anlegen widgetName_eventName hat Zugriff auf this und
alle Widget-Referenzen hier wird der "Nutzinhalt"
des Handlers implementiert außerhalb des Konstruktors
to do: neue Methode aus ActionListener aufrufen bei Bedarf das Event-Objekt
als Parameter übergeben
private JTextField txtInput;private JButton btnOK;public MainWindow() {
...JButton btnOK = new JButton("OK");btnOK.addActionListener(
new ActionListener() {public void actionPerformed(
ActionEvent a) {btnOK_actionPerformed();
}});
contentPane.add(btnOK);}protected btnOK_actionPerformed() {}
197
4.8 GUI Klassenstruktur
Statische GUI im Konstruktor verstecken
die Erzeugung der Widgets, deren Verknüpfung (add) und deren Attribute verbleiben im Konstruktor
to do: Konstruktor "zuklappen" und "nicht mehr anschauen"
GUI nur per WindowBuilder weiterentwickeln
to do:try ... catch in jedem Handler einfügen
private JTextField txtInput;private JButton btnOK;
public MainWindow() { ... }
private btnOK_actionPerformed() {try {
// "Nutzinhalt" des Handlers
} catch (Exception e) {e.printStackTrace();
}}
198
4.8 GUI Klassenstruktur
Zugriff auf Model-Objekt
die Model-Klasse wird in main instanziiertBeispiel siehe nächste Folie oder im Konstruktor der Hauptfensters
eine Referenz auf das Model-Objekt wird Instanzvariable der Hauptfensterklasse via Hauptfenster-Objekt in Panelklassen verfügbar
alternativ: Model-Referenz als public static Variable nicht viel besser als eine globale Variable
alternativ: Model als Singleton ok wenn es nur wenige Singletons im System gibt;
sonst auch nicht viel besser als eine globale Variable
gilt entsprechend fürHW-Kapselungsklasse
199
4.8 GUI Klassenstruktur
main-Methode in Hauptfensterklasse
wird so von Eclipse generiert; kann man beibehalten Start der Anwendung ==
Öffnen des Hauptfensters
alternativ: eine eigene Klasse "Applikation" mit main und
Instanziierung von Model und HW-Kapselung
public Model model;
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
public void run() {try {
MainWindow frame = new MainWindow();
frame.model = new Model();frame.setVisible(true);
} catch (Exception e) {e.printStackTrace();
}}
});}
200
4.8 GUI Klassenstruktur
Partitionierung der GUI
GUI Blöcke als eigene von JPanel abgeleitete Klassen
in der Fensterklasse JPanel per WindowBuilder einfügen
im Code manuell ersetzen durch abgeleitete Panel-Klasse
Referenz auf FrameMain per Konstruktorparameter durchreichen an Panelklassen als Owner für DialogConfig Nebenwirkung
imWindowBuilder akzeptieren:
FrameMain extends JFrame
PanelBottom extends JPanel
PanelRight extends JPanel
DialogConfig extends JDialog
für komplexe Screens
201
4.8 GUI Klassenstruktur
Klassendiagramm
Quellcode in DScript Beispiele Programmtypen GUI Struktur
202
4.8 GUI Klassenstruktur
Reaktionszeit und Event Queue
Wichtige Anforderung: die GUI muss jederzeit auf Benutzereingaben reagieren wenn bestimmte Funktionen (vorübergehend) nicht verfügbar
sind, muss das dem Benutzer zumindest visualisiert werden
alle GUI Aktivitäten werden sequentiell im Event Dispatching Thread ausgeführt insbesondere paint/repaint und alle Handler das erspart dem Programmierer die explizite Synchronisation Konsequenz: die Laufzeit der einzelnen Handler muss kurz sein
(sonst "friert die GUI ein" und reagiert nicht auf Eingaben)
203
4.8 GUI Klassenstruktur
Kurze Aktivitäten mit Wait-Cursor
was ist "kurz"? eine Faustregel: wenige 10 Millisekunden: ohne besondere Anzeige bis 1 Sekunde: Cursor "Sanduhr" zeigen mehr als 1 Sekunde: Worker Thread und
JProgressBar
Realisierung der "Sanduhr" mit Component.setCursor und Klasse Cursor:setCursor(Cursor.getPredefinedCursor(Cursor.WAIT_CURSOR));
// eigentliche Aufgabe des Handlers
setCursor(Cursor.getDefaultCursor());
204
4.8 GUI Klassenstruktur
Längere Aktivitäten im Worker Thread
Vorgehensweise Klasse Worker von Thread ableiten
benötigte GUI-Objekte als Konstruktorparameter durchreichen run() überschreiben, darin die Aktivität implementieren Zugriff auf GUI-Objekte mittels SwingUtilities.invokeLater(...)
invokeLater benötigt Instanzen von Hilfsklassen, die das Interface Runnable implementieren
Zugriff auf GUI-Objekte ausschließlich in run() dieser Hilfsklassen
statt Thread Synchronisation:invokeLater platziert Hilfsklasse.run() wie einen Handler in die Event Queue des Event Dispatching Thread
siehe DScript Beispiele
Programmtypen Swing und Worker
Threads
weitere Möglichkeiten: http://docs.oracle.com/javase/tutorial/uiswing/concurrency/index.html
205
5. Fenster, Dialoge, Container
GUI-Bibliotheken in Java SE
AWT - Abstract Window Toolkit verwendete Steuerelemente des Host-Betriebssystems
"native widgets" plattformabhängig schon wieder veraltet (gut, dass Sie es nicht lernen mussten...) 1.1 veränderte gegenüber 1.0 die Ereignisbehandlung
fundamental (Listener statt virtueller Funktionen: ermöglicht Beans)
SWT - Standard Widget Toolkit für IBM Eclipse, ebenfalls "native widgets"
JFC/Swing - Java Foundation Classes rendert mit Java, verwendet nur grafische Primitive des Host-OS austauschbares "Look & Feel" (Java, Windows, Motif, Mac, ...)
zum Download: http://www.jgoodies.com/freeware/libraries/looks/ sehr sauber strukturierte Klassenbibliothek, vielfältig erweiterbar nicht thread safe, deshalb Aufrufe in Event Queue auslagern
die verwenden wir !
206
5. Fenster, Dialoge, Container
Weitere Features von JFC/Swing
beliebige Schachtelung von Container-Objekten Standarddialoge JFileChooser, JColorChooser Model-View-Controller (MVC) Architektur auf der
Ebene der Steuerelemente (Components)
Accessibility Support: Unterstützung für Behinderte Sprachein-/ausgabe, Braille-Zeile etc.
Interface Action zur Bündelung der Aktionen mehrerer Steuerelemente z.B. Menüpunkt + Toolbar Icon + Hotkey:
Multiple Document Interface
207
5. Fenster, Dialoge, Container
Container
sind die „Bauplätze”, auf denen dieBedienelemente aufgebaut werden
eigenständige Fenster JFrame, JWindow, JDialog eingebettet in HTML-Seite: JApplet
Unterteilung von Fenstern JPanel JScrollPane, JSplitPane, JTabbedPane,
JToolBar Multiple Document Interface
JDesktopPane, JInternalFrame(behandeln wir nicht)
208
5. Fenster, Dialoge, Container
Top Level Container
JFrame, JWindow, JDialog, JApplet
haben eine contentPane,die andere Panels oder Komponenten trägt sind Wurzel eines
Objektbaums können eine Menüleiste (JMenuBar) tragen werden normalerweise als Basisklassen genutzt
WindowBuilder leitet für jedes Fenster eine Unterklasse ab wir arbeiten i.a. nur mit der contentPane und nutzen
weitere Panels/Panes zur räumlichen Gliederung
209
5. Fenster, Dialoge, Container
Bereits bekannt: JFrame
mit Fenstertitel, Rand und Min/Max-Schaltflächen
eigene Hauptfenster-Klasse deklarieren public class MainWindow extends JFrame {...}
Fensterobjekt erzeugen (meist in function main) MainWindow thisFrame = new MainWindow();
Layout neu berechnen ohne Layout-Manager: thisFrame.setSize(...);
thisFrame.validate(); mit Layout-Manager: thisFrame.pack();
Fenster sichtbar machen thisFrame.setVisible(true);
Fenster schließen thisFrame.setDefaultCloseOperation(int);
Hauptfenstervon Applikationen;normalerweise nur
ein einzigesJFrame-Objekt
pro Anwendung !
EXIT_ON_CLOSE HIDE_ON_CLOSE (default)DISPOSE_ON_CLOSEDO_NOTHING_ON_CLOSE
JWindow hatdas nicht; für weitereunabhängige Fenster
der Anwendung
210
5.1 Panels und Panes
Räumliche Gliederung
Komponenten werden gruppiert und platziert durch Zuordnung zu Panels und Panes
Panes haben spezifische Sonderfunktionen komplexe Layouts sind möglich durch
Schachtelung von Panels und Panes ( Objektbaum)
jedes Panel/Pane kann einen anderen Layout-Manager haben
für Panels und Panes ist normalerweise keine Ereignisbehandlung erforderlich
PanelTafel, Platte,
(vertieftes) Feld
Pane(Fenster)Scheibe
211
5.1 Panels und Panes
JPanel: einfache Fläche
Fläche, die andere Komponenten trägt bekanntes Beispiel: contentPane JPanel meinPanel = new JPanel();
Layout-Manager zuordnen oder weglassen default ist FlowLayout meinPanel.setLayout(new BorderLayout()); // dynamisches
Layout meinPanel.setLayout(null); // statisches
Layout Komponenten zuordnen
meinPanel.add(aComponent); Umrandung (Border) definieren
Freiflächen und Abstände sind als EmptyBorder realisierbar Erstellung wird durch Eclipse komfortabel unterstützt
(unbedingt generierten Code ansehen !)
212
5.1 Panels und Panes
Rand und Abstand mit Border
Diverse Klassen abgeleitet von AbstractBorder LineBorder, EtchedBorder, BevelBorder, EmptyBorder,
MatteBorder, TitledBorder, CompoundBorder
Implementierung als benanntes Objekt
EtchedBorder myBorder = new EtchedBorder();meinPanel.setBorder(myBorder);
anonymes Objekt meinPanel.setBorder(new EtchedBorder());
gemeinsam verwendetes anonymes Objekt meinPanel.setBorder(BorderFactory.createEtchedBorder());
Interface
213
5.1 Panels und Panes
JScrollPane: verschiebbare Sicht
verschiebbare Sicht auf eine (größere) Komponente JScrollPane zwischen Panel und Komponente
schalten textArea = new JTextArea(5, 30);
JScrollPane scrollPane = new JScrollPane(textArea);contentPane.add(scrollPane);
JList, JTextComponent, JTree, JTable sind dafür vorbereitet implementieren Interface Scrollable; damit wird die
"Skalierung" der ScrollBars definiert:getScrollableBlockIncrement, getScrollableUnitIncrement, getPreferredScrollableViewportSize, ...
andere Klassen können dieses ebenfalls implementieren
empfohlen für komplexe Komponenten
214
5.1 Panels und Panes
JSplitPane: zweigeteilt
zwei Panes durch verschiebbare Trennlinie geteilt
Erzeugen JSplitPane splitPane = new JSplitPane(
JSplitPane.HORIZONTAL_SPLIT, pane1, pane2); Verschiebung durch Mausklick aktivieren
splitPane.setOneTouchExpandable(true); Trennlinie positionieren
splitPane.setDividerLocation(150); // 150 PixelsplitPane.setDividerLocation(0.25); // 25%
Mindestgröße für den Inhalt festlegen pane1.setMinimumSize(new Dimension(100, 50));
215
5.1 Panels und Panes
JTabbedPane: Karteikarten mit Reitern
organisiert mehrere Panes "hintereinander" und mittels Karteireiter umschaltbar sehr gut: Reiter in der 2. Reihe behalten ihre Position
(wechseln nicht die Reihe wie unter Windows) Erzeugen
JTabbedPane tabbedPane = new JTabbedPane(); Karteikarte einfügen und beschriften
tabbedPane.addTab("Titel", icon, pane1, "Tooltip"); Karteikarte aktivieren
tabbedPane.setSelectedIndex(int) tabbedPane.setSelectedComponent(Component)
216
5.1 Panels und Panes
CardLayout: reiterlose Karteikarten
Anwendung ähnlich wie JTabbedPane, aber Umschaltung kann/muss selbst programmiert werden
Erzeugen CardLayout cardLayout = new CardLayout();
JPanel cardPanel = new JPanel();cardPanel.setLayout(cardLayout );
Karteikarte einfügen cardPanel.add(pane1, "Text1"); // Text muss eindeutig sein
Karteikarte aktivieren cardLayout.show(cardPanel, "Text1"); // oder sequentiell:
cardLayout.first(cardPanel); cardLayout.next(cardPanel);
eigentlich keine Pane, sondern ein Layout-Manager
217
5.2 Dialoge
Überblick
ein Dialog ist ein separates Fenster, das über dem Hauptfenster (oder einem anderen Dialog) schwebt wird oft zur Ein-/Ausgabe von Parametergruppen verwendet frei positionierbar, nicht bildschirmfüllend wird von seinem Hauptfenster minimiert
modale Dialoge blockieren das Hauptfenster, solange sie aktiv sind
moduslose Dialoge erlauben die Aktivierung des Hauptfensters Beispiel: Editieren während "Suchdialog" in Textverarbeitung
MessageBox ist einfache Form eines modalen Dialogs
218
5.2 Dialoge
JDialog
für beide Arten: modal + moduslos JDialog (Frame owner, boolean modal)
auch Dialog statt Frame möglich setVisible(true) macht den Dialog sichtbar
blockiert in modalen Dialogen terminiert sofort in moduslosen Dialogen validate() oder pack() notwendig um Layout neu zu berechnen
setVisible(false) macht den Dialog unsichtbar hebt die Blockierung von setVisible (true) in modalen Dialogen
auf zerstört nicht das Dialogobjekt: man kann danach noch auf
seine Daten zugreifen
219
5.2 Dialoge
JOptionPane: Standard-Dialoge
gängige modale Einfach-Dialoge Aufruf durch diverse static Methoden von JOptionPane:
showMessageDialog, showInputDialog, showConfirmDialog diverse Icons zur Verschönerung per Konstante wählbar Button-Kombinationen ebenfalls per Konstante wählbar Auswahl des Benutzers wird Ergebnis der Methodenaufrufe
vergleichbar mit MessageBox unter Windows etwas vergleichbares fehlt in AWT
weitestgehende Konfigurationsmöglichkeit mittelsshowOptionDialog
220
5.2 Dialoge
Spezielle Dialoge
JFileChooser zur Auswahl einer Datei (vollständiger Pfad) Varianten "Öffnen" und "Speichern unter" gewählter Pfad als Ergebnis von getSelectedFile() OK oder Cancel als Ergebnis von showOpenDialog(...)
JColorChooser zur Auswahl einer Farbe static Methode showDialog (parent, title, color) liefert
als Ergebnis ein Color-Objekt Color-Objekt ist null bei Cancel
leider uneinheitlich
5.2 Dialoge
Datenübergabepublic class Hauptfenster extends JFrame {
private JButton jButton = null;private JButton getJButton() {
if (jButton == null) {jButton = new JButton();jButton.addActionListener(new
ActionListener() {public void actionPerformed(ActionEvent e)
{jButton_actionPerformed();
} // this wäre hier ActionListener});
}return jButton;
}private void jButton_actionPerformed() {
MeinDialog d = new MeinDialog(this, "Hallo");d.setVisible(true);System.out.println(d.getTexteingabe());
}}
public class MeinDialog extends JDialog {private JButton OK = null;private JTextField Text = null;public MeinDialog(Frame owner, String
Vorgabe) {super(owner, true);initialize();Text.setText(Vorgabe);
}private JButton getOK() {
if (OK == null) {OK = new JButton();OK.addActionListener(new ActionListener()
{public void actionPerformed(ActionEvent
e) {OK_actionPerformed();
} // this wäre hier ActionListener});
}return OK;
}private void OK_actionPerformed() {
this.setVisible(false);}public String getTexteingabe() {
return Text.getText();}
}
Init
ialis
ieru
ng
Rückgabe
221
222
5.3 Dynamisches Layout
Layout-Manager in Swing
Java unterstützt dynamisches Layout durch verschiedene Layout-Manager-Klassen weil einfach einsetzbar, werden sie in Java eher zu oft verwendet fehlen unter Windows / MFC (könnte man selbst schreiben) verfügbar in .NET seit 2.0 (FlowLayoutPanel, TableLayoutPanel)
ein Layout-Manager-Objekt wird einem Fenster / Panel / Pane zugeordnet und verwaltet dessen Komponenten Layout wird neu berechnet, wenn sich
a) die Fenstergröße ändert oderb) die Wunschgröße (preferred size) einer Komponente ändert
Layout-Manager können geschachtelt werden Freiflächen mittels leerem Rand oder unsichtbarer Komponenten
223
5.3 Layout-Manager
Überblick
224
5.3 Layout-Manager
"Fließtext": FlowLayout
für einfache Reihe von Komponenten Standard bei JPanel
Komponenten behalten eigene Größe (PreferredSize) Panel zu schmal: Zeilenumbruch Panel zu groß: Gruppe oben zentriert (oder
links-/rechtsbündig)
wichtige Attribute: Alignment: CENTER, LEFT, RIGHT Hgap, Vgap: Lücke zwischen Komponenten
leider auch vor/über erster und hinter/unter letzter Komponente(wirkt wie Rand, allerdings nicht bei Zeilenumbruch)
225
5.3 Layout-Manager
FlowLayout Programmfragment
JPanel panel = new JPanel();
FlowLayout fl = new FlowLayout();fl.setAlignment(FlowLayout.LEFT); // Ausrichtungfl.setHgap(9); // horizontale Lückefl.setVgap(12); // vertikale Lückepanel.setLayout(fl);
// oder gleich:panel.setLayout(new FlowLayout (FlowLayout.LEFT, 9, 12)); // (Alignment, Hgap, Vgap)panel.add(jButton1); // usw.: Komponenten hinzufügen
Window.pack(); // bewirkt Berechnung des Layouts
226
5.3 Layout-Manager
Zeile oder Spalte: BoxLayout
senkrechte oder waagrechte Reihe Ausrichtung jeder Komponente individuell wählbar
setAlignmentX/Y (0.0=linksbündig ... 1.0=rechtsbündig) Achtung: Default-Alignment ist unterschiedlich je nach
Klasse ! leere Komponenten als Platzhalter für Freiflächen
RigidArea: Freifläche fester Größe (eine Dimension kann 0 sein)ohne: mit:
Glue: Freifläche, die den "Rest" fülltohne: mit:
Filler: Freifläche mit Minimum-, Preferred- und MaximumSize(ähnlich wie RigidArea, aber variabler)
(Strut: wird nicht empfohlen; besser RigidArea verwenden)
setAlignmentX(0.5)
Glue hält nicht zusammen, sondern drückt auseinander
227
5.3 Layout-Manager
BoxLayout Programmfragment
JPanel panel = new JPanel();
BoxLayout bl = new BoxLayout(panel, BoxLayout.Y_AXIS);panel.setLayout(bl); // oder gleich:panel.setLayout(new BoxLayout(panel, BoxLayout.X_AXIS)); // (Container, Alignment)
// Alignment der Komponente definieren (wichtig!):jButton1.setAlignmentX(Component.CENTER_ALIGNMENT);panel.add(jButton1); // Komponenten + Abstände hinzufügenpanel.add(Box.createRigidArea(new Dimension(5,0)))panel.add(jButton2);panel.add(Box.createHorizontalGlue());panel.add(jButton3);
228
5.3 Layout-Manager
Mitte maximal: BorderLayout
maximiert mittlere Kompo-nente fensterabhängig;reiht andere Komponenten am Rand
Layout-Strategie: CENTER maximalWEST / EAST möglichst schmalNORTH / SOUTH möglichst niedrig
häufig ist außer CENTER nur ein weiteres Feld belegt Felder enthalten oft andere Layout-Manager
optional mit Hgap / Vgap: Lücken zwischen den Feldern
Standard-Layout von JFrame.contentPane
229
5.3 Layout-Manager
BorderLayout Programmfragment
JPanel panel = new JPanel();
BorderLayout bl = new BorderLayout(); // Hgap=Vgap=0panel.setLayout(bl); // oder gleich:panel.setLayout(new BorderLayout(9, 12)); // (Hgap, Vgap)
panel.add(jButton1, BorderLayout.NORTH);panel.add(jButton2, BorderLayout.CENTER);panel.add(jButton3, BorderLayout.WEST);panel.add(jButton4, BorderLayout.SOUTH);panel.add(jButton5, BorderLayout.EAST);
230
5.3 Layout-Manager
Gleiche Tabellenzellen: GridLayout
2-dim. Raster für Komponenten Komponenten werden auf
Rastermaß gestreckt Anzahl der Zeilen und/oder Anzahl der Spalten
muss festgelegt werden Konstruktorparameter oder setRows / setColumns 0 definiert variable Anzahl
(entweder für Zeilen oder für Spalten)
optional mit Hgap / Vgap: Lücken zwischen den Feldern
231
5.3 Layout-Manager
GridLayout Programmfragment
JPanel panel = new JPanel();
GridLayout gl = new GridLayout (3,2); // Hgap=Vgap=0panel.setLayout(gl); // oder gleich:panel.setLayout(new GridLayout (0, 2, 9, 12)); // (Rows, Columns, Hgap, Vgap)
panel.add(jButton1); // Komponenten zeilenweise ...panel.add(jButton2); // von links oben ...panel.add(jButton3); // nach rechts unten ...panel.add(jButton4); // hinzufügenpanel.add(jButton5);
variable Zeilenzahl
232
5.3 Layout-Manager
Universell: GridBagLayout
sehr flexibles Raster-Layout freie Adressierung der Rasterposition Komponenten können gestreckt werden Komp. können sich über mehrere Zeilen
und/oder Spalten erstrecken Andockkante in größerem Rasterfeld wählbar rasterfeldbezogene Füllattribute x- und y-"Gewichte" bestimmen Verteilung von Restplatz
parameterloser Konstruktor, keine wichtigen Attribute aber jede Komponente bekommt ein eigenes
GridBagConstraints-Objekt (reine Datenstruktur) zugeordnet
vgl. HTML-Table
0
1
2
0 1 2
233
5.3 Layout-Manager
GridBagLayout Programmfragment
JPanel panel = new JPanel();GridBagLayout gbl = new GridBagLayout();panel.setLayout(gbl);GridBagConstraints gc = new GridBagConstraints();
gc.fill = GridBagConstraints.HORIZONTAL;gc.gridx = 0; gc.gridy = 0;gbl.setConstraints(jButton1, gc);panel.add(jButton1);
gc.weightx = 0.5;gc.gridx = 1; gc.gridy = 2;gbl.setConstraints(jButton2, gc);panel.add(jButton2);
wird darin geklont (=kopiert) !
nicht dokumentiert; mussman im Quellcode nachlesen
234
5.3 Layout-Manager
GridBagConstraints (1)
int gridx, int gridy adressiert Spalte und Zeile für die Komponente
(Zelle oben links angeben, wenn mehrere Zellen belegt werden)
int gridwidth, int gridheight (default 1) Anzahl der von der Komponente belegten Spalten und Zeilen Sonderfall REMAINDER belegt den Rest einer Spalte bzw. Zeile
fill = NONE (default), HORIZONTAL, VERTICAL, BOTH gibt an, ob und wie die Komponente gestreckt werden soll,
um die ganze Zelle zu füllen int ipadx, int ipady (default=0)
Padding = Innenabstand (d.h. Inhalt der Komponente Rand) vergrößert die Minimalgröße der Komponente um 2*ipadx/y
werden jeder einzelnenKomponente zugeordnet
235
5.3 Layout-Manager
GridBagConstraints (2)
Insets insets (default new Insets (0,0,0,0)) Margin = Außenabstand (d.h. Rand der Komponente Grid) definiert einen Mindestrand um die Komponente für T, L, B, R
anchor = CENTER (default), NORTH, NORTHEAST, EAST, SOUTHEAST, SOUTH, SOUTHWEST, WEST, NORTHWEST definiert den Andockpunkt, falls Komponente kleiner als Zelle
ist double weightx, double weighty
(default=0.0; Wertebereich 0.0 ... 1.0) prozentuale Verteilung von freiem Platz auf Spalten bzw. Zeilen
(max. weightx innerhalb Spalte bzw. max. weighty innerhalb Zeile gilt bei Konflikt zwischen mehreren Zellen)
236
5.3 Layout-Manager
Weitere Layout-Manager
GroupLayouthttp://java.sun.com/docs/books/tutorial/uiswing/layout/
group.html
SpringLayouthttp://java.sun.com/docs/books/tutorial/uiswing/layout/
spring.html
sehr mächtig und sehr elementar nicht für manuelle Programmierung empfohlen gedacht für GUI-Builder eingesetzt in NetBeans IDE
237
5.3 Layout-Manager
Gemischt: statisch und dynamisch
eine Anwendung kann dynamische und statische Layouts in verschiedenen Fenstern bzw. Panels gemischt einsetzen interessant in der Übergangsphase vom statischen Entwurf zur
dynamischen Konstruktion i.a. sind dann "äußere" Fenster dynamisch und
"untergeordnete" Panels statisch für untergeordnete statische Panels müssen MinimumSize,
PreferredSize und MaximumSize definiert werden statische Layouts haben dafür kein Default statische Layouts werden nicht sichtbar,
wenn diese Werte nicht definiert sind !
238
6. Ereignisbehandlung
Konsoledialoge
DOS Box / Konsole / UNIX Shell als Bedienoberfläche das Programm durchläuft nacheinander verschiedene
Zustände jede Eingabe wird mit der Return-Taste bestätigt oder mit der
Escape-Taste abgebrochen der Programmablauf gleicht einem Frage-Antwort-Spiel, in
dem der Computer die führende Rolle übernimmt der Benutzer kann nur die Frage des Computers beantworten
oder den Programmablauf ganz abbrechen und im Fehlerfall wieder komplett von vorne beginnen
der Benutzer reagiert auf die Fragen des Computers der Benutzer bedient den (= dient dem) Computer
vgl. "der Kellner bedient den Gast"
vgl. PG1 / PG2
239
6. Ereignisbehandlung
Ereignisorientierte Programmierung
Bei Programmen mit grafisch-interaktiven Benutzungsoberflächen kann die Reihenfolge der Eingaben beliebig variiert werden Eingabewerte können auch nachträglich geändert werden Neuberechnungen oder Berechnungsvariationen sind einfach
möglich aus Sicht des Entwicklers erfordert diese Art des
Benutzerdialogs zusätzliche Überlegungen der Benutzer entscheidet, was er als nächstes tut
die Aufgabe des Programms besteht nun darin, Benutzereingaben wahrzunehmen und zu interpretieren
für das Programm sind Benutzereingaben Ereignisse, auf die es in geeigneter Weise reagieren muss
das Programm dient dem Benutzer
240
6. Ereignisbehandlung
Ereignisbegriff
Ereignisse (events) werden (meist) vom Benutzer ausgelöst, direkt oder indirekt Ereignisse sind weder Klassen, noch Objekte, noch
Methoden ! Objekte von Event-Klassen sind Parametersätze, die zur
Behandlung von Ereignissen als Zusatzinformation übergeben werden (nicht zu verwechseln mit den Ereignissen selbst)
Ereignisse müssen vom Programm behandelt werden Behandlung erfolgt durch Ausführung eines "Handlers"
(d.h. Funktion bzw. Methode) vgl. die Botschaft (message) unter Windows
informiert über das Ereignis und enthält die Zusatzinformationen wParam und lParam
241
6. Ereignisbehandlung
Aktivitäten und Eventklassen
Aktivität des Benutzers Swing-Eventklasse
Klick auf Button, Return in Textfeld, Menüauswahl ActionEventTabellen- oder Listenauswahl wird geändert ListSelectionEvent
Benutzer schließt das Hauptfenster WindowEventBenutzer drückt Maustaste über Komponente MouseEventBenutzer bewegt Maus über Komponente MouseEvent
(MouseMotionListener)Komponente wird sichtbar ComponentEventKomponente bekommt den Tastaturfokus FocusEvent
sem
anti
clo
w level
242
6. Ereignisbehandlung
Zuordnung von Handlern
Ereignisse werden vom Betriebssystem erkannt oder erzeugt und an die Anwendung weitergeleitet Maus/Tastatur Betriebssystem Anwendung
Basisklassen aus Bibliothek eigene abgeleitete Klassen letztlich sollen Methoden in der Anwendung aufgerufen werden dabei werden i.a. ereignisspezifische Parameter übergeben
(Mauskoordinaten, Tastencode, ButtonID, ...)
Zuordnung: Systemereignis Handler vom Wesen her: Tabelle mit Funktionszeigern
bisher kein Standard; jede Bibliothek macht es anders
243
6. Ereignisbehandlung
bei Komponenten
"normale" Programmierung Zuordnung Ereignis Handler wird zur Compile-Zeit festgelegt erlaubt konstante Arrays von Funktionszeigern oder
virtuelle Funktionen (basieren ebenfalls auf konstanter vtable) Komponententechnik (Java Beans, ActiveX Controls)
Komponente ist ein (normalerweise) visuelles Steuerelement stellt Eigenschaften, Methoden und Ereignisse bereit kann mit der umgebenden Anwendung kommunizieren liegt als fertig kompilierte jar- bzw. ocx-Datei vor Zuordnung Ereignis Handler wird zur Laufzeit festgelegt erfordert dynamische Liste von Funktionszeigern oder Objekten;
in Java: mit Methode add...Listener(Listenerobjekt)
ActiveX Control feuertEreignis an MS Access
244
6. Ereignisbehandlung
Systemvergleich
Visual Basic, Lingo (Director), OpenScript (ToolBook) Zuordnung durch Verwendung vordefinierter
Handlernamen jedes (Steuer-)Element hat eigenes Skript
Director: on mouseUp, on exitFrame gemeinsames Skript für ganzes Formular
Visual Basic: Sub ButtonXyz_Clicked()
Windows API Callback-Funktion mit Ereigniscode
Windows MFC (veraltet) Funktionszeiger über MessageMap zugeordnet typischerweise beim übergeordneten Fenster
sehr übersichtlich:Tabelle bleibt
verborgen
"Tabelle" alsswitch-
Anweisung
Tabelle sichtbar,leicht zu
ignorieren
245
6. Ereignisbehandlung
in Java AWT 1.0 (veraltet)
Basisklasse ruft für jedes Ereignis eine virtuelle Funktion auf
die virtuelle Funktion wird in der abgeleiteten Anwendungsklasse vom Programmierer mit dem Handler überschrieben ähnlich wie das bekanntevoid processWindowEvent(WindowEvent e) {...}
Nachteil: Zuordnung Ereignis Handler zur Compile-Zeit festgelegt; keine Beans möglich
246
6. Ereignisbehandlung
seit Java AWT 1.1 : Listener
benötigt werden eigentlich Zeiger auf Funktionen gibt es nicht in Java (rein objektorientiert)
stattdessen Objekte von Klassen, die eine passende (Handler-)Methode haben Methoden werden spezifiziert als Interface "...Listener" beliebige Klassen können dieses Interface
implementieren,d.h. sich um die (Handler-)Methode ergänzen
Referenzen auf Objekte dieser Klassen werden anstelle von Zeigern auf Funktionen übergeben ("als Listener registriert")
manche Listener-Interfaces definieren nur eine einzige Methode (z.B. ActionListener)
streng OOflexibel
unübersichtlich
247
6. Ereignisbehandlung
Listener und Adapter
manche Listener-Interfaces definieren etliche Methoden oft braucht man aber nur eine oder wenige davon alle notgedrungen zum implementieren wäre unpraktisch
hilfsweise abstrakte Adapter-Klasse mit lauter leeren Methoden
public abstract class MouseAdapter implements MouseListener { public void mouseClicked(MouseEvent e) {} public void mousePressed(MouseEvent e) {} public void mouseReleased(MouseEvent e) {} public void mouseEntered(MouseEvent e) {} public void mouseExited(MouseEvent e) {}}
d.h. nicht für Instanziierung gedacht
248
6. Ereignisbehandlung
Anonyme innere Klasse
eine ganze Klasse zu schreiben, wenn man eigentlich nur eine Methode braucht, wäre ebenfalls unpraktisch
Lösung: eine anonyme Klasse, von der nur ein einziges, ebenfalls anonymes Objekt erzeugt wird ergibt eine zusätzliche Datei Klasse$n.class jButton1.addActionListener(
new ActionListener() { public void actionPerformed(ActionEvent e) { // Nutzinhalt des Handlers } });
hat vollen Zugriff auf alle Variablen der umschließenden Klasse
AnonymeKlasse implements
entfällt (Kurzschreibweise)
249
6. Ereignisbehandlung
Innere Klasse im Vergleich zu C++
Problem: keine Mehrfachvererbung, keine Freunde in Java
MeinFrame abgeleitet von JFrame MeinListener abgeleitet von irgendeinem Adapter
Listener soll Zugriff auf die Elemente von MeinFrame haben in C++ würde
MeinFrame MeinListener zum Freund erklären oder MeinListener von MeinFrame und von Adapter abgeleitet werden
• nicht schön, denn ein Listener ist kein Frame
Ausweg: Listener als innere Klasse von MeinFrame Listener oft als einzige Instanz einer anonymen (namenlosen)
Klasse realisiert
250
6. Ereignisbehandlung
Observer-Pattern zum Vergleich
+Attach(ein Observer)+Detach(ein Observer)+Notify()
-observers
Subject
+Update()
-subject
ConcreteObserver
+Update()
«interface»Observer
+GetState()+SetState()
-state
ConcreteSubject
1 *
*1
for each o in observers { o.Update();}
process(subject.GetState());
return state
+addActionListener(ein ActionListener)+removeActionListener(ein ActionListener)
AbstractButton
+actionPerformed(ein ActionEvent)
anonyme Klasse
+actionPerformed(ein ActionEvent)
«interface»ActionListener
JButton
1 *
*1
Button ist global
Observer-Pattern allgemein angewandt auf Listener
251
6. Ereignisbehandlung
So macht es Eclipse
private JButton getQuit() { if (Quit == null) { Quit = new JButton(); Quit.setText("Quit"); Quit.addActionListener( new java.awt.event.ActionListener() { public void actionPerformed(ActionEvent e) { System.out.println("TODO:actionPerformed()"); System.out.println(Quit.getText()); } } ); } return Quit;}
Zugriff auf Fenster, aber this verweist auf Listener
Handler mit Initialisierung vermischt
252
6. Ereignisbehandlung
So machte es JBuilder
private void jbInit() throws Exception { Quit.addActionListener( new java.awt.event.ActionListener() { public void actionPerformed(ActionEvent e) { Quit_actionPerformed(e); } } );}
void Quit_actionPerformed(ActionEvent e) { // Nutzinhalt; z.B. Messagebox zeigt Button-Beschriftung JOptionPane.showMessageDialog(this,
Quit.getText());}
vgl. Visual Basic: eine Methode pro Komponente und EreignisHandler getrennt von Initialisierung
Variante 1im Beispiel
voller Zugriff auf Fenster
253
6. Ereignisbehandlung
Fenster als Listener seiner Komponenten
import java.awt.event.*;public class Fenster extends JFrame implements ActionListener{ private void jbInit() throws Exception { Quit.addActionListener(this); }
public void actionPerformed(ActionEvent e) { if (e.getSource()==Quit) // oder e.getActionCommand() auswerten // Handler für Button Quit else // Handler für andere Komponenten }}
gemeinsamer Handler für
alle Komponente
n
Variante 4im Beispiel
254
6. Ereignisbehandlung
zum Vergleich: MFC (1)
IDD_EVENT_DIALOG DIALOGEX 0, 0, 80, 70STYLE DS_MODALFRAME | WS_POPUP | WS_VISIBLE | WS_CAPTIONCAPTION "Event"FONT 8, "MS Sans Serif"BEGIN PUSHBUTTON "Increment",IDC_INCREMENT,7,7,66,14 EDITTEXT IDC_DISPLAY,7,28,66,14,ES_CENTER |
ES_READONLY | NOT WS_TABSTOP PUSHBUTTON "Quit",IDC_QUIT,7,49,66,14END
Ressourcendefinition wird mit grafischem Editor erstellt Windows erzeugt daraus unmittelbar die Steuerelemente
MFC stellt Wrapper-Klassen zum Zugriff aus C++ bereit
255
6. Ereignisbehandlung
zum Vergleich: MFC (2)
die MessageMap verknüpft das Ereignis (hier "ButtonClicked") eines Steuer-elements (identi-fiziert per ID) mit seinem Handler
ist eine statische Tabelle und wird vom Assistenten generiert
class CEventDlg : public CDialog {public:
CEventDlg():CDialog(IDD_EVENT_DIALOG){}protected:
virtual bool OnInitDialog() { CDialog::OnInitDialog();
return true; }void OnIncrement() { ... }void OnQuit() { EndDialog (IDCANCEL); }DECLARE_MESSAGE_MAP()
};BEGIN_MESSAGE_MAP(CEventDlg,CDialog)
ON_BN_CLICKED(IDC_INCREMENT,OnIncrement)ON_BN_CLICKED(IDC_QUIT,OnQuit)
END_MESSAGE_MAP()
256
6. Ereignisbehandlung
zum Abschluss: Visual Basic
Private Sub FormEvent_Initialize() TextBox.Value = 0End Sub
Private Sub ButtonIncrement_Click() TextBox.Value = TextBox.Value + 1End Sub
Private Sub ButtonQuit_Click() Me.HideEnd Sub
grafische Attribute erscheinen überhaupt nicht im Programm
kaum objektorientiert
mäßig flexibel genial einfach manchmal kommt
man schon ins Grübeln ...
257
7. Bausteine grafischer Bedienoberflächen
Begriffe
Begriffe uneinheitlich Windows: Control / Steuerelement Motif: Widget Java: Component / Komponente
Begriffsverwirrung: SW-Komponenten heißen dafür Beans
visuelle Klassen Objekte zeichnen sich selbst auf den Bildschirm Erscheinungsbild und Verhalten über Attribute einstellbar
vorzugsweise mittels WindowBuilder Ereignisbehandlung
teilweise im Zusammenspiel mit übergeordnetem Fenster
große Auswahl in Bibliotheken, Eigenkreation möglich
258
7. Bausteine grafischer Bedienoberflächen
Swing Components in Eclipse
Schalt-flächen
Textfelder Auswahl 1 aus n
260
Zustand
Aktion
7.1 Schaltflächen
Schaltflächen: Charakterisierung
Buttons dienen dem Auslösen einer Aktion
meist beschriftet, manchmal mit Bild
können zu Buttonleisten aneinandergereiht werden Gruppen von RadioButtons Toolbars
können inaktiv (disabled) sein haben Boole'schen Zustand
temporär bei JButton permanent bei den anderen (durch Gruppierung auch 1
aus n)
AbstractButton
JButton JToggleButton
JCheckBox JRadioButton
261
7.1 Schaltflächen
JButton: löst nur Aktion aus
Schaltfläche beschriftet mit Text und/oder Icon setText(String); setIcon(ImageIcon);
Ereignisse: actionPerformed(ActionEvent) // beim Anklicken I/O: keine Methoden:
setEnabled(boolean); setVisible(boolean); setActionCommand(String);
// wird Attribut von ActionEvent
getRootPane().setDefaultButton(JButton);// übergeordnete Pane
high level event
262
7.1 Schaltflächen
JToggleButton: Zustand + Aktion
wie JButton, aber mit Zustandsanzeige "gedrückt" (= selected)
Ereignisse: actionPerformed(ActionEvent) // beim AnklickenitemStateChanged(ItemEvent) // bei Zustandswechsel
I/O: isSelected() booleanItemEvent.getStateChange() SELECTED / DESELECTED
Methoden: setSelected(boolean); setEnabled(boolean); setVisible(boolean); setActionCommand(String); // wird Attribut von ActionEvent
263
7.1 Schaltflächen
JCheckBox: Wahrheitswert-I/O
wie JToggleButton, aber mit Zustandsanzeige "Häkchen" (= selected)
Ereignisse: actionPerformed(ActionEvent) // beim AnklickenitemStateChanged(ItemEvent) // bei Zustandswechsel
I/O: isSelected() booleanItemEvent.getStateChange() SELECTED / DESELECTED
Methoden: setSelected(boolean); setEnabled(boolean); setVisible(boolean); setActionCommand(String);
// wird Attribut von ActionEvent
funktional identisch, anderes Aussehen
264
7.1 Schaltflächen
JRadioButton: Auswahl 1 aus n
wie JCheckBox, tritt aber typischerweise in Gruppen auf Gruppe mit gegenseitiger Auslösung:
ButtonGroup grp = new ButtonGroup();grp.add(jRadioButton1);grp.add(jRadioButton2);
logisch: Auswahl 1 aus n (n konstant !) Ereignisse: actionPerformed(ActionEvent) // beim Anklicken I/O: ActionEvent.getActionCommand() String Methoden:
setActionCommand(String); // wird Attribut von ActionEvent setSelected(boolean); etc.
möglich für alleButtontypen,
aber unüblich
265
einzeilig Editor für Text, HTML und RTF mitFormatierung
mehrzeilig
7.2 Textfelder
Textfelder: Charakterisierung
Textfelder dienen der Ein- und Ausgabe von Text
sie integrieren einfache oder komplexe Editorfunktionen Cursor Selektion Kopieren, Einfügen
mehrzeilige Textfelder können scrollen, wenn dieFläche nicht ausreicht
können inaktiv (disabled) sein
JTextComponent
JTextfield JTextArea
JPasswordField JTextPane
JEditorPane
behandeln wir nicht
266
7.2 Textfelder
JTextField: einzeilige I/O + Aktion
für Ein- oder Ausgabe von kurzen Texten oder Zahlenwerten, oft mit anschließender Aktion
Ereignis: actionPerformed(ActionEvent) // bei Return
Methoden: getText(), setText(String)
// Zugriff auf gesamten Inhalt select(int start, int end), selectAll()
// markiert (selektiert) Text
Konvertierung:int Zahl = Integer.parseInt(TextFeld.getText());TextFeld.setText(String.valueOf(Zahl));
entsprechend für Byte, Double, Float, Long, ShortWrapper-Klassen für einfache Typen
Behandlung von Formatfehlern vorsehen!
267
7.2 Textfelder
JTextArea: mehrzeilige I/O
für Ein- oder Ausgabe von mehrzeiligen Texten kann scrollen, wenn innerhalb einer JScrollPane platziert:
JTextArea ta = new JTextArea(5,80);JScrollPane scp = new JScrollPane(ta);contentPane.add(scp);
Ereignis: actionPerformed(ActionEvent) // bei Return Methoden:
getText(), setText(String) // Zugriff auf gesamten Inhalt append(String); // hängt Text am Ende an insert(String, int); // fügt Text an Position ein replaceRange(String, int, int); // ersetzt einen Textbereich
beliebiger,aber einheit-licher Font
268
7.2 Textfelder
Wertebereichsüberprüfung
"action validated" Überprüfung des eingegebenen Werts, nachdem
"Return" gedrückt wurde Zwischenstände bei der Eingabe spielen keine Rolle und
dürfen "falsch" sein bequem zu Editieren im actionPerformed-Handler vor der Weiterverarbeitung
"change validated" Inhalt eines Textfeldes muss jederzeit korrekt sein
"Zwischenstände" beim Editieren werden ständig kontrolliert
je nach Eingabesyntax ist eine Korrektur durch den Benutzer mit einem Zeichen gar nicht möglich Software muss korrigieren
im keyTyped-Handler
269
7.3 Auswahllisten
Auswahllisten: Charakterisierung
Lineare, ungegliederte Liste oft besser als Textfeld mit Gültigkeitsüberprüfung
Einfachauswahl (1 aus n) oder Mehrfachauswahl (m aus n)
Vorteile gegenüber Gruppe aus Radiobuttons: große Zahl von Listenelementen ist möglich, aber:
Überschaubarkeit und Suchaufwand für den Benutzer bedenken
Listenelemente können zur Laufzeit geändert bzw. datenabhängig geladen werden
ComboBox als platzsparende Variante Bedienung ist umständlicher
270
7.3 Auswahllisten
JList: sichtbare Liste
Einfach- oder Mehrfachauswahl Strings oder Icons als Elemente ( ListCellRenderer für andere) Listenelemente aus Object[] oder DefaultListModel
Konstantenliste am besten über String Werte[]={...}; kann scrollen, wenn innerhalb einer JScrollPane platziert
Ereignis: boolean valueChanged(ListSelectionEvent)// Auswahländerung
I/O: int, Object oder Array// Index oder ausgewähltes Objekt
Methoden: boolean getValueIsAdjusting() // wird Auswahl noch geändert?
(dynamisch)
String
271
7.3 Auswahllisten
JList: Auswahlmodus und Selektion
Auswahl des Auswahlmodusjl.setSelectionMode(ListSelectionModel.SINGLE_SELECTION);
SINGLE_SELECTION int getSelectedIndex() Object getSelectedValue()
SINGLE_INTERVAL_SELECTION int getMinSelectionIndex() int getMaxSelectionIndex()
MULTIPLE_INTERVAL_SELECTION int[] getSelectedIndices() Object[] getSelectedValues()
Auswahl mit Festhaltender Umschalt-Taste
Auswahl mit Festhaltender Strg-Taste
272
7.3 Auswahllisten
JComboBox: ausklappbare Liste
nicht editierbar: Auswahl 1 aus n, auch Icons statt Texteditierbar: wie Textfeld mit Vorgaben cb.setEditable(true); // false ist Standard
statische oder dynamische Liste wie bei JList Ereignis: actionPerformed(ActionEvent)// Auswahl oder Return
I/O: int oder Object ( String oder ImageIcon)
Methoden: setSelectedIndex(int), int getSelectedIndex() // Index cb.getSelectedItem().toString() // Text (ImageIcon)(cb.getSelectedItem()) // Bild
"Dropdown Box"
273
7.3 Auswahllisten
Dynamische Listen
Änderung der Listenelemente zur Laufzeiterfordert Objekt der Klasse DefaultListModel dieses enthält die Daten und informiert JList bzw.
JComboBox über Änderungen
DefaultListModel Daten = new DefaultListModel();JList Listbox = new JList(Daten);JScrollPane ScrollPane = new JScrollPane(Listbox);contentPane.add(ScrollPane);Daten.addElement("neuer Eintrag");Daten.insertElementAt("noch ein Eintrag", 5);Daten.removeElementAt(0);
// oder removeElement(Object)
fast identischfür JList undJComboBox
DefaultComboBoxModel
bzw. einer Klasse die das Interface
ListModel implementiert
siehe auch class AbstractListModel
274
7.3 Auswahllisten
ImageIcon: statische Bilder
Buttons, Labels, Listen etc. können Icons darstellen Icons haben eine beliebige, aber feste Größe Darstellung von Bildern mit variabler Größe Abschnitt "7.7
Grafik" Bilddateiformat GIF, JPEG oder PNG
am einfachsten mit Bildbearbeitungsprogramm erstellenund in Datei ablegen
GIF und PNG auch mit transparentem Hintergrund ("freigestellt")
ImageIcon Bild = new ImageIcon("Verzeichnis/Bild.gif");JLabel Label = new JLabel();Label.setIcon(Bild);
ImageIcon Bilder[] = { new ImageIcon("Bild0.gif"), new ImageIcon("Bild1.gif") };JComboBox ComboBox = new JComboBox(Bilder);
nicht nur in Listen
für JAR-Datei:this.getClass().getResource("...")
275
7.4 "Analogwerte"
JSlider: analog mit Einrasten
nur grobe Einstellmöglichkeit per Maus wahlweise mit "Einrasten" bei Ticks:
setSnapToTicks(true) spezielle Beschriftung mittels Hashtable
(Assoziativtabelle, Schlüssel/Wert-Paare)
Ereignis: stateChanged(ChangeEvent) I/O: void setValue(int); int getValue() Eigenschaften:
setMinimum(-20); setMaximum(80);setMinorTickSpacing(5); setMajorTickSpacing(20);setPaintLabels(true); setPaintTicks(true);
276
7.4 "Analogwerte"
JProgressBar: reine Anzeige
zur Anzeige länger dauernder Abläufe beruhigt den Benutzer
Alternative: Klasse ProgressMonitor macht Dialog auf
Ereignis: keines
Output: void setValue(int)
Eigenschaften:setMinimum(-20); setMaximum(80);setOrientation(JProgressBar.VERTICAL);
277
7.4 "Analogwerte"
JScrollBar: meist für Fenster
grobe Einstellmöglichkeit per Maus Feineinstellung mit
Unit Increment (Klicken auf Buttons) und Block Increment (Klicken auf Leiste)
Ereignis: adjustmentValueChanged(AdjustmentEvent)
I/O: void setValue(int); int getValue()
Eigenschaften: setMaximum(90); setMinimum(-20); setBlockIncrement(20); setUnitIncrement(2);
278
7.5 Komplexe Datenstrukturen
Model / View / Controller – Architektur
View
Controller
Model
ViewGUI-Objekte
ControllerEreignisbehandlung
Model(Geschäftslogik)
Datenhaltung
übliche Darstellung angepasst für OO-GUIs
279
7.5 Komplexe Datenstrukturen
Beispiel Model / View
0102030405060
a b c
0102030405060
a b c
a 20b 50c 30
Mehrere Sichten auf
gemeinsames Datenmodell
Änderungen der Daten
aktualisieren alle Sichten
280
7.5 Komplexe Datenstrukturen
Beispiel Model / ViewController
Beide Sichten sind interaktiv
und ermöglichen eine Änderung
der Daten
Daten-bank
oft zusammen
281
7.5 Komplexe Datenstrukturen
JTable: Charakterisierung
mehrspaltige Tabelle, Datenfelder editierbar Spalten in der Breite veränderbar und vertauschbar kann scrollen, wenn innerhalb einer JScrollPane
platziert Spaltenüberschriften scrollen nicht mit !
Tabelle fester Größe durch Initialisierung mit Array verwendet Object[][] als Datenmodell
Tabelle variabler Größe oder mit dynamischer Datenquelle über eigenes Datenmodell
CellRenderer und CellEditor spaltenbezogen definierbar z.B. CheckBox für boolean, ComboBox für 1 aus n, Icon
282
7.5 Komplexe Datenstrukturen
Model / View Architektur bei JTable
konsequente Trennung zwischen Datenhaltung und Sicht auf die Daten z.B. Datenhaltung: ArrayList von Arrays z.B. Sicht: 2-dim. Tabelle mit Spaltenüberschriften
aufwändiger zu handhaben, aber flexibler Standard-Datenmodell für einfache Fälle
Zusammenspiel von Model und View wird über Interfaces organisiert wird in Swing durchgängig eingesetzt (nicht nur bei JTable) Model-Klasse implementiert Interface TableModel
Interface definiert Art des Zugriffs auf die Daten View-Klasse implementiert Interface TableModelListener
Interface definiert Art der Information der Oberfläche über Änderungen
ArraysArr
ayLi
st
ArrayList ist ein Array
variabler Länge
283
7.5 Komplexe Datenstrukturen
Model / View als Observer-Pattern
+Attach(ein Observer)+Detach(ein Observer)+Notify()
-observers
Subject
+Update()
-subject
ConcreteObserver
+Update()
«interface»Observer
+GetState()+SetState()
-state
ConcreteSubject
1 *
*1
+addTableModelListener(ein TableModelListener )+removeTableModelListener(ein TableModelListener )+getRowCount()+getColumnCount()+getValueAt(ein row : int, ein column : int)+setValueAt(ein object, ein row : int, ein column : int)
-listenerList
AbstractTableModel
+JTable(ein dataModel : AbstractTableModel)+tableChanged(ein TableModelEvent)
-dataModel : AbstractTableModel
JTable
+tableChanged(ein TableModelEvent)
«interface»TableModelListener
+setPosition(ein index : int)+sort()
DVBTChannelList
1 *
*1
das bekannteObserver-Pattern
Model/View-Architekturam Beispiel JTable
als Observer-Pattern
284
7.5 Komplexe Datenstrukturen
Zugriff über Interface TableModel
Index der selektierten Zeile(n) holen jTable.getSelectionModel().getMinSelectionIndex() jTable.getSelectionModel().getMaxSelectionIndex()
TableModel (Datenmodell) erhältlich mit: jTable.getModel()
Methoden von TableModel: int getRowCount() int getColumnCount() Object getValueAt(int Zeile, int Spalte) Object setValueAt(Object, int Zeile, int Spalte) void addTableModelListener(TableModelListener l)
so lässt sich JTable als Listener über Datenänderungen informieren
285
7.5 Komplexe Datenstrukturen
Abstract Class AbstractTableModel
vereinfacht die Implementierung von TableModel verwaltet eine Liste von TableModelListener-Objekten (d.h. Views)
nur dateninhaltsbezogene Methoden von TableModel müssen implementiert werden getRowCount, getColumnCount und getValueAt muss man selber
schreiben zu diesem Zweck muss man endlich die Datenstruktur definieren
setValueAt hat eine leere Implementierung für Read-Only-Daten bietet Methoden zur Information der Listener (=View)-Objekte
über Änderungen der Daten fireTableCellUpdated, fireTableChanged, fireTableDataChanged,
fireTableRowsDeleted, fireTableRowsInserted, fireTableRowsUpdated, fireTableStructureChanged
286
7.5 Komplexe Datenstrukturen
JTree
für hierarchische Gliederung von Einträgen vgl. Kapitelstruktur eines Buches statisch (fester Inhalt) oder dynamisch (änderbar zur Laufzeit)
Ereignis: valueChanged(TreeSelectionEvent e)
Zugriff auf selektierten Eintrag:e.getPath().getLastPathComponent().toString() // TextTreePath jTree.getSelectionPath()// TreePath Object[](DefaultMutableTreeNode) // cast von Object
(jTree.getSelectionPath().getLastPathComponent())boolean isSelectionEmpty()
287
7.5 Komplexe Datenstrukturen
DefaultMutableTreeNode
Standard-Knotentyp von JTree für statische und dynamische JTrees jedem Knoten kann ein beliebiges Object als "Inhalt" zugeordnet
werden, z.B. im einfachsten Fall ein String mutable: Knoten können hinzugefügt, entfernt und geändert
werden hat 1 übergeordneten Knoten (parent)
Ausnahme: Wurzelknoten hat keinen parent hat ein "Array" von untergeordneten Knoten (children)
werden senkrecht unter ihrem parent dargestellt Enumeration children(); int getChildCount(); TreeNode getChildAt(int childIndex);
bietet diverse Enumerations (Iteratoren) zum Durchwandern des Unterbaums (preorder, postorder, breadthFirst, depthFirst)
288
7.5 Komplexe Datenstrukturen
Tree als binärer Baum
weitere mögliche Sicht eines Tree Interface TreeNode:
ein Knoten hat optionaleine geordnete Liste von Unterknoten
Klasse DefaultMutableTreeNode:ein Knoten hat optional einen Kind-Knoten und optional einen Geschwister-Knoten linker Unterknoten(-baum) verfügbar über
getNextSibling() rechter Unterknoten(-baum) verfügbar über
getFirstChild()
+ Name
NextSibling
FirstChild
Knoten
289
7.5 Komplexe Datenstrukturen
DefaultTreeModel
notwendig für dynamische JTrees einfügen, löschen, verschieben von Einträgen informiert JTree über Änderung an seinen Einträgen Einträge auch editierbar
DefaultMutableTreeNode root = new DefaultMutableTreeNode ("Text");DefaultTreeModel model = new DefaultTreeModel(root);JTree jDynTree = new JTree(model);
model.insertNodeInto(newNode, parent, parent.getChildCount());model.removeNodeFromParent(selected);
291
7.6 Menüs
JMenuBar, JMenu: Hauptmenü
platzsparende Form der Gruppierung mehrerer Buttons normale Schaltflächen, aber auch Checkboxen und
Radiobuttons vorzugsweise für "globale" Funktionen ermöglicht hierarchische Gliederung durch Kaskadierung
gut geeignet zum Erforschen einer unbekannten Anwendung relativ umständlich zu bedienen, besonders bei Kaskadierung
am oberen Rand von JFrame, JDialog, JAppletJMenuBar meinMenu = new JMenuBar();this.setJMenuBar(meinMenu);
Ereignisbehandlung über ActionListener der MenuItems wie bei Buttons
292
7.6 Menüs
Aufbau eines Menüs
Objekte erzeugenJMenu jMenuEdit = new JMenu();JMenuItem jMenuItemCut = new JMenuItem();
Attribute setzen // weitere siehe ButtonsjMenuEdit.setText ("Edit"); jMenuItemCut.setText ("Cut");jMenuItemCut.setEnabled (false);
Objekte verknüpfenjMenuBarMain.add (jMenuEdit);jMenuEdit.add (jMenuItemCut);jMenuBarMain.add (Box.createHorizontalGlue()); // nächstes rechtsjMenuEdit.addSeparator (); // Trennlinie
ist in Eclipse am einfachsten in der Java
Beans Ansicht aufzubauen
293
7.6 Menüs
JPopupMenu: Kontextmenü
verborgenes Menü belegt keine Bildschirmfläche, aber Benutzer muss
suchen
typischerweise für objektbezogene Funktionen verschiedene Objekttypen haben verschiedene
Kontextmenüs
Menüaufbau wie beim Hauptmenü JPopupMenu jPopupMenu = new JPopupMenu();
JMenuItem jMenuItemCut = new JMenuItem();jMenuItemCut.setText ("Ausschneiden");jPopupMenu.add (jMenuItemCut);
294
7.6 Menüs
Kontextmenü-Ereignisbehandlung
Aufruf aus MouseListener des sensitiven Objektsvoid mouseReleased(MouseEvent e) { if (e.isPopupTrigger()) jPopupMenu.show( e.getComponent(), e.getX(), e.getY());}
Zugriff auf zugehöriges Objekt und MenuItemvoid actionPerformed(ActionEvent e) { JMenuItem actItem = (JMenuItem)e.getSource(); JPopupMenu actPopup = (JPopupMenu)actItem.getParent(); JObject angeklicktesObjekt = actPopup.getInvoker(); // irgendetwas damit machen}
unter Windows und Motif mit rechtem
Mausklick; für andere OS
zusätzlich mousePressed
295
7.6 Menüs
Toolbars
Menüs werden häufig ergänzt durch Toolbars schnellerer Zugriff für Fortgeschrittene
der Toolbar enthält eine häufig verwendete Teilmenge der Menü-Funktionen als Gruppe von Buttons, meist mit Icons gekennzeichnet kann vom Rand des Fensters "abgerissen" werden
(hoch/quer) oft vom Benutzer selbst konfigurierbar
Icons sind fast nie selbsterklärend; sie müssen gelernt werden ! eine gute Hilfe dazu sind Tooltips (d.h. Texte, die nur
erscheinen, wenn die Maus auf dem Button verweilt)
296
7.6 Menüs
JToolBar
Objekte erzeugenJToolBar jToolBar1 = new JToolBar();JButton jButtonCD = new JButton();
Attribute setzenjButtonCD.setIcon (new ImageIcon("Icons/img_cd.gif"));jButtonCD.setToolTipText ("CD abspielen");
Objekte verknüpfen (die contentPane muss ein BorderLayout haben)
contentPane.setLayout(new BorderLayout());// eigentlich defaultcontentPane.add(jToolBar1, BorderLayout.NORTH);jToolBar1.add (jButtonCD, null);jToolBar1.addSeparator (); // Abstand einfügen
für JAR-Datei:this.getClass().getResource("...")
297
7.7 Grafik
Direkte Grafikausgabe
Painting: ein Teil der Benutzungsoberfläche wird durch eigenen Code gezeichnet z.B. Erstellung eigener Komponenten, Anzeige von
Dokumenten, Visualisierung von Zuständen, ... (Neu-)Zeichnen kann vom System oder von der Anwendung
veranlasst werden System: erstmalige Darstellung der Komponente, Änderung der
Größe, Komponente war verdeckt und wird wieder sichtbar Anwendung: Änderung des visualisierten Zustands oder der
visualisierten Daten Anwendung ruft repaint() auf jegliche Grafikausgabe wird durch Überschreiben einer
einzigen Methode implementiert void paintComponent(Graphics g) // für Swing-
Komponenten void paint(Graphics g) // für AWT-Komponenten
298
7.7 Grafik
Grafik Kontext
Hilfsmittel zum Zeichnen: abstract class Graphics wird nicht instanziiert, sondern als Parameter an paint
übergeben
Clip: Fläche, die aktualisiert werden soll allerlei nützliche Methoden
get/set Clip/Color/Font Text darstellen: drawString Bild aus Datei: drawImage grafische Primitive
drawLine/Polygon/Rect/RoundRect/Arc/Oval fillPolygon/Rect/RoundRect/Arc/Oval
y
x0Koordinaten
299
7.7 Grafik
Beispiel: Bild anzeigen
import java.awt.*; import javax.swing.*; public class PictPanel extends JPanel {
private Image Pict = null;public PictPanel() {
super();this.setLayout(null);Pict = getToolkit().getImage("bild.jpg");
}protected void paintComponent(Graphics g) {
super.paintComponent(g); // zeichnet den Hintergrund
g.drawImage(Pict, 0,0, getWidth(),getHeight(), this);}
}
Laden vorbereiten
linke obere Ecke skaliert auf Panelgröße
registriert sich als ImageObserver(wird nach Laden des Bildes aktualisiert)
für JAR-Datei:this.getClass().getResource("...")
auch mit variabler Größe
300
7.7 Grafik
Grafikausgabe beschleunigen (1)
Aufwand zur Aktualisierung der eigenen Komponente reduzieren
Einfachster Fall: repaint() verursacht Neuzeichnen der gesamten Komponente genügt für einfache Komponenten Pixel außerhalb des Clip-Bereichs werden ohnehin nicht
ausgegeben Tuning: nur den Teilbereich neu zeichnen, der von einer
Änderung betroffen ist ("dirty region", "smart painting") bei Anforderung mitteilen:
void repaint(int x, int y, int width, int height) beim Zeichnen auswerten:
Graphics.getClip() bzw. Graphics.getClipBounds()Beispiel: http://java.sun.com/docs/books/tutorial/uiswing/painting/index.html
301
7.7 Grafik
Grafikausgabe beschleunigen (2)
unnötige Aktualisierung anderer Komponenten vermeiden
boolean isOpaque(); void setOpaque(boolean o) Eigenschaft soll das Verhalten der paint-Methode signalisieren
Konsistenz Opaque/Paint muss der Entwickler sicherstellen ! das Verhalten der Komponente wird i.a. nicht durch setOpaque geändert
• Ausnahme: JLabel, JTextfield, ...
true: Komponente zeichnet jedes Pixel in ihrem Bereich darunter liegende Komponenten werden nicht neu gezeichnet
false: Komponente zeichnet nicht jedes Pixel Hintergrund scheint durch
z.B. auch für Look & Feel mit runden Ecken boolean isOptimizedDrawingEnabled() { return true; };
true: Komponente garantiert, dass untergeordnete Komponenten sich nicht überlappen und nicht aktualisiert werden müssen
true für alle Komponenten außer JLayeredPane, JDesktopPane und JViewPort
ggf. überschreiben
blickdicht, nicht transparent
302
7.8 Drag & Drop
Mentales Modell und Anwendungsbereiche
GUI Operation mit zwei Parametern: Quelle und Ziel verschiebt ein Objekt auf bzw. in ein anderes
verschiebt Datei in anderen Ordner verschiebt ein Objekt an eine andere Position
verschiebt markierten Text in Textverarbeitung verschiebt Element in einer Liste (manuelles Sortieren)
übergibt ein Objekt an ein anderes übergibt Dokument an Anwendung
Operation wird erst beim Fallenlassen ausgeführt davor "nur" visuelles Feedback an Benutzer
nicht verwechseln mit z.B. Malen im Malprogramm Operation wird "unterwegs" ausgeführt
303
7.8 Drag & Drop
Zustandsdiagramm allgemein
Objekt wird gezogen
Maus ist irgendwo
Maustaste drücken / Quellposition speichern Cursor = Faust Visualisierung aktivieren
Maustaste loslassen / Zielposition erfassen Cursor = Hand Visualisierung deaktivieren Operation(Quelle, Ziel)
Maus verschieben / Visualisierung aktualisieren
Maus ist über Objekt
Maus geht über Objekt / Cursor = Hand
Maus verlässt Objekt / Cursor = Standard
Maus innerhalb Objekt / —
die Cursor-Änderung
signalisiert eine mögliche
Interaktion
304
7.8 Drag & Drop
Low Level mit Swing
source != null
! isObjectPosition()
mousePressed / MouseEvent.getPoint() Toolkit.createCustomCursor paintComponent(...)
mouseReleased / MouseEvent.getPoint() paintComponent(...) Operation(Quelle, Ziel)
mouseDragged / paintComponent(...)
isObjectPosition() && source == null
mouseMoved / Cursor.HAND_CURSOR
mouseMoved / Cursor.DEFAULT_CURSOR
mouseMoved / —
siehe Beispiel4.10 Drag & Drop
entspricht mouseMoved bei gedrückter Taste; in anderen
Systemen steht nur mouseMoved zu Verfügung
Objekterkennung und Painting selbst implementiert
305
7.8 Drag & Drop
Abstract Class DragAndDropable
implementiert die Mouse Handler mit Zustandsverwaltung und Cursor-Umschaltungund provoziert das Neuzeichnen via repaint() void onMoved(Point source) void onPressed(Point source) void onDragged(Point actualPosition) void onReleased(Point destination)
delegiert an die Subklasse MovableFigure boolean isObjectPosition(...) Mapping Point Object void visualize(...) Objektdarstellung beim
Schieben void operation(...) die eigentliche
Nutzfunktion
siehe Beispiel4.10 Drag & Drop
306
7.8 Drag & Drop
High Level mit Swing
Kopieren bzw. Verschieben von Objekten zwischen verschiedenen JComponents Mapping Point Object übernimmt Swing
Beispiele und Details siehe
http://java.sun.com/docs/books/tutorial/uiswing/dnd/index.html