Programmieren? Das kann ich auch! Bau dir deinen eigenen Bildschirmschoner

Transkript

1 Programmieren? Das kann ich auch! Bau dir deinen eigenen Bildschirmschoner Christiane Taras Institut für Visualisierung und interaktive Systeme Universität Stuttgart GEFÖRDERT VON AKTIONSPARTNER

2 Vorstellungsrunde 1/2 Christiane Taras Diplom-Informatikerin (Softwaretechnik, Universität Stuttgart) Doktorandin am Institut für Visualisierung und Interaktive Systeme (VIS) Forschungsgebiet: Graphische Darstellungen für Sehbehinderte und Blinde Webseite: Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 2/38

3 Vorstellungsrunde 2/2 Jetzt seit ihr dran! Wie heißt du? Wie alt bist du? Wo kommst du her? Wieso hast du dich für diese Veranstaltung entschieden? Was erwartest du vom heutigen Tag? Hattest du Informatik in der Schule? Was habt ihr da so gemacht? Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 3/38

4 Was machen wir heute? Worum geht es in der Informatik? Programmieren in Visual Studio mit C# Erste Schritte zur eigenen Windows-Anwendung mit grafische Benutzungsoberfläche Ein Bildschirmschoner als Beispiel Wir benutzen den Designer für grafische Oberflächen und schreiben auch Quellcode per Hand Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 4/38

5 Los geht s Einloggen Benutzername: prob09 Passwort: prob09 Einloggen auf: VIS (müsste ausgewählt sein) Visual Studio (VS) starten (Doppelklick auf Symbol) Entwicklungsumgebung von Microsoft für C# und andere Programmiersprachen Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 5/38

6 Worum geht es in der Informatik? 1/3 Entwicklung sicherer und zukunftsorientierter Soft- und Hardware, die die Bedürfnisse der Benutzer befriedigt Umfangreicher Prozess Schreiben von Quellcode ist nur ein Bruchteil (aber wichtig) Kreative Arbeit Kontakt zu Personen aus vielen anderen Fachrichtungen Projektarbeit im Team Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 6/38

7 Worum geht es in der Informatik? 2/3 Problem dokumentieren Problem analysieren (Gespräche mit Benutzern, Analyse des Ist-Zustandes) dokumentieren Quellcode schreiben Lösungsansätze entwickeln Lösungsansätze bewerten und aussortieren dokumentieren dokumentieren dokumentieren beste Lösungsansätze umsetzen Lösung im Geschäftsablauf einsetzen dokumentieren Lösungen testen dokumentieren Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 7/38

8 Worum geht es in der Informatik? 3/3 Projekte organisieren Probleme analysieren Ist-Zustand analysieren Benutzeranforderungen erfassen Umsetzungsideen entwickeln Neue Algorithmen entwerfen Neue Strukturen zur Datenhaltung entwickeln Neue Software- Architekturen entwerfen Quellcode schreiben Test Wartung Weiterentwicklung Ergebnisse präsentieren und verkaufen Schulungen durchführen Dokumentation Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 8/38

9 C# Warum C#? In Windows-Umgebung leicht zu handhaben In Wirtschaft häufig verwendet Ähnliche Sprachbausteine wie andere verbreitete Sprachen (Java, C++, JavaScript ) Gutes Online-Buch: rp/index.htm Kostenlose Entwicklungsumgebung: Visual C# Express Edition sualcsharpexpress.aspx Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 9/38

10 Eine erste Anwendung 1/10 Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 10/38

11 Eine erste Anwendung 2/10 Einzelne Programme werden in VS in sogenannten Projekten verwaltet Neues Projekt anlegen: File-> New -> Project Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 11/38

12 Eine erste Anwendung 3/10 Projekttyp: Visual C# -> Windows Template (Projektvorlage): Windows Forms Application Name: MeinBildschirmSchoner Location: auf Browse Klicken und Desktop auswählen Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 12/38

13 Eine erste Anwendung 4/10 Projekte werden in VS in sogenannten Solutions verwaltet Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 13/38

14 Eine erste Anwendung 5/10 Einfach mal starten (ausführen) Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 14/38

15 Eine erste Anwendung 6/10 GUI-Elemente einfügen (GUI = Graphical User Interface) Linksklick auf Toolbox (links) Linksklick Auf kleines Stecknadel-Icon (so bleibt die Toolbox eingeblendet) Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 15/38

16 Eine erste Anwendung 7/10 Schaltfläche (Button) einfügen Linksklick auf Button in der Toolbox Linksklick auf Anwendungsfenster (Form1) Beschriftung (Label) einfügen Linksklick auf Label in der Toolbox Linksklick auf Anwendungsfenster (Form1) Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 16/38

17 Eine erste Anwendung 8/10 Aktion bei Drücken des Buttons einfügen Doppelklick (Links) auf den Button öffnet Quellcode-Anzeige Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 17/38

18 Eine erste Anwendung 9/10 Die erste handgeschriebene Zeile Quellcode Die Methode button1_click wird automatisch bei Drücken auf den Button aufgerufen und ausgeführt Die Anweisung label1.text = Hallo Du! ; setzt den Text der Beschriftung auf Hallo Du! Methoden sind in C# in geschweifte Klammern gefasst Anweisungen enthalten immer ein "=" und enden mit ";" Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 18/38

19 Eine erste Anwendung 10/10 Anwendung nochmal starten mit oder F5 und Button drücken Was wir gerade programmier haben, nennt man eine Ereignisbehandlung. Das Drücken auf den Button löst das Ereignis Click aus und unsere Methode button_click behandelt dieses Ereignis. Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 19/38

20 Vom Fenster zum Bildschirmschoner 1/17 GUI-Elemente und Code davon wieder entfernen Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 20/38

21 Vom Fenster zum Bildschirmschoner 2/17 Eigenschaften des Fensters ändern Rechtsklick auf Form1, Linksklick auf Properties Properties (Eigenschaften) Anzeige öffnet sich Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 21/38

22 Vom Fenster zum Bildschirmschoner 3/17 Bildschirmschoner haben keine Titelleiste FormBorderStyle auf None setzen Hintergrund ist meist schwarz BackColor auf Black (Tab Web ) Ausführen kleines schwarzes Quadrat Beenden mit Schaltfläche Stop in VS Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 22/38

23 Vom Fenster zum Bildschirmschoner 4/17 Bildschirmschoner füllen den ganzen Bildschirm WindowState auf Maximize setzen Ausführen (F5) jetzt ist alles schwarz Wie beende ich das jetzt? Wie jede andere Anwendung auch mit Alt+F4 ;-) Jetzt kann man aber auch noch andere Tasten drücken z.b. die Windows-Taste und das geht bei Bildschirmschonern sonst nicht. Hier machen wir wieder Ereignisbehandlungen. Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 23/38

24 Vom Fenster zum Bildschirmschoner 5/17 Ereignis-Anzeige öffnen Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 24/38

25 Vom Fenster zum Bildschirmschoner 6/17 Bei Drücken einer Taste soll der Bildschirmschoner beendet werden Ereignis KeyDown suchen und im Feld daneben Enter drücken Code-Anzeige öffnet sich wieder Das soll auch bei Drücken einer Maustaste gehen Ereignis MouseClick Ausführen und Testen Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 25/38

26 Vom Fenster zum Bildschirmschoner 7/17 Wo wird das, was wir im Designer alles geändert haben gespeichert? separate Datei Form1.Designer.cs!!! In dieser Datei sollte man nicht per Hand ändern (wird vom Designer automatisch geschrieben) Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 26/38

27 Vom Fenster zum Bildschirmschoner 8/17 Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 27/38

28 Vom Fenster zum Bildschirmschoner 9/17 Bildschirmschoner müssen bunt sein Jetzt lassen wir den Computer malen Malt eine (leere) Ellipse mit einem dicken orangen Rand Die Ausmaße der Ellipse werden durch das Rechteck angegeben, in das die Ellipse genau passt sog. Bounding Box Die Ellipse ist ein Kreis mit Durchmesser 200 Pixel und oberer linker Ecke an (x,y) = (20, 20) Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 28/38

29 Vom Fenster zum Bildschirmschoner 10/17 Aber so richtig schön sieht das noch nicht aus! Der Kreis ist ja ganz pixelig. So macht man es schön glatt: Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 29/38

30 Vom Fenster zum Bildschirmschoner 11/17 Woher weiß man eigentlich, was diese komischen Worte wie SmoothingMode alle bedeuten? Google: msdn SmoothingMode (msdn = Microsoft Developer Network) Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 30/38

31 Vom Fenster zum Bildschirmschoner 12/17 Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 31/38

32 Vom Fenster zum Bildschirmschoner 13/17 Bis jetzt haben wir nur ein Standbild. Das ist doch langweilig ;-) Mit einem Timer kann der Computer das Bild zu bestimmten Zeitpunkten ändern. In die Designer-Ansicht gehen Linksklick auf Timer in der Toolbox, Linksklick auf Form1 Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 32/38

33 Vom Fenster zum Bildschirmschoner 14/17 Enabled auf True stellen Dadurch läuft der Timer gleich ab Programmstart Enabled kann True oder False sein, solche Werte nennt man Boolean (Wahrheitswerte) Interval steht auf 100 D.h. der Timer erzeugt alle 100 ms ein Ereignis Dieses Ereignis heißt Tick Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 33/38

34 Vom Fenster zum Bildschirmschoner 15/17 Wenn der Timer einen Tick auslöst, soll der Kreis seine Position ändern Dafür müssen wir jetzt etwas mehr tun Variablen für x und y anlegen Variablen sind Stellvertreter für Werte, die man auch ändern kann Überall, wo man die Variable dann hinschreibt, verwendet der Computer den Wert Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 34/38

35 Vom Fenster zum Bildschirmschoner 16/17 Variablen zum Malen des Kreises verwenden Werte der Variablen beim Tick verändern Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 35/38

36 Vom Fenster zum Bildschirmschoner 17/17 Ausführen Jetzt bewegt sich der Kreis Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 36/38

37 Ein Beispiel-Bildschirmschoner 1/2 VS schließen Ordner Bildschirmschoner auf dem Desktop umbenennen in Bildschirmschoner_EureNamen Rechtsklick auf den Ordner Linksklick auf Umbenennen / Rename Ordner Öffnen Doppelklick auf Bildschirmschoner.sln Ausführen Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 37/38

38 Ein Beispiel-Bildschirmschoner 2/2 Girls Day Christiane Taras VIS, Uni Stuttgart Programmieren? Das kann ich auch! - Bau dir deinen eigenen Bildschirmschoner 38/38