Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Entwicklung nutzerorientierter Anwendungen Wintersemester 2013/2014 Prof. Dr.-Ing. Bernhard Kreling Hochschule Darmstadt Fachbereich Informatik.

Ähnliche Präsentationen


Präsentation zum Thema: "Entwicklung nutzerorientierter Anwendungen Wintersemester 2013/2014 Prof. Dr.-Ing. Bernhard Kreling Hochschule Darmstadt Fachbereich Informatik."—  Präsentation transkript:

1 Entwicklung nutzerorientierter Anwendungen Wintersemester 2013/2014 Prof. Dr.-Ing. Bernhard Kreling Hochschule Darmstadt Fachbereich Informatik

2 2 1. Einführung Lernziele der Veranstaltung zBenutzerzentrierung verinnerlichen yhuman computer interaction yKundenorientierung zGrafische Benutzungsoberflächen yintuitiv und ergonomisch gestalten yvisuell ansprechend entwerfen yobjektorientiert konstruieren zKonzept der Ereignisorientierung verstehen zBausteine grafischer Oberflächen kennen lernen z... und das alles in Java mit Swing

3 3 1. Einführung Inhalte zUser Research: Stereotypen, Szenarien zSW-Technik: Use Case Analyse, GUI-Diagramme yTrennung Datenverarbeitung/Oberfläche, Dokument/Ansicht zScreen Design und Ergonomie yGruppierung, Formen, Farben, statisches / dynamisches Layout zJava Kurs für Kenner von C++ zGUI-Implementierungstechniken yBausteine: Datentypen, Attribute, Ereignisse yFenster und Dialoge, Layout-Manager yEreignisbehandlung zGute Beispiele, schlechte Beispiele Voraussetzung: PG1 bestanden, PG2 begonnen

4 4 1. Einführung Praktikum zSemesterprojekt: Entwurf, prototypische Realisierung und Optimierung eines Systems yvage Aufgabenstellung (wie im richtigen Leben) ykein Erfolgserlebnis: man findet immer noch bessere Lösungen – darin liegt der Erfolg ! yProblembewusstsein wird erst im Lauf des Semesters entstehen, deshalb sind optimierende Iterationen wichtig zProjektmappe mit Dokumentation und Software ysemesterbegleitend erstellen und pflegen yzu Beginn jeder Übung mit Ergebnissen der vorigen vorlegen ydient Ihnen selbst in jeder Übung als Planungsunterlage top-down bottom-up ?

5 5 1. Einführung Klausur zmit Papier und Bleistift yHilfsmittel: das Skript und sonstige eigene Unterlagen (nicht die des Nachbarn) auf Papier sind als Hilfsmittel zugelassen zTermin und Anmeldung im Online Belegsystem zZulassungsvoraussetzung: yregelmäßige und erfolgreiche Teilnahme am Praktikum yVorlage der vollständigen Projektmappe beim 6. Termin

6 6 1. Einführung Literatur (HCI und UID) zKeith Andrews: Human-Computer Interaction yhttp://courses.iicm.tugraz.at/hci/hci.pdf zM. Dahm: Grundlagen der Mensch-Computer-Interaktion zShneiderman, Plaisant: Designing the User Interface zAlan Cooper: About Face - The Essentials of User Interface Design zIvo Wessel: GUI-Design zOracle: Java Look and Feel Design Guidelines yhttp://www.oracle.com/technetwork/java/jlf html zFrank Thissen: Screen Design Handbuch zHans-Peter Wiedling: Skript zur Parallelveranstaltung zRalf Hahn: Skript "Objektorientierte Analyse und Design"

7 7 1. Einführung Literatur (Java) zGuido Krüger: Handbuch der Java-Programmierung yhttp://www.javabuch.de/ zDavid Flanagan: Java in a Nutshell, O'Reilly zOracle: The Java Tutorial yhttp://docs.oracle.com/javase/tutorial/ zOracle: Java Standard Edition API yhttp://docs.oracle.com/javase/7/docs/api/ zOracle: Java Language Specification yhttp://docs.oracle.com/javase/specs/ zEclipse Online Hilfe yF2, Open External Javadoc

8 8 1. Einführung Entwicklungsumgebung zEclipse mit WindowBuilder yJava Applikation für Windows, Linux, Mac OS X ybraucht viel Arbeitsspeicher und großes Display xWindows:512 MB mindestens; 768 MB empfohlen xLinux, Mac OS:1 GB empfohlen xNetbooks eher nicht geeignet ykostenlos im Web xVariante "Eclipse IDE for Java Developers" xenthält als GUI Editor den "WindowBuilder" zHomepage mit Download yhttp://www.eclipse.org/

9 9 2. Softwaretechnik für Benutzungsschnittstellen Übersicht: Analyse und Entwurf zVisionsdokument zErforschung der Benutzer und Anwendungsszenarien yauch Workflows zAnwendungscharakter und Modell yNicht-funktionale Anforderungen zAnwendungsfallanalyse yUse Case Diagramm (UML) und Beschreibung zNavigationsübersicht zScreen-Diagramme yabstrakt: Bedien- und Anzeigeelemente nur aufgelistet ykonkret: Layout-Skizze zKlassen- und Sequenzdiagramme (UML) yjeder Screen wird Objekt einer eigenen Klasse UOAD User Oriented Analysis and Design Ergänzung zu OOAD, nicht Gegenposition

10 10 2. Softwaretechnik für Benutzungsschnittstellen Visionsdokument zSinn und Zweck der Anwendung/Website zwelche Ziele sollen erreicht werden? zwelche (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 Benutzer kennen und verstehen Admins und User – ein Zerrbild zso unterteilen Informatiker gerne die Menschheit zAdmins kennen sich aus und haben die Macht zUser haben keine Ahnung yWorst Case Betrachtung: DAU – dümmster anzunehmender User völlig falscher Ansatz

12 Benutzer kennen und verstehen Benutzer charakterisieren zwelche Leute sollen mit dem System arbeiten ? zwas sind ihre eigentlichen Aufgaben und Ziele ? yin welchem Zusammenhang nutzen sie das System ? zwie kann man sie im Allgemeinen und im Hinblick auf das System charakterisieren ? yseltene / häufige / ständige Nutzer, Anfänger / Fortgeschrittene / Profis xbezüglich der Anwendungsdomäne xbezüglich der Anwendung xbezüglich Rechner und Betriebssystem yinteressiert / widerwillig ? lernfähig / starr ? yKontextwissen ( inhaltliche Tiefe und Terminologie) ? Der DAU ist nicht blöd ! Er hat einfach nur Wichtigeres zu tun im Stress ?

13 Benutzer kennen und verstehen Stereotype zlebendige, anschauliche Steckbriefe typischer Vertreter der Benutzergruppen yName, Bild, Alter, Geschlecht, Ausbildung, Vorlieben, Hobbys, Charaktereigenschaften ytypisches Verhalten, auch im Hinblick auf das System ynicht durchschnittlich, lieber markant, dennoch glaubwürdig z"Durchschnittsbenutzer" führen zu durchschnittlichen Entwürfen "Stereotyp" ist hier sozialwissenschaftlich gemeint, nicht im Sinn der UML

14 Benutzer kennen und verstehen Stereotype und Benutzerrollen zreale BenutzerInnen werden zusammengefasst zu Benutzergruppen zBenutzergruppen werden veranschaulicht durch Stereotype yrealitätsnahe Schilderung vordergründig irrelevanter Details ywenn echte Menschen bekannt sind, braucht man keine Stereotype ydient der Überprüfung der folgenden Abstraktion zBenutzergruppen werden abstrahiert zu Benutzerrollen yhaben unterschiedliche Anwendungsfälle ybekommen differenzierte Zugriffsrechte ybekommen unterschiedliche Hilfe-Informationen zBenutzerrollen werden später implementiert yerscheinen als Akteure im Use Case Diagramm nicht zu früh die Vielfältigkeit der BenutzerInnen wegabstrahieren! englisch: Persona

15 Benutzer kennen und verstehen Anwendungsszenarien zein Hilfsmittel, um den Gesamtzusammenhang zu sehen, bevor man sich dem Systementwurf widmet zdas künftige System und seine Benutzer in größerem Kontext schildern yhilfsweise kann man vorab Szenarien für das bisherige System schreiben ySzenarien werden für bestimmte Stereotype geschrieben z"Geschichten" über yBenutzer und Nicht-Benutzer xz.B. Verwaltungsmitarbeiter und deren Kunden yZiele und Aufgaben yLebenssituation, Arbeitsumfeld, Workflows zBeispiele: yhttp://www.fbi.h-da.de/online-belegsystem/dokumentation/ein-szenario.htmlhttp://www.fbi.h-da.de/online-belegsystem/dokumentation/ein-szenario.html yÜbung: Ingo I. braucht ein Zwischenzeugnis für eine Bewerbung

16 Benutzer kennen und verstehen Szenario Use Case Beschreibung zAnwendungsszenario yanschaulich yauch Umfeld der Akteure yumfassend, überlappend yunvollständig und ungenau yignoriert Fehler z Use Case Beschreibung ytrocken ynur Akteure und System yklar abgegrenzt yvollständig und präzise yberücksichtigt Fehler Use Cases werden später aus den Anwendungsszenarien erarbeitet

17 Benutzer kennen und verstehen Methoden der Benutzerforschung zInterviews / Expertengespräche yinformelle Gespräche mit Kennern der Anwendungsdomäne zFokusgruppe ymoderierte Diskussion einer kleinen Gruppe künftiger AnwenderInnen ygeringer Aufwand, qualitative Ergebnisse ybringt neue Aspekte, auch Antworten auf nicht gestellte Fragen zFragebogen yquantitative (evtl. statistisch gesicherte) Ergebnisse yErgebnisse können nicht besser sein als die Fragen xdie "richtigen" Fragen zu stellen ist nicht trivial woher kommt das Material für Stereotype und Szenarien ?

18 Benutzer kennen und verstehen Fallen umgehen zBenutzer(in) beschreibt seine/ihre eigene Aufgabe, definiert nicht das System yumgangssprachlich, informell, inkonsistent yzwischen den Zeilen lesen – auf Feinheiten achten zgängige Regeln des guten Brainstormings einhalten y"schwierige" oder unkonventionelle Ideen aufgreifen, nicht im Keim ersticken zInterviewer/Moderator ohne vorgefasste Meinung ykeine vorzeitige Festlegung auf Architektur- oder Implementierungsideen yGesprächspartner nicht beeinflussen

19 Benutzer kennen und verstehen z.B. Fahrkartenautomat zkleine, große, alte, junge, mit Sehschwäche... yund dann scheint noch die Sonne auf's Display zwegfahren zu Termin / Besuch /... zganz unterschiedliche Nutzungshäufigkeit zinteressiert? nein zlernfähig? manche zStress? aber sicher! ydie Straßenbahn droht abzufahren

20 Benutzer kennen und verstehen z.B. Online Belegsystem zStudierende yFb Informatik, Fb Media, sonstige Fb, Austausch, CNAM yein Anwendungsszenario: zLehrende zSekretärinnen zFachbereichsassistentin zAnwendungs-Administrator zSystem-Administrator zESE-Tutoren zLaboringenieure

21 Benutzer kennen und verstehen z.B. Stundenplanungssystem zSekretärin:Eingabe von Wunschzetteln Ausdrucken von Plänen Beantworten von Anfragen zProdekan:Lehrveranstaltungsplanung (wer macht was) zStundenplaner:Stundenplanung (wann und wo) charakterisieren Sie die Benutzergruppen ! ist der LV- Bedarf klar? hat er eine Strategie?

22 Anwendungscharakter und Modell Nicht-funktionale Anforderungen ztechnischmöglichst gering halten yClient: Browser ab HTML 4.1, CSS, Frames, JavaScript aktiviert yClient Bildschirm 1024 x 768 Pixel yminimale Transferrate 56 kBaud yBenutzer muss -Adresse haben ymindestens 100 Benutzer gleichzeitig; Meldung bei Überlast y... zgestalterischCreative Design Brief yAnwendungscharakter, Stil, Stimmung xfreundlich, hilfsbereit, seriös, verspielt, nüchtern, provokativ,... xAnrede des Benutzers: Du / Sie yCorporate Identity yFarbschema y...

23 Anwendungscharakter und Modell Charakter von Anwendungen zU-Software ySpiele yFunware yFotoalbum, Videoschnitt zE-Software yBildbearbeitung, Videoschnitt yOffice-Anwendungen yKommerzielle Datenverarbeitung xin diesem Stil machen wir das Praktikum ! yMaschinensteuerungen zwohin gehören Fahrplanauskunft, Geldautomat, Ticketservice,... ? in Anlehnung an U- und E-Musik fließende Übergänge

24 Anwendungscharakter und Modell Modelle eines Systems zModelle sind vereinfachte Darstellungen einer Wirklichkeit yvgl. Atommodelle in der Chemie a) mentales Modell ySicht des Benutzers; anwendungsorientiert b) augenscheinliches Modell ywie sich das System nach außen darstellt c) Implementierungsmodell ySicht des Entwicklers; technologisch orientiert yinteressant für die Wartung, nicht für den Benutzer kein Modell entspricht der "Wahrheit" Ziel von Analyse und Entwurf: Diskrepanz dieser Modelle vermeiden !

25 Anwendungsfallanalyse Anwendungsfälle (Use Cases) zhier nur zur Erinnerung ysiehe Skript R. Hahn: Objektorientierte Analyse und Design zTeil der Unified Modeling Language UML zHigh-Level-Beschreibung eines Systems yerfasst die Benutzerrollen / Akteure yerfasst, was diese mit dem System machen ydas System wird als Black Box betrachtet zrückt immerhin den Menschen in den Blick ! ynicht Datenstrukturen und -flüsse zbeschreibt nicht die Struktur des Systems ! aber arg abstrakt

26 Anwendungsfallanalyse Use Case Diagramm (Geldautomat) Kontostand abfragen Geld holen Geldvorrat prüfen Geldkarte laden Geld nachfüllen Kunde Geldautomat eingezogene Scheckkarten entnehmen Mitarbeiter Use Cases entsprechen oft der obersten 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 Anwendungsfallanalyse Use Case Diagramm (Belegsystem) die Sekretärin braucht keinen zusätzlichen Fachschafts- Account um die Zugzuordnung einzutragen, d.h. jede(r) hat nur eine Rolle zur Übersicht vor dem Entwurf der Benutzungsoberfläche

28 Anwendungsfallanalyse z.B. Use Cases eines Buchs zder Leser? der gründliche Leser, der eilige Sucher, der Schenkende zFachbuch = System zur Informationsspeicherung yvon Anfang bis Ende lesenumblättern yÜberblick bekommenInhaltsverzeichnis yInformation zu einem Thema suchenInhaltsverzeichnis yDetailinformation / Stichwort suchenIndex yWiederauffinden einer StelleLesezeichen yweiterführende Information findenLiteraturliste yKaufentscheidung treffenInhaltsverz., Klappentext, Leseprobe zvgl. Grundfunktionen eines Browsers zvgl. dagegen einen Roman

29 Anwendungsfallanalyse z.B. Dokument- statt Datei-Menü zdas bekannte Datei-Menü ist nahe am Betriebssystem yfür einige Funktionen muss man die Datei erst schließen zwie wollen Benutzer mit Dokumenten arbeiten ? yoffenes Dokument umbenennen oder verschieben yversionsorientiert: Meilensteine yÄnderungen vergessen statt Schließen und wieder Öffnen zdas Beispiel ist problematisch, weil Benutzer dateiorientiertes Arbeiten gewohnt sind...

30 Anwendungsfallanalyse Beispiel: anwendungsfallorientiert Stundenplaner Prodekan Sekretärin

31 Anwendungsfallanalyse Gegenbsp.: datenstrukturorientiert

32 Anwendungsfallanalyse Von Use Cases zu Screens zScreen = Fenster, Maske, Seite, View zjeder Use Case wird in einen Screen abgebildet yName des Use Case wird Titel des Screens yggf. weitere untergeordnete Dialoge bei komplexen Use Cases ykeine Funktionen oder Daten in einen Screen, die nicht unmittelbar zu diesem Use Case gehören ! zGruppierung der Screens nach Benutzerrollen ybesser: Identifikation des Benutzers durch Anmeldung und Ausblendung der Use Cases anderer Benutzerrollen; jeder Benutzer bekommt nur Screens "seiner" Rolle zu sehen zHauptfenster enthält Übersicht der Use Cases yund verzweigt dorthin Entwurf der Grobstruktur des Dialogsystems im primitivsten Fall eine Liste ein Ansatz, aber kein Rezept, sondern ein kreativer Prozess

33 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äche mit Bezug auf die geplanten Bedienelemente

34 Abläufe Workflow zein Arbeitsablauf (Workflow) verkettet mehrere Anwendungsfälle verschiedener Benutzer (Mitarbeiter) yBeispiel: Bestellung verbuchen Lieferung zusammenstellen Lieferschein schreiben Rechnung schreiben Zahlungseingang verbuchen yMetapher: der Weg einer Akte durch eine Verwaltung ytypischerweise wird der nächste Mitarbeiter vom System durch eine Botschaft informiert, wenn der vorige seine Teilaufgabe erledigt hat zkann mit Flussdiagramm / Programmablaufplan oder spezialisierten Tools dargestellt werden

35 Abläufe Beispiel zum Workflow Stundenplaner Prodekan Sekretärin auf Benutzungsoberfläche visualisiert

36 Abläufe Assistent zAssistenten geben dem Benutzer einen Ablauf vor zAssistenten serialisieren ydie Abfrage mehrerer Eingabewerte eines Use Cases oder ymehrere Use Cases, die nacheinander ausgeführt werden müssen ywichtig: später Abbruch nur auf Wunsch des Benutzers ! zVorteil: Benutzer muss zu einem Zeitpunkt nur über eine Frage nachdenken ysinnvoll für selten benutzte Anwendungsfälle oder für unerfahrene Benutzer zNachteil: langsam und schwerfällig für Profis

37 Abläufe Beispiele zu Assistenten a) Geldautomaten kennen wir nur als Assistenten ydie Benutzung ist i.a. schon zäh... yzum Vergleich der bekannte Geldautomat mal nicht als Assistent: b) Online Shop yWare in Warenkorb yAdresse eingeben yVersandart wählen yZahlungsweise wählen yBestellen

38 GUI-Diagramme Sinn und Zweck zkein geeignetes Diagramme für GUI-Entwurf in UML yUML konzentriert sich auf die Architektur von SW-Systemen yvernachlässigt den visuellen Aspekt zein GUI wird zwar mit Klassen realisiert, anhand eines Klassen- oder Kommunikationsdiagramms kann man sich aber kein Bild von Aussehen und Benutzung machen ! zVorschlag: Navigationsübersicht + Screen-Diagramme yim Grunde abgewandelte Zustandsdiagramme

39 GUI-Diagramme vgl. Flow Chart zum Vergleich eine Flow Chart aus dem Bereich Design (auch Seitenstruktur oder Contentogramm genannt) aus Fröbisch, Lindner, Steffen: "MultiMediaDesign - Das Handbuch zur Gestaltung interaktiver Medien"

40 GUI-Diagramme vgl. Zustandsdiagramm aus an do/leuchten ausschalteneinschalten Lampe offen geschlossen öffnenschließen/rumms Tür Übergangsaktion Zustandsaktion

41 GUI-Diagramme Navigationsübersicht (abstrakt) Session spezielle Form eines Zustandsdiagramms übersichtlich durch "Bus" Knoten = Screens/Fenster/Seiten Übergänge = Bedienelemente Login für Studierende leer Stunden- pläne Was tun wenn... Tipps & FAQ Restplatz- belegung Passwort ändern Persönliche Daten Meine Belegungen Logout timeout Kontakt 1AWP Inf.allebelegte FAQ Belegungen kontrollieren Terminplan Belegfristen Vermerke zu... Legende zu... am Beispiel des OBS (Ausschnitt) Passwort vergessen? 1. Login

42 GUI-Diagramme Navigationsübersicht (detailliert) Dozenten Deputatserm. Studienprog.Lehrverans.Raum+Zeitw.Stundenplan Dep. Hauptmenü FB Schwerp. St.gang Dup.Bel. Dup.Kür. Kontextm. Übersicht mit Workflow Use Cases Pop-Ups R rechter Mausklick Raum zurück Notation und Vereinfachungen: – Zustände als Screenshots – Übergänge i.a. mit Linksklick – Rmit Rechtsklick – Rücksprung / Schließen

43 GUI-Diagramme Legende zur Navigationsübersicht Anwendung zstarten zbeenden Aktionen zneues Hauptfenster zneuer Dialog/PopUp zRücksprung Ereignisse zkeine Angabe: linker Mausklick zrechter MausklickR Zustände z Screen-Name (abstrakt im Entwurf) z Layout-Skizze (konkret im Entwurf) z Screenshot (konkret für Dokum.) Bedingungen z mit Shift/UmschalttasteS z mit Ctrl/Strg-TasteC z mit Alt-TasteA

44 44 LvPlanungAusgeben + Sortierung : {Semester, Dozent, ImpExp} + Fachbereich : String + VorschauAnzeigen() + Drucken() + inDateiAusgeben() + Schließen() "Klassendiagramm" beschränkt auf I/O-Elemente (im OOAD-Sinne: Analyseklasse der Oberfläche) Screenshot 2.5 GUI-Diagramme Screen-Diagramme mehrere Handskizzen (Wireframes, Paper Prototypes) Verfeinerung der Knoten aus der Navigationsübersicht abstrakt skizziert detailliert konkret

45 GUI-Diagramme Varianten von Screen-Diagrammen zabstrakt ykein echtes Klassendiagramm der implementierten Fensterklasse xentspricht eher der Analyse-Klasse des Fensters yAttribute: die Ein-/Ausgabe-Parameter des Fensters yMethoden: die für den Benutzer verfügbaren Funktionen zskizziert yverschiedene Entwürfe mit unterschiedlichen Bedienelementen ybewusst nur Handskizzen um die Vorläufigkeit zu dokumentieren ygrobe Anordnung, grobe Gestaltung zdetailliert yFestlegung auf bestimmte Bedienelemente yGestaltung mit allen Details, ggf. Screenshot im Nachhinein Links zu Paper Prototyping:

46 GUI-Diagramme Vorgehensweise für Screen-Diagramme ztheoretisch: abstrakt n * skizziert konkret zabstrakt zu beginnen fällt aber vielen Leuten schwer, deshalb folgender iterativer Ansatz: ySkizze eines konkreten Entwurfs yVerallgemeinerung zu abstraktem Diagramm ymehrere weitere konkrete Skizzen von Entwurfsalternativen yBewertung der Entwurfsalternativen und Auswahl der besten ydetaillierte Ausarbeitung des ausgewählten Entwurfs zes sollten unbedingt mehrere Alternativen betrachtet werden !

47 GUI-Diagramme Spezialfall Karteireiter (JTabbedPane) zjede Karteikarte wird als eigener Screen abgebildet zden wahlfreien Wechsel zwischen den Karteikarten implementiert die JTabbedPane automatisch AllgemeinFreigabeAnpassen AllgemeinFreigabeAnpassen Eigenschaften 1. Entwurf Verfeinerung bildet Einbettung ab

48 GUI-Diagramme UML-Sequenzdiagramm zur Erinnerung zstellt Objekte und deren Interaktion dar yInteraktion: eine Methode ruft eine andere Methode auf zZeitachse von oben nach unten zLebensdauer des Objekts durch "Lebenslinie" dargestellt zbietet sich an zur Modellierung ereignisorientierter Systeme zgesucht: Verknüpfung zwischen Oberfläche und inneren Abläufen

49 GUI-Diagramme vgl. Sequenzdiagramm "Geld holen" Ich: CBenutzer Geld holen VolksbankAutomat1: CGeldautomat EC-Karte einlesen PIN-Nummer einlesen Use Case wählen Betrag einlesen EC-Karte ausgeben Geld ausgeben EC-Karte entnehmen Geld entnehmen Ruhestellung Hauptmenü PIN-Dialog... in diese Richtung kann man das innere Verhalten weitermo- dellieren Screens = Zustände Negativbeispiel abstrahiert von GUI: so bringt es uns nichts

50 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, woher die Aufrufe kommen

51 GUI-Diagramme Fokussteuerung definieren zvollständiger Weg mit TAB ydabei können auch einzelne Elemente übersprungen werden zabgekürzter Weg für häufig benötigten Sonderfall mit RETURN yhilfreich bei Eingabe großer Datenmengen per Tastatur OnReturn

52 GUI-Diagramme Drag&Drop Raum festlegen verschieben löschen Shift: vertauschen Ctrl: duplizieren Raum löschen Anzeigezeile umschalten das beschreibt man besser in Listenform

53 GUI-Diagramme Komplexität beherrschen zDiagramme beanspruchen generell viel Platz yProblem beim Zeichnen yProblem beim Verstehen zsinnvolle Zerlegung in Teildiagramme ist wichtig yinsbesondere auch hierarchische Gliederung yAbstraktion ynicht einfach orientiert an der Papiergröße zerschneiden zaussagekräftige Bezeichnung für jedes Teildiagramm yanalog zu sinnvollen Klassen- und Funktionsnamen

54 54 2. Softwaretechnik für Benutzungsschnittstellen Klarstellung: Diagramme - für wen ? zDiagramme aus der Softwaretechnik sind nicht geeignet um mit Auftraggebern / Benutzern zu kommunizieren yselbst konkrete Screen-Diagramme nicht ! yallenfalls, wenn die Auftraggeber selbst Informatiker sind zzur Kommunikation mit Auftraggebern und Benutzern braucht man Prototypen yvisuell und funktional konkret, nicht erklärungsbedürftig yzumindest Paper Prototypes oder "Clickable Wireframes" (erlauben das Umschalten zwischen einzelnen Wireframes) zDiagramme helfen dem Entwickler beim Entwurf, dem Wartungsprogrammierer zum Verständnis

55 55 2. Softwaretechnik für Benutzungsschnittstellen Vorbild Architektur Rückverfolgbarkeit bei der Modellierung (auch) visueller Objekte

56 56 2. Softwaretechnik für Benutzungsschnittstellen Grenzen der UML zviele Autoren versuchen UML zu erweitern, aber: SWT / UML veranschaulicht durch Diagramme yist ein Gewinn, solange der Gegenstand der Modellierung ein abstraktes / virtuelles Konzept ist Objekte, Klassen, Methodenaufrufe, Zustände, Zustandsübergänge... yist ungenügend, sobald der Gegenstand der Modellierung eine ureigene visuelle Ausprägung besitzt GUI-Objekte haben ein "Gesicht" yKonsequenz: Designer und Benutzer können keinen Bezug zur natürlichen Sicht auf das System herstellen zSWT sollte lernen von Disziplinen mit Erfahrung in der Modellierung gegenständlicher Objekte

57 57 2. Softwaretechnik für Benutzungsschnittstellen Rapid Prototyping zob ein Entwurf "funktioniert", erkennt man nicht mit Hilfe von Diagrammen yBegriff "funktionieren" unter Designern: "seinen Zweck erfüllen" zfrühzeitiger Test mit Benutzern ist notwendig yerfordert weitgehend arbeitsfähigen Prototyp yBenutzertest braucht eigentlich mehr als nur die Oberfläche... yBenutzer zu fragen will gekonnt sein... zmit geeigneten Tools ist die Erstellung einer Bedienober- fläche nicht aufwändiger als mit einem Zeichenwerkzeug yvgl. Photoshop / Flash Visual Basic / Visual C++ / Eclipse

58 Arten von Benutzungsoberflächen Klassifikation zveraltet: Kommandozeile, textbasierte Bildschirmmasken zArbeitspferd: WIMP-Oberflächen yWindows, Icons, Menus & Pointing y"seriöse Datenverarbeitung" zWebbasierte Anwendungen (HTML im Browser) zInfokiosk mit Touchscreen zMobile Endgeräte (Handy, PDA, Smartphone) zMultitouch Table (MS Surface) zHome & Fun: Multimedia-Freiform-Oberflächen zJoystick / Spielekonsole (Spiele, Flugsimulator) znatürlichsprachliche Kommunikation unser Fokus damit beschäftigt sich SW-Ergonomie Bedien-Paradigmen

59 Arten von Benutzungsoberflächen Menüs und Dialoge zfür ungeübte oder gelegentliche Benutzer yin der Bedienung eher schwerfällig ysoll eine schnelle Einarbeitung ermöglichen zlogische hierarchische Gliederung der Befehle yhoffentlich ! zvollständige Übersicht aller Befehle zLernhilfen zum Umstieg auf schnellere Bedienweisen yzugehörige Icons yzugehörige Tastaturkürzel zMenüs sind platzsparend, lassen Arbeitsfläche frei yDialoge für differenziertere / erklärungsbedürftige Interaktion

60 Arten von Benutzungsoberflächen Toolbars und Icons zschnelle Bedienung für einigermaßen geübte Benutzer yDirektzugriff ohne stufenweises Aufblättern von Menüs yempfehlenswert für häufig benutzte Funktionen zlockern visuell auf zIcons müssen gelernt werden ! ykaum ein Icon ist selbsterklärend; z.B. Lesezeichen/Favoriten: Mozilla Internet Explorer DVB-T-Tuner yIcons sollten unbedingt durch Tooltips "beschriftet" werden ymanche Standard-Icons sind bekannt, aber zumeist plattformabhängig zgegenständliche Bilder für abstrakte Funktionen ? wird oft verkannt

61 Arten von Benutzungsoberflächen Tastaturkürzel / Hotkeys zmoderner Ersatz für Kommandosprachen in WIMP-Systemen ysehr effizient, aber nur für sehr geübte Benutzer zbesonders zweckmäßig, wenn große Datenmengen eingegeben werden müssen yHand sollte nicht zur Maus greifen müssen zQualitätskriterien: ydurchgängige Bedienung möglich? yalle Tastaturkürzel im Menüsystem dokumentiert? yeigene Tastaturkürzel definierbar (Makros)? ydurch zweckmäßige, am Arbeitsablauf orientierte Fokussteuerung unterstützt?

62 Arten von Benutzungsoberflächen Direkte Manipulation zintuitive, problemorientierte Bedienung zBeispiele: yDrag&Drop im Windows Explorer yTextblock verschieben in Textverarbeitung yPinsel, Radierer etc. in Malprogrammen yVeranstaltung verschieben im Stundenplan zklassisch mit der Maus; feinmotorisch anspruchsvoll y"Feinarbeit" bei Bedarf mit Pfeil-Tasten zmit dem Finger auf Touchscreens ybesonders intuitiv, auch für ungeübte Benutzer zManipulation und Visualisierung hängen eng zusammen yadäquate grafische Darstellung ist nicht trivial meist aufwändiger zu programmieren als Menüs+Dialoge

63 Arten von Benutzungsoberflächen Multi-Touch Gesten zohne weitere Hilfsmittel (Stift, Maus) zaber nicht selbstdokumentierend zmüssen entdeckt und gelernt werden Tap iPhone Double Tap Flick Drag Pinch Open Pinch Close Touch and Hold

64 Arten von Benutzungsoberflächen Web-Oberflächen zrichten sich an völlig ungeübte Benutzer ydürfen absolut keine Einarbeitung verlangen yfun factor ist teilweise wichtig zwenige und einfache Funktionen yhäufig "Blättermaschinen" im weitesten Sinne ynicht zu vergleichen mit Software-Tools yaber neuer Trend: Rich Client Applications mit AJAX zgeringste motorische Anforderungen yauf einfachen Mausklick reduziert ykein Doppelklick, kein Drag&Drop, kein Rechtsklick zkeine "Arbeitsfläche", aber viel Platz für "Beschriftung" zu enge Beschränkung für manche Client/Server- Anwendungen

65 Arten von Benutzungsoberflächen Konventionen berücksichtigen zVertrautheit, Gewohnheit ygleiches Verhalten in ähnlichen Situationen zGewohnheiten sind oft unbewusst zKonventionen sind kulturabhängig yLichtschalter nach unten: in Amerika aus, in England an yWasserhahn öffnen: in Amerika links-, in England rechtsdrehen yAnwendung starten: Windows Doppelklick, Mac Einfachklick zDilemma: was tun, wenn das Gewohnte nicht gut ist... yradikaler Bruch mit den Konventionen: Ribbons übergeordneter Aspekt

66 Formen Gedanken zur Fenstergestaltung zFührung der Augen von links oben nach rechts unten zFenster eher breit als hoch (analog zum Bildschirm und Sichtfeld) zMehrspaltigkeit erleichtert das Lesen (vgl. Zeitung) zKanten der Komponenten bilden Fluchtlinien yAnzahl der Fluchtlinien minimieren, ohne jedoch Komponenten sinnlos zu vergrößern znicht die ganze Fläche mit Komponenten pflastern; Freiflächen sind wichtige Gestaltungsmittel ! zProportionen, Balance, (Symmetrie), Einfachheit zeinheitliche Schriftart, abgestimmte Farben (Farbklima)

67 Formen z.B. Windows arabisch von rechts oben nach links unten

68 Formen Prioritäten für Gruppierung zinhaltliche Gemeinsamkeiten (Funktionsgruppen) zaufgabenbezogene Folge von Arbeitsschritten zBenutzungshäufigkeit yaber nicht dynamisch verändern ! zalphabetische Anordnung, Nummerierung etc.

69 Formen Hinweise zur Gruppierung zElemente im oberen Bereich einer Gruppe werden schneller entdeckt als im unteren zKomponenten in Gruppe besser spalten- als zeilenweise anordnen zGruppenrahmen mit Überschriften erhöhen die Übersichtlichkeit zbesser Freiflächen als Gruppenrahmen ohne Überschrift z4-5 Gruppen, 4-5 Komponenten pro Gruppe zGruppen sollten als solche erkennbar sein und sich von Nachbargruppen abgrenzen zGruppen so ausrichten, dass nur wenige Fluchtlinien entstehen zEigene Gestaltungsregeln in allen Gruppen konsistent anwenden

70 Formen z.B. MS Word Druckdialog

71 Formen Natürliche Anordnung z(Um-)Denken vermeiden natural mapping das Herdplattenproblem Cursortasten Border left right top bottom Border

72 Formen Hervorheben von Komponenten zHervorhebungen trennen Informationen, gewichten, erleichtern Suchen und Finden, lenken Aufmerksamkeit zGröße der hervorzuhebenden Komponente zabweichende Orientierung oder Form zIsolierung, Einzelstellung, Umrandung zFarben (wenige !), Hell-Dunkel-Kontrast, Inversdarstellung zfetter Schriftfont oder Großbuchstaben zBlinken (aber sparsam und nur an einer Stelle) znicht mehr als 10-20% aller Informationen hervorheben zgewählte Darstellungsart der Hervorhebung durchgängig benutzen beliebtester Fehler

73 Formen Minimal- und Maximalgrößen zphysiologische Gegebenheiten des durchschnittlichen menschlichen Auges berücksichtigen yempirisch ermittelt und in Normen festgehalten yder Entwickler darf nicht das eigene Auge als Maßstab nehmen ! zbegrenzte Sehschärfe erfordert Mindestgröße yfür ermüdungsfreies Lesen ySchriftgröße mindestens 0.3 Grad Sehwinkel, besser 0.5 Grad zschnelle Fixation empfiehlt Maximalgröße yfür schnelles Erfassen "auf einen Blick" yKomponentengruppe maximal 5 Grad Sehwinkel unabhängig von System- konfiguration ~ 10pt bei 40cm Leseabstand auf Papier

74 Formen Umrechnung des Sehwinkels (Notebook) in Wahrheit 117 dpi

75 Formen Abbildungsmaßstab zAngabe von Schriftgrößen traditionell in "Punkt" y1 pt = 1/72 Zoll; 1 Zoll = 1 inch = 2,54 cm ykorrekt auf Papier, problematisch am Bildschirm zAbbildungsmaßstab systemabhängig yMacIntosh 72 dpi, Unix GUIs (Motif, KDE,...) ?, Windows 96 dpi (kleine) / 120 dpi (große Schriften) yplattformübergreifend: Java 72 dpi zkein echter Zoom bei gemischter Bemaßung yvgl. Windows: Schriften und Controls in pt, Fenster in Pixel yvgl. altes HTML: Schriften in pt, sonstige Maße in Pixel unterschiedliche Monitorgröße u. Grafikauflösung alles Fiktion: 800x600 auf 17" gibt 67 dpi d.h. 1 Pixel = 1 pt

76 Formen Dialog Units (DLU) unter Windows zWindows unterstützt nur statische Layouts yjeder Dialog hat einheitlichen Font ySchriftgröße in pt yControls passen sich an yin.RC-Datei stehen absolute Maße als DLUs yDLU ist abhängig von Schriftgröße und damit auch vom Abbildungsmaßstab yhor. DLU = mittlere Breite der Dialogschriftart / 4 vert. DLU = mittlere Höhe der Dialogschriftart / 8 MS Sans Serif 8ptDauphin-Normal 14pt nicht so exakt wie Layout-Manager, aber in der Praxis passt's

77 Schrift Schriftarten zmit SerifenTimes y"Führungslinien" für das Auge erfordern hohe (Druck-)Auflösung; am Bildschirm nur unvollkommen / unschön darstellbar zserifenlosHelvetica, Arial schlechter lesbar; bei geringer Auflösung jedoch zu bevorzugen zBildschirmschriftMS Sans Serif, Fixedsys yserifenlos, auf Pixelraster optimiert (vorteilhaft für kleine Schrift) ynur in ausgewählten Größen verfügbar zDruckerschrift

78 Schrift Gut lesbare Bildschirm-Schrift zserifenlos für Bildschirm (Serifen nur für Druck) zProportionalschrift, Groß-/Kleinschreibung znicht unterstrichen, nicht blinkend, nicht kursiv zhorizontal ausgerichtet, linksbündig, kein Blocksatz zbegrenzte Spaltenbreite (vgl. Zeitungsspalten) zSchrifthöhe mindestens 0.3° Sehwinkel ybesser 0.5° 12 pt (bei 15" Notebook, 1400x1050, 40 cm Abstand) zdeutlicher Kontrast zum Hintergrund yText- und Hintergrundfarbe beachten Problem niedriger Auflösung; relativiert sich bei Retina Display

79 Schrift Beschriftung mittels Label zLabel deutlich dem Steuerelement zuordnen yminimaler Abstand = 1 Zeichenbreite yaber kein Doppelpunkt zwischen Label und Steuerelement zLabel-Text kurz, aussagekräftig, eindeutig, präzise, allgemein bekannt, informativ, aber keine Abkürzung yvorzugsweise nur ein Wort yerst "ausführlich" formulieren, dann "verdichten" zLabel-Text nicht breiter als 5° Sehwinkel (= 1 Fixation) yca. 120 Pixel (bei 15" Notebook, 1400x1050, 40 cm Abstand)

80 Schrift Ausrichtung von Beschriftungen zeinzeilige Steuerelemente: Label links; horizontal zentriert zmehrzeilige Steuerelemente: Label links oberhalb zmehrere verschieden lange Labels: etwa gleich: linksbündigsehr unterschiedlich: rechtsbündig einzeilig mehrzeilig minimal mittel maximal Tabulator Makro Einblendezeit

81 Schrift Eingabe von Text zKommandos zAuswahl aus Textliste zFreitexteingabe zgenerell mit Enter abschließen zKurzformen für Kommandos und Auswahlworte anbieten yAuto-Vervollständigen in Combo-Boxen ymnemonisch günstiger als Tastaturkürzel zbeliebige Groß-/Kleinschreibung zulassen optimal !

82 82 Hörsaalübung Gestalten eines Eingabefensters Was ist hier schlecht ? Verbessern Sie den Entwurf !

83 Farbe Was ist Farbe ? zPhysikalische Sicht ySpektralfarben = "Regenbogenfarben" xeine Frequenz; Wellenlänge in nm yRest: Überlagerung mehrerer Freq. zPhysiologische Sicht ydieselbe Farbempfindung kann durch verschiedene Mischungen von mind. 3 Farben erzeugt werden zDarstellung in der Farbtafel ySpektralfarben auf Bogen, Rot-Blau-Mischung auf Purpurgerade yOrdnungsprinzip: Mischfarben liegen auf Verbindungsgeraden yDreieck umschließt mögliche Mischfarben aus 3 Primärvalenzen yberücksichtigt nicht die Luminanz "unbunt" nicht darstell- bare Farben Wellenlänge 550 nm

84 84 Grün Rot Blau 3.4 Farbe Farbmodell RGB zMischung von farbigem Licht yGrundfarben Rot, Grün, Blau zadditive Farbmischung yProjektion der Primärvalenzen auf dieselbe Fläche zEinsatzgebiete yWiedergabe über Monitor xPrimärvalenzen durch Leuchtstoffe bestimmt yAufnahme mit Scanner oder Kamera xPrimärvalenzen durch Farbteiler/Farbfilter bestimmt z3D-Farbraum mit kartesischen Koordinaten yMischung entspricht vektorieller Addition

85 85 Cyan Magenta Yellow Papier weißes Licht 3.4 Farbe Farbmodell CMYK zMischung von Farbstoffen (Farbfiltern) yGrundfarben Cyan, Magenta, Yellow, Key (blacK) zsubtraktive Farbmischung yBeleuchtung mit weißem Licht xCyanschluckt Rtransparent für B und G xMagentaschluckt Gtransparent für R und B xYellowschluckt Btransparent für R und G yMischung von CMY ergibt (fast) Schwarz xSchwarz als 4. Grundfarbe wegen Unsauberkeit zEinsatzgebiet: Wiedergabe über Drucker ytypische Probleme: geringere Farbsättigung als Bildschirm; schlechtere Dosierbarkeit = weniger Farbabstufungen; starke Abhängigkeit von Papierqualität

86 86 S H L S H L 3.4 Farbe Farbmodell HSL zanwendungsorientiert, zielgerichtet manipulierbar yFarbartHue ySättigungSaturation yHelligkeitLuminance Lightness auchHSIIntensity HSBBrightness HSVValue

87 Farbe Physiologische Aspekte zhöhere Auflösung für Helligkeit als für Farbe yKanten u. Formen werden besser anhand der Helligkeit erkannt ywird bei Videokompression ausgenutzt zunterschiedliche Auflösung (Schärfe) für verschiedene Farben ybesonders schlecht: Blau zfarbabhängige Helligkeitsempfindung ygrün wirkt heller, blau dunkler zkleine Objekte auf hellem Grund wirken dunkler als große ydie Iris (= Blende) passt sich an zFarb- und Helligkeitsempfinden wird auch von der Umgebung beeinflusst, nicht nur vom Monitor zFarbenblindheit yhttp://www.ichbinfarbenblind.de/ Galeriehttp://www.ichbinfarbenblind.de/

88 Farbe Psychologische Aspekte im allgemeinen kulturspezifisch Ägypten: Tod, Amerika: Gefahr, China: Glück, Indien: Leben bei uns: zweißneutral zrotAnhalten, Gefahr, Fehler, Alarm, Hitze zorangeWarnung, Achtung, Aufmerksamkeit zgrünLosfahren, ok, Verfügbarkeit, Wachstum zblau Kälte, Ferne, Hintergrund

89 Farbe Farbkombinationen zVordergrund- und Textfarben yWeiß, Schwarz, mittel- bis langwellige Farben (Rot, Gelb, Grün) ykein Blau zHintergrundfarben yhell (Positivdarstellung), schwach gesättigt (Pastelltöne) ykurzwellige (Blau, Cyan) und unbunte Farben (helles Grau) ykein gesättigtes Rot oder Braun zkritische Farbkombinationen yvermeiden: Rot/Grün, Gelb/Blau, Rot/Blau yGelb/Weiß wird leicht verwechselt

90 Farbe Heller oder dunkler Hintergrund ? zDunkel auf Hell ?freundlich yPapiermetapher yMonitor-Flimmern unangenehm bei großen hellen Flächen zHell auf Dunkel ?finster yFarben leuchten intensiver auf dunklem Untergrund ydunkler Hintergrund zur Hervorhebung von Bildern yweiß überstrahlt leicht, weil Iris weit geöffnet ist zmittlere Hintergrundhelligkeit ygibt Spielraum für helle und dunkle Kontraste yangenehm für das Auge: entspricht der Umgebungshelligkeit dagegen hilft hohe Bildwiederholrate oder LCD

91 Farbe Farbschema / Farbklima z±5 verschiedene Farben + schwarz + weiß siehe auch

92 Farbe Im Zweifelsfall zeher weniger Farbe als mehr zeher weniger Farbsättigung als mehr zCodierung und Unterscheidung eher mittels Layout und Form als mittels Farbe zFarben visuell überprüfen, nicht "berechnen"

93 Farbe Farbcodierung zFarbe dient als "Skala" eines (physikalischen) Wertes yvgl. Landkarte, Wetterkarte zsuggestive Zuordnung von Farbcode zu Bedeutung zunterschiedliche Farbarten wirken leicht "ungeordnet" ysicherer: Abstufungen nur in Helligkeit und/oder Sättigung, nicht in Farbart (Hue) zHervorhebung durch Intensivierung z"aktiv", "selektiert" höhere Helligkeit oder Sättigung

94 Dynamisches Layout Begriffserklärung zbisher: Größe und Position von Komponenten in der Entwicklungsphase festgelegt zjetzt: Komponenten bekommen eine zur Laufzeit variable Größe und/oder variable Position za) abhängig von der Fenstergröße ykann sich an der Grafikkartenauflösung orientieren zb) abhängig von der Größe der Komponente yjede Komponente hat eine Wunschgröße (preferred size) yz.B. abhängig von der Schriftgröße zauch ein typisches Problem beim Web-Design zweckmäßiger Einsatz ist nicht trivial

95 Dynamisches Layout Wo macht es Sinn ? zabhängig von der Fenstergröße: alle Komponenten mit Scrollbalken yz.B. JList, JTree, JTable; evtl. auch JTextArea yScrollbalken können verschwinden ymehr Inhalt wird sichtbar zabhängig von der Schriftgröße: Buttons, Checkboxen, Labels, Ränder yGrößenverhältnis visueller Objekte ist wesentlich für den Gesamteindruck ! (Schrift/Komponente, Komponente/Freifläche) yButtons abhängig von Fenstergröße belegen nur sinnlos Fläche (beliebter Fehler bei Java-Programmierern) sorgfältig überlegen, welche Komponenten dynamisch werden sollen sofern man die Schriftgröße überhaupt variabel gestaltet

96 Dynamisches Layout Parameter dynamischer Layouts zFenstergröße ygroßes Fenster ermöglicht Darstellung von mehr Information und bessere Gestaltung mit Hilfe von Freiflächen ybegrenzt durch Bildschirmgröße und -auflösung zSchriftgröße yidealerweise vom Benutzer wählbar entsprechend individueller Sehkraft (vgl. Browserschriftgröße und Windows Grafiktreiber) ysollte bei hochauflösenden Bildschirmen vergrößert werden yExtremfall Touchscreen: dicker Finger statt spitzer Maus zTextlänge yabhängig von der Sprache Speichern unter Save as

97 Dynamisches Layout Layout-Raster skizzieren Fehler S Fenstergröße Schriftgröße u. Textlänge F(0.5) F S S S,TRestS,TRest Icongröße F max(I,S) Abstände u. Ränder =f(Schriftgröße) klicken Sie um die Skizze aufzubauen

98 Dynamisches Layout Vorgehensweise beim Layout znotwendige Komponenten aus Use Cases ermitteln zKomponenten freihändig gruppieren und positionieren zFlucht- und Symmetrielinien identifizieren / definieren yAnzahl der Fluchtlinien klein halten yFluchtlinien können gezeichnete Linien ersetzen: "gutes Design braucht keine (gezeichneten) Linien" zRasterzeilen und -spalten bemaßen ydyn. Layout: abhängig von Schrift-, Fenster- und Icongröße xbei mehrsprachigen Anwendungen auch abhängig von Textlänge xim allgemeinsten Fall sind alle Maße variabel y(statisches Layout: absolute Koordinaten in Pixel) Analyse Gestaltung Konstruktion das Auge ist sehr empfindlich !

99 Dynamisches Layout Auswahl anwendungsfallorientiert zmöglichst viel Platz für eine Komponente yBorderLayout: im CENTER yGridBagLayout: constraint.fill = GridBagConstraints.BOTH zein paar Komponenten kompakt in einer Zeile oder Spalte in deren jeweils eigener Standardgröße yauf JPanel mit FlowLayout (nur Zeile) oder BoxLayout zein paar Komponenten gleicher Größe yGridLayout (evtl. nur 1 Zeile oder 1 Spalte) zkomplexes Layout mit vielen Komponenten yGridBagLayout und/oder mehrere geschachtelte Panels yfeste und variable Zellengrößen frei kombinierbar

100 Dynamisches Layout Komponentengröße beeinflussen zEigenschaften von Component können vom LayoutManager berücksichtigt werden zsetMinimumSize, setPreferredSize, setMaximumSize ygleiche Größe für mehrere Komponenten: jComp2.setPreferredSize (jComp1.getPreferredSize()); zPreferredSize eines Buttons ist z.B. abhängig von der Schriftgröße ydieser Default wird durch explizites Setzen (Wert != null) zerstört zmanche Layout-Manager respektieren manche Attribute: MinimumPreferredMaximum BorderLayouteine Richtung BoxLayoutXXX FlowLayoutX GridBagLayout(X)fill hat Vorrang(X) GridLayout Führungselement Preferred wenn der Platz reicht, sonst Minimum

101 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 Dynamisches Layout besser mit GridBagLayout Spalte: Zeile Grid; fill= HOR. horizontale Box; gridwidth=3 gridwidth=2 fill=BOTH alle Zellen in Zeilen 0,2,3,4: fill=HORIZONTAL gridwidth=2 fill=BOTH größte preferredSize setzt sich durch

103 Dynamisches Layout Hörsaalübung zNotepad Editor yBearbeiten, Schriftart yDatei, Seite einrichten yBearbeiten, Suchen zDScript Autor ySuchen yUpdate, Verzeichnispfade yKonfiguration, Betriebsart "Vorlesung" z Windows Explorer yExtras, Ordneroptionen z Windows Taschenrechner z Eigenschaften von Anzeige yDarstellung, Farbauswahl z Windows Media Player im Design "Business" Skizzieren Sie das Layout-Raster und wählen Sie geeignete Layout-Manager !

104 Dynamisches Layout Anmerkung zur Schriftgröße zÄnderung der Schriftgröße erfordert neues Font-Objekt yMethode setFontSize fehlt zZuordnung des Font-Objekts zu allen betroffenen Komponenten mit setFont oder zsetFont(null) für alle ydann erben sie vom Parent ynur contentPane bekommt gewünschtes Font-Objekt zugeordnet z Größe von Buttons besser nicht mittels setPreferredSize manipulieren: ydie Größe ist damit festgelegt und orientiert sich nicht mehr an Schriftgröße und Textinhalt z ?Bug? beim Erben des Font yzusätzliche Aufrufe erforderlich yfür JComboBox xsetPrototypeDisplayValue(null) yfür deren CellRendererPane xsetFont(font)

105 Software-Ergonomie Begriffe (1) zTeilgebiet der Mensch-Computer-Interaktion (human computer interaction HCI) yberücksichtigt Psychologie und Physiologie des Benutzers zSoftware-Ergonomie bezieht sich primär auf Bildschirm- Arbeitsplätze yz.B. vorgeschrieben in Bildschirmarbeitsverordnung (1996, Gesundheitsschutz bei Arbeit an Bildschirmen) yübertragbar auf vielerlei Software, Themen nach wie vor aktuell zaktueller unter der Bezeichnung Usability yauch für Websites, Mobile Devices, Embedded Systems,...

106 Software-Ergonomie Begriffe (2) zUsability / Gebrauchstauglichkeit yISO 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" xeffektiv: Ziel wird genau und vollständig erreicht xeffizient: Aufwand im Verhältnis zum Ergebnis xzufriedenstellend: Wohlbefinden, positives Gefühl bei Benutzung zUsability Engineering (vgl. Software Engineering) yalle Aktivitäten im Produktlebenszyklus, die der Verbesserung der Usability dienen; iterativer Prozess

107 Software-Ergonomie Ergonomische Normen zhaben immer nur Richtliniencharakter yergonomischer und technischer Gestaltungsspielraum ykeine Normung eines Softwareproduktes yes gibt nicht "den" Benutzer; Benutzerrollen müssen individuell charakterisiert werden yRahmenbedingungen (z.B. Arbeitsorganisation, Arbeitsumgebung) sind unterschiedlich ysollen keine bestimmte Implementierung nahelegen zenthalten meist nur Mindestanforderungen zVorschriften und Checkliste helfen nur begrenzt – entscheidend ist die Sensibilität für Benutzerbelange notwendig, aber nicht hinreichend Standards versus Innovation

108 Software-Ergonomie Normen zur (Software-)Ergonomie zDIN EN ISO 9241: Ergonomische Anforderungen für Bürotätigkeiten mit Bildschirmgeräten yHardware 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 h_da Bibliothek online sehr praxisorientiert und reichhaltig illustriert: hoch aktuell durch Verbreitung von Notebooks !

109 Software-Ergonomie Normen zur Software-Ergonomie zFortsetzung DIN EN ISO 9241 yAussagen 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 zDIN EN ISO Benutzer-orientierte Gestaltung interaktiver Systeme enthalten die folgenden 7 Prinzipien Usability

110 Software-Ergonomie (1a) Aufgabenangemessenheit zBietet das System die "richtigen" Funktionen ? yorientiert an der (Arbeits-)Aufgabe, nicht an der Technik yerforscht mittels Anwendungsszenarien bzw. Use Cases zUnterstützung gängiger Arbeitsabläufe yBedienfolgen, Assistenten, Workflow (ggf. mit Anleitung) zEinfachheit statt Featuritis ynicht Benötigtes muss der Benutzer gedanklich herausfiltern zGewichtung: häufiges einfach, seltenes aufwändiger yNachrangiges erst auf zusätzlichen Knopfdruck ykeine 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 Software-Ergonomie (1b) Aufgabenangemessenheit zEffizienz, Antwortzeiten, sinnvolle Vorgabewerte yam schnellsten ist eine vermiedene Eingabe zDirektheit: kurze Wege zur Information / Funktion ymehrere Dialogebenen Karteireiter Assistenten ygeschachtelte Pulldown-Menüs yAnzahl Mausklicks, Weglänge zur Position, Wechsel zur Tastatur yflexible + schnelle Navigation: Querverweise (Orientierung?!) zUnterstützung für wiederkehrende Aufgaben yFormatierung übertragen, Makro(-recorder), Tastatursteuerung

112 Software-Ergonomie (2a) Selbstbeschreibungsfähigkeit Systemzustand muss auf einen Blick erkennbar sein zWo bin ich ? Ort ymomentaner Aufenthaltsort im System zWas kann ich hier tun ?Modus yzur Verfügung stehende Operationen zWie kam ich hierher ?Weg yVorgeschichte, Kontext zWohin kann ich gehen ?Weg yZiel 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 Software-Ergonomie (2b) Selbstbeschreibungsfähigkeit zaktuellen Zustand und Kontext darstellen yKontextinformationen (z.B. Verzeichnispfad bei Datei öffnen) zaktuelle Möglichkeiten zeigen yBedienelemente inaktiv machen: besserer Überblick yBedienelemente verbergen: aufgeräumteres Design zvisuell direkt erkennbare sensitive Bereiche ynicht erst durch "Scannen" (Webseiten, Adventure Games ) zReaktion / Rückkopplung / Feedback yTasten lassen sich "drücken" ybereichs-/objektabhängig veränderlicher Mauscursor

114 Software-Ergonomie (2c) Selbstbeschreibungsfähigkeit zkeine versteckten Funktionen / Tastaturkürzel yalle Tastaturkürzel in Menüs aufführen; eine Seite in der Dokumentation genügt nicht yIcons mit Tooltips beschriften zInformation über länger dauernde Abläufe ySanduhr, Fortschrittsanzeige, Zwischenergebnisse yAblauf abbrechbar zAnwender- und problemkompatible Terminologie yBegriffe, Befehle, Fehlermeldungen yBegriffe aus Anwendungsdomäne aufgreifen (wie reden künftige Benutzer über ihre Arbeit ?)

115 Software-Ergonomie (3) Steuerbarkeit zkein "Eigenleben" des Systems, Benutzer ist der Chef ybeenden ohne "wollen Sie wirklich ?" zfreie Eingabereihenfolge yauch bei Validierung von Eingabewerten (Validierung auf Fensterebene, nicht auf Elementebene) zmehrstufige Rückgängig- (Undo-) Funktion zDialogfolgen und längere Abläufe jederzeit abbrechbar zdem Arbeitstempo angepasste Steuerungsformen yMenü 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 Software-Ergonomie (4a) Erwartungskonformität zim Widerspruch zu Originalität und Innovation ?! yleider wird es oft nur schlechter... zplattformspezifisches Standardverhalten (Look & Feel) ydefiniert in Style Guides ygewohnt, aber leider nicht immer optimal ybesonders kritisch, weil unterbewusst: Tastatur + Klickverhalten zErwartungen aus der Anwendungsdomäne erfassen ynicht immer "logisch", historisch gewachsen yoft unbewusst (Interview und Fragebogen hilft nicht) yErforschung: Gehwegplanung mittels Trampelpfad auf Gras "Ein Dialog ist erwartungskonform, wenn er den aus dem Nutzungskontext heraus vorhersehbaren Benutzerbelangen sowie allgemein anerkannten Konventionen entspricht."

117 Software-Ergonomie (4b) Erwartungskonformität zWiedererkennbarkeit und Konsistenz yEinsatz von Steuerelementen für typische Aufgaben xCheckbox für einzelnes boolean (schließt kein Fenster) xRadiobuttons als Gruppe gegenseitig auslösend yStandarddialoge verwenden xDatei öffnen/speichern, Farbauswahl, Schriftauswahl, Seite einrichten, Drucken ytypische Mauszeiger-Formen zschlechte Beispiele yStrg+Alt+Del zum Anmelden yStart Beenden gute Lösungen fallen nicht auf

118 Software-Ergonomie (5) Fehlertoleranz z"Urängste" etwas (am Computer) verkehrt zu machen yvertrauensbildende Maßnahmen erforderlich Gefühl yEinarbeitung durch Entdeckungsreise ermöglichen zVorbeugung: Bedienelemente deaktivieren zRückfrage/Warnung bei "gefährlicher" Aktion yVorsicht: viele lesen nicht, sondern nehmen unbesehen Default yAnwender- und problemkompatible Terminologie ykann man das Problem visualisieren? zMöglichkeiten zur Fehlerbehebung vorsehen yRückgängig/Undo, Abbrechen, Papierkorb Entwickler konzentrieren sich lieber auf 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." Standarddialog JOptionPane ist zu einfach

119 Software-Ergonomie (6) Individualisierbarkeit zAnpassung an ypersönliche Benutzungshäufigkeit yGewohnheiten aus anderen Anwendungen ypersönliches Systemumfeld zkonfigurierbare Toolbars und Menüs yeigene Teilmenge definieren; eigene Funktionen als Makros zFavoriten, Last Used, Most Used zZeitabhängigkeiten yErscheinen von Tooltips, Doppelklick, Repeat-Funktion zindividuelle Einstellungen sichern und "mitnehmen" yauf anderen Rechner oder bei SW-Upgrade kein Ersatz für sorgfältig abgestimmte Grundeinstellung ! Anpassung macht Arbeit 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 Software-Ergonomie (7) Lernförderlichkeit zdamit Einsteiger zu Fortgeschrittenen und Profis werden zausführliche Hinweisdialoge für Einsteiger ymit Checkbox "Dialog künftig nicht mehr anzeigen" zTooltips für Icons und Buttons yviele Bilder und Begriffe müssen erst gelernt werden zStatuszeilentexte für Eingabefelder yTooltip würde Eingabefeld verdecken zkontextabhängige Hilfe für ausführlichere Erklärungen zGuided 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 Usability Inspection Evaluation der Usability zSystematische Evaluation von Prototypen (mangels fertigem Produkt) zdurch QS-Abteilung: Usability Inspection yvgl. Code Inspection im Software Engineering yPrüfung gegen Richtlinien und Checklisten zdurch echte Benutzer: Usability Test yBenutzer urteilen subjektiv und unbewusst ywichtig: ohne jede Erläuterung / Beeinflussung ykann sehr aufwändig werden yzum Glück genügen oft schon wenige Test-Benutzer, um die Hauptprobleme zu identifizieren zmessbare Kriterien suchen ysubjektiv objektiv, qualitativ quantitativ, pauschal konkret Probleme aus der Anwendungsdomäne werden leichter übersehen

122 Usability Inspection Methoden der Usability Inspection zHeuristische Auswertung yeinige wenige erfahrene Inspektoren prüfen (einzeln!) gegen eine kurze Checkliste allgemeiner Regeln xsiehe nächste Folie xvgl. die 7 Grundsätze der Dialoggestaltung im Abschnitt 3.6 yauch für neuartige Ansätze geeignet zCognitive Walkthrough ykleine Gruppe spielt typische Anfängeraufgaben durch zRichtlinien Prüfung oder Wertung yeinzelner Inspektor prüft/wertet gegen detailliertes Regelwerk ywird leicht stupide

123 Usability Inspection Checkliste für Heuristik zSystem Status erkennbar ywas passiert gerade? zSystem und reale Welt passen yBegriffe, Konzepte, Metaphern zSteuerbarkeit und Freiheit yNotausgang, Undo, Redo zKonsistenz und Standards yEinheitlichkeit der Begriffe, Konventionen der Plattform zFehlervermeidung yAuswahl statt Eingabe; Zustands- abhängigkeiten vermeiden zErkennbarkeit statt Erinnerung y(Kurzzeit-)Gedächtnis nicht beanspruchen z Flexibilität und Effizienz yTastaturkürzel, Makros, Bearbeiten früherer Befehle z Ästhetisches und minimalistisches Design ykeine unnötigen Informationen zeigen; weniger ist mehr z Erkennung, Diagnose und Behebung von Fehlern yProblembeschreibung im Klartext, Lösungsvorschlag z Hilfe und Dokumentation yaufgabenorientiert, keine reine Replikation der Oberfläche frei nach Keith Andrews: "Human-Computer Interaction"

124 Usability Test Vorbereitung des Tests zTestgegenstand festlegen (der Prototyp, ggf. Teilbereich) zTest-Moderator organisiert den Test und wertet ihn aus yMitarbeiter der Qualitätssicherung oder UI-Designer, nicht Entwickler yggf. zusätzliche Test-Beobachter zur Unterstützung zTest-Benutzer führen den Test durch und werden beobachtet yentsprechen idealer weise den Stereotypen ymehrere/viele Personen pro Stereotyp für statistische Auswertungen zTestumgebung (Usability Lab) vorbereiten yBeobachtung und Protokollierung der Benutzer-Aktivitäten yEye Tracking Systeme, Mouse Capture, Screen Capture zAufgabenstellung formulieren yganze Anwendungsszenarien und gezielte Teilaufgaben (vorab selbst testen) zTestkritierien definieren (evtl. nur Teilaspekte) ymessbare und vergleichbare Daten besser einer als keiner

125 Usability Test Prototypen Tiefe der Funktio- nalität Funktionsumfang horizontaler Prototyp Funktionsumfang vertikaler Prototyp ganze Oberfläche mit nichts darunter kleiner Ausschnitt komplett realisiert Handskizzen genügen: "Paper Prototyping"

126 Usability Test Eröffnung zModerator begrüßt Test-Benutzer ystellt sich und die Beobachter nur mit Namen vor ykeine Titel, keine Information über Rolle im Projekt oder über Beziehung zum Produkt zerläutert Zweck des Tests: Sammlung von Infos zur Verbesserung der Benutzungsschnittstelle ybetont: das System wird getestet, nicht der Benutzer ydas System ist neu und kann fehlerhaft arbeiten zerklärt, was und wie aufgezeichnet wird zfordert Test-Benutzer auf, Fragen zu stellen ydie Fragen werden aber erst nach dem Test beantwortet zweist Test-Benutzer auf jederzeitige Abbruchmöglichkeit hin zlässt Vertraulichkeitserklärung und Einverständniserklärung zur Aufzeichnung unterschreiben

127 Usability Test Durchführung Thinking aloud – laut denken zTest-Benutzer spricht eigene Gedanken aus bei der Abarbeitung der Aufgabe ywas er tun will; was er liest; Fragen, die sich stellen; Verwirrendes; Entscheidungen zMethode liefert massenhaft Informationen, auch unerwartete (besonders wertvoll !) zAuswertung muss eventuelle Missverständnisse nicht aus Aktivitäten erraten zTest-Moderator animiert nur zu lautem Denken yWas tun Sie jetzt? Ich kann Sie nicht hören! Was denken Sie? yKeinesfalls: Warum tun Sie das? Haben Sie jenes nicht gesehen?

128 Usability Test Durchführung Co-Discovery – zu zweit erforschen zzwei Test-Benutzer erforschen eine Oberfläche gemeinsam zsie interagieren und kommunizieren dabei spontan ydas wird protokolliert zvermeidet unnatürliche Situation des lauten Denkens zaber: ist eine Benutzung zu zweit realistisch für die Anwendung?

129 Usability Test Durchführung Interviews und Fragebogen zInterview yTest-Benutzer soll zunächst frei reden yspäter gezielte Fragen und Nachhaken yzeitaufwändig, schwer zu vergleichen zFragebogen yErstellung ist eine Wissenschaft für sich ykann eine große Zahl von Test-Benutzern erreichen yleicht statistisch auswertbar yliefert keine Antworten auf nicht gestellte Fragen...

130 Usability Test Durchführung Observierung zAufzeichnung typischer Aktivitäten im echten Betrieb yProduktivbetrieb vorab mit Testern simulieren yeventuell auch noch im Beta-Test zSpeicherung in Log-Datei yausgewählte Kenndaten mit Zeitstempel yviele Test-Benutzer, statistische Analyse ywelche Features werden häufig / selten / nie genutzt ? zVideoauswertung ist sehr zeitaufwändig zBenutzer sind oft abgeneigt, fühlen sich ausspioniert yerfordert intensive Aufklärung über das Verfahren yAnonymisierung, keine persönlichen Daten, Abschaltbarkeit

131 Usability Test Auswertung (1) zEffizienz der Interaktion yWie lange dauert die Durchführung einer Aufgabe? yWie viele Aufgaben können in einer vorgegebenen Zeit durchgeführt werden? yWelche Reaktionszeiten zeigen die Testpersonen? yWelche Aktionen treten besonders häufig auf? yWie häufig treten ineffiziente Interaktionen auf? yWelche Strecke/Fläche wird mit den Augen abgesucht? yWelche Strecke wird mit der Maus zurückgelegt? yWie viele Klicks werden benötigt, um eine Aufgabe zu lösen? Zeit Fein- motorik

132 Usability Test Auswertung (2) zAuftreten von Bedienfehlern yWie viele Aktionen sind erfolgreich bzw. fehlerhaft? yWelche Bedienfehler treten besonders häufig auf? yWie lange dauert die Korrektur von Bedienfehlern? yWie viele positive/negative Kommentare werden geäußert? yWie groß ist der Anteil der Test-Benutzer, der eine Aufgabe richtig/schnell genug/auf optimalem Weg durchgeführt hat? yWie viele Kommandos (von den verfügbaren) werden genutzt? yWie oft und wie lange werden Anleitungen oder andere Hilfsmittel studiert?

133 Usability Test Auswertung (3) zErlernbarkeit yWie lange braucht ein Test-Benutzer, um die Durchführung einer Aufgabe zu lernen? yWie ist die Vergessenskurve für die Anwendung nach einer bestimmten Zeit (Tage, Wochen, Monate)? zSubjektive Zufriedenheit yWie fühlt sich der Benutzer / die Benutzerin mit der Software? ysollte erfragt und dokumentiert werden

134 Java Interpreter-Prinzip zCompiler übersetzt Quellcode in Byte Code yQuellcode in.java-Datei yBytecode in.class-Datei yBytecode ist hardware-unabhängiger Befehlssatz für einen Interpreter xwird z.B. im Internet übertragen zJava Virtual Machine interpretiert Byte Code yzur Geschwindigkeitssteigerung: Just-In-Time-Compiler übersetzt Byte Code in Maschinencode der Zielhardware xHotspot VM tut dies partiell für häufig durchlaufenen Code

135 Java Dateitypen und Tools java class EditorCompilerVirtual Machine EditorCompiler H H LIB Bibliotheken class jar mindestens eine Klasse enthält main h auch IDE mit GUI-Editor

136 Java Java Development Kit (JDK)

137 Java Entwicklung nur mit JDK zJDK enthält alle nötigen Werkzeuge yAufruf von der Kommandozeile (DOS-Box) zVorgehensweise yMeineKlasse.java mit Notepad erstellen JAVAC MeineKlasse.java xCompiler-Aufruf; erzeugt MeineKlasse.class SET CLASSPATH=Pfad1;Pfad2 oder auch SET CLASSPATH=. xdamit die Java VM weiß, wo sie die Anwendungsklassen suchen soll JAVA MeineKlasse oder auch JAVA -classpath Pfad1;Pfad2 MeineKlasse xAufruf der Java Virtual Machine (Interpreter) MeineKlasse muss eine Methode main enthalten

138 Java IDE Eclipse zVisuelle Objekte y"Java-Bean" zKlassenstruktur y"Gliederung" zWindowBuilder ymit Kompo- nenten-Palette zQuellcode Editor zvgl. Visual Studio, NetBeans, JBuilder, Rational Application Developer

139 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 z jede.java-Datei muss genau ein public Klasse enthalten yKlassenname = Dateiname; Groß-/Kleinschreibung beachten ! yweitere Klassen ohne Angabe von public sind möglich die Java VM braucht ein Klasse mit einer Methode main als Start yes gibt keine freistehenden Funktionen in String[] args werden Kommandozeilenparameter übergeben siehe Beispiel ApplCon

140 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 Standardbibliothek System.out.println ("Hello, World!"); z 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 Programmtypen Die einfachste GUI-Applikation zHauptfensterklasse abgeleitet von JFrame (extends) yKlassen-Methode static main erzeugt ein einziges Objekt ywird nur in temporärer Referenz gespeichert zSchließen des Fensters ist Standardmethode ysetDefaultCloseOperation sorgt für Beenden der Java VM yAlternative zum Beenden der Java VM: System.exit zJPanel wird erzeugt und mit JFrame.setContentPane zugeordnet yAttribut setzen: setLayout=null; zJLabel wird erzeugt und mit JPanel.add zugeordnet siehe Beispiel ApplMin

142 Programmtypen HelloWorld Klassendiagramm JFrame MainWindow JPanel JLabel erbt von Aggregation: optionales Teil Komposition: notwendiges Teil Assoziation: kennt

143 Programmtypen Zur Lebensdauer von Objekten zgrundsätzlich existiert ein Objekt in Java so lange, wie eine Referenz darauf existiert ! ymanchmal auch ein bisschen länger, wie es dem Garbage Collector gerade gefällt zwarum wird dann die Referenz auf das Hauptfenster in Eclipse GUI-Applikationen nicht gespeichert ? ymain ist gleich wieder zu Ende ydie Klasse Frame verwaltet eine eigene Liste von Referenzen auf alle ihre Instanzen – dadurch bleiben diese am Leben xjede Instanz hat einen eigenen Thread – dadurch läuft die VM weiter Tricks im generierten Code

144 Programmtypen Seitenblick: Applet zzur Einbettung in eine HTML-Seite ymeist nur für "kleine" Aufgaben – Downloadzeit bedenken ! yinzwischen weitgehend von Adobe Flash und HTML+JavaScript verdrängt zspezialisierte Fensterklasse JApplet yGröße wird in der HTML-Seite festgelegt yansonsten Bestückung mit Komponenten wie bei JFrame zSteuerung durch den Browser yinitInitialisierung beim ersten Aufruf der HTML-Seite ystartApplet wird sichtbar gemacht (z.B. Animation starten) ystopApplet wird verborgen (z.B. Animation stoppen) ydestroydas Applet wird entladen (Wechsel der HTML-Seite) siehe Beispiel Applet

145 Programmtypen Applets und Sicherheit zApplets aus dem Web sind Code unbekannter Programmierer yder Programmierer könnte böse Absichten haben yBeschränkungen zur Sicherheit der Nutzer zein Applet wird in einer "Sandbox" ausgeführt, d.h. es darf ynicht auf das lokale Dateisystem zugreifen xes sei denn, der Benutzer lässt es ausdrücklich zu ykeine Verzeichnisse ansehen, Existenz von Dateien prüfen ykeine Dateiattribute (Größe, Zugriffsrechte) prüfen ykeine Dateien lesen, schreiben, löschen, umbenennen ykeine Netzwerkverbindungen zu irgendeinem Computer aufbauen ydie Ausführung nicht über exit() beenden

146 Grundlagen für Umsteiger Klassen public class NeueKlasse extends Basisklasse {... } zKonstruktor yVorinitialisierungsliste gibt es nicht ysuper(...) ruft den Konstruktor der Basisklasse auf yAttribute können an der Deklarationsstelle oder im Konstruktor initialisiert werden zalle Methoden sind standardmäßig virtuell ySchlüsselwort final (="nicht-virtuell") verhindert Überschreiben zkeine separaten Header-Dateien zjede Klasse kann zum Testen eine main-Methode haben Ableitung wollten Sie doch schon immer

147 Grundlagen für Umsteiger Objekte zObjekte werden immer dynamisch allokiert ynew liefert einen Zeiger auf das neue Objekt Klasse Objektreferenz = new Klasse (Parameter); zdelete gibt es nicht ydynamisch allokierter Speicher wird automatisch vom Garbage Collector freigegeben, nachdem kein Zeiger mehr darauf zeigt yder Aufrufzeitpunkt des Garbage Collector ist undefiniert; das macht das Laufzeitsystem, wann es will zDestruktor gibt es nicht stattdessen Methode protected void finalize(); yAufruf vor dem Garbage Collector – d.h. unter Umständen nie !

148 Grundlagen für Umsteiger Initialisierung von Variablen zautomatisch initialisiert werden yKlassenvariable (=static) yInstanzvariable (=Attribute) yArray-Komponenten zInitialisierungswerte sind y0für Zahlentypen yfalsefür boolean ynullfür Objektreferenzen zlokale Variable werden nicht automatisch initialisiert ! yZugriff auf nicht initialisierte Variable bringt Fehler die Initialisierung zu vergessen ist eine beliebte Fehlerquelle in C++

149 Grundlagen für Umsteiger Zugriffsrechte zpublic, protected, private (fast) wie in C++ yprotected ermöglicht auch Zugriff aus eigenem Package zjedes Element muss sein eigenes Zugriffsrecht haben yDefinition gilt (im Gegensatz zu C++) nicht für die folgenden zohne Angabe bedeutet: yprivatefür Klassen ypublicfür Interfaces yfür Attribute und Methoden xnur innerhalb des eigenen Packages verfügbar xnicht in abgeleiteten Klassen statt friend in C++

150 Grundlagen für Umsteiger Datentypen zPrimitive Typen ybyte (8 Bit), short (16 Bit), int (32 Bit), long (64 Bit), alle als vorzeichenbehaftete 2er-Komplementdarstellung ychar (16 Bit vorzeichenlos, Unicode) yfloat (32 Bit), double (64 Bit); beide IEEE Standard 754 yjetzt auch enum; früher Klassen mit Konstanten (static final int) zReferenztypen y"Zeiger" für Klassen, Interfaces, Arrays zC++ macht dagegen keinen Unterschied zwischen primitiven Typen und Klassen yneue primitive Typen werden in C++ als Klassen realisiert (CBruch, CComplex, CString) plattformunabhängig definiert ab Version 1.5 / 5.0 verfügbar

151 Grundlagen für Umsteiger Zeichenketten: String zKlasse String (ähnlich wie STL string) ychar* gibt es nicht ! zOperator + zur Verkettung yakzeptiert Werte beliebiger Typen oder Objekte beliebiger Klassen als Operand; verwendet Methode toString yBesonderheit: Operator + allokiert implizit einen neuen String z== ist Referenz- (d.h. Pointer-) Vergleich s1.equals(s2) vergleicht Textinhalte zclass Object hat die Methode toString() yliefert eine textliche Repräsentation des Objekts yjede abgeleitete Klasse sollte diese Methode sinnvoll überschreiben ynützlich auch zur Fehlersuche

152 Grundlagen für Umsteiger Arrays zsicher durch Indexprüfung zur Laufzeit yvgl. Container in STL, CArray in MFC zdynamisch allokierte Objekte yfloat[] vector = new float[3]; yfloat[][] matrix = new float[3][3]; yint[] x = {1, 2, 3, 4, 5}; yParameterübergabe als Objekt-Referenz zZugriff wie gewohnt yvector[2] = 5.3; ymatrix[0][1] = vector[2]; yfor (int i=0; i

153 Grundlagen für Umsteiger Ausnahmebehandlung zwie in C++, aber: ythrow-Deklaration im Funktionskopf ist ein Muss xder Compiler erzwingt es (ausgenommen RuntimeException) yalle möglichen Ausnahmen sollten auch eingefangen werden ynur für Objekte von Klassen, die von Throwable abgeleitet sind xhat als direkte Unterklassen: Error (Systemfehler, nicht behandeln) und Exception (Anwendungsfehler, behandeln) yfinally-Block hinter try...catch wird in jedem Fall ausgeführt xanwendbar beispielsweise zum Freigeben von Ressourcen xin C++ macht das der Destruktor automatisch zException-Konstruktoren haben i.a. String als Parameter ykann mit e.getMessage() zurückgewonnen werden

154 Grundlagen für Umsteiger Bibliotheken: Packages zPackage ist ein Ordner im Dateisystem yenthält mehrere.java-Dateien und Subpackages (=Unterordner) Zugehörigkeit zu Package package meinpackage; zImport-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; zweltweit eindeutige Namen für wichtige Packages package de.h-da.fbi.projekt.meinpackage; yspiegelt die Schachtelung der Ordner wider

155 Weitere Details zu Java Zeiger versus Referenzen zJava Referenzen entsprechen gesicherten C++ Zeigern yJava Referenz kann null sein yman kann damit z.B. verkettete Listen schreiben yZugriff auf Elemente des Objekts mit. statt -> zein Pendant zu C++ Referenzen gibt es nicht yObjekte werden immer per "call by reference" übergeben yprimitive Typen immer per "call by value" zgrößere Sicherheit gegen Programmierfehler yes gibt keine Zeigerarithmetik (so kann man sich auch nicht verrechnen...) yman kann kein Objekt löschen, auf das noch Zeiger zeigen

156 Weitere Details zu Java Typumwandlung (cast) zTypumwandlung zwischen primitiven Typen ist wohldefiniert ynicht einfach andere Interpretation des Bitmusters ykeine beliebigen Casts zwischen irgendwelchen Datentypen zTypumwandlung zwischen Objektreferenzen wird zur Laufzeit überprüft ynur die Umwandlung zwischen Basisklasse und abgeleiteter Klasse ist zulässig

157 Weitere Details zu Java Interface zein Interface ist eine abstrakte Basisklasse ohne Elementvariablen, besteht also ausschließlich aus yabstrakten Methoden (abstract = pur virtuell in C++) yKonstantendefinitionen (public final static) ylokalen Klassen zein Interface kann anstelle einer Klasse zur Typisierung von Variablen und formalen Parametern verwendet werden zspezielle Form der Vererbung class Klasse implements Interface ydie Klasse muss alle Methoden des Interface implementieren yein Programm hat eine Interfacereferenz und ruft deren Methoden auf ydie Interfacereferenz kann dann auf Objekte von Klassen zeigen, die dieses Interface implementieren Spezialfall einer abstrakten Klasse

158 Weitere Details zu Java Klassenhierarchie class NeueKlasse extends Basisklasse implements Interface1, Interface2 zkeine Mehrfachvererbung, nur Einfachvererbung yaber Implementierung mehrerer Interfaces möglich ydamit wird das Problem in verschiedenen Basisklassen eventuell doppelt vorhandener Elementvariablen umgangen; virtuelle Ableitung ist daher überflüssig zBesonderheiten yeine Klasse muss mit abstract markiert werden, wenn sie abstract Methoden enthält yeine Klasse, die als final markiert ist, kann nicht mehr als Basisklasse dienen y(Anonyme) innere Klassen siehe Kapitel 6. Ereignisbehandlung

159 Weitere Details zu Java Mutter aller Klassen: class Object zalle 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 Weitere Details zu Java plattformunabhängig ? zgut: Wertebereiche primitiver Datentypen festgelegt zdie Sprache ist meist nicht das Problem, sondern die Bibliotheken yAWT 1.0, AWT 1.1, Swing, SWT yvgl. MFC, OWL, Qt yZugriff auf Betriebssystemfunktionen zdie Implementation der Virtual Machine und ihrer Bibliotheken wird zur neuen Plattform yVMs von Sun, Netscape, Microsoft,... yVersionsnummern zhohe HW-Anforderung: viel Rechenleistung, viel RAM zJava SE, Java EE, Java ME alter Informatikertraum

161 Weitere Details zu Java sicher ? zetliche Methoden mittlerweile "deprecated", weil "inherently unsafe" yz.B. Thread.stop(), Runtime.runFinalizersOnExit(...) zAusführungszeitpunkt von finalize und garbage collector undefiniert Echtzeitanwendungen zZuweisungen für double und long (64-Bit-Werte) sind nicht atomar yd.h. können als 2 Maschinenbefehle implementiert und damit unterbrechbar sein (müssen aber nicht) zSwing ist nicht thread safe Programmierer machen in jeder Sprache Fehler...

162 Collection-Klassen Collection-Klassen zvgl. Standard Template Library STL in C++ zJDK 1.0: Vector, Stack, Dictionary, Hashtable, BitSet yEnumeration (unübliche Bezeichnung für Iterator); thread safe zJDK 1.2: List, Set, Mapempfohlen yIterator; nicht thread safe ymehrere Implementierungen (als Array, als verkettete Liste) z"thread safe" bedeutet: bequem, sicher, aber langsam yvergeudet Performance wenn nur in einem Thread verwendet zElemente vom Typ Object yd.h. von beliebiger Klasse wegen impliziter Typkonversion yeinfache 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 Collection-Klassen Wrapper-Klassen zKlassen Integer, Long, Double... kapseln einfache Datentypen int, long, double... zAnwendungen yElemente von Collection-Klassen yDatentyp mit null-Wert in Datenbankanwendungen yReflection-API xErmittlung der Klasse gegebener Objekte zur Laufzeit ynicht geeignet für call by reference Parameter, da "immutable" xdafür muss man bei Bedarf eigene Wrapper-Klassen schreiben zAutomatische Umwandlung bei Bedarf yAutoboxing / Autounboxing zbei Wrappern Methode equals anstelle von == verwenden ! yVM kann gleiche Zahlen durch ein Objekt darstellen (da "immutable"), muss es aber nicht Wert kann nicht verändert werden

164 Collection-Klassen Interface Iterator zzum Abarbeiten aller Elemente einer Collection yabstrahiert Endebedingung und Fortschalteoperation einer Schleife yNachfolger der veralteteten "Enumeration" (unüblicher Name) zCollection liefert Objekt einer passenden Iterator-Klasse Iterator i = c.iterator(); zMethoden boolean hasNext(); // vgl. Enumeration.hasMoreElements() Object next(); // vgl. Enumeration.nextElement() void remove(); // fehlt in Enumeration zAnwendung while (i.hasNext()) verarbeite(i.next());

165 Collection-Klassen Klassenhierarchie kurios: einige Methoden sind optional, d.h. sie dürfen beim Aufruf eine Exception werfen... diese Klassen sind zur Anwendung vorgesehen

166 Collection-Klassen AbstractList implements List zgeordnete Liste von Elementen zZugriff ywahlfrei per Index 0.. n-1 ysequentiell zImplementierungen yArrayList: sich bei Bedarf erweiterndes Array schneller wahlfreier Zugriff; Einfügen/Entfernen langsam yLinkedList: doppelt verkettete Liste wahlfreier Zugriff langsam; Einfügen/Entfernen schnell yadd(index, value); get(index); set(index, value);

167 Collection-Klassen AbstractSet implements Set zungeordnete Menge zkein Element doppelt - basierend auf Object.equals() ywird beim Einfügen verhindert yspätere Änderung eines Elements kann Set ungültig machen zImplementierung yHashSet add(value); contains(value); remove(value); Vereinigungsmenge:addAll(set); Schnittmenge:retainAll(set); yim Mittel gleicher Aufwand für Einfügen, Löschen und Zugriff

168 Collection-Klassen AbstractMap implements Map zassoziativer Speicher bildet Schlüssel auf Werte ab yEinfügen eines Schlüssel-Wert-Paares, dessen Schlüssel bereits vorhanden ist, überschreibt den bisherigen Wert zImplementierung yHashMap get(key); put(key, value); yIterator verfügbar über values().iterator(); "Collection View" ySpeicherort wird mit Hash-Funktion berechnet; kollidierende Elemente werden dort in verketteter Liste abgelegt Hash key

169 Collection-Klassen Generics: typsichere Collections zseit Java 5 kann die Klasse der Elemente definiert werden yfrüher generell class Object, i.a. per Typecast gewandelt xauch weiterhin möglich (Generics sind optional) ykeine einfachen Datentypen als Elemente; dazu weiterhin Wrapper zÜberprüfung zur Compile-Zeit zTypecast wird überflüssig znicht verwechseln mit C++ Templates ! ArrayList a = new ArrayList (50); for (int i=0; i<5; i++) a.add(i, new Integer(i)); Iterator 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 Dateien und Streams Streams / Datenströme zAbstraktion für sequentielle Ein-/Ausgabe bzw. Kommunikation (vgl. C++) yDatei, Netzwerk, anderer Thread zeinheitliches Zugriffsprinzip Einlesen: Stream öffnen while (Daten im Stream) Daten lesen Stream schließen Ausgeben: Stream öffnen while (Programm liefert Daten) Daten schreiben Stream schließen D P D P im Package java.io

171 Dateien und Streams Byte- und Character-Streams zByte-Streams yabstrakte Basisklassen InputStream und OutputStream yByte-weises Lesen und Schreiben von Binärdaten xAudio, Video, Bilder, Executables zCharacter-Streams yabstrakte Basisklassen Reader und Writer yLesen und Schreiben von Text, d.h. 16 Bit Unicode-Zeichen yZugriff aus verschiedenen Threads ist möglich (synchronized) zähnliche Methoden für beide Varianten yKonstruktor öffnet den Stream yMethode close schließt den Stream xwenn close-Aufruf fehlt, tut es der Garbage Collector via finalize Datentyp byte Datentyp char

172 Dateien und Streams Lesen aus Streams zint read() yliest einzelnes Byte/Zeichen und liefert es als Ergebnis ab zint read(byte/char cbuf[]) yliest verfügbare Bytes/Zeichen in Array cbuf yberücksichtigt Länge des Arrays yliefert Anzahl gelesener Bytes/Zeichen als Ergebnis zint read(byte/char cbuf[], int offset, int length) yliest maximal length Bytes/Zeichen in cbuf, beginnend an Position offset zalle liefern –1 wenn das Ende des Streams erreicht ist yleider keine benannte Konstante endOfStream o.ä. zwerfen ggf. IOException

173 Dateien und Streams Schreiben in Streams zvoid write(int c) yschreibt Byte/Zeichen c in den Stream zvoid write(byte/char cbuf[]) yschreibt alle Bytes/Zeichen aus cbuf in den Stream zvoid write(byte/char cbuf[], int offset, int length) yschreibt length Bytes/Zeichen aus cbuf in den Stream, beginnend an Position offset zvoid write(String str) ynur in Klasse Writer zvoid flush() ygibt Pufferinhalt sofort aus (sofern Stream gepuffert ist)

174 Dateien und Streams Spezialisierte Streams Byte-StreamsCharacter-Streams DateiFileInputStream FileOutputStream FileReader FileWriter ArbeitsspeicherByteArrayInputStream ByteArrayOutputStream CharArrayReader, StringReader CharArrayWriter, StringWriter Thread- Kommunikation PipedInputStream PipedOutputStream PipedReader PipedWriter AusgabeformatPrintStream (System.out) PrintWriter zusätzliche Pufferung BufferedInputStream BufferedOutputStream BufferedReader BufferedWriter Zeilen zählenLineNumberInputStreamLineNumberReader Konvertierung (Zeichensatz) InputStreamReader liest Bytes, liefert Characters OutputStreamWriter bekommt Char., schreibt Bytes I/O-Medien Filter

175 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 FileInputStream FileOutputStream

176 Dateien und Streams Zerlegen von Texten: Scanner zzerlegt Text in einfache Datentypen und Strings anhand von regulären Ausdrücken zScanner s =new Scanner( new BufferedReader( new FileReader("Input.txt"))); zeinfachen Datentyp extrahieren yboolean hasNextDouble() ydouble nextDouble() zString mit Trennzeichen extrahieren yvoid useDelimiter(String pattern) yString next() Alternative falls das Format festliegt: DataInputStream Beispiel "Einlesen einer CSV-Datei" verbessert die Performance

177 Dateien und Streams Wahlfreier Datei-Zugriff zLesen und Schreiben an beliebiger Position, nicht nur sequentiell yverwaltet mittels gemeinsamen read/write-FilePointer zKlasse RandomAccessFile (kein Stream!) yÖffnungsmodus: r = nur Lesen, rw = Lesen und Schreiben yübliche read- und write-Methoden yzusätzlich readType und writeType mit Type = Boolean, Char, Float, Int,... ylong getFilePointer() liefert aktuellen Wert des FilePointer yseek(long pos) positioniert FilePointer auf pos siehe auch java.nio für systemnahe Zugriffe haben Streams nicht

178 Serialisierung Serialisierung / Deserialisierung zUmwandlung von Objekten in einen Stream (und zurück) yinsbesondere auch Referenzen auf andere Objekte zverschiedene Streamformate sind möglich yBytestream xnur maschinenlesbar, kompakt, effizient verarbeitbar yim Trend: XML-Format xnotfalls vom Menschen lesbar, selbstdokumentierend xgroßer Speicherbedarf xaufwändiges Generieren und Parsen (aufwändig für die Maschine, unaufwändig für Entwickler durch vorgefertigte Klassen) zAnwendungsbereiche yPersistente Speicherung (typischerweise in Dateien) xfür Datenbanken wird man Objekte eher in Datensätze abbilden yÜbertragung im Netz (remote procedure call, Verteilte Systeme)

179 Serialisierung Serialisierung in C++ zSerialisierung gibt es in den meisten Sprachen ymit spezieller Syntax oder als reguläre Bibliothek zz.B. Bibliotheken für C++ passend zur STL yBoost Serialization ylibs11n ySweet Persist zz.B. integriert in MFC mit Unterstützung für MFC-Container

180 Serialisierung Interface java.io.Serializable zclass MeineKlasse implements Serializable z"implements Serializable" bedeutet nur: Entwickler gibt sein OK zur Serialisierung dieser Klasse yVorsicht, wenn die Superklasse nicht serialisierbar ist ! yalle Unterklassen sind zwangsläufig serialisierbar zvergleichbar 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 Sonderfall Object writeReplace() // ersetzen durch anderes Objekt Object readResolve() "Markierungsschnittstelle" (definiert keine Methoden)

181 Serialisierung Standard-Implementierung in Java zserialisiert Informationen über die Klasse, aber nicht die Klassendefinition selbst zserialisiert in einen Bytestream zserialisiert alle nicht-transienten und nicht-statischen Elemente zserialisiert referenzierte Objekte rekursiv yvorausgesetzt, deren Klasse ist ebenfalls serialisierbar ykann auch mit zyklischen Referenzen umgehen ztransiente Elemente werden bei der Deserialisierung mit ihrem parameterlosen Konstruktor initialisiert class Point implements Serializable { int x, y; transient float rho, theta; } = nicht persistent

182 Serialisierung Praktischer Einsatz Serialisieren FileOutputStream f = new FileOutputStream("datei.ser"); ObjectOutputStream s = new ObjectOutputStream(f); s.writeObject("Today"); // ruft string.writeObject s.writeObject(new Date()); s.flush(); // optional: Puffer ausgeben s.close(); Deserialisieren FileInputStream 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 Serialisierung Portabilität serialisierter Objekte zserialisierte Objekte setzen passende Version der Klasse voraus ySwing-Objekte sind serialisierbar, aber nicht auf eine andere Version der Java VM (d.h. der Swing Bibliothek) übertragbar zKompatibilität wird erkannt anhand einer Versionsnummer explizit vom Entwickler verwaltet: private static final long serialVersionUID = 27L; yalternativ implizit von Java ermittelt Vorsicht: stark compilerabhängig ! zInvalidClassException bei unterschiedlichen Versionen

184 Serialisierung Mögliche Probleme zSerialisierung kann heikel sein wenn ydie Semantik des Objektzustands umgebungsabhängig ist xz.B. Thread-Objekt nur sinnvoll in der aktuellen Virtual Machine xz.B. Klasse zur Kapselung einer Datenbank ydas Objekt sensible private Elemente beinhaltet, z.B. Passworte yunterschiedliche Versionen der Klasse bei Seriali- sierung und Deserialisierung eingesetzt werden zSerialisierung ist i.a. unproblematisch bei reinen Datenklassen mit kurzer Persistenz ynicht 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 Serialisierung Interface java.io.Externalizable zfür Sonderfälle: flexibler, aber aufwändiger zdas Objekt ist für seine Ein-/Ausgabe selbst zuständig ykeine Standard-Implementierung z"normales" Interface: definiert Methoden, die implementiert werden müssen void readExternal (ObjectInput in) void writeExternal (ObjectOutput out) formal ein Subinterface von Serializable interface Externalizable extends Serializable

186 Serialisierung Marshalling / Unmarshalling zallgemeinere Problemstellung ySerialisierung ist ein Sonderfall zanordnen / arrangieren von Daten zwecks yAustausch zwischen Programmiersprachen yAustausch zwischen Prozessen yz.B. CORBA, RMI, Microsoft COM, Mozilla XPCOM zZiel: Plattform- und Sprachunabhängigkeit yByte Ordnung (little-endian, big-endian) yWortbreite (32 Bit, 64 Bit) yRepräsentation von Gleitkommazahlen yRepräsentation von Zeigern zur Abgrenzung und Einordnung

187 Entwurfsphase mit statischem Layout Dynamische und statische Layouts zstatisches Layout Definition von Koordinaten ydie Größe und Position der einzelnen Komponenten ist in einem absoluten Koordinatensystem (z.B. Pixel) festgelegt yBildschirmmaske ist für eine bestimmte Gesamtgröße gemacht yunter Windows gewisse Anpassung über Bildschirmschriftgröße zdynamisches Layout Definition von Regeln ydie Größe und Position der einzelnen Komponenten kann von der Größe bzw. Auflösung des Bildschirms und von der Fenstergröße abhängen ykann plattform- bzw. bildschirmunabhängig gemacht werden yaber: schwieriger zu entwickeln Visual C++

188 Entwurfsphase mit statischem Layout Vorgehensweise beim Entwurf zJava unterstützt dyn. Layout mit Layout-Managern yContainer-Klassen haben default Layout-Manager zwir bauen als Vorstufe zunächst statische Layouts yvergleichbar der Arbeitsweise mit MS Visual C++ zentscheidende Vorteile: yman entwirft visuell und konzentriert sich auf die Oberfläche; Gestaltung wird nicht durch Realisierungsprobleme eingeengt yman bekommt mit wenig Aufwand einen Prototypen und hat weniger Hemmungen, diesen mehrfach zu ändern zwenn der Entwurf schließlich steht, dann wird ein dynamisches Layout konstruiert unüblich in Java

189 Entwurfsphase mit statischem Layout Starter-Applikation zausgehend von einer Eclipse Applikation mit Hauptfenster abgeleitet aus JFrame wird yeine geeignete Größe für das Hauptfenster gesetzt ydas BorderLayout durch null (= absolute layout) ersetzt yfür alle visuellen Komponenten die Größe und Platzierung im Design-Editor manuell festgelegt zdas Beispiel "die einfachste GUI-Applikation" kann als Ausgangspunkt für das Praktikum dienen

190 GUI Klassenstruktur Architektur für kleine GUI-Anwendungen zTrennung von GUI, Programmlogik und Datenhaltung yvgl. Model / View / Controller Architektur (MVC) yView + Controller implementiert durch Fensterklassen xView: Generierung der Widgets im Konstruktor xController: Event-Handler als Methoden yModel implementiert durch "normale" Klasse(n) xwird ggf. persistent durch Serialisierung xoder kapselt Datenbank zPartitionierung / Modularisierung der GUI yorientiert an Screens und Blöcken innerhalb von Screens zKapselung spezieller Hardware durch eigene Klasse(n) yz.B. Elektronik des Fernsehers (Tuner, Verstärker,...) Konkretisierung der Domänen- modellierung aus OOAD

191 GUI Klassenstruktur Model / View / Controller – Architektur View Controller Model View GUI-Objekte Controller Ereignisbehandlung Model (Geschäftslogik) Datenhaltung übliche Darstellungangepasst für OO-GUIs

192 GUI Klassenstruktur Beispiel Model / View Mehrere Sichten auf gemeinsames Datenmodell Änderungen der Daten aktualisieren alle Sichten

193 GUI Klassenstruktur Beispiel Model / ViewController Beide Sichten sind interaktiv und ermöglichen eine Änderung der Daten Daten- bank oft zusammen

194 GUI Klassenstruktur Situation mit Eclipse WindowBuilder zgeneriert Widgets und deren Attribute im Konstruktor zreferenziert manche Widgets als Instanzvariable (JTextField), manche im Konstruktor als lokale Variable (JButton) zregistriert 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 GUI Klassenstruktur Alle Widgets zu Instanzvariablen zProblem: lokale Variable im Konstruktor sind aus Event- Handlern nicht erreichbar yz.B. für btnOK.setEnabled zto do: im WindowBuilder sofort sinnvolle Namen für jedes Widget eintragen zto 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 GUI Klassenstruktur Handler als Methoden der Fensterklasse zto do: neue Methode anlegen widgetName_eventName yhat Zugriff auf this und alle Widget-Referenzen yhier wird der "Nutzinhalt" des Handlers implementiert xaußerhalb des Konstruktors zto do: neue Methode aus ActionListener aufrufen ybei 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 GUI Klassenstruktur Statische GUI im Konstruktor verstecken ydie Erzeugung der Widgets, deren Verknüpfung (add) und deren Attribute verbleiben im Konstruktor yto do: Konstruktor "zuklappen" und "nicht mehr anschauen" xGUI nur per WindowBuilder weiterentwickeln yto 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 GUI Klassenstruktur Zugriff auf Model-Objekt zdie Model-Klasse wird in main instanziiert Beispiel siehe nächste Folie yoder im Konstruktor der Hauptfensters zeine Referenz auf das Model-Objekt wird Instanzvariable der Hauptfensterklasse yvia Hauptfenster-Objekt in Panelklassen verfügbar zalternativ: Model-Referenz als public static Variable ynicht viel besser als eine globale Variable zalternativ: Model als Singleton yok wenn es nur wenige Singletons im System gibt; sonst auch nicht viel besser als eine globale Variable gilt entsprechend für HW-Kapselungsklasse

199 GUI Klassenstruktur main-Methode in Hauptfensterklasse zwird so von Eclipse generiert; kann man beibehalten yStart der Anwendung == Öffnen des Hauptfensters zalternativ: eine eigene Klasse "Applikation" ymit 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 GUI Klassenstruktur Partitionierung der GUI zGUI Blöcke als eigene von JPanel abgeleitete Klassen zin der Fensterklasse JPanel per WindowBuilder einfügen zim Code manuell ersetzen durch abgeleitete Panel-Klasse zReferenz auf FrameMain per Konstruktorparameter durchreichen an Panelklassen yals Owner für DialogConfig yNebenwirkung im WindowBuilder akzeptieren: FrameMain extends JFrame PanelBottom extends JPanel PanelRight extends JPanel DialogConfig extends JDialog für komplexe Screens

201 GUI Klassenstruktur Klassendiagramm Quellcode in DScript Beispiele Programmtypen GUI Struktur

202 GUI Klassenstruktur Reaktionszeit und Event Queue zWichtige Anforderung: die GUI muss jederzeit auf Benutzereingaben reagieren ywenn bestimmte Funktionen (vorübergehend) nicht verfügbar sind, muss das dem Benutzer zumindest visualisiert werden zalle GUI Aktivitäten werden sequentiell im Event Dispatching Thread ausgeführt yinsbesondere paint/repaint und alle Handler ydas erspart dem Programmierer die explizite Synchronisation yKonsequenz: die Laufzeit der einzelnen Handler muss kurz sein (sonst "friert die GUI ein" und reagiert nicht auf Eingaben)

203 GUI Klassenstruktur Kurze Aktivitäten mit Wait-Cursor zwas ist "kurz"? eine Faustregel: ywenige 10 Millisekunden:ohne besondere Anzeige ybis 1 Sekunde:Cursor "Sanduhr" zeigen ymehr als 1 Sekunde:Worker Thread und JProgressBar zRealisierung der "Sanduhr" mit Component.setCursor und Klasse Cursor: setCursor(Cursor.getPredefinedCursor(Cursor.WAIT_CURSOR)); // eigentliche Aufgabe des Handlers setCursor(Cursor.getDefaultCursor());

204 GUI Klassenstruktur Längere Aktivitäten im Worker Thread zVorgehensweise yKlasse Worker von Thread ableiten xbenötigte GUI-Objekte als Konstruktorparameter durchreichen xrun() überschreiben, darin die Aktivität implementieren xZugriff auf GUI-Objekte mittels SwingUtilities.invokeLater(...) yinvokeLater benötigt Instanzen von Hilfsklassen, die das Interface Runnable implementieren xZugriff auf GUI-Objekte ausschließlich in run() dieser Hilfsklassen zstatt 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:

205 Fenster, Dialoge, Container GUI-Bibliotheken in Java SE zAWT - Abstract Window Toolkit yverwendete Steuerelemente des Host-Betriebssystems x"native widgets" plattformabhängig yschon wieder veraltet (gut, dass Sie es nicht lernen mussten...) y1.1 veränderte gegenüber 1.0 die Ereignisbehandlung fundamental (Listener statt virtueller Funktionen: ermöglicht Beans) zSWT - Standard Widget Toolkit yfür IBM Eclipse, ebenfalls "native widgets" zJFC/Swing - Java Foundation Classes yrendert mit Java, verwendet nur grafische Primitive des Host-OS yaustauschbares "Look & Feel" (Java, Windows, Motif, Mac,...) xzum Download: ysehr sauber strukturierte Klassenbibliothek, vielfältig erweiterbar ynicht thread safe, deshalb Aufrufe in Event Queue auslagern die verwenden wir !

206 Fenster, Dialoge, Container Weitere Features von JFC/Swing zbeliebige Schachtelung von Container-Objekten zStandarddialoge JFileChooser, JColorChooser zModel-View-Controller (MVC) Architektur auf der Ebene der Steuerelemente (Components) zAccessibility Support: Unterstützung für Behinderte ySprachein-/ausgabe, Braille-Zeile etc. zInterface Action zur Bündelung der Aktionen mehrerer Steuerelemente yz.B. Menüpunkt + Toolbar Icon + Hotkey: zMultiple Document Interface

207 Fenster, Dialoge, Container Container zsind die Bauplätze, auf denen die Bedienelemente aufgebaut werden zeigenständige Fenster yJFrame, JWindow, JDialog yeingebettet in HTML-Seite: JApplet zUnterteilung von Fenstern yJPanel yJScrollPane, JSplitPane, JTabbedPane, JToolBar zMultiple Document Interface yJDesktopPane, JInternalFrame (behandeln wir nicht)

208 Fenster, Dialoge, Container Top Level Container zJFrame, JWindow, JDialog, JApplet zhaben eine contentPane, die andere Panels oder Komponenten trägt ysind Wurzel eines Objektbaums zkönnen eine Menüleiste (JMenuBar) tragen zwerden normalerweise als Basisklassen genutzt yWindowBuilder leitet für jedes Fenster eine Unterklasse ab zwir arbeiten i.a. nur mit der contentPane und nutzen weitere Panels/Panes zur räumlichen Gliederung

209 Fenster, Dialoge, Container Bereits bekannt: JFrame zmit Fenstertitel, Rand und Min/Max-Schaltflächen zeigene Hauptfenster-Klasse deklarieren ypublic class MainWindow extends JFrame {...} zFensterobjekt erzeugen (meist in function main) yMainWindow thisFrame = new MainWindow(); zLayout neu berechnen yohne Layout-Manager:thisFrame.setSize(...); thisFrame.validate(); ymit Layout-Manager:thisFrame.pack(); zFenster sichtbar machen ythisFrame.setVisible(true); zFenster schließen ythisFrame.setDefaultCloseOperation(int); Hauptfenster von Applikationen; normalerweise nur ein einziges JFrame-Objekt pro Anwendung ! EXIT_ON_CLOSE HIDE_ON_CLOSE (default) DISPOSE_ON_CLOSE DO_NOTHING_ON_CLOSE JWindow hat das nicht; für weitere unabhängige Fenster der Anwendung

210 Panels und Panes Räumliche Gliederung zKomponenten werden gruppiert und platziert durch Zuordnung zu Panels und Panes zPanes haben spezifische Sonderfunktionen zkomplexe Layouts sind möglich durch Schachtelung von Panels und Panes ( Objektbaum) zjedes Panel/Pane kann einen anderen Layout-Manager haben zfür Panels und Panes ist normalerweise keine Ereignisbehandlung erforderlich Panel Tafel, Platte, (vertieftes) Feld Pane (Fenster)Scheibe

211 Panels und Panes JPanel: einfache Fläche zFläche, die andere Komponenten trägt ybekanntes Beispiel: contentPane yJPanel meinPanel = new JPanel(); zLayout-Manager zuordnen oder weglassen ydefault ist FlowLayout ymeinPanel.setLayout(new BorderLayout());// dynamisches Layout ymeinPanel.setLayout(null);// statisches Layout zKomponenten zuordnen ymeinPanel.add(aComponent); zUmrandung (Border) definieren yFreiflächen und Abstände sind als EmptyBorder realisierbar yErstellung wird durch Eclipse komfortabel unterstützt (unbedingt generierten Code ansehen !)

212 Panels und Panes Rand und Abstand mit Border zDiverse Klassen abgeleitet von AbstractBorder yLineBorder, EtchedBorder, BevelBorder, EmptyBorder, MatteBorder, TitledBorder, CompoundBorder zImplementierung als ybenanntes Objekt xEtchedBorder myBorder = new EtchedBorder(); meinPanel.setBorder(myBorder); yanonymes Objekt xmeinPanel.setBorder(new EtchedBorder()); ygemeinsam verwendetes anonymes Objekt xmeinPanel.setBorder(BorderFactory.createEtchedBorder()); Interface

213 Panels und Panes JScrollPane: verschiebbare Sicht zverschiebbare Sicht auf eine (größere) Komponente zJScrollPane zwischen Panel und Komponente schalten ytextArea = new JTextArea(5, 30); JScrollPane scrollPane = new JScrollPane(textArea); contentPane.add(scrollPane); zJList, JTextComponent, JTree, JTable sind dafür vorbereitet yimplementieren Interface Scrollable; damit wird die "Skalierung" der ScrollBars definiert: getScrollableBlockIncrement, getScrollableUnitIncrement, getPreferredScrollableViewportSize,... yandere Klassen können dieses ebenfalls implementieren empfohlen für komplexe Komponenten

214 Panels und Panes JSplitPane: zweigeteilt zzwei Panes durch verschiebbare Trennlinie geteilt zErzeugen yJSplitPane splitPane = new JSplitPane( JSplitPane.HORIZONTAL_SPLIT, pane1, pane2); zVerschiebung durch Mausklick aktivieren ysplitPane.setOneTouchExpandable(true); zTrennlinie positionieren ysplitPane.setDividerLocation(150);// 150 Pixel splitPane.setDividerLocation(0.25);// 25% zMindestgröße für den Inhalt festlegen ypane1.setMinimumSize(new Dimension(100, 50));

215 Panels und Panes JTabbedPane: Karteikarten mit Reitern zorganisiert mehrere Panes "hintereinander" und mittels Karteireiter umschaltbar ysehr gut: Reiter in der 2. Reihe behalten ihre Position (wechseln nicht die Reihe wie unter Windows) zErzeugen yJTabbedPane tabbedPane = new JTabbedPane(); zKarteikarte einfügen und beschriften ytabbedPane.addTab("Titel", icon, pane1, "Tooltip"); zKarteikarte aktivieren ytabbedPane.setSelectedIndex(int) tabbedPane.setSelectedComponent(Component)

216 Panels und Panes CardLayout: reiterlose Karteikarten zAnwendung ähnlich wie JTabbedPane, aber Umschaltung kann/muss selbst programmiert werden zErzeugen yCardLayout cardLayout = new CardLayout(); JPanel cardPanel = new JPanel(); cardPanel.setLayout(cardLayout ); zKarteikarte einfügen ycardPanel.add(pane1, "Text1");// Text muss eindeutig sein zKarteikarte aktivieren ycardLayout.show(cardPanel, "Text1");// oder sequentiell: cardLayout.first(cardPanel); cardLayout.next(cardPanel); eigentlich keine Pane, sondern ein Layout-Manager

217 Dialoge Überblick zein Dialog ist ein separates Fenster, das über dem Hauptfenster (oder einem anderen Dialog) schwebt ywird oft zur Ein-/Ausgabe von Parametergruppen verwendet yfrei positionierbar, nicht bildschirmfüllend ywird von seinem Hauptfenster minimiert zmodale Dialoge blockieren das Hauptfenster, solange sie aktiv sind zmoduslose Dialoge erlauben die Aktivierung des Hauptfensters yBeispiel: Editieren während "Suchdialog" in Textverarbeitung zMessageBox ist einfache Form eines modalen Dialogs

218 Dialoge JDialog zfür beide Arten: modal + moduslos zJDialog (Frame owner, boolean modal) yauch Dialog statt Frame möglich zsetVisible(true) macht den Dialog sichtbar yblockiert in modalen Dialogen yterminiert sofort in moduslosen Dialogen yvalidate() oder pack() notwendig um Layout neu zu berechnen zsetVisible(false) macht den Dialog unsichtbar yhebt die Blockierung von setVisible (true) in modalen Dialogen auf yzerstört nicht das Dialogobjekt: man kann danach noch auf seine Daten zugreifen

219 Dialoge JOptionPane: Standard-Dialoge zgängige modale Einfach-Dialoge yAufruf durch diverse static Methoden von JOptionPane: showMessageDialog, showInputDialog, showConfirmDialog ydiverse Icons zur Verschönerung per Konstante wählbar yButton-Kombinationen ebenfalls per Konstante wählbar yAuswahl des Benutzers wird Ergebnis der Methodenaufrufe zvergleichbar mit MessageBox unter Windows yetwas vergleichbares fehlt in AWT zweitestgehende Konfigurationsmöglichkeit mittels showOptionDialog

220 Dialoge Spezielle Dialoge zJFileChooser yzur Auswahl einer Datei (vollständiger Pfad) yVarianten "Öffnen" und "Speichern unter" gewählter Pfad als Ergebnis von getSelectedFile() OK oder Cancel als Ergebnis von showOpenDialog(...) zJColorChooser yzur Auswahl einer Farbe static Methode showDialog (parent, title, color) liefert als Ergebnis ein Color-Objekt yColor-Objekt ist null bei Cancel leider uneinheitlich

221 5.2 Dialoge Datenübergabe public 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(); } Initialisierung Rückgabe 221

222 Dynamisches Layout Layout-Manager in Swing zJava unterstützt dynamisches Layout durch verschiedene Layout-Manager-Klassen yweil einfach einsetzbar, werden sie in Java eher zu oft verwendet yfehlen unter Windows / MFC (könnte man selbst schreiben) yverfügbar in.NET seit 2.0 (FlowLayoutPanel, TableLayoutPanel) zein Layout-Manager-Objekt wird einem Fenster / Panel / Pane zugeordnet und verwaltet dessen Komponenten yLayout wird neu berechnet, wenn sich a) die Fenstergröße ändert oder b) die Wunschgröße (preferred size) einer Komponente ändert zLayout-Manager können geschachtelt werden yFreiflächen mittels leerem Rand oder unsichtbarer Komponenten

223 Layout-Manager Überblick

224 Layout-Manager "Fließtext": FlowLayout zfür einfache Reihe von Komponenten yStandard bei JPanel zKomponenten behalten eigene Größe (PreferredSize) yPanel zu schmal: Zeilenumbruch yPanel zu groß: Gruppe oben zentriert (oder links-/rechtsbündig) zwichtige Attribute: yAlignment: CENTER, LEFT, RIGHT yHgap, Vgap: Lücke zwischen Komponenten xleider auch vor/über erster und hinter/unter letzter Komponente (wirkt wie Rand, allerdings nicht bei Zeilenumbruch)

225 Layout-Manager FlowLayout Programmfragment JPanel panel = new JPanel(); FlowLayout fl = new FlowLayout(); fl.setAlignment(FlowLayout.LEFT);// Ausrichtung fl.setHgap(9);// horizontale Lücke fl.setVgap(12);// vertikale Lücke panel.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 Layout-Manager Zeile oder Spalte: BoxLayout zsenkrechte oder waagrechte Reihe yAusrichtung jeder Komponente individuell wählbar setAlignmentX/Y (0.0=linksbündig =rechtsbündig) yAchtung: Default-Alignment ist unterschiedlich je nach Klasse ! zleere Komponenten als Platzhalter für Freiflächen yRigidArea: Freifläche fester Größe (eine Dimension kann 0 sein) ohne:mit: yGlue: Freifläche, die den "Rest" füllt ohne:mit: yFiller: Freifläche mit Minimum-, Preferred- und MaximumSize (ähnlich wie RigidArea, aber variabler) y(Strut: wird nicht empfohlen; besser RigidArea verwenden) setAlignmentX (0.5) Glue hält nicht zusammen, sondern drückt auseinander

227 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ügen panel.add(Box.createRigidArea(new Dimension(5,0))) panel.add(jButton2); panel.add(Box.createHorizontalGlue()); panel.add(jButton3);

228 Layout-Manager Mitte maximal: BorderLayout zmaximiert mittlere Kompo- nente fensterabhängig; reiht andere Komponenten am Rand zLayout-Strategie: CENTER maximal WEST / EAST möglichst schmal NORTH / SOUTH möglichst niedrig zhäufig ist außer CENTER nur ein weiteres Feld belegt yFelder enthalten oft andere Layout-Manager zoptional mit Hgap / Vgap: Lücken zwischen den Feldern zStandard-Layout von JFrame.contentPane

229 Layout-Manager BorderLayout Programmfragment JPanel panel = new JPanel(); BorderLayout bl = new BorderLayout();// Hgap=Vgap=0 panel.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 Layout-Manager Gleiche Tabellenzellen: GridLayout z2-dim. Raster für Komponenten zKomponenten werden auf Rastermaß gestreckt zAnzahl der Zeilen und/oder Anzahl der Spalten muss festgelegt werden yKonstruktorparameter oder setRows / setColumns y0 definiert variable Anzahl (entweder für Zeilen oder für Spalten) zoptional mit Hgap / Vgap: Lücken zwischen den Feldern

231 Layout-Manager GridLayout Programmfragment JPanel panel = new JPanel(); GridLayout gl = new GridLayout (3,2); // Hgap=Vgap=0 panel.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ügen panel.add(jButton5); variable Zeilenzahl

232 Layout-Manager Universell: GridBagLayout zsehr flexibles Raster-Layout yfreie Adressierung der Rasterposition yKomponenten können gestreckt werden yKomp. können sich über mehrere Zeilen und/oder Spalten erstrecken yAndockkante in größerem Rasterfeld wählbar yrasterfeldbezogene Füllattribute yx- und y-"Gewichte" bestimmen Verteilung von Restplatz zparameterloser Konstruktor, keine wichtigen Attribute yaber jede Komponente bekommt ein eigenes GridBagConstraints-Objekt (reine Datenstruktur) zugeordnet vgl. HTML-Table

233 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; muss man im Quellcode nachlesen

234 Layout-Manager GridBagConstraints (1) zint gridx, int gridy yadressiert Spalte und Zeile für die Komponente (Zelle oben links angeben, wenn mehrere Zellen belegt werden) zint gridwidth, int gridheight (default 1) yAnzahl der von der Komponente belegten Spalten und Zeilen ySonderfall REMAINDER belegt den Rest einer Spalte bzw. Zeile zfill = NONE (default), HORIZONTAL, VERTICAL, BOTH ygibt an, ob und wie die Komponente gestreckt werden soll, um die ganze Zelle zu füllen zint ipadx, int ipady (default=0) yPadding = Innenabstand (d.h. Inhalt der Komponente Rand) yvergrößert die Minimalgröße der Komponente um 2*ipadx/y werden jeder einzelnen Komponente zugeordnet

235 Layout-Manager GridBagConstraints (2) zInsets insets (default new Insets (0,0,0,0)) yMargin = Außenabstand (d.h. Rand der Komponente Grid) ydefiniert einen Mindestrand um die Komponente für T, L, B, R zanchor = CENTER (default), NORTH, NORTHEAST, EAST, SOUTHEAST, SOUTH, SOUTHWEST, WEST, NORTHWEST ydefiniert den Andockpunkt, falls Komponente kleiner als Zelle ist zdouble weightx, double weighty (default=0.0; Wertebereich ) yprozentuale Verteilung von freiem Platz auf Spalten bzw. Zeilen (max. weightx innerhalb Spalte bzw. max. weighty innerhalb Zeile gilt bei Konflikt zwischen mehreren Zellen)

236 Layout-Manager Weitere Layout-Manager zGroupLayout zSpringLayout zsehr mächtig und sehr elementar znicht für manuelle Programmierung empfohlen zgedacht für GUI-Builder zeingesetzt in NetBeans IDE

237 Layout-Manager Gemischt: statisch und dynamisch zeine Anwendung kann dynamische und statische Layouts in verschiedenen Fenstern bzw. Panels gemischt einsetzen yinteressant in der Übergangsphase vom statischen Entwurf zur dynamischen Konstruktion yi.a. sind dann "äußere" Fenster dynamisch und "untergeordnete" Panels statisch zfür untergeordnete statische Panels müssen MinimumSize, PreferredSize und MaximumSize definiert werden ystatische Layouts haben dafür kein Default ystatische Layouts werden nicht sichtbar, wenn diese Werte nicht definiert sind !

238 Ereignisbehandlung Konsoledialoge zDOS Box / Konsole / UNIX Shell als Bedienoberfläche zdas Programm durchläuft nacheinander verschiedene Zustände yjede Eingabe wird mit der Return-Taste bestätigt oder mit der Escape- Taste abgebrochen zder Programmablauf gleicht einem Frage-Antwort-Spiel, in dem der Computer die führende Rolle übernimmt yder Benutzer kann nur die Frage des Computers beantworten oder den Programmablauf ganz abbrechen und im Fehlerfall wieder komplett von vorne beginnen zder Benutzer reagiert auf die Fragen des Computers zder Benutzer bedient den (= dient dem) Computer yvgl. "der Kellner bedient den Gast" vgl. PG1 / PG2

239 Ereignisbehandlung Ereignisorientierte Programmierung zBei Programmen mit grafisch-interaktiven Benutzungsoberflächen kann die Reihenfolge der Eingaben beliebig variiert werden yEingabewerte können auch nachträglich geändert werden yNeuberechnungen oder Berechnungsvariationen sind einfach möglich zaus Sicht des Entwicklers erfordert diese Art des Benutzerdialogs zusätzliche Überlegungen zder Benutzer entscheidet, was er als nächstes tut ydie Aufgabe des Programms besteht nun darin, Benutzereingaben wahrzunehmen und zu interpretieren yfür das Programm sind Benutzereingaben Ereignisse, auf die es in geeigneter Weise reagieren muss zdas Programm dient dem Benutzer

240 Ereignisbehandlung Ereignisbegriff zEreignisse (events) werden (meist) vom Benutzer ausgelöst, direkt oder indirekt yEreignisse sind weder Klassen, noch Objekte, noch Methoden ! yObjekte von Event-Klassen sind Parametersätze, die zur Behandlung von Ereignissen als Zusatzinformation übergeben werden (nicht zu verwechseln mit den Ereignissen selbst) zEreignisse müssen vom Programm behandelt werden yBehandlung erfolgt durch Ausführung eines "Handlers" (d.h. Funktion bzw. Methode) zvgl. die Botschaft (message) unter Windows yinformiert über das Ereignis und enthält die Zusatzinformationen wParam und lParam

241 Ereignisbehandlung Aktivitäten und Eventklassen Aktivität des BenutzersSwing-Eventklasse Klick auf Button, Return in Textfeld, MenüauswahlActionEvent Tabellen- oder Listenauswahl wird geändertListSelectionEvent Benutzer schließt das HauptfensterWindowEvent Benutzer drückt Maustaste über KomponenteMouseEvent Benutzer bewegt Maus über KomponenteMouseEvent (MouseMotionListener) Komponente wird sichtbarComponentEvent Komponente bekommt den TastaturfokusFocusEvent semantic low level

242 Ereignisbehandlung Zuordnung von Handlern zEreignisse werden vom Betriebssystem erkannt oder erzeugt und an die Anwendung weitergeleitet yMaus/Tastatur Betriebssystem Anwendung Basisklassen aus Bibliothek eigene abgeleitete Klassen yletztlich sollen Methoden in der Anwendung aufgerufen werden ydabei werden i.a. ereignisspezifische Parameter übergeben (Mauskoordinaten, Tastencode, ButtonID,...) zZuordnung: Systemereignis Handler yvom Wesen her: Tabelle mit Funktionszeigern zbisher kein Standard; jede Bibliothek macht es anders

243 Ereignisbehandlung bei Komponenten z"normale" Programmierung yZuordnung Ereignis Handler wird zur Compile-Zeit festgelegt yerlaubt konstante Arrays von Funktionszeigern oder virtuelle Funktionen (basieren ebenfalls auf konstanter vtable) zKomponententechnik (Java Beans, ActiveX Controls) yKomponente ist ein (normalerweise) visuelles Steuerelement ystellt Eigenschaften, Methoden und Ereignisse bereit ykann mit der umgebenden Anwendung kommunizieren yliegt als fertig kompilierte jar- bzw. ocx-Datei vor yZuordnung Ereignis Handler wird zur Laufzeit festgelegt yerfordert dynamische Liste von Funktionszeigern oder Objekten; in Java: mit Methode add...Listener(Listenerobjekt) ActiveX Control feuert Ereignis an MS Access

244 Ereignisbehandlung Systemvergleich zVisual Basic, Lingo (Director), OpenScript (ToolBook) yZuordnung durch Verwendung vordefinierter Handlernamen yjedes (Steuer-)Element hat eigenes Skript Director: on mouseUp, on exitFrame ygemeinsames Skript für ganzes Formular Visual Basic: Sub ButtonXyz_Clicked() zWindows API yCallback-Funktion mit Ereigniscode zWindows MFC (veraltet) yFunktionszeiger über MessageMap zugeordnet ytypischerweise beim übergeordneten Fenster sehr übersichtlich: Tabelle bleibt verborgen "Tabelle" als switch-Anweisung Tabelle sichtbar, leicht zu ignorieren

245 Ereignisbehandlung in Java AWT 1.0 (veraltet) zBasisklasse ruft für jedes Ereignis eine virtuelle Funktion auf zdie virtuelle Funktion wird in der abgeleiteten Anwendungsklasse vom Programmierer mit dem Handler überschrieben ähnlich wie das bekannte void processWindowEvent(WindowEvent e) {...} zNachteil: Zuordnung Ereignis Handler zur Compile-Zeit festgelegt; keine Beans möglich

246 Ereignisbehandlung seit Java AWT 1.1 : Listener zbenötigt werden eigentlich Zeiger auf Funktionen ygibt es nicht in Java (rein objektorientiert) zstattdessen Objekte von Klassen, die eine passende (Handler-)Methode haben yMethoden werden spezifiziert als Interface "...Listener" ybeliebige Klassen können dieses Interface implementieren, d.h. sich um die (Handler-)Methode ergänzen yReferenzen auf Objekte dieser Klassen werden anstelle von Zeigern auf Funktionen übergeben ("als Listener registriert") zmanche Listener-Interfaces definieren nur eine einzige Methode (z.B. ActionListener) streng OO flexibel unübersichtlich

247 Ereignisbehandlung Listener und Adapter zmanche Listener-Interfaces definieren etliche Methoden yoft braucht man aber nur eine oder wenige davon yalle notgedrungen zum implementieren wäre unpraktisch zhilfsweise 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 Ereignisbehandlung Anonyme innere Klasse zeine ganze Klasse zu schreiben, wenn man eigentlich nur eine Methode braucht, wäre ebenfalls unpraktisch zLösung: eine anonyme Klasse, von der nur ein einziges, ebenfalls anonymes Objekt erzeugt wird yergibt eine zusätzliche Datei Klasse$n.class jButton1.addActionListener( new ActionListener() { public void actionPerformed(ActionEvent e) { // Nutzinhalt des Handlers } } ); zhat vollen Zugriff auf alle Variablen der umschließenden Klasse AnonymeKlasse implements entfällt (Kurzschreibweise)

249 Ereignisbehandlung Innere Klasse im Vergleich zu C++ zProblem: keine Mehrfachvererbung, keine Freunde in Java zMeinFrame abgeleitet von JFrame zMeinListener abgeleitet von irgendeinem Adapter yListener soll Zugriff auf die Elemente von MeinFrame haben yin C++ würde xMeinFrame MeinListener zum Freund erklärenoder xMeinListener von MeinFrame und von Adapter abgeleitet werden nicht schön, denn ein Listener ist kein Frame zAusweg: Listener als innere Klasse von MeinFrame yListener oft als einzige Instanz einer anonymen (namenlosen) Klasse realisiert

250 Ereignisbehandlung Observer-Pattern zum Vergleich Observer-Pattern allgemeinangewandt auf Listener

251 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 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 Ereignis Handler getrennt von Initialisierung Variante 1 im Beispiel voller Zugriff auf Fenster

253 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 Komponenten Variante 4 im Beispiel

254 Ereignisbehandlung zum Vergleich: MFC (1) IDD_EVENT_DIALOG DIALOGEX 0, 0, 80, 70 STYLE DS_MODALFRAME | WS_POPUP | WS_VISIBLE | WS_CAPTION CAPTION "Event" FONT 8, "MS Sans Serif" BEGIN PUSHBUTTON"Increment",IDC_INCREMENT,7,7,66,14 EDITTEXTIDC_DISPLAY,7,28,66,14,ES_CENTER | ES_READONLY | NOT WS_TABSTOP PUSHBUTTON"Quit",IDC_QUIT,7,49,66,14 END zRessourcendefinition wird mit grafischem Editor erstellt zWindows erzeugt daraus unmittelbar die Steuerelemente MFC stellt Wrapper-Klassen zum Zugriff aus C++ bereit

255 Ereignisbehandlung zum Vergleich: MFC (2) zdie MessageMap verknüpft das Ereignis (hier "ButtonClicked") eines Steuer- elements (identi- fiziert per ID) mit seinem Handler zist 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 Ereignisbehandlung zum Abschluss: Visual Basic Private Sub FormEvent_Initialize() TextBox.Value = 0 End Sub Private Sub ButtonIncrement_Click() TextBox.Value = TextBox.Value + 1 End Sub Private Sub ButtonQuit_Click() Me.Hide End Sub zgrafische Attribute erscheinen überhaupt nicht im Programm zkaum objektorientiert zmäßig flexibel zgenial einfach zmanchmal kommt man schon ins Grübeln...

257 Bausteine grafischer Bedienoberflächen Begriffe zBegriffe uneinheitlich yWindows: Control / Steuerelement yMotif: Widget yJava: Component / Komponente xBegriffsverwirrung: SW-Komponenten heißen dafür Beans zvisuelle Klassen yObjekte zeichnen sich selbst auf den Bildschirm yErscheinungsbild und Verhalten über Attribute einstellbar xvorzugsweise mittels WindowBuilder yEreignisbehandlung xteilweise im Zusammenspiel mit übergeordnetem Fenster zgroße Auswahl in Bibliotheken, Eigenkreation möglich

258 Bausteine grafischer Bedienoberflächen Swing Components in Eclipse Schalt- flächen TextfelderAuswahl 1 aus n

259 Bausteine... Klassenhierarchie

260 260 Zustand Aktion 7.1 Schaltflächen Schaltflächen: Charakterisierung zButtons dienen dem Auslösen einer Aktion zmeist beschriftet, manchmal mit Bild zkönnen zu Buttonleisten aneinandergereiht werden yGruppen von RadioButtons yToolbars zkönnen inaktiv (disabled) sein zhaben Boole'schen Zustand ytemporär bei JButton ypermanent bei den anderen (durch Gruppierung auch 1 aus n) AbstractButton JButtonJToggleButton JCheckBoxJRadioButton

261 Schaltflächen JButton: löst nur Aktion aus zSchaltfläche beschriftet mit Text und/oder Icon ysetText(String); ysetIcon(ImageIcon); zEreignisse: actionPerforme d( ActionEvent)// beim Anklicken zI/O: keine zMethoden: ysetEnabled(boolean); ysetVisible(boolean); ysetActionCommand(String);// wird Attribut von ActionEvent ygetRootPane().setDefaultButton(JButton);// übergeordnete Pane high level event

262 Schaltflächen JToggleButton: Zustand + Aktion zwie JButton, aber mit Zustandsanzeige "gedrückt" (= selected) zEreignisse: actionPerforme d( ActionEvent)// beim Anklicken itemStateChanged(ItemEvent)// bei Zustandswechsel zI/O: isSelected() boolean ItemEvent.getStateChange() SELECTED / DESELECTED zMethoden: ysetSelected(boolean); ysetEnabled(boolean); ysetVisible(boolean); ysetActionCommand(String);// wird Attribut von ActionEvent

263 Schaltflächen JCheckBox: Wahrheitswert-I/O zwie JToggleButton, aber mit Zustandsanzeige "Häkchen" (= selected) zEreignisse: actionPerforme d( ActionEvent)// beim Anklicken itemStateChanged(ItemEvent)// bei Zustandswechsel zI/O: isSelected() boolean ItemEvent.getStateChange() SELECTED / DESELECTED zMethoden: ysetSelected(boolean); ysetEnabled(boolean); ysetVisible(boolean); ysetActionCommand(String);// wird Attribut von ActionEvent funktional identisch, anderes Aussehen

264 Schaltflächen JRadioButton: Auswahl 1 aus n zwie JCheckBox, tritt aber typischerweise in Gruppen auf Gruppe mit gegenseitiger Auslösung: ButtonGroup grp = new ButtonGroup(); grp.add(jRadioButton1); grp.add(jRadioButton2); ylogisch: Auswahl 1 aus n (n konstant !) zEreignisse: actionPerforme d( ActionEvent)// beim Anklicken zI/O: ActionEvent. getActionCommand() String zMethoden: ysetActionCommand(String);// wird Attribut von ActionEvent ysetSelected(boolean); yetc. möglich für alle Buttontypen, aber unüblich

265 265 einzeilig Editor für Text, HTML und RTF mit Formatierung mehrzeilig 7.2 Textfelder Textfelder: Charakterisierung zTextfelder dienen der Ein- und Ausgabe von Text zsie integrieren einfache oder komplexe Editorfunktionen yCursor ySelektion yKopieren, Einfügen zmehrzeilige Textfelder können scrollen, wenn die Fläche nicht ausreicht zkönnen inaktiv (disabled) sein JTextComponent JTextfieldJTextArea JPasswordFieldJTextPane JEditorPane behandeln wir nicht

266 Textfelder JTextField: einzeilige I/O + Aktion zfür Ein- oder Ausgabe von kurzen Texten oder Zahlenwerten, oft mit anschließender Aktion zEreignis: actionPerforme d( ActionEvent)// bei Return zMethoden: ygetText(), setText(String)// Zugriff auf gesamten Inhalt yselect(int start, int end), selectAll()// markiert (selektiert) Text zKonvertierung: int Zahl = Integer.parseInt(TextFeld.getText()); TextFeld.setText(String.valueOf(Zahl)); yentsprechend für Byte, Double, Float, Long, Short Wrapper-Klassen für einfache Typen Behandlung von Formatfehlern vorsehen!

267 Textfelder JTextArea: mehrzeilige I/O zfü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); zEreignis: actionPerforme d( ActionEvent)// bei Return zMethoden: ygetText(), setText(String)// Zugriff auf gesamten Inhalt yappend(String);// hängt Text am Ende an yinsert(String, int);// fügt Text an Position ein yreplaceRange(String, int, int);// ersetzt einen Textbereich beliebiger, aber einheit- licher Font

268 Textfelder Wertebereichsüberprüfung z"action validated" yÜberprüfung des eingegebenen Werts, nachdem "Return" gedrückt wurde xZwischenstände bei der Eingabe spielen keine Rolle und dürfen "falsch" sein bequem zu Editieren yim actionPerformed-Handler vor der Weiterverarbeitung z"change validated" yInhalt eines Textfeldes muss jederzeit korrekt sein x"Zwischenstände" beim Editieren werden ständig kontrolliert xje nach Eingabesyntax ist eine Korrektur durch den Benutzer mit einem Zeichen gar nicht möglich Software muss korrigieren yim keyTyped-Handler

269 Auswahllisten Auswahllisten: Charakterisierung zLineare, ungegliederte Liste yoft besser als Textfeld mit Gültigkeitsüberprüfung zEinfachauswahl(1 aus n) oder Mehrfachauswahl(m aus n) zVorteile gegenüber Gruppe aus Radiobuttons: ygroße Zahl von Listenelementen ist möglich, aber: Überschaubarkeit und Suchaufwand für den Benutzer bedenken yListenelemente können zur Laufzeit geändert bzw. datenabhängig geladen werden zComboBox als platzsparende Variante yBedienung ist umständlicher

270 Auswahllisten JList: sichtbare Liste zEinfach- oder Mehrfachauswahl yStrings oder Icons als Elemente ( ListCellRenderer für andere) yListenelemente aus Object[] oder DefaultListModel Konstantenliste am besten über String Werte[]={...}; ykann scrollen, wenn innerhalb einer JScrollPane platziert zEreignis: yboolean valueChanged(ListSelectionEvent)// Auswahländerung zI/O: int, Object oder Array// Index oder ausgewähltes Objekt zMethoden: yboolean getValueIsAdjusting()// wird Auswahl noch geändert? (dynamisch) String

271 Auswahllisten JList: Auswahlmodus und Selektion Auswahl des Auswahlmodus jl.setSelectionMode(ListSelectionModel.SINGLE_SELECTION); zSINGLE_SELECTION yint getSelectedIndex() yObject getSelectedValue() zSINGLE_INTERVAL_SELECTION yint getMinSelectionIndex() yint getMaxSelectionIndex() zMULTIPLE_INTERVAL_SELECTION yint[] getSelectedIndices() yObject[] getSelectedValues() Auswahl mit Festhalten der Umschalt-Taste Auswahl mit Festhalten der Strg-Taste

272 Auswahllisten JComboBox: ausklappbare Liste znicht editierbar:Auswahl 1 aus n, auch Icons statt Text editierbar: wie Textfeld mit Vorgaben ycb.setEditable(true);// false ist Standard zstatische oder dynamische Liste wie bei JList zEreignis: actionPerformed(ActionEvent)// Auswahl oder Return zI/O: int oder Object ( String oder ImageIcon) zMethoden: ysetSelectedIndex(int), int getSelectedIndex()// Index ycb.getSelectedItem().toString()// Text y(ImageIcon)(cb.getSelectedItem())// Bild "Dropdown Box"

273 Auswahllisten Dynamische Listen zÄnderung der Listenelemente zur Laufzeit erfordert Objekt der Klasse DefaultListModel ydieses 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 identisch für JList und JComboBox DefaultComboBoxModel bzw. einer Klasse die das Interface ListModel implementiert siehe auch class AbstractListModel

274 Auswahllisten ImageIcon: statische Bilder z Buttons, Labels, Listen etc. können Icons darstellen yIcons haben eine beliebige, aber feste Größe yDarstellung von Bildern mit variabler Größe Abschnitt "7.7 Grafik" z Bilddateiformat GIF, JPEG oder PNG yam einfachsten mit Bildbearbeitungsprogramm erstellen und in Datei ablegen yGIF 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 "Analogwerte" JSlider: analog mit Einrasten znur grobe Einstellmöglichkeit per Maus zwahlweise mit "Einrasten" bei Ticks: setSnapToTicks(true) zspezielle Beschriftung mittels Hashtable (Assoziativtabelle, Schlüssel/Wert-Paare) zEreignis: stateChanged(ChangeEvent) zI/O: void setValue(int); int getValue() zEigenschaften: setMinimum(-20); setMaximum(80); setMinorTickSpacing(5); setMajorTickSpacing(20); setPaintLabels(true); setPaintTicks(true);

276 "Analogwerte" JProgressBar: reine Anzeige zzur Anzeige länger dauernder Abläufe yberuhigt den Benutzer zAlternative: Klasse ProgressMonitor macht Dialog auf zEreignis: keines zOutput: void setValue(int) zEigenschaften: setMinimum(-20); setMaximum(80); setOrientation(JProgressBar.VERTICAL);

277 "Analogwerte" JScrollBar: meist für Fenster zgrobe Einstellmöglichkeit per Maus zFeineinstellung mit yUnit Increment (Klicken auf Buttons) und yBlock Increment (Klicken auf Leiste) zEreignis: adjustmentValueChanged(AdjustmentEvent) zI/O: void setValue(int); int getValue() zEigenschaften: setMaximum(90); setMinimum(-20); setBlockIncrement(20); setUnitIncrement(2);

278 Komplexe Datenstrukturen Model / View / Controller – Architektur View Controller Model View GUI-Objekte Controller Ereignisbehandlung Model (Geschäftslogik) Datenhaltung übliche Darstellungangepasst für OO-GUIs

279 Komplexe Datenstrukturen Beispiel Model / View Mehrere Sichten auf gemeinsames Datenmodell Änderungen der Daten aktualisieren alle Sichten

280 Komplexe Datenstrukturen Beispiel Model / ViewController Beide Sichten sind interaktiv und ermöglichen eine Änderung der Daten Daten- bank oft zusammen

281 Komplexe Datenstrukturen JTable: Charakterisierung zmehrspaltige Tabelle, Datenfelder editierbar zSpalten in der Breite veränderbar und vertauschbar zkann scrollen, wenn innerhalb einer JScrollPane platziert ySpaltenüberschriften scrollen nicht mit ! zTabelle fester Größe durch Initialisierung mit Array yverwendet Object[][] als Datenmodell zTabelle variabler Größe oder mit dynamischer Datenquelle über eigenes Datenmodell zCellRenderer und CellEditor spaltenbezogen definierbar yz.B. CheckBox für boolean, ComboBox für 1 aus n, Icon

282 Komplexe Datenstrukturen Model / View Architektur bei JTable zkonsequente Trennung zwischen Datenhaltung und Sicht auf die Daten yz.B. Datenhaltung: ArrayList von Arrays yz.B. Sicht: 2-dim. Tabelle mit Spaltenüberschriften zaufwändiger zu handhaben, aber flexibler yStandard-Datenmodell für einfache Fälle zZusammenspiel von Model und View wird über Interfaces organisiert ywird in Swing durchgängig eingesetzt (nicht nur bei JTable) yModel-Klasse implementiert Interface TableModel xInterface definiert Art des Zugriffs auf die Daten yView-Klasse implementiert Interface TableModelListener xInterface definiert Art der Information der Oberfläche über Änderungen Arrays ArrayList ArrayList ist ein Array variabler Länge

283 Komplexe Datenstrukturen Model / View als Observer-Pattern das bekannte Observer-Pattern Model/View-Architektur am Beispiel JTable als Observer-Pattern

284 Komplexe Datenstrukturen Zugriff über Interface TableModel zIndex der selektierten Zeile(n) holen yjTable.getSelectionModel().getMinSelectionIndex() yjTable.getSelectionModel().getMaxSelectionIndex() zTableModel (Datenmodell) erhältlich mit: jTable.getModel() zMethoden von TableModel: yint getRowCount() yint getColumnCount() yObject getValueAt(int Zeile, int Spalte) yObject setValueAt(Object, int Zeile, int Spalte) yvoid addTableModelListener(TableModelListener l) xso lässt sich JTable als Listener über Datenänderungen informieren

285 Komplexe Datenstrukturen Abstract Class AbstractTableModel zvereinfacht die Implementierung von TableModel yverwaltet eine Liste von TableModelListener-Objekten (d.h. Views) znur dateninhaltsbezogene Methoden von TableModel müssen implementiert werden ygetRowCount, getColumnCount und getValueAt muss man selber schreiben xzu diesem Zweck muss man endlich die Datenstruktur definieren ysetValueAt hat eine leere Implementierung für Read-Only-Daten zbietet Methoden zur Information der Listener (=View)-Objekte über Änderungen der Daten yfireTableCellUpdated, fireTableChanged, fireTableDataChanged, fireTableRowsDeleted, fireTableRowsInserted, fireTableRowsUpdated, fireTableStructureChanged

286 Komplexe Datenstrukturen JTree zfür hierarchische Gliederung von Einträgen yvgl. Kapitelstruktur eines Buches ystatisch (fester Inhalt) oder dynamisch (änderbar zur Laufzeit) zEreignis: valueChanged(TreeSelectionEvent e) zZugriff auf selektierten Eintrag: e.getPath().getLastPathComponent().toString()// Text TreePath jTree.getSelectionPath()// TreePath Object[] (DefaultMutableTreeNode)// cast von Object (jTree.getSelectionPath().getLastPathComponent()) boolean isSelectionEmpty()

287 Komplexe Datenstrukturen DefaultMutableTreeNode zStandard-Knotentyp von JTree yfür statische und dynamische JTrees yjedem Knoten kann ein beliebiges Object als "Inhalt" zugeordnet werden, z.B. im einfachsten Fall ein String ymutable: Knoten können hinzugefügt, entfernt und geändert werden zhat 1 übergeordneten Knoten (parent) yAusnahme: Wurzelknoten hat keinen parent zhat ein "Array" von untergeordneten Knoten (children) ywerden senkrecht unter ihrem parent dargestellt yEnumeration children(); yint getChildCount(); TreeNode getChildAt(int childIndex); zbietet diverse Enumerations (Iteratoren) zum Durchwandern des Unterbaums (preorder, postorder, breadthFirst, depthFirst)

288 Komplexe Datenstrukturen Tree als binärer Baum zweitere mögliche Sicht eines Tree zInterface TreeNode: ein Knoten hat optional eine geordnete Liste von Unterknoten zKlasse DefaultMutableTreeNode: ein Knoten hat optional einen Kind-Knoten und optional einen Geschwister-Knoten ylinker Unterknoten(-baum) verfügbar über getNextSibling() yrechter Unterknoten(-baum) verfügbar über getFirstChild() + Name NextSibling FirstChild Knoten

289 Komplexe Datenstrukturen DefaultTreeModel znotwendig für dynamische JTrees yeinfügen, löschen, verschieben von Einträgen yinformiert JTree über Änderung an seinen Einträgen yEinträ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);

290 Menüs Klassenhierarchie zu JMenu BlätterKnoten Flächen alle MenuItems sind Buttons

291 Menüs JMenuBar, JMenu: Hauptmenü zplatzsparende Form der Gruppierung mehrerer Buttons ynormale Schaltflächen, aber auch Checkboxen und Radiobuttons yvorzugsweise für "globale" Funktionen yermöglicht hierarchische Gliederung durch Kaskadierung xgut geeignet zum Erforschen einer unbekannten Anwendung yrelativ umständlich zu bedienen, besonders bei Kaskadierung zam oberen Rand von JFrame, JDialog, JApplet JMenuBar meinMenu = new JMenuBar(); this.setJMenuBar(meinMenu); zEreignisbehandlung über ActionListener der MenuItems ywie bei Buttons

292 Menüs Aufbau eines Menüs zObjekte erzeugen JMenu jMenuEdit = new JMenu(); JMenuItem jMenuItemCut = new JMenuItem(); zAttribute setzen // weitere siehe Buttons jMenuEdit.setText ("Edit"); jMenuItemCut.setText ("Cut"); jMenuItemCut.setEnabled (false); zObjekte verknüpfen jMenuBarMain.add (jMenuEdit); jMenuEdit.add (jMenuItemCut); jMenuBarMain.add (Box.createHorizontalGlue()); // nächstes rechts jMenuEdit.addSeparator ();// Trennlinie ist in Eclipse am einfachsten in der Java Beans Ansicht aufzubauen

293 Menüs JPopupMenu: Kontextmenü zverborgenes Menü ybelegt keine Bildschirmfläche, aber Benutzer muss suchen ztypischerweise für objektbezogene Funktionen yverschiedene Objekttypen haben verschiedene Kontextmenüs zMenüaufbau wie beim Hauptmenü yJPopupMenu jPopupMenu = new JPopupMenu(); JMenuItem jMenuItemCut = new JMenuItem(); jMenuItemCut.setText ("Ausschneiden"); jPopupMenu.add (jMenuItemCut);

294 Menüs Kontextmenü-Ereignisbehandlung zAufruf aus MouseListener des sensitiven Objekts void mouseReleased(MouseEvent e) { if (e.isPopupTrigger()) jPopupMenu.show( e.getComponent(), e.getX(), e.getY()); } zZugriff auf zugehöriges Objekt und MenuItem void 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 Menüs Toolbars zMenüs werden häufig ergänzt durch Toolbars yschnellerer Zugriff für Fortgeschrittene zder Toolbar enthält eine häufig verwendete Teilmenge der Menü-Funktionen yals Gruppe von Buttons, meist mit Icons gekennzeichnet ykann vom Rand des Fensters "abgerissen" werden (hoch/quer) yoft vom Benutzer selbst konfigurierbar zIcons sind fast nie selbsterklärend; sie müssen gelernt werden ! yeine gute Hilfe dazu sind Tooltips (d.h. Texte, die nur erscheinen, wenn die Maus auf dem Button verweilt)

296 Menüs JToolBar zObjekte erzeugen JToolBar jToolBar1 = new JToolBar(); JButton jButtonCD = new JButton(); zAttribute setzen jButtonCD.setIcon (new ImageIcon("Icons/img_cd.gif")); jButtonCD.setToolTipText ("CD abspielen"); zObjekte verknüpfen (die contentPane muss ein BorderLayout haben) contentPane.setLayout(new BorderLayout());// eigentlich default contentPane.add(jToolBar1, BorderLayout.NORTH); jToolBar1.add (jButtonCD, null); jToolBar1.addSeparator ();// Abstand einfügen für JAR-Datei: this.getClass().getResource("...")

297 Grafik Direkte Grafikausgabe zPainting: ein Teil der Benutzungsoberfläche wird durch eigenen Code gezeichnet yz.B. Erstellung eigener Komponenten, Anzeige von Dokumenten, Visualisierung von Zuständen,... z(Neu-)Zeichnen kann vom System oder von der Anwendung veranlasst werden ySystem: erstmalige Darstellung der Komponente, Änderung der Größe, Komponente war verdeckt und wird wieder sichtbar yAnwendung: Änderung des visualisierten Zustands oder der visualisierten Daten Anwendung ruft repaint() auf zjegliche Grafikausgabe wird durch Überschreiben einer einzigen Methode implementiert yvoid paintComponent(Graphics g)// für Swing-Komponenten yvoid paint(Graphics g)// für AWT-Komponenten

298 Grafik Grafik Kontext zHilfsmittel zum Zeichnen: abstract class Graphics ywird nicht instanziiert, sondern als Parameter an paint übergeben zClip: Fläche, die aktualisiert werden soll zallerlei nützliche Methoden yget/set Clip/Color/Font yText darstellen: drawString yBild aus Datei: drawImage ygrafische Primitive xdrawLine/Polygon/Rect/RoundRect/Arc/Oval xfillPolygon/Rect/RoundRect/Arc/Oval y x0 Koordinaten

299 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 Grafik Grafikausgabe beschleunigen (1) zAufwand zur Aktualisierung der eigenen Komponente reduzieren zEinfachster Fall: repaint() verursacht Neuzeichnen der gesamten Komponente ygenügt für einfache Komponenten yPixel außerhalb des Clip-Bereichs werden ohnehin nicht ausgegeben zTuning: nur den Teilbereich neu zeichnen, der von einer Änderung betroffen ist ("dirty region", "smart painting") ybei Anforderung mitteilen: void repaint(int x, int y, int width, int height) ybeim Zeichnen auswerten: Graphics.getClip() bzw. Graphics.getClipBounds() Beispiel:

301 Grafik Grafikausgabe beschleunigen (2) zunnötige Aktualisierung anderer Komponenten vermeiden zboolean isOpaque(); void setOpaque(boolean o) yEigenschaft soll das Verhalten der paint-Methode signalisieren xKonsistenz Opaque/Paint muss der Entwickler sicherstellen ! xdas Verhalten der Komponente wird i.a. nicht durch setOpaque geändert Ausnahme: JLabel, JTextfield,... ytrue: Komponente zeichnet jedes Pixel in ihrem Bereich xdarunter liegende Komponenten werden nicht neu gezeichnet yfalse: Komponente zeichnet nicht jedes Pixel Hintergrund scheint durch xz.B. auch für Look & Feel mit runden Ecken zboolean isOptimizedDrawingEnabled() { return true; }; ytrue: Komponente garantiert, dass untergeordnete Komponenten sich nicht überlappen und nicht aktualisiert werden müssen xtrue für alle Komponenten außer JLayeredPane, JDesktopPane und JViewPort ggf. überschreiben blickdicht, nicht transparent

302 Drag & Drop Mentales Modell und Anwendungsbereiche zGUI Operation mit zwei Parametern: Quelle und Ziel yverschiebt ein Objekt auf bzw. in ein anderes xverschiebt Datei in anderen Ordner yverschiebt ein Objekt an eine andere Position xverschiebt markierten Text in Textverarbeitung xverschiebt Element in einer Liste (manuelles Sortieren) yübergibt ein Objekt an ein anderes xübergibt Dokument an Anwendung zOperation wird erst beim Fallenlassen ausgeführt ydavor "nur" visuelles Feedback an Benutzer znicht verwechseln mit z.B. Malen im Malprogramm yOperation wird "unterwegs" ausgeführt

303 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 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 Beispiel 4.10 Drag & Drop entspricht mouseMoved bei gedrückter Taste; in anderen Systemen steht nur mouseMoved zu Verfügung Objekterkennung und Painting selbst implementiert

305 Drag & Drop Abstract Class DragAndDropable zimplementiert die Mouse Handler mit Zustandsverwaltung und Cursor-Umschaltung und provoziert das Neuzeichnen via repaint() yvoid onMoved(Point source) yvoid onPressed(Point source) yvoid onDragged(Point actualPosition) yvoid onReleased(Point destination) zdelegiert an die Subklasse MovableFigure yboolean isObjectPosition(...)Mapping Point Object yvoid visualize(...)Objektdarstellung beim Schieben yvoid operation(...)die eigentliche Nutzfunktion siehe Beispiel 4.10 Drag & Drop

306 Drag & Drop High Level mit Swing zKopieren bzw. Verschieben von Objekten zwischen verschiedenen JComponents yMapping Point Object übernimmt Swing zBeispiele und Details siehe


Herunterladen ppt "Entwicklung nutzerorientierter Anwendungen Wintersemester 2013/2014 Prof. Dr.-Ing. Bernhard Kreling Hochschule Darmstadt Fachbereich Informatik."

Ähnliche Präsentationen


Google-Anzeigen