GUI & Widgets, Events Einführung in C# GUI · 24.04.2009 1 GUI & Widgets, Events Einführung in C#...

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


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.



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


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.



Widget ToolkitsWidget Toolkits&&

EventsEvents



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



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.



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!



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.



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



24.04.200924.04.200924.04.2009

44

C#C#



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



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/



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)



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--

‣ +=, -=, *=, /=, %=‣ +=, -=, *=, /=, %=

‣ ||, &&, ==, <, >, ?‣ ||, &&, ==, <, >, ?



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


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);}

}}



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);



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; }



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



Ein kleines Beispiel Ein kleines Beispiel



Programm ZielProgramm Ziel

Erweitertes “Hello World” Programm:Erweitertes “Hello World” Programm:

‣Frei wählbarer Text

‣wählbare Anzahl der Wiederholungen der Textausgabe



24.04.200924.04.200924.04.2009

77

Schritt 1 - Neues Projekt anlegenSchritt 1 - Neues Projekt anlegen





Schritt 2 - Widgets platzierenSchritt 2 - Widgets platzieren

WidgettypenWidgettypen

LabelNumericUpDown

LabelNumericUpDown

TextBox

Button

TextBox

Button

RichTextBoxRichTextBox



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!



24.04.200924.04.200924.04.2009

88



Schritt 4 - QuellcodeSchritt 4 - Quellcode

Jetzt das Programm starten: B-CGEinführung in die Computergraphik


(Schritt 5) - Ausführen!(Schritt 5) - Ausführen!



Vielen Dank:)Vielen Dank:)



GUI & Widgets, Events Einführung in C# GUI · 24.04.2009 1 GUI & Widgets, Events Einführung in C#...

Documents

Transcript of GUI & Widgets, Events Einführung in C# GUI · 24.04.2009 1 GUI & Widgets, Events Einführung in C#...