24.04.2009
GUI & Widgets, Events Einführung in C# GUI
B-CG Einführung in die Computergraphik
Übersicht
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel Schiffner Graphische Datenverarbeitung, Institut für Informatik
3
GUI ?
‣ Gui & Widgets
Als GUI (= “Graphical User Interface”) bezeichnet man die
‣ Events
‣grafische Benutzungsschnittstelle
‣ Kurze Einführung in C#
‣grafische Benutzungsoberfläche
oder auch
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
B-CG Einführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel Schiffner Graphische Datenverarbeitung, Institut für Informatik
4
1
24.04.2009
Beispiele von GUIs Widget Toolkits & Events
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 B-CG Einführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel Schiffner Graphische Datenverarbeitung, Institut für Informatik
5
GUI-Anforderungen
B-CG Einführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel Schiffner Graphische Datenverarbeitung, Institut für Informatik
7
Widget Toolkits?
Da die GUI das entscheidende Element der Mensch-Maschine Interaktion ist, werden an eine “gute” GUI Anforderung gestellt:
Sammlung von Klassen, Schnittstellen und Bibliotheken, die die Erstellung und Benutzung einer GUI vereinfachen Ein Widget ist eine grafische Komponente, wie z.b.
‣Aufgabenangemessenheit
‣ Buttons
‣Selbstbeschreibungsfähigkeit
‣ Textfelder
‣Steuerbarkeit
‣ Dialoge
‣Erwartungskonformität
‣ ...
‣Fehlerrobustheit ‣Individualisierbarkeit ‣Lernförderlichkeit Diese Anforderungen wurden (u.a.) in Norm DIN EN ISO 9241 festgehalten. verschiedene Widget-Beispiele: Apple Cocoa, MS MFC , Java Swing B-CG Einführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel Schiffner Graphische Datenverarbeitung, Institut für Informatik
6
B-CG Einführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel Schiffner Graphische Datenverarbeitung, Institut für Informatik
8
2
24.04.2009
Widget Toolkits!
Ereignisse im Detail
Widgets erleichtern dem Programmierenden die Arbeit.
Beim gezeigten Beispiel passiert intern (stark vereinfacht) folgendes:
Widgets sind
‣Der Button speichert Referenz auf die auszuführende Methode.
‣... direkt durch Instanziierung einsetzbar. ‣Ab Programmstart überwacht das Toolkit die Maus: ‣... mehr als optische Elemente - sie besitzen viele vorgegebene Methoden und Eigenschaften.
‣
Klick?
‣
Check, welches Objekt getroffen wurde
‣
Aufruf der gespeicherten zugewiesenen Methode
‣...durch Vererbung stark anpassbar. Das Überwachen des Toolkits sollte in einem eigenem Thread geschehen. Ein einheitliches Aussehen erleichtert dem Benutzer dem Umgang mit GUIs. B-CG Einführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel Schiffner Graphische Datenverarbeitung, Institut für Informatik
9
Widgets im Einsatz
B-CG Einführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel Schiffner Graphische Datenverarbeitung, Institut für Informatik
11
Ereignisgesteuerte Programmierung
Üblicherweise unterstützen objektorientierte Toolkits die ereignisgesteuerte Programmierung: ‣In der Programmerstellungsphase werden bestimmten Ereignissen
Der Programmfluss wird durch den Ereignisse gesteuert Interaktionen (des Benutzers) lösen Ereignisse aus ‣ Maus
auszuführende Methoden zugewiesen.
‣ Tastatur
‣Zur Laufzeit wartet das Programm auf das Eintreten der Ereignisse um
‣ Gamepad/Joystick/...
anschließend die zugewiesenen Methoden aufzurufen.
‣ Nicht-Benutzer Ereignisse: Nachricht empfangen, ...
{ System.out.println("Aktion!"); }
Ist die mit dem Ereignis verbundene Methode ausgeführt worden, wartet das Programm auf weitere Eingaben > Aktion!
B-CG Einführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel Schiffner Graphische Datenverarbeitung, Institut für Informatik
Das Programm ist so lange aktiv, bis der Benutzer es beendet
10
B-CG Einführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel Schiffner Graphische Datenverarbeitung, Institut für Informatik
12
3
24.04.2009
Informationen zu C# ‣
MSDN: On- und Offlinehilfe von Microsoft (msdn.microsoft.com)
‣
Bücher:
C#
‣ C# 3.0 - kurz & gut (O'Reilly) ‣ C# 3.0 in a Nutshell (O'Reilly) ‣ … viele andere …
‣
Im Netz: ‣ „C#“ auf http://openbook.galileocomputing.de/csharp/ ‣ „Visual C#“ auf http://openbook.galileocomputing.de/visual_csharp/ ‣ myCSharp.de community http://www.mycsharp.de/wbb2/
B-CG Einführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel Schiffner Graphische Datenverarbeitung, Institut für Informatik
Kurze Einführung in C# (C sharp) ‣ Prozedurale OOP-Sprache von Microsoft, VÖ in 2001 ‣ Aktuell: C# 3.0 seit 19.11.2007 ‣ Basis: C++; Java, Delphi & VB … sowie andere ‣ Benötigt Runtime zur Ausführung:
13
B-CG Einführung in die Computergraphik
C# 1.0 ‣ Automatische Garbage Collection ‣ Direkter Speicherzugriff möglich (unsafe keyword) C# 2.0 ‣ Generic Types
‣ Mono – Linux, BSD, OSX, … (OpenSource)
‣ Partielle Klassen
‣ Mächtig durch viele vorgegebene Klassen
15
Einige C# Features
‣ CLR – Windows (MS)
‣ Direkte Unterstützung der .NET Komponenten
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel Schiffner Graphische Datenverarbeitung, Institut für Informatik
‣ Iteratoren C# 3.0 ‣ Lambda-Ausdrücke (funktionalen Programmierung) ‣ Language Integrated Query (LINQ)
B-CG Einführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel Schiffner Graphische Datenverarbeitung, Institut für Informatik
B-CG Einführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel Schiffner Graphische Datenverarbeitung, Institut für Informatik
4
24.04.2009
Typen & Operatoren
Klasse & Funktion
‣ Wahrheitstyp: ‣ bool
public class Vec1 {
‣ Zahlentypen:
private double x;
‣ int, double, float, byte, ...
public Vec1()
‣ Texttypen:
{ x = 1;}
‣ char: ‘a’, String: “abc” public double GetX() ‣ Operatoren:
{ return x;}
‣ +, -, *, /, % ‣ ++A, A++, --A, A--
public void Print()
‣ +=, -=, *=, /=, %=
{ System.Console.WriteLine(“x= “ + x);}
‣ ||, &&, ==, , ? B-CG Einführung in die Computergraphik
}
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel Schiffner Graphische Datenverarbeitung, Institut für Informatik
17
Flow control
B-CG Einführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel Schiffner Graphische Datenverarbeitung, Institut für Informatik
19
Verschiedene Beispiele – Iterator/Generics
int n = 0; String s = “abc”; bool b1 = true; bool b2 = true;
Collection txts = new Collection();
if (n == 5){ } else { } int n = (b1 == b2)? 23 : 42;
for (int i=0; i