Einführung in die Computergraphik. Übersicht GUI. 1. Programmieraufgabe. Gui, Widgets & Events Einführung in C#

Transkript

1 1. Programmieraufgabe Gui, Widgets & Events Einführung in C# Übersicht Gui & Widgets Events Kurze Einführung in C# Programmieraufgabe 1 Graphische Datenverarbeitung, Institut für Informatik GUI Graphische Datenverarbeitung, Institut für Informatik 3 1

2 GUI? 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. Graphische Datenverarbeitung, Institut für Informatik 4 Beispiele von GUIs verschiedene GUI Beispiele: MS Windows XP, Atari TOS 2.06, RedHat Gnome, Apple OS X ; Quelle: Graphische Datenverarbeitung, Institut für Informatik 5 GUI-Anforderungen Da die GUI das entscheidende Element der Mensch-Maschine Interaktion ist, werden an eine gute GUI Anforderung gestellt: Aufgabenangemessenheit Selbstbeschreibungsfähigkeit Steuerbarkeit Erwartungskonformität Fehlerrobustheit Individualisierbarkeit Lernförderlichkeit Diese Anforderungen wurden (u.a.) in Norm DIN EN ISO 9241 festgehalten. Graphische Datenverarbeitung, Institut für Informatik 6 2

3 Widget Toolkits & Events Graphische Datenverarbeitung, Institut für Informatik 7 Widget Toolkits? 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: Java Swing, Apple Cocoa, MS MFC Graphische Datenverarbeitung, Institut für Informatik 8 Widget Toolkits! Widgets erleichtern dem Programmierenden die Arbeit: Widgets sind... direkt durch Instanziierung einsetzbar.... mehr als optische Elemente - sie besitzen viele vorgegebene Methoden und Eigenschaften....durch Vererbung stark anpassbar. Ein einheitliches Aussehen erleichtert dem Benutzer dem Umgang mit GUIs. Graphische Datenverarbeitung, Institut für Informatik 9 3

4 Widgets im Einsatz { } Ü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! Graphische Datenverarbeitung, Institut für Informatik 10 Ereignisse im Detail 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 wurde Aufruf der gespeicherten zugewiesenen Methode Das Überwachen des Toolkits geschieht häufig (oder sollte zumindest) in einem eigenem Thread. Graphische Datenverarbeitung, Institut für Informatik 11 Ereignisgesteuerte Programmierung Der Programmfluss wird durch den Ereignisse gesteuert Interaktionen (des Benutzers) lösen Ereignisse aus Maus Tastatur Gamepad/Joystick/... 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 Graphische Datenverarbeitung, Institut für Informatik 12 4

5 C# Graphische Datenverarbeitung, Institut für Informatik 13 Kurze Einführung in C# (C sharp) Prozedurale OOP-Sprache von Microsoft, VÖ in 2001 Aktuell: C# 3.0 seit Basis: C++; Java, Delphi & VB sowie andere Benötigt Runtime zur Ausführung: CLR Windows (MS) Mono Linux, BSD, OSX, (OpenSource) Direkte Unterstützung der.net Komponenten Mächtig durch viele vorgegebene Klassen Graphische Datenverarbeitung, Institut für Informatik Einige C# Features C# 1.0 Automatische Garbage Collection Direkter Speicherzugriff möglich (unsafe keyword) C# 2.0 Generic Types Partielle Klassen Iteratoren C# 3.0 Lambda-Ausdrücke (funkt. Programmierung) Language Integrated Query (LINQ) Graphische Datenverarbeitung, Institut für Informatik 5

6 Typen & Operatoren Wahrheitstyp: bool Zahlentypen: int, double, float, byte,... Texttypen: char: a, String: abc Operatoren: +, -, *, /, %; ++A, A++, --A, A-- +=, -=, *=, /=, %=;, &&, ==, <, >,? Graphische Datenverarbeitung, Institut für Informatik 16 Flow control int n = 0; if (n == 5) { } else { } for (int i = 0; i < n; i++) { } switch (n) { case 5: break; default: break; } und andere... Graphische Datenverarbeitung, Institut für Informatik 17 Klasse & Funktion public class Vec1 { private double x; public Vec1() { x = 1;} public double GetX() { return x;} } public void Print() { System.Console.WriteLine( x= + x);} Graphische Datenverarbeitung, Institut für Informatik 18 6

7 Verschiedene Beispiele Iterator/Generics Collection<String> txts = new Collection<String>(); for (int i=0; i<23; i++) txts.add(i.tostring()); foreach (String txt in txts) System.Console.WriteLine(txt); Graphische Datenverarbeitung, Institut für Informatik Verschiedene Beispiele - Property private Color color; public Color BackgroundColor { get { return color; } set { color = value; } } //Set/Get Zugriff auf Variable Objekt.BackgroundColor = Color.Black; Color col = Objekt.BackgroundColor; Graphische Datenverarbeitung, Institut für Informatik IDE IDE erleichtern dem Programmierenden das Arbeiten z.b. durch: Syntaxhighlighting Verschiedene Übersichten (Variablen, Methoden,...) Eingabehilfen (Autocomplete,...) Projekterstellungstools und andere Werkzeuge Für C# gibt es zur Zeit folgende IDEs: Microsoft VisualStudio (ExpressEdition kostenlos), Windows SharpDevelop (OpenSource), Windows MonoDevelop (OpenSource), Linux & OS X Graphische Datenverarbeitung, Institut für Informatik 21 7

8 Ein kleines Beispiel Graphische Datenverarbeitung, Institut für Informatik 22 Programm Ziel Erweitertes Hello World Programm: Frei wählbarer Text wählbare Anzahl der Wiederholungen Graphische Datenverarbeitung, Institut für Informatik 23 Schritt 1 - Neues Projekt anlegen Graphische Datenverarbeitung, Institut für Informatik 24 8

9 Graphische Datenverarbeitung, Institut für Informatik 25 Schritt 2 - Widgets platzieren Widgettypen Label NumericUpDown TextBox Button RichTextBox Graphische Datenverarbeitung, Institut für Informatik 26 Schritt 3 - Widgets konfigurieren Sinnvolle Benennung: Typ + Funktion numwiederholungen tbtext rtbausgabe Startwerte angeben! jetzt mit Doppelclick auf den Button den Quellcode Editor für das Ereignis aufrufen Graphische Datenverarbeitung, Institut für Informatik 27 9

10 Graphische Datenverarbeitung, Institut für Informatik 28 Schritt 4 - Quellcode Jetzt das Programm starten: Graphische Datenverarbeitung, Institut für Informatik 29 Ausführen! Graphische Datenverarbeitung, Institut für Informatik 30 10

11 Programmieraufgabe # Graphische Datenverarbeitung, Institut für Informatik 31 Vektorrechner Eingabe von zwei 2D-Vektoren Verschiedene Operationen: Addition, Subtraktion Länge, Normalisieren Skalieren Kreuzprodukt(!), Skalarprodukt Graphische Visualisierung der Vektoren und Ergebnisse Textuelle Ausgabe der Rechnung Graphische Datenverarbeitung, Institut für Informatik 32 GUI Vorschlag Graphische Datenverarbeitung, Institut für Informatik 33 11

12 Anforderungen Klasse Vec2, die den Vektor repräsentiert Properties für X und Y, beide double Mehrere Konstruktoren (0, 1, 2 Parameter) Operationen +, -, Skalar* per Operatorenüberladung Ausgabe des Vektors mit überschriebener ToString() Methode Graphische Ausgabe in PictureBox mit Resize-Event Zwischenspeicherung der Vektoren in Collection Automatisch korrekte Skalierung! Textuelle Ausgabe in RichTextBox Fehlercheck mit Try...catch bei Konvertierung von String - double Sinnvolle Benennung, dokumentierter Code! Graphische Datenverarbeitung, Institut für Informatik 34 Vielen Dank:) Graphische Datenverarbeitung, Institut für Informatik 35 12