24.04.2009 24.04.2009 1 1 GUI & Widgets, Events GUI & Widgets, Events Einführung in C# Einführung in C# Übersicht Übersicht ‣ Gui & Widgets ‣ Gui & Widgets ‣ Events ‣ Kurze Einführung in C# B-CG Einführung in die Computergraphik Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel Schiffner Graphische Datenverarbeitung, Institut für Informatik GUI GUI B-CG Einführung in die Computergraphik Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel Schiffner Graphische Datenverarbeitung, Institut für Informatik 3 GUI ? GUI ? Als GUI (= “Graphical User Interface”) bezeichnet man die Als GUI (= “Graphical User Interface”) bezeichnet man die ‣grafische Benutzungsschnittstelle oder auch ‣grafische Benutzungsoberfläche eines Programmes. Sie ist der Teil einer Software, mit der ein (normaler) Benutzer interagiert. B-CG Einführung in die Computergraphik Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel Schiffner Graphische Datenverarbeitung, Institut für Informatik 4
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
24.04.200924.04.200924.04.2009
11
GUI & Widgets, EventsGUI & Widgets, Events
Einführung in C#Einführung in C#
ÜbersichtÜbersicht
‣ Gui & Widgets‣ Gui & Widgets
‣ Events
‣ Kurze Einführung in C#
B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik
GUIGUI
B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik 3
GUI ?GUI ?
Als GUI (= “Graphical User Interface”) bezeichnet man die Als GUI (= “Graphical User Interface”) bezeichnet man die
‣grafische Benutzungsschnittstelle
oder auch
‣grafische Benutzungsoberfläche
eines Programmes.eines Programmes.
Sie ist der Teil einer Software, mit der ein (normaler) Benutzer interagiert.Sie ist der Teil einer Software, mit der ein (normaler) Benutzer interagiert.
B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik 4
24.04.200924.04.200924.04.2009
22
Beispiele von GUIsBeispiele von GUIs
verschiedene GUI Beispiele: Atari TOS 2.06, RedHat 8.0 + Gnome, Apple OS X 10.4.6, MS Windows XP; Quelle: http://toastytech.com/guiB-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik 5
verschiedene GUI Beispiele: Atari TOS 2.06, RedHat 8.0 + Gnome, Apple OS X 10.4.6, MS Windows XP; Quelle: http://toastytech.com/gui
GUI-AnforderungenGUI-Anforderungen
Da die GUI das entscheidende Element der Mensch-Maschine Interaktion Da die GUI das entscheidende Element der Mensch-Maschine Interaktion ist, werden an eine “gute” GUI Anforderung gestellt:
Diese Anforderungen wurden (u.a.) in Norm DIN EN ISO 9241 festgehalten.
B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik 6
Widget ToolkitsWidget Toolkits&&
EventsEvents
B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik 7
Widget Toolkits?Widget Toolkits?
Sammlung von Klassen, Schnittstellen und Bibliotheken, die die Erstellung und Sammlung von Klassen, Schnittstellen und Bibliotheken, die die Erstellung und Benutzung einer GUI vereinfachen
Ein Widget ist eine grafische Komponente, wie z.b.
‣ Buttons
‣ Textfelder
‣ Dialoge
‣ ......
verschiedene Widget-Beispiele: Apple Cocoa, MS MFC , Java Swing
B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik 8
verschiedene Widget-Beispiele: Apple Cocoa, MS MFC , Java Swing
24.04.200924.04.200924.04.2009
33
Widget Toolkits!Widget Toolkits!
Widgets erleichtern dem Programmierenden die Arbeit.Widgets erleichtern dem Programmierenden die Arbeit.
Widgets sind
‣... direkt durch Instanziierung einsetzbar.
‣... mehr als optische Elemente - sie besitzen viele vorgegebene Methoden
und Eigenschaften.und Eigenschaften.
‣...durch Vererbung stark anpassbar.‣...durch Vererbung stark anpassbar.
Ein einheitliches Aussehen erleichtert dem Benutzer dem Umgang mit GUIs.Ein einheitliches Aussehen erleichtert dem Benutzer dem Umgang mit GUIs.
B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik 9
Widgets im EinsatzWidgets im Einsatz
Üblicherweise unterstützen objektorientierte Toolkits die ereignisgesteuerte Üblicherweise unterstützen objektorientierte Toolkits die ereignisgesteuerte Programmierung:
‣In der Programmerstellungsphase werden bestimmten Ereignissen
auszuführende Methoden zugewiesen.
‣Zur Laufzeit wartet das Programm auf das Eintreten der Ereignisse um
anschließend die zugewiesenen Methoden aufzurufen.
{{System.out.println("Aktion!");
}}
> Aktion!> Aktion!
B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik 10
Ereignisse im DetailEreignisse im Detail
Beim gezeigten Beispiel passiert intern (stark vereinfacht) folgendes:Beim gezeigten Beispiel passiert intern (stark vereinfacht) folgendes:
‣Der Button speichert Referenz auf die auszuführende Methode.
‣Ab Programmstart überwacht das Toolkit die Maus:
‣ Klick?
‣ Check, welches Objekt getroffen wurdeCheck, welches Objekt getroffen wurde
‣ Aufruf der gespeicherten zugewiesenen Methode‣ Aufruf der gespeicherten zugewiesenen Methode
Das Überwachen des Toolkits sollte in einem eigenem Thread geschehen.Das Überwachen des Toolkits sollte in einem eigenem Thread geschehen.
B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik 11
jetzt mit Doppelclick auf den jetzt mit Doppelclick auf den Button den Quellcode Editor für das Ereignis aufrufenStartwerte angeben! für das Ereignis aufrufenStartwerte angeben!
B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik 28
24.04.200924.04.200924.04.2009
88
B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik 29
Schritt 4 - QuellcodeSchritt 4 - Quellcode
Jetzt das Programm starten: B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik 30
(Schritt 5) - Ausführen!(Schritt 5) - Ausführen!
B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik 31
Vielen Dank:)Vielen Dank:)
B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik 32