Einführung in die Informatik – Algorithmen und ... · Windows 2.0: Fenster verschieben, ......

Einführung in die Informatik – Algorithmen und Datenstrukturen

Graphische Benutzungsoberflächen

Benutzungsschnittstelle

Spielt eine besondere Rolle bei der Überwindung der semantischen Lücke zwischen Anwendungswissen und technisch Machbarem:

!  Anwender soll Ergebnisse eines Algorithmus ohne technische Erläuterung des Entwicklers verstehen !  Anwender soll sein Wissen in Parametrierungen ausdrücken, ohne Details der Umsetzung zu kennen

Benutzungsschnittstelle: Kommandozeile !  Kommandozeile: Befehle per Tastatur

Zeichenbasierte Benutzungsschnittstelle !  textbasiert, aber über Menü geführt

Graphische Benutzungsschnittstelle !  Graphisch: komplex, meist mit Maus bedient

Sprachbasierte Benutzungsschnittstelle !  Eingaben erfordern Spracherkennung !  Ausgabe als aufgezeichneten Ton oder synthetischer

Stimme !  Beispiel: Sprachdialogsysteme, interaktive

Telefonansagedienste

anfassbare Benutzungsschnittstelle !  tangible user interface: Interaktion durch physische

Objekte

http://commons.wikimedia.org/wiki/File:Reactable_Multitouch.jpg

Natürliche Benutzungsschnittstelle !  an natürliche gewohnte Bewegungen angepasst !  z.B. touchscreens

Apple iOS Microsoft PixelSense

Wahrnehmungsgesteuerte Benutzungsschnittstelle !  perceptual user interfaces: Gesten, eye tracking !  Auswertung der Augenbewegungen des Nutzers !  The Eye Tribe: Android Software für freihändige Bedienung

von Mobilgeräten http://www.golem.de/news/the-eye-tribe-android-geraete-mit-den-augen-steuern-1304-98813.html

Pico Eye Tracker: http://www.telepresenceoptions.com/2011/05/eyetracking_projector_keeps_yo/

Gehirn-Computer-Schnittstelle !  Bedienung eines Computers über Gedanken !  z.B. Unterstützung körperlich behinderter Menschen

Stephen Hawking http://neurogadget.com/2012/01/13/reading-stephen-hawkings-brainwaves-is-not-the-first-avenue-to-explore-for-intel/3442

Nutzer mit Datenkappe http://www.golem.de/news/bci-samsung-forscht-an-tabletbedienung-per-hirnstrom-1304-98838.html

Geschichte GUI !  Vorgänger der GUI entwickelt von Douglas

Engelbart: textbasierte Hyperlinks, die mit einer Maus manipuliert werden konnten (NLS, 1960)

!  Features: Computermaus, zweidimensionales Editieren, Verweise innerhalb von Dateien, mehrere Fenster, Editieren mehrerer Dateien, Versionskontrolle, Kontexthilfe, verteilte Client-Server-Architektur, Protokolle für virtuelle Terminals, Screensharing für Telekonferenzen uvm.

!  Mother of all demos

Geschichte GUI !  „In the beginning was the command line“ (Neal

Stephenson,http://www.cryptonomicon.com/beginning.html) !  graphische Oberfläche ab 70er Jahren in Xerox

PARC entwickelt !  Steve Jobs kauft Lizenz und integriert GUI in LISA !  Commodore Amiga und Atari hatten in den 80er

Jahren ebenfalls Betriebssysteme mit graphischen Oberflächen

!  Entwicklung von Windows als graphische Oberfläche für DOS

!  viele Desktopumgebungen für UNIX-Systeme

Geschichte: 1983 graphische Oberfläche Apple

Apple Lisa: 1 MB Arbeitsspeicher, 10 MB Festplatte (optional)

Geschichte: 1985 Windows

Windows 1.0: DOS-Programme mit der Maus benutzen

Commodore Amiga: echtes Multitasking mit Workbench

Geschichte 1987 Windows

Windows 2.0: Fenster verschieben, Größe ändern und überlappen

Geschichte 1989: NeXT

NeXTSTEP: display postscript, objektorientierte Anwendungsprogrammierung und Entwicklungswerkzeuge, 3D-Look


Windows 3.0: Multimedia-Extension, Bildschirmschoner


Windows 95: Startmenü und Taskleiste, Kontextmenü für rechte Maustaste

Geschichte: 2001 Mac OS

Mac OS X: UNIX-ähnliches System, 32bit, keine Abwärtskompatibilität

Geschichte: 2006 OLPC-Projekt, Sugar

Sugar Startbildschirm Sugar Kommunikation und Vernetzung


Windows 8: Kacheloberfläche für Touchscreens

Geschichte: 2013

Zukunft?

Minority Report

Avatar

Grundbegriffe Benutzerschnittstelle !  „Die Benutzerschnittstelle

(Benutzungsschnittstelle, Mensch-Maschine-Schnittstelle, User Interface, Human-Computer-Interface) ist die Gesamtheit der dem Benutzer für den Dialog zur Verfüg stehenden Hardware eines interaktiven Systems und dessen Verhalten in Abhängigkeit von den Benutzereingaben, festgelegt durch die Software.“

/Peter Forbrig, Immo O. Kerner, Lehr- und Übungsbuch Softwareentwicklung, Fachbuchverlag Leipzig, 2004/

Grundbegriffe Dialog !  „Ein Dialog ist ein Ablauf, bei dem der Benutzer zur

Abwicklung einer Arbeitsaufgabe – in einem oder mehreren Schritten – Daten eingibt und jeweils Rückmeldungen über die Verarbeitung dieser Daten erhält.“

Ergonomie !  „Ergonomie soll prinzipiell alle notwendigen Voraussetzungen

für ein optimales Zusammenwirken von Mensch, Betriebsmittel und Werkstoffen bei der Erfüllung einer gestellten Arbeitsaufgabe schaffen oder verbessern.“

Hardware-Ergonomie !  „Hardware-Ergonomie ist die optimale Gestaltung des

Systems, ohne die Gesundheit des Anwenders zu beeinträchtigen.“


Grundbegriffe Software-Ergonomie !  „Die Software-Ergonomie ist die Anpassung eines

Softwaresystems an die psychischen und physischen Eigenschaften des Menschen.“

Benutzerfreundlichkeit !  „Die Benutzerfreundlichkeit ist eine Bezeichnung für

die „Gebrauchsfähigkeit“ eines Produktes. Während man mit Ergonomie die Nutzbarkeit und die Optimierung der Bewegungsabläufe unter Ablaufgesichtspunkten betrachtet, befasst sich die regelmäßige Überprüfung der Benutzerfreundlichkeit mit logischen und intuitiven Ablaufprozeduren einer Handlung.“


Benutzerfreundlichkeit - Grundeigenschaften Ein benutzerfreundliches System sollte folgenden

Grundeigenschaften genügen: •  einheitliche und übersichtliche Bedienbarkeit der

einzelnen Teilwerkzeuge des Gesamtsystems •  Einhaltung des entsprechenden Richtlinienkatalogs des

verwendeten Oberflächenstandards •  einfache und schnelle Hilfsmittelbereitstellung für

Fehlerdiagnose und –korrektur •  flexible Anpassung an die Benutzerbedürfnisse •  leicht erlernbare Handhabung •  qualitative und quantitative Arbeitserleichterung in

spezifischen Anwendungen


Benutzerfreundlichkeit - Grundeigenschaften Ein benutzerfreundliches System sollte folgenden Grundeigenschaften genügen:

•  ergonomische Angemessenheit bei der Gestaltung von Bildschirm- und Druckausgaben

• Gestaltung eines einfachen Vor- und Rückwärtsgehens im Problemlösungsprozess

•  sichere und robuste Bedienung von Tastatur und Oberflächenobjekten, wie beispielsweise Menüs und Knöpfe

•  übersichtliche Dokumentation aller Einzelheiten des Problemlösungsprozesses


Anforderungen an GUI !  Aufgabenangemessenheit !  Selbstbeschreibungsfähigkeit !  Steuerbarkeit !  Erwartungskonformität !  Fehlertoleranz !  Individualisierbarkeit !  Lernförderlichkeit

http://de.wikipedia.org/wiki/Grafische_Benutzeroberfl%C3%A4che !  Europäische Norm EN ISO 9241.110 ff.

WIMP Paradigma !  window, icon, menu, pointing device !  verwendet für Interaktion ein Eingabegerät, das

einen Zeiger steuert (oft Maus) !  präsentiert Informationen zusammengefasst in

Fenstern und repräsentiert durch Icons !  basiert auf der Desktop-Metapher (Simulation eines

Schreibtisches mit Dokumenten, Ordnern etc.)

Post-WIMP Interface !  Optimierung für computergestütztes Design, Bearbeitung

großer Datenmengen oder interaktive Spiele !  10-foot user interface: Darstellung auf großem

Fernsehbildschirm, 10 feet sind der Abstand, aus dem man noch die GUI-Elemente erkennen kann, um sie mit einer Fernbedienung zu bedienen

!  NUI: natural user interface, ist bzw. wird nach erlernen praktisch unsichtbar für Benutzer, basiert auf der Natur oder natürlichen Elementen (im Gegensatz zu den künstlichen Steuergeräten, die erst erlernt werden müssen)

(Noncommand User Interfaces, Jakob Nielsen http://www.nngroup.com/articles/noncommand/)

MVC – Model – View - Controller !  hier: Anwendung bzw. Erstellung von GUI mit Java !  WIMP - Paradigma als Grundlage !  Unterscheidung zwischen Funktionalität eines

Programms, Steuerung und Präsentation – MVC !  Softwarearchitektur-Muster, das die Darstellung der

Information von der Interaktion des Benutzers mit der Information trennt

GUI mit Java !  plattformübergreifende Programmiersprache braucht

plattformübergreifende Möglichkeiten für GUI-Gestaltung

!  umfangreiche Klassenbibliotheken verfügbar !  Komponenten werden auf dem Bildschirm arrangiert !  Komponenten werden durch Objekte repräsentiert !  GUI-Bibliotheken in Java: AWT (Abstract Window

Toolkit) und Swing !  AWT-Komponenten basieren auf nativen

Bedienkomponenten, Swing-Komponenten werden von Java gezeichnet

AWT- und Swing-Klassenhierarchie

Quelle: RAT10, S. 416

35

Softwareergonomie - Dialogbetrieb Im Dialogbetrieb erfolgt die Kommunikation zwischen Benutzer und System interaktiv über die graphische Benutzungsoberfläche. „Mit Interaktion (Interaction) wird die unmittelbare Wechselbeziehung zwischen den Benutzereingabeaktionen und den Computerausgabeaktionen bezeichnet“ Interaktionsformen: z.B. •  Frage und Antwort •  Menüauswahl •  Masken und Formulare •  Interaktionssprachen •  natürliche Sprachen •  graphische Interaktion


36

Oberflächenobjekte

Zur Gestaltung von Benutzungsoberflächen werden Oberflächenobjekte verwendet, die prinzipiell 7 Klassen zugeordnet werden können. Die Objekte werden in Formularen angeordnet. Formular: „Ein Formular ist eine in der Struktur genau definierte Eingabemaske, in die der Benutzer in vorgegebene Felder die geforderten Informationen eintragen kann.“


37

Java – GUI - Basisklassen

Grundkompo-nenten

einfache Oberflächen-Elemente, z.B.: • Beschriftungen, • Knöpfe, • Auswahlfelder, • Klapptafeln

Container

spezielle Komponenten, die selbst wieder Komponenten enthalten können

Layout-Manager,

Farben, Fonts Klassen, deren Objekte für die Anordnung und Gestaltung der einzelnen Komponenten zuständig sind

Ereignisse, Listener

Klassen für die Erzeugung und Verarbeitung von Ereignissen, die für die Interaktion der Komponenten mit dem Anwender benötigt werden

38

Basisklasse - Component

/Quelle: RAT10, S. 416/

39

Basisklasse Component Component ist eine abstrakte Basisklasse, die Methoden zur Verfügung stellt, die von AWT- und Swing-Komponenten genutzt werden können. • public Color getBackground()

gibt die Hintergrundfarbe einer Komponente zurück • public void setBackground(Color c)

setzt die Hintergrundfarbe einer Komponente auf die Farbe c • public Color getForeground()

gibt die Schriftfarbe einer Komponente zurück • public void setForeground(Color c)

setzt die Schriftfarbe einer Komponente auf die Farbe c • public Color getFont()

gibt die Schriftart einer Komponente zurück • public void setFont(Font f)

setzt die Schriftart einer Komponente auf die Schriftart f

40

Basisklasse Component - Methoden • public int getHeight()

gibt die die Höhe der Komponente in Pixel zurück • public int getWidth()

gibt die Breite einer Komponente in Pixel zurück • public void setLocation(int x, int y)

positioniert eine Komponente auf die festgelegte Position bezüglich der linken oberen Ecke in Pixel

• public void setSize(int width, int height) setzt die Breite und Höhe einer Komponente

• public boolean isVisible() gibt true zurück, wenn eine Komponente sichtbar ist, sonst falsch

• public void setVisible(boolean b) schaltet die Komponente sichtbar, wen b den Wert true hat bzw. unsichtbar, wenn b den Wert false hat

41

Basisklasse - Container


42

Basisklasse Container Container ist eine Basisklasse, deren Objekte andere Komponenten enthalten können. • public Component add(Component comp)

fügt die Komponente comp dem Container hinzu • public Component add(Component comp, int index)

fügt die Komponente comp dem Container hinzu. Mit index wird der Einfüge-Index in der Liste der Komponenten angegeben

• public Component add(Component comp, Object constraints) fügt die Komponente comp dem Container hinzu. Mit constrains werden die Layoutbedingungen festgelegt

• public void remove(Component comp) entfernt die Komponente comp aus dem Container

• public void setLayout(LayoutManager mgr)) legt das Layout des Containers fest

Fenster: „Ein Fenster (Window) ist in den meisten Fällen ein rechteckiges und umrahmtes Feld (abgegrenzte Fläche) zur Darstellung oder Eingabe auf dem Bildschirm, dessen Größe und Lage vom Benutzer verändert werden kann.“ Ein Fenster kann aus den Bereichen : •  Fensterinformationsbereich •  Befehlsbereich •  Arbeitsbereich •  Systemmeldungsbereich Bestehen.

43

Oberflächenobjekte - Fenster


44

Oberflächenobjekte - Dialogfenster Dialogfenster: „Ein Dialogfenster (dialog window) ist ein Fenster zur Erfragung einer semantisch zusammenhängenden Gruppe von Benutzerinformationen.“ Formen von Dialogfenstern •  modal – das Anwendungsprogramm wird solange gesperrt, bis der Benutzer seine Eingaben abgeschlossen hat •  nicht modal – Fenster können durch Aktivierung eines anderen Fensters der selben Anwendung zurückgestellt werden •  Paletten – Dialogfenster, die ständig auf der Oberfläche liegen •  Mitteilungsfenster – Fenster, die keine Datenbearbeitung erlauben


45

AWT- und Swing-Klassenhierarchie


46

Erzeugen eines Fensterobjektes mit Swing in BlueJ

public void fensterErzeugen() { // Erzeuge ein Fenster-Objekt JFrame fenster = new JFrame(); // Setzen des Titels des Fensters fenster.setTitle("Fenster erzeugt mit Swing"); // Setzen der Groesse des Fensters in Pixel fenster.setSize(400,300); // Darstellen des Fensters fenster.setVisible(true); }

47

Nutzung der Methode setTitle

48

Inhaltsbereich eines Fensters Content Pane (Glasscheibe) Zur Darstellung von Komponenten im Inhaltsbereich eines Fensters wird ein Objekt von der Klasse Container erzeugt. Dieses Objekt stellt die „Fensterscheibe“ dar, auf die die Oberflächenkomponenten „geklebt“ werden.

49

Farben – Klasse Color Die Klasse Color ermöglicht die Erzeugung von Farbobjekten. Die Farben werden entsprechend dem RGB-Farbmodell festgelegt. • public Color(int r, int g, int b)

erzeugt ein Color-Objekt mit den entsprechenden RGB-Werten • public Color(float r, float g, float b)

erzeugt ein Color-Objekt mit den entsprechenden RGB-Werten (Farbanteile zwischen 0.0 und 1.0)

Konstanten der Klasse Color: BLACK, BLUE, CYAN,DARK_GRAY, GREEN, LIGHT_GRAY, MAGENTA, ORANGE, PINK, RED, WHITE, YELLOW

50

Erzeugen eines farbigen Fensterobjektes public class Farbiges_Fenster extends JFrame { private Farbiges_Fenster fenster_1; public void erzeuge_Fenster(int rot, int gruen, int blau) { Container c; // Erzeuge ein Fenster-Objekt fenster_1 = new Farbiges_Fenster(); // Definieren eines Farbobjektes Color bG = new Color(rot,gruen,blau); fenster_1.setTitle("Farbiges Ausgabefenster"); fenster_1.setSize(400,300); fenster_1.setLocation(400,100); c = fenster_1.getContentPane(); c.setLayout (new FlowLayout()); c.setBackground(bG); c.setForeground(Color.ORANGE); fenster_1.setVisible(true); } }

51

Farben – Klasse Font Die Klasse Font ermöglicht die Erzeugung von Schriftartobjekten. Mit dem Schriftartobjekt wird die Font-Familie, der Schriftschnitt und die Schriftgröße in Punkten festgelegt.

• public Font(String name, int style, int size) erzeugt ein Font-Objekt entsprechend den gegebenen Werten für die Schriftart, den Schriftschnitt und die Schriftgröße in Pixel.

Für die Schriftart sollten Schriftfamilien, wie Monospace, SansSerif oder Serif angegeben werden. Der Schriftschnitt wird durch ganzzahlige Konstanten festgelegt (BOLD, ITALIC, PLAIN).

52

Layoutmanager – die Klasse FlowLayout Mit dem Layoutmanager wird die Anordnung der verschiedenen Komponenten in einem Container festgelegt. Wird ein Objekt der Klasse FlowLayout erzeugt, so werden die Komponenten fließend – von links nach rechts zeilenweise in den Container eingefügt. Die Ausrichtung in der Zeile erfolgt standardmäßig zentriert. Zwischen den Komponenten findet sich horizontal und vertikal jeweils ein Abstand von 5 Punkten. • public FlowLayout()

erzeugt ein FlowLayout-Objekt mit den Standardeinstellungen • public FlowLayout(int align)

erzeugt ein FlowLayout-Objekt mit einer Ausrichtung gemäß align • public FlowLayout(int align, int hp, int v)

erzeugt ein FlowLayout-Objekt mit einer Ausrichtung gemäß align und den horizontalen und vertikalen Abständen von hp und v

53

Layoutmanager – die Klasse BorderLayout Wird ein Objekt der Klasse BorderLayout erzeugt, so werden die Komponenten entsprechend der fünf Gebiete NORTH, SOUTH, WEST, EAST, CENTER eingefügt. Beim Aufruf wird BorderLayout die „Himmelsrichtung“ hinzugefügt.

• public BorderLayout() erzeugt ein borderLayout-Objekt mit den Standardeinstellungen (0-Abstände zwischen den Gebieten)

• public BorderLayout(int h, int v) erzeugt ein borderLayout-Objekt mit horizontalen bzw. vertikalen Abständen von h bzw. v Pixel zwischen den Gebieten

54

Basisklasse - JComponent


55

Basisklasse JComponent JComponent ist eine Basisklasse für alle Swing-Komponenten, mit Ausnahme der Top-Level-Container. • public boolean isOpaque()

gibt true zurück, wenn die Komponente einen undurchsichtigen Hintergrund besitzt, sonst false

• public void setOpaque(boolean b) setzt den Hintergrund der Komponente auf undurchsichtig, wenn b den Wert true hat, bzw. durchsichtig, wenn b den Wert false hat

• public String getToolTipText() gibt den aktuellen Tooltip-Text der Komponente zurück

• public void setToolTipText(String text) legt text als Tooltip-Text (pop-up-Fenster zur Komponente) fest

• public void setLayout(LayoutManager mgr)) legt das Layout des Containers fest

GUI erstellen mit NetBeans !  Open source Entwicklungsumgebung u.a. für Java

(vergleichbar Eclipse) !  schnelle und einfache Erstellung von graphischen

Oberflächen !  kostenloser Download unter

https://netbeans.org/downloads/index.html !  Projekt benötigt main class (Klasse, von der beim

Starten des Projektes eine Instanz erzeugt wird) !  graphische Klasse bei Projekten mit graphischen

Oberflächen, JFrame

1.neues Projekt erstellen

2. „set main class“ deaktivieren

3. im Projekt neue Klasse erstellen

4. Designansicht zeigt Komponenten

5. Quelltextansicht mit automatisch generiertem Quelltext

GUI erstellen mit NetBeans – erste Schritte !  weiterer generierter Quelltext ist verborgen und kann

durch Klick auf + angezeigt werden !  grau hinterlegter Quelltext kann nicht editiert

werden, Bsp.: Hinzufügen eines Buttons mit der Maus fügt nicht editierbaren Quelltext hinzu

!  Komponenten hinzufügen in Designansicht aus der Palette

!  Konfiguration der Komponenten im Fenster „Properties“ oder über rechten Mausklick auf die Komponente

Ereignisverarbeitung mit NetBeans

!  Auswahl des Ereignisses der Komponente erzeugt automatisch ActionListener und Methodenrumpf, der dann um die gewünschten Befehle ergänzt werden muss

!  in Designansicht: Rechtsklick auf Ereignisquelle (z.B. Button), dann Event >> action >> actionPerformed

Ereignisverarbeitung mit NetBeans

!  im Quelltext: in initComponents() wurde zum Button ein ActionListener() als anonyme Klasse hinzugefügt und ein Methodenrahmen zur Programmierung des Ereignisses wurde erstellt

NetBeans Features (Auswahl) !  automatisch generierter Quelltext !  Autovervollständigung beim Tippen von Befehlen !  Syntaxfehler werden sofort am Zeilenanfang

durch rotes ! gekennzeichnet – Mausbewegung auf Symbol zeigt Fehlermeldung an

!  wenn verfügbar, werden beim Klick auf das Symbol Lösungsvorschläge angeboten, wie z.B. das Hinzufügen der zu importierenden Pakete beim Verwenden spezieller Klassen

66

Kontrollfragen 1. Erklären Sie den Begriff „Benutzungsmodell“ für

Softwareapplikationen. 2. Nennen Sie Grundeigenschaften eines

benutzerfreundlichen Softwaresystems. 3. Geben Sie die Richtlinien für die Bedienungsgestaltung

von interaktiven, graphischen Benutzeroberflächen an und erläutern Sie diese kurz.

4. Erläutern Sie den Begriff „Graphische Benutzungsoberfläche“. Was versteht man in diesem Zusammenhang unter Interaktion? Geben Sie 4 typische Interaktionsformen an.

5. Nennen Sie 4 Gestaltungsgrundsätze. Erläutern Sie einen dieser Grundsätze.

Literatur /BALZERT96/ Balzert, Helmut; Lehrbuch der Softwaretechnik;

Spektrum Verlag, 1996 /BARNES09/ David J. Barnes, Michael Kölling

Java lernen mit BlueJ Pearson Studium, 2009, ISBN-13: 978-3-86894-001-5

/FORBRIG04/ Forbrig, Peter; Immo O. Kerner, Lehr- und Übungsbuch Softwareentwicklung, Fachbuchverlag Leipzig, 2004 ISBN 3-446-22578-1

/RATZ10/ Ratz, Dietmar; Scheffler, Jens; Seese, Detlef; Wiesenberger, Jan; Grundkurs Programmieren in JAVA; Carl-Hanser-Verlag, München, Wien; 2010 ISBN 3-935042-00-0

/KEMPE/ Kempe, Tepaße (Hrsg.); Softwareentwicklung mit Greenfoot und BlueJ, Schöningh-Verlag

Java Handbuch in deutsch http://www.dpunkt.de/java/index.html

67

Einführung in die Informatik – Algorithmen und ... · Windows 2.0: Fenster verschieben, ......

Documents

Transcript of Einführung in die Informatik – Algorithmen und ... · Windows 2.0: Fenster verschieben, ......