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:
‣Aufgabenangemessenheit‣Aufgabenangemessenheit
‣Selbstbeschreibungsfähigkeit‣Selbstbeschreibungsfähigkeit
‣Steuerbarkeit‣Steuerbarkeit
‣Erwartungskonformität‣Erwartungskonformität
‣Fehlerrobustheit
‣Individualisierbarkeit
‣Lernförderlichkeit
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
Ereignisgesteuerte ProgrammierungEreignisgesteuerte Programmierung
Der Programmfluss wird durch den Ereignisse gesteuertDer Programmfluss wird durch den Ereignisse gesteuert
Interaktionen (des Benutzers) lösen Ereignisse ausInteraktionen (des Benutzers) lösen Ereignisse aus
‣ Maus‣ Maus
‣ Tastatur‣ Tastatur
‣ Gamepad/Joystick/...‣ Gamepad/Joystick/...
‣ Nicht-Benutzer Ereignisse: Nachricht empfangen, ...‣ Nicht-Benutzer Ereignisse: Nachricht empfangen, ...
Ist die mit dem Ereignis verbundene Methode ausgeführt worden, wartet das
Programm auf weitere Eingaben
Das Programm ist so lange aktiv, bis der Benutzer es beendet
B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik 12
24.04.200924.04.200924.04.2009
44
C#C#
B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik 13
Kurze Einführung in C# (C sharp)Kurze Einführung in C# (C sharp)
‣ Prozedurale OOP-Sprache von Microsoft, VÖ in 2001‣ Prozedurale OOP-Sprache von Microsoft, VÖ in 2001
‣ Aktuell: C# 3.0 seit 19.11.2007‣ Aktuell: C# 3.0 seit 19.11.2007
‣ Basis: C++; Java, Delphi & VB … sowie andere‣ Basis: C++; Java, Delphi & VB … sowie andere
‣ Benötigt Runtime zur Ausführung:
‣ CLR – Windows (MS)‣ CLR – Windows (MS)
‣ Mono – Linux, BSD, OSX, … (OpenSource)‣ Mono – Linux, BSD, OSX, … (OpenSource)
‣ Direkte Unterstützung der .NET Komponenten‣ Direkte Unterstützung der .NET Komponenten
‣ Mächtig durch viele vorgegebene Klassen
B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik
Informationen zu C#Informationen zu C#
‣ MSDN: On- und Offlinehilfe von Microsoft (msdn.microsoft.com)‣ MSDN: On- und Offlinehilfe von Microsoft (msdn.microsoft.com)
‣ Bücher:‣ Bücher:
‣ C# 3.0 - kurz & gut (O'Reilly)‣ C# 3.0 - kurz & gut (O'Reilly)
‣ C# 3.0 in a Nutshell (O'Reilly)‣ C# 3.0 in a Nutshell (O'Reilly)
‣ … viele andere …‣ … 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-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik 15
Einige C# FeaturesEinige C# Features
C# 1.0C# 1.0
‣ Automatische Garbage Collection‣ Automatische Garbage Collection
‣ Direkter Speicherzugriff möglich (unsafe keyword)‣ Direkter Speicherzugriff möglich (unsafe keyword)
C# 2.0C# 2.0
‣ Generic Types‣ Generic Types
‣ Partielle Klassen‣ Partielle Klassen
‣ Iteratoren‣ Iteratoren
C# 3.0C# 3.0
‣ Lambda-Ausdrücke (funktionalen Programmierung)‣ Lambda-Ausdrücke (funktionalen Programmierung)
‣ Language Integrated Query (LINQ)‣ Language Integrated Query (LINQ)
B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik
24.04.200924.04.200924.04.2009
55
Typen & OperatorenTypen & Operatoren
‣ Wahrheitstyp:‣ Wahrheitstyp:
‣ bool‣ bool
‣ Zahlentypen:‣ Zahlentypen:
‣ int, double, float, byte, ...‣ int, double, float, byte, ...
‣ Texttypen:‣ Texttypen:
‣ char: ‘a’, String: “abc”‣ char: ‘a’, String: “abc”
‣ Operatoren:‣ Operatoren:
‣ +, -, *, /, %‣ +, -, *, /, %
‣ ++A, A++, --A, A--‣ ++A, A++, --A, A--
‣ +=, -=, *=, /=, %=‣ +=, -=, *=, /=, %=
‣ ||, &&, ==, <, >, ?‣ ||, &&, ==, <, >, ?
B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik 17
Flow controlFlow control
int n = 0; String s = “abc”; bool b1 = true; bool b2 = true;int n = 0; String s = “abc”; bool b1 = true; bool b2 = true;
if (n == 5){ } else { }if (n == 5){ } else { }
int n = (b1 == b2)? 23 : 42;int n = (b1 == b2)? 23 : 42;
for (int i = 0; i < n; i++){ }
foreach (char s in s){ }foreach (char s in s){ }
switch (n)switch (n)
{
case 5:case 5:
break;break;
default:default:
break;
}}
und andere...B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik 18
Klasse & FunktionKlasse & Funktion
public class Vec1public class Vec1
{{
private double x;private double x;
public Vec1()public Vec1()
{ x = 1;}{ x = 1;}
public double GetX()public double GetX()
{ return x;}{ return x;}
public void Print()public void Print()
{ System.Console.WriteLine(“x= “ + x);}{ System.Console.WriteLine(“x= “ + x);}
}}
B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik 19
Verschiedene Beispiele – Iterator/GenericsVerschiedene Beispiele – Iterator/Generics
Collection<String> txts = new Collection<String>();Collection<String> txts = new Collection<String>();
for (int i=0; i<23; i++)for (int i=0; i<23; i++)
txts.Add(i.ToString());txts.Add(i.ToString());
foreach (String txt in txts)foreach (String txt in txts)
System.Console.WriteLine(txt);System.Console.WriteLine(txt);
B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik
24.04.200924.04.200924.04.2009
66
Verschiedene Beispiele - PropertyVerschiedene Beispiele - Property
private Color color;private Color color;
public Color BackgroundColorpublic Color BackgroundColor
{{
get { return color; }get { return color; }
set { color = value; }set { color = value; }
}}
//Set/Get Zugriff auf Variable//Set/Get Zugriff auf Variable
Objekt.BackgroundColor = Color.Black;Objekt.BackgroundColor = Color.Black;
Color col = Objekt.BackgroundColor;Color col = Objekt.BackgroundColor;
public Color BackgroundColor2 { get; set; }public Color BackgroundColor2 { get; set; }
B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik
IDEIDE
IDE erleichtern dem Programmierenden das Arbeiten z.B. durch:IDE erleichtern dem Programmierenden das Arbeiten z.B. durch:
‣ Syntaxhighlighting‣ Syntaxhighlighting
‣ Verschiedene Übersichten (Variablen, Methoden, ...)‣ Verschiedene Übersichten (Variablen, Methoden, ...)
‣ Eingabehilfen (Autocomplete, ...)‣ Eingabehilfen (Autocomplete, ...)
‣ Projekterstellungstools und andere Werkzeuge‣ Projekterstellungstools und andere Werkzeuge
Für C# gibt es zur Zeit folgende IDEs:Für C# gibt es zur Zeit folgende IDEs:
‣ Microsoft VisualStudio (ExpressEdition kostenlos), Windows‣ Microsoft VisualStudio (ExpressEdition kostenlos), Windows
‣ SharpDevelop (OpenSource), Windows‣ SharpDevelop (OpenSource), Windows
‣ MonoDevelop (OpenSource), Linux & OS X‣ MonoDevelop (OpenSource), Linux & OS X
B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik 22
Ein kleines Beispiel Ein kleines Beispiel
B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik 23
Programm ZielProgramm Ziel
Erweitertes “Hello World” Programm:Erweitertes “Hello World” Programm:
‣Frei wählbarer Text
‣wählbare Anzahl der Wiederholungen der Textausgabe
B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik 24
24.04.200924.04.200924.04.2009
77
Schritt 1 - Neues Projekt anlegenSchritt 1 - Neues Projekt anlegen
B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik 25
B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik 26
Schritt 2 - Widgets platzierenSchritt 2 - Widgets platzieren
WidgettypenWidgettypen
LabelNumericUpDown
LabelNumericUpDown
TextBox
Button
TextBox
Button
RichTextBoxRichTextBox
B-CGEinführung in die Computergraphik
Prof. Dr. Detlef Krömker, Sebastian Schäfer, Daniel SchiffnerGraphische Datenverarbeitung, Institut für Informatik 27
Schritt 3 - Widgets konfigurierenSchritt 3 - Widgets konfigurieren
Sinnvolle Benennung:Sinnvolle Benennung:Typakronym + Funktion numWiederholungenTypakronym + Funktion numWiederholungen
tbText
rtbAusgabertbAusgabe
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