Een eerste applicatie

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

Index Visual Basic schrijft nu enkele bestanden naar de harde schijf. Als dit gebeurd is, krijg je het volgende scherm te zien: Windows 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 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 grafische gebruikersomgeving ). We korten dit af tot GUI, wat je uitspreekt als goewie. Integrated Development Environment 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 Toolbox 2. het instellen van de properties (eigenschappen) van de controls 3. het schrijven van code bij de gebeurtenissen van de controls 4. 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

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

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. Methode Event Index 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 beschikbare objecten Drop-down menu met de bijbehorende events Drop-down menu s in de code editor VB. NET 2.24

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( End Sub Me.BackColor = Color.Black Private Sub btnveranderkleur_mousehover( End Sub btnveranderkleur.backcolor = Color.Azure Private Sub btnveranderkleur_mouseleave( End Sub btnveranderkleur.backcolor = Color.CadetBlue 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

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