Gui & Widgets. GUI & Widgets, Events GUI? Als GUI (= Graphical User Interface ) bezeichnet man die

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...
4 downloads 1 Views 3MB Size
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