2. Doorzetten Introductie C#

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1-4

Introductie C#

BBL-C#

Les 2

We schrijven C# doorgaans in...

1. Visual Studio Code
2. Een code editor als 'Atom'
3. Visual Studio
4. Sublime Text

Hoe noemen we dit
scherm?

1. Autocomplete
2. Visual Studio
3. Intellisense
4. Intellicode

Gecompileerd

Geïnterpreteerd

PHP

C#

Javascript

Computer leest code regel-voor-regel

Computer bouwt alle code tot machinetaal

Uitvoerbaar bestand

Compile errors

Runtime errors

Bestanden handmatig "includen" of "requiren"

Wat is dit rood onderstreepte deel van het Console object?

1. Een sub-object
2. Een eigenschap
3. Een modifier
4. A property

Wat voor project starten wij om
een Console applicatie te maken?

1. Console App (.NET Core)
2. Class Library (.NET Framework)
3. Console App (.NET Standard)
4. Console App (.NET Framework)

Solution Bestand

Open altijd dit bestand als je aan een Visual Studio project wilt verder werken.

Je kunt het openen in Visual Studio via File > Open > Project/Solution of de Open a Project or Solution-knop op het begin scherm.

Project map

In dit voorbeeld het de projectmap hetzelfde als de solution "TowerOfHanoi". Hierin kun je alle code bestanden vinden, evenals de gebouwde Executable (.exe)

Project bestanden

Hier vind je alle projectbestanden. Pas deze niet aan en verplaats ze niet! Als je dat doet zal Visual Studio ze niet terug kunnen vinden. Maak alleen wijzigingen aan projecten binnen in Visual Studio.

bin = Binaries = Computertaal bestanden = onder andere de .exe

In de bin/Debug map kun je jouw .exe bestand vinden. Dit bestand wordt pas gecompileerd wanneer je in Visual Studio het project bouwt (Build > Build Solution)

Vorige week een Console App, vandaag een Windows Forms App

Enkele voorbeelden...

Rechtsklik opties

Wanneer je met de rechtermuis op een formulier klikt krijg je een hoop opties. De belangrijkste:

• View Code (F7): Dit brengt je naar de code die bij dit formulier hoort. Daar kun je code schrijven die uitgevoerd wordt bij bijvoorbeeld het klikken op een knop.
• View Designer (Shift+F7): Dit brengt je terug naar de Form Designer, waar je Controls op het formulier kunt veranderen
  

Eigenschappen bewerken

Wanneer je in Visual Studio op iets klikt kun je daarvan hier de eigenschappen veranderen.

Nu zie je hier dat "ConfigForm.cs" is aangeklikt. Dat is een formulier en daar kunnen en willen we weinig eigenschappen van veranderen. Wanneer je op een Control klikt wordt het pas interessant!

Een Form bestand

Dit is een Windows Forms Project. Dat wil zeggen dat we kunnen werken met schermpjes die knoppen, invoervelden en plaatjes kunnen bevatten.

Je ziet hier "CalculateHanoiForm.cs":

• Als je hier dubbel op klikt open het "Form Designer" Scherm.
• Wanneer je op het pijltje (⏵) klikt zie je onderliggende code betanden. Hier doen we niets mee! Bewerk deze ook niet. Het *.Designer.cs bestand wordt automatisch gegenereerd door Visual Studio. Als je hier wijzigingen in maakt zullen die overschreven worden.
  

Project

Je ziet hier dikgedrukt TowerOfHanoi staan. Dit is een project binnen de Solution.

Een solution kan uit meerdere projecten bestaan. Kijk voor een voorbeeld maar eens in de installatiemap van je favorite software/game. Je ziet in de installatiemap een .exe, maar ook een hoop .dll bestanden. Al deze bestanden zjin vaak losse projecten met ieder een eigen doel. De ene is verantwoordelijk voor het tekenen van de game op je scherm, de ander voor het bewegen van monsters en weer de ander voor het bijhouden van quests. Zo houdt een programmeur het overzicht in de code én nog veel belangrijker: we kunnen onderdelen van ons programma makkelijk hergebruiken, omdat ze eigenlijk los staan van elkaar.

Wij gaan eigenlijk alleen maar aan de slag met één Project per Solution.

Formulier Designer

Dit scherm toont hoe het formulier er voor de gebruiker eruit gaat zien. Het is een soort tekenprogramma voor software.

Vanuit de Toolbox kun je hier Controls (knoppen, tekstvelden, text, etc) op slepen. Je bewerkt dan eigenschappen van die Controls in het Properties-scherm en kunt bij de code door op F7 of View Code te klikken.

Toolbox

De Toolbox bevat alle invoervelden, knoppen, teksten, plaatjes en andere zogenaamde "Controls" die op een formulier geplaatst kunnen worden.

Sleep een control vanuit hier naar het formulier om het te plaatsen, of klik 1 maal op een Control en sleep dan met de muis op het formulier hoe groot je dit Control wilt hebben.

De meeste Controls zijn zichtbaar voor de gebruiker, maar er zijn er ook die enkel voor de ontwikkelaar interessant zijn. Zo is er bijvoorbeeld een Timer Control, dat gebruikt wordt om code iedere X milliseconden te laten uitvoeren.

Solution Explorer Window

Dit schermpje bevat alle code bestanden die in jouw solution zijn inbegrepen.

Een "Solution" is een complete oplossing voor een probleem van een klant. Omdat wij programmeurs zijn lossen we die problem op met software.

Code View

Na het klikken op "View Code (F7)" binnen een formulier kun je de code zien die bij het formulier hoort.

Toolbox verbergen

In de code view is de Toolbox niet beschikbaar.

Om je schermruimte voor code te vergroten kun je de toolbox minimaliseren. Klik op het punaise icoontje rechtsboven in de toolbox om het scherm naar links in te klappen.

Visual Studio Layout herstellen

Super handig dat je al die versleepbare en sluitbare schermpjes kan aanpassen in Visual Studio, maar het kan wel eens zijn dat je iets niet kunt terugvinden. Om de layout van Visual Studio terug te brengen naar de "fabrieksinstellingen" klik je via Window > Reset Window Layout

View menu

Via View kun je verschillende schermpjes tevoorschijn toveren. De meeste interessante zijn:

• Het Toolbox scherm
• Het Properties scherm
• Het "Error List" scherm: hierin zie je alle errors die momenteel in je code aanwezig zijn.
  

Errors!

Hierin zie je alle errors en warnings die momenteel in je code aanwezig zijn. Begin bij oplossen altijd met de bovenste error.

Er zijn nu 9 errors, maar die kunnen in dit voorbeeld opgelost worden door regel 19 af te maken met "UpdateCalculations();
        }"

Dan verdwijnen de rest van de errors ook. De reden dat er zo veel errors zijn is de vergeten accolade: }

Heb je dus veel errors? Ga na of je niet een accolade te veel of te weinig hebt.

Als je een error hebt lukt het Visual Studio niet om je programma te bouwen naar machinetaal! Als je de .exe dus probeert zul je een oude versie krijgen

Visual Studio Updates

Omdat er heel veel ontwikkelaars zijn die met Visual Studio werken én Microsoft zelf ook met Visual Studio werkt zijn er een hoop updates iedere week.

Houdt de updates bij. Dit heeft geen invloed op de werking van jouw code, maar het verhelpt problemen die je mogelijk ervaart in het gebruik van Visual Studio.

🍪 Oefening 🍪

We gaan een simpele cookieclicker game maken

Gebruik eerst de Toolbox en Designer om een formulier te ontwerpen, daarna gaan we samen de achterliggende code schrijven.

Koekje om op te klikken

Wanneer de gebruiker hierop klikt, krijgt deze een koekje

Aantal koekjes per seconde

Hierin komt hoeveel koekjes er automatisch per seconde bij komen

Bekijk de oog icoontjes, deze Controls gaan jullie ook in een Formulier maken. Gebruik hiervoor alleen deze elementen: Button en Text

Het zal er niet zo mooi uit zien als dit spel, maar dat is voor de oefening niet belangrijk.

Heading

Een kopje voor de winkel

Knop om automatische "cursors" te kopen

Wanneer de gebruiker deze knop aan klikt, verliezen ze 15 koekes, maar krijgen ze er vanaf nu per seconde automatisch 1 bij.

Aantal huidige koekjes

Samen code schrijven

1. Wanneer de speler op de knop klikt, krijgt die een 🍪
   
2. De speler kan zien hoeveel 🍪🍪 deze heeft
3. De speler kan een 'auto-clicker' kopen, waardoor deze per seconde 1 🍪 meer krijgt
4. De speler kan zien hoeveel 🍪🍪 deze er per seconde bij krijgt
   

Volgende weken

Volgende week gaan we meer oefenen met: Loops, Arrays, Methodes, Properties, Data tussen Forms

De week daarna gaan we zorgen dat onze Cookie Clicker koekjes opslaat in een database.

Wat wil je herhalen? Waar wil je meer over weten?