Een eerste applicatie

Visual Basic .NET

Een eerste applicatie 2.1

Inleiding Programmeren in Visual Basic .NET doe je niet alleen door regels

met code te schrijven. Je begint met het ontwerpen van een venster in de design mode met allerlei controls, zoals knoppen, tekst- en invoervakken. Daarna kun je het ‘gedrag’ van deze controls

aanpassen in het codevenster. Dit betekent dat je kunt aangeven

wat je applicatie moet doen als de gebruiker bijvoorbeeld op een knop klikt.

In dit hoofdstuk ga je van start met het maken van een eerste

applicatie. Dit gebeurt stap voor stap. Niet alles wordt daarbij tot in detail uitgelegd. Dat gebeurt in de hoofdstukken daarna.

2.17

VB. NET

Een eerste applicatie

2.2

Microsoft Visual Basic 2010 Express Edition gebruiken

We spreken af dat wanneer je in het vervolg de naam Visual Basic tegenkomt, we Visual Basic 2010 Express Edition bedoelen.

 Start Visual Basic. Je krijgt nu het onderstaande venster te zien.

De startpagina van Visual Basic  Om aan de slag te kunnen moet je eerst een project aanmaken. Kies om dat te doen 'File' –> 'New Project' (of druk op Ctrl + N). Het volgende venster verschijnt:

Het starten van een nieuw project  Kies het eerste item, 'Windows Forms Application', geef het project de naam 'EersteProgramma' en klik op OK.

VB. NET

2.18

Visual Basic .NET

Index

Windows

 Visual Basic schrijft nu enkele bestanden naar de harde schijf. Als dit gebeurd is, krijg je het volgende scherm te zien:

Design mode Run mode

Break mode

Overzicht van verschillende windows Zoals je ziet zijn er verschillende panelen zichtbaar; dit zijn windows (vensters). Visual Basic kent drie verschillende ‘toestanden’. Deze worden modes genoemd:  Design mode

Met deze ontwerpmodus bouw je een applicatie. Deze mode herken je aan het opschrift van het tabblad waarin je de interface van de applicatie ziet, namelijk

Form1.vb[Design]. Wat een interface precies is lees je in hoofdstuk 2.3. Kijk even naar de programmeeromgeving om dit opschrift te vinden.

 Run mode

Deze modus wordt gebruikt voor het uitvoeren van de applicatie. Dit kun je onder meer starten door op de functietoets F5 te klikken (of de knop met het groene pijltje met de tooltip Start Debugging). Start het programma maar om te zien wat er gebeurt.

 Break mode

Hiermee kun je de applicatie onderbreken en de debugger (‘foutenontdekker’) gebruiken.

We houden ons eerst bezig met de design mode.

2.19

VB. NET

Een eerste applicatie

2.3

De Design mode

Elk programma heeft een interface (of user interface, in het Nederlands gebruikersomgeving genoemd). Via de user interface communiceert het programma met de gebruiker. Het

programma kan via de interface uitvoer tonen op het scherm en de gebruiker kan er het programma mee bedienen.

Er zijn verschillende soorten interfaces. Een van de oudste is de Textual User Interface (in het Nederlands tekstuele gebruikersomgeving), afgekort TUI. Hierbij geeft de gebruiker

commando’s door regels tekst in te voeren. De uitvoer op het scherm bestaat ook uit regels tekst. De voorloper van Windows, MS-DOS, had een TUI.

Index

Interface

Textual User Interface TUI

Graphical User Interface GUI

Controls

Properties IDE

Integrated

De MS-DOS prompt, een voorbeeld van een Textual User Interface In Windows bestaat de user interface onder andere uit vensters met knoppen, tekstvakken en pictogrammen. Dit type interface noemen we Graphical User Interface (in het Nederlands

Development Environment

‘grafische gebruikersomgeving’). We korten dit af tot GUI, wat je uitspreekt als ‘goewie’. In Visual Basic maak je applicaties voor Windows. Je moet dus ook een GUI ontwerpen.

Er zijn vier stappen die je uitvoert om een eenvoudige Visual Basic-applicatie te bouwen: 1.

het ontwerpen van de GUI met behulp van controls (besturingselementen) uit de

3.

het schrijven van code bij de gebeurtenissen van de controls

2. 4.

Toolbox

het instellen van de properties (eigenschappen) van de controls het compileren van het project.

In ons project 'EersteProgramma' beginnen we dus met de GUI. We maken daarbij zoveel

mogelijk gebruik van de mogelijkheden van Visual Basic als IDE. De afkorting IDE staat voor Integrated Development Environment. Een IDE is een ontwikkelingomgeving die het

makkelijker maakt om programma’s te ontwerpen, schrijven, bewerken en debuggen. Wat debuggen is, leer je in hoofdstuk 4.

 Kies 'View' –> 'Other Windows' -> 'Toolbox' (of druk Ctrl + Alt + X). Het venster ziet er nu als volgt uit:

VB. NET

2.20

Visual Basic .NET

Index

Designer Solution

Explorer Toolbox

Properties

De IDE van Visual Basic De IDE bestaat in dit geval uit een hoofdvenster met daarin een aantal deelvensters. Het

hoofdvenster is de complete afbeelding die te zien is in de figuur hierboven en bevat de blauwe titelbalk (in dit geval de titel EersteProgramma – Microsoft Visual Basic 2010 Express Edition),

met daaronder een grijze menubalk en daar weer onder een grijze werkbalk. Het hoofdvenster omvat ook andere vensters:

 Designer (in het midden van het scherm)

Dit formuliervenster speelt een belangrijke rol bij de ontwikkeling van Visual Basicapplicaties. Hier ‘teken’ je de applicatie, oftewel hier ontwerp je de interface.

 Solution Explorer (rechtsboven op het scherm)

Met de Solution Explorer kun je de projectbestanden beheren: openen, verwijderen, kopiëren enzovoort.

 Toolbox (links op het scherm)

Hiermee kun je onder andere controls op het formulier (de form) plaatsen.

 Properties (rechtsonder op het scherm)

In dit venster kun je de eigenschappen van objecten aanpassen.

2.21

VB. NET

Een eerste applicatie

In de titelbalk kun je het volgende aflezen:  de naam van het project

 de mode waarin Visual Basic verkeert (running of debugging)  de naam van het huidige project.

De menubalk boven aan het scherm (File, Edit, View enzovoort) bevat drop-downmenu’s

waarmee je alle bewerkingen kunt uitvoeren die je nodig hebt in de Visual Basic-omgeving. De werkbalk daaronder beschikt over knoppen die verwijzen naar bepaalde menuopties.  Sla het project op door 'File' –> 'Save All' te kiezen. Geef 'EersteProgramma' op als

projectnaam. We kiezen 'Save All' omdat een project uit meerdere bestanden bestaat. Zorg ervoor dat 'Create Directory for Solution' aangevinkt is.

 Nu gaan we controls op ons formulier plaatsen. Selecteer het formulier door op 'Form1' te

dubbelklikken. Het tabblad 'Design', waarin je de interface kunt bouwen, wordt het actieve tabblad.

 In het venster 'Properties' zie je nu de eigenschappen van het formulier. Verander de naam van het formulier in 'frmKleuren' (de eigenschap 'name' staat bijna bovenaan).

Tip: de 'name' van een control of van een ander object in Visual Basic mag je helemaal zelf

bedenken. Maar let op: de 'name' mag geen spaties of vreemde tekens bevatten. Ook mag het niet beginnen met een cijfer. Handige manieren voor het geven van een 'name' aan een control of ander object leer je in hoofdstuk 3 en 5.

 Verander ook de eigenschap 'text' van ‘Form1’ in bijvoorbeeld ‘Kleurenwisselaar’, zodat je venster een goed opschrift heeft. Voor de eigenschap 'text' moet je even naar beneden scrollen.

 Selecteer nu uit de toolbox de control 'button' en plaats deze op het formulier. Verander op dezelfde manier zoals je net de naam van het formulier hebt veranderd de naam van de button in 'btnVeranderKleur'. Verander de eigenschap 'text' in ‘Verander de

achtergrondkleur’. Om de tekst passend te maken in de button, moet je de hoeken van de button naar buiten slepen totdat de tekst helemaal zichtbaar is. Het resultaat zie je in de volgende figuur.

VB. NET

2.22

Visual Basic .NET

 Als je nu op de functietoets F5 drukt (of op de knop met het groene pijltje met de tooltip

‘Start Debugging’ klikt), kun je je applicatie uitvoeren. Helaas doet de knop die we gemaakt hebben nog niets. We moeten hiervoor de code aanpassen.

Een ontworpen GUI

2.23

VB. NET

Een eerste applicatie

2.4

De Code Editor

Klik de testapplicatie die je net via 'Start Debugging' hebt gemaakt, weer weg. Dubbelklik in het tabblad 'Design' op de button. Je gaat nu naar de code editor: een tabblad met de code van het

programma. Zoals je ziet heeft Visual Basic zelf al wat code neergezet. Verwijder deze code niet als je niet precies weet waarvoor het is! Later zul je stap voor stap begrijpen wat de precieze functie van de code is.

Index

Methode Event

Omdat je hebt dubbelgeklikt op de button, heeft Visual Basic een methode (taak) met de naam 'btnVeranderKleur_Click' aangemaakt die wordt uitgevoerd zodra de gebruiker op de button

klikt. Deze methode begint met Private Sub btnVeranderKleur_Click en eindigt met End Sub. Wat de methode precies moet doen zet je neer tussen die twee regels.

Je ziet in onderstaande figuur nog de regels Public Class frmKleuren en End Class staan. Alles wat tussen die regels staat hoort bij het formulier frmKleuren. Zet geen programmacode vóór of na deze regels.

De code editor Als je met de cursor in de methode gaat staan (dus tussen de regel Private Sub

btnVeranderKleur_Click… en End Sub), zie je links bovenin in het witte vak, de editor, om

welk object het gaat (in dit geval btnVeranderKleur) en rechts bovenin om welke gebeurtenis (event) het gaat. Dat is in dit geval 'Click', dus de gebeurtenis dat de gebruiker op de button geklikt heeft.

Drop-down menu met alle

Drop-down menu met de

beschikbare objecten

bijbehorende events

Drop-down menu’s in de code editor

VB. NET

2.24

Visual Basic .NET

Index

Statement

 We willen dat de achtergrondkleur van ons formulier verandert nu de gebruiker heeft

geklikt. Dat betekent dat we de eigenschap 'BackColor' van het formulier moeten wijzigen in een andere kleur, bijvoorbeeld zwart. Dat gaat als volgt: zet in de methode btnVeranderKleur_Click het volgende statement (opdrachtregel) neer: Me.BackColor = Color.Black

Let op: Een statement sluit je in Visual Basic nooit af met een puntkomma!

 Het object Me is het formulier. Als je Me. intikt, verschijnen alle eigenschappen van het

formulier. Je kunt deze eigenschappen dus niet alleen via het Properties-venster, maar ook met regels code aanpassen.

 Test het programma nu door op F5 te drukken.

We gaan onze applicatie nog wat uitbreiden. We willen er ook voor zorgen de kleur van de

button verandert als de gebruiker met de muis over de button beweegt. Dit doen we als volgt:  Ga met de cursor in de methode btnVeranderKleur_Click staan. Kies nu rechts bovenin de editor bij 'methode name' de methode MouseHover. Om bij deze optie te komen moet je eerst naar beneden scrollen. Visual Basic maakt nu de methode

btnVeranderKleur_MouseHover aan, die wordt uitgevoerd zodra de gebruiker met de muis over de button beweegt.

 Om de kleur van de button aan te passen moeten we de eigenschap 'BackColor' van onze button ('btnVeranderKleur') aanpassen. Dat doen we met het volgende statement: btnVeranderKleur.BackColor = Color.Azure

Zoals je ziet kun je heel veel kleuren kiezen als je Color. intikt.

2.25

VB. NET

Een eerste applicatie

Natuurlijk kunnen we de kleur opnieuw veranderen als de gebruiker de muis weer van de

button af beweegt. Daarvoor gebruik je de methode MouseLeave. De complete code kan er als volgt uitzien:

Public Class frmKleuren Private Sub btnVeranderKleur_Click(… Me.BackColor = Color.Black

End Sub

Private Sub btnVeranderKleur_MouseHover(…

btnVeranderKleur.BackColor = Color.Azure

End Sub

Private Sub btnVeranderKleur_MouseLeave(…

btnVeranderKleur.BackColor = Color.CadetBlue

End Sub End Class

We hebben nu een formulier frmKleuren die drie methoden heeft, dat wil zeggen dat hij drie

taken kan uitvoeren. Deze taken worden alleen uitgevoerd als het nodig is. Als de gebruiker niet

op de knop klikt, zal de methode btnVeranderKleur_Click ook niet worden uitgevoerd. Het is dus niet zo dat alle code altijd wordt uitgevoerd.

Opmerking: in het voorbeeld is er wat code weggelaten: de regel code met de drie puntjes hoort veel langer te zijn. In het vervolg zul je meer codevoorbeelden zien waarin nietbelangrijke code is weggelaten. Je kunt de codevoorbeelden dus niet altijd letterlijk overnemen!

VB. NET

2.26

Visual Basic .NET

2.5

Opdrachten

Opdracht 1 Maak een formulier waarin het mogelijk is om de achtergrondkleur van het venster te wijzigen. Gebruik hiervoor twee verschillende radiobuttons. Als je een radiobutton aanklikt, zal het venster de kleur krijgen die achter de radiobutton vermeld wordt. Een uitwerking van deze opdracht kan er bijvoorbeeld zo uitzien:

Opdracht 2 Maak een formulier met daarin een label en een button. Als je op de button klikt, zal de tekst van het label wijzigen.

Een uitwerking van deze opdracht kan er bijvoorbeeld zo uitzien:

Tip: Tekst kun je aanpassen met de eigenschap 'Text'. Als je tekst in je code gebruikt, moet je deze tussen dubbele aanhalingstekens zetten.

2.27

VB. NET