Informaticasite van het Lauwers College te Buitenpost                 © R.J. van der Beek
 

Hoofdstuk 8: Visual Basic

8.1. De start

  8.1.1. De namen van een aantal begrippen.

Visual Basic is een object-georiënteerde programmeertaal.
 Met objecten worden dan bedoeld: (onder anderen) alle onderdelen die op het scherm te zien zijn.
Zo kan bijv. een OK-knop als een object worden opgevat, of bijv. een tekstvenstertje waar je iets in kunt vullen.
En die objecten hebben bepaalde eigenschappen en methoden.
Het heeft een bepaalde kleur (dat is een eigenschap), en misschien kun je er wel in typen of tekenen (dat is een methode)

Als je een programma wilt maken met Visual Basic, dan gaat dat heel anders dan je gewend bent bij bijv. PASCAL.

Je maakt zo'n programma in drie stappen:
  • Je "tekent" eerst de objecten, die je in het programma nodig hebt, in het formulier (het venster waarin je programma draait, noem je een formulier).
  • De eigenschappen van die objecten geef je aan in het "properties-venster, bijv. welke kleur het heeft, welk lettertype er in gebruikt wordt, enz.
  • Wat er gebeurt als je op een object met de muis klikt, enz. ga je programmeren.
Je begint in VB dus niet met het programmeerwerk, je begint aan te geven hoe het scherm er uit moet zien: "je ontwerpt eerst de interface".

Als voorbeeld nemen we een programma, waar in het begin het volgende op het scherm staat:



Je moet in de eerste twee witte hokjes twee getallen in kunnen vullen, en als je dan op het balkje met "Reken uit!" klikt dan moet de som, het verschil, het product en het quotient van die twee getallen in de vier hokjes eronder komen.

Je hebt hier drie soorten objecten: 6 labels (links), 1 knop (= command-button) met "Reken uit!" erop en 6 text-boxen (rechts)
Deze objecten worden ook wel besturingselementen genoemd.
  • Een label is een hokje waarin een vaste tekst staat. Die tekst wordt (meestal) niet veranderd als het programma loopt.
  • Een knop of command-button is ook een hokje met een tekst, en het is de bedoeling dat er op die knop geklikt wordt met de muis, en dan moet er iets gebeuren.
  • Een text-box is een hokje, waarin (meestal) iets getypt kan worden als het programma loopt, of waarin een tekst verschijnt die tijdens de werking van het programma kan veranderen.
We gaan nu bespreken hoe je zo'n programma maakt.

Start VB (dat is de afkorting van Visual Basic). Klik op File, en dan op New Project (dat betekent: ik wil met een nieuw programma beginnen).
In het venster dat dan verschijnt klik je op Standard Exe en dan op OK

Je ziet dan links een leeg "formulier", waar je van alles op kunt tekenen.
(bij jou kan het op een andere plaats zitten, je kunt de vensters verschuiven)
  • Rechtsonder zie je de "toolbox", waarin allemaal hulpmiddelen om "objecten" te kunnen tekenen.
  • In het midden het "properties-venster", waarin je de eigenschappen van de objecten in kunt vullen: kleur, lettertype, wat er op het object staat, enz.
  • Rechtsboven het "project-venster", waarin alle onderdelen van het project (dat is het programma) staan, en waarin je aan kunt geven wat er precies op het scherm moet staan.
  • Als één van de vensters ontbreekt op het scherm, dan klik je op View, en dan kun je aangeven welke vensters in beeld moeten komen.

  8.1.2. De labels plaatsen

We beginnen nu de dingen, die we op het formulier willen hebben, er in te tekenen.
Allereerst het label waarop "Getal 1" staat. Dat doe je op de volgende manier:

Klik in de toolbox op het pictogram voor een label, dat is het hokje met de hoofdletter A (op de tweede rij, links)

Klik dan op het formulier op de plaats waar de linker-bovenhoek van het label moet komen, en sleep de muis naar de plaats waar de rechter-benedenhoek moet komen.
Zodra je de muisknop loslaat zie je het label verschijnen.
Als je er naast klikt ligt het label voorlopig vast.

Maar je kunt het daarna nog heel gemakkelijk veranderen.
Als je ergens midden in het label klikt dan kun je het label in zijn geheel verplaatsen.
Als je de muisaanwijzer op de blokjes bij het midden van de rand of op de hoek zet (dat noem je de formaatgrepen, dan kun je die rand of hoek verslepen, en zo het label groter of kleiner maken.
Op dezelfde manier kun je het formulier zelf ook groter of kleiner maken.

Als het op de juiste plaats staat dan gaan we daarna het opschrift van het label bepalen.
Klik eerst nog eens in het label, zodat het "geselecteerd" is.
Dan zie je rechts in het properties-venster bovenaan "Label1     Label" staan.
Het eerste label wordt altijd "label1" genoemd, het tweede label "label2" enz.
Dat zijn de namen van de labels.
Die namen kun je trouwens veranderen, maar daarover hebben we het in hoofdstuk 2

  • Klik op Caption (dat is het engelse woord voor: opschrift), en klik dan in het invulvakje rechts ervan, dan kun je daar het opschrift in vullen, dat is Getal 1
    Zodra je het hebt ingetypt en op enter hebt gedrukt zie je dat het opschrift in het formulier ook werkelijk Getal 1 wordt.

  • Klik dan op Backcolor, en klik daarna rechts op het pijltje dat achter het getal bij Backcolor staat. Dan verschijnt er een venstertje, klik daarin op het tabblad Palette. Dan kun je een kleur uitkiezen.
    Kies de achtergrondkleur uit, die je leuk vindt.

  • Klik op Forecolor, en kies op dezelfde manier als hierboven de kleur van de tekst uit.

  • Klik dan op Font, en klik dan rechts daarvan op de drie puntjes.
    Er verschijnt een venster, waarin je het lettertype en de grootte uit kunt kiezen.
    Kies als grootte 16, en kies als lettertype Arial. Klik dan op OK.

  • Klik dan op Borderstyle (Border = rand), en klik rechts daarvan op het pijltje.
    Je kunt dun uitkiezen uit 0=None en 1=FixedSingle.
    Kies voor 1, dan wordt er een rand om het label getekend.
Steeds als je in het properties-venster iets uitkiest zie je dat het ontwerp-formulier ook direkt wordt aangepast.

Zo, nu is het eerste label klaar. Nu kun je het tweede label op dezelfde manier maken, maar het begin kan ook een beetje anders.

Klik in de toolbox op het pictogram voor een label.
Dubbelklik dan ergens in het formulier. Dan verschijnt er een label in het midden van het formulier, en dan kun je het naar de juiste plaats slepen, en ook de juiste afmetingen geven.

Ga daarna het opschrift (dat is -Getal 2-), de kleuren enz. in het properties-venster uitkiezen.
Zorg er wel voor dat je eerst het tweede label hebt geselecteerd door er op te klikken, je ziet dat dan boven in het properties-venster "Label2     Label" staat.
Klik op "Caption" en vul als opschrift "Getal 2" in. Kies dan de kleuren enz. uit.

Als dit tweede label klaar is maken we het derde.
Dat doen we op nog weer een andere manier.

Selecteer het eerste label door er op te klikken.
Klik dan op Bestand (boven, op de menuregel), en klik op Kopiëren (je kunt ook Ctrl/C intypen, dat gaat sneller).
Dan wordt het geselecteerde label naar het "klembord" gekopieerd, dat is een speciaal stukje van het geheugen.
Klik dan weer op bestand, en klik op Plak neer (of gebruik de sneltoets Ctrl/V).
Dan verschijnt er een kopie van het eerste label in de linker bovenhoek.
Eerst verschijnt er nog een vraag in een venstertje:
Do you want to create a control-array ?
Beantwoord die vraag met Nee!
Sleep dat label naar beneden, naar de juiste plaats. Als het geselecteerd is dan zie je boven in het properties-venster "Label3     Label" staan, en dan kun je weer de eigenschappen van het label bepalen.
De kleuren enz. hoef je niet meer uit te kiezen, die zijn net zo als die van het eerste label.
Zorg er wel voor dat het opschrift "Som" wordt.

Maak daarna op dezelfde manier nog drie labels, met de opschriften "verschil", "product" en "quotient".

  8.1.3. Een knop en text-boxen plaatsen.

Klik nu in de toolbox op het pictogram met alleen een rechthoekje (derde rij, rechts), dat wordt een knop of command-button genoemd.

Plaats nu een button in het formulier onder het label met Getal2, en zorg er voor dat het opschrift (dus Caption) "Reken uit! " wordt.
Geef het een mooie kleur, lettertype en rand.

Nu moeten er nog zes tekstvenstertjes komen.

Klik in de toolbox op het rechthoekje met de kleine letters ab er in (tweede rij, rechts), dat is een text-box.
Zorg er nu voor dat er in het formulier een text-box naast het label met het opschrift "Getal1" komt.

Als die er staat kun je weer de eigenschappen (=properties) instellen. Geef het de kleur, lettertype en rand die je leuk vindt.
In de properties-list vind je geen Caption, want zo'n textbox heeft geen vast opschrift.
Wel heb je een eigenschap Text; daar staat de tekst die in het vakje staat als het programma gestart wordt. Dan moet er niets in staan, dus klik op het woord Text in het properties-venster, klik in het invulvak er naast, en verwijder wat daar staat.

Klik op Maxlength, en zet daar 5 neer. Dat heeft dan tot gevolg dat, als het programma loopt, er maar 5 tekens in getypt kunnen worden. Meer is niet nodig, want dan zou het getal veel te groot worden.

Dan is de eerste text-box klaar. Er moeten nog 5 worden geplaatst. Je hebt nu vast wel in de gaten hoe je dat op de handigste manier kunt doen.

  8.1.4. Het programma laten lopen

Nu is de "interface" klaar.

Je kunt het programma nu ook al "runnen", al gebeurt er dan nog niet helemaal wat de bedoeling is.

Klik op Run in de menuregel boven, en klik dan op Start (het gaat sneller door op F5 te drukken, of in de werkbalk op het driehoekje naar rechts).
Dan zie je een nieuw venster, dat er bijna net zo uit ziet als het ontwerpvenster.
Maar je kunt het ontwerp nu niet veranderen. Probeer een label nu maar eens te verplaatsen, of te vergroten. Dat lukt je niet.

Je kunt wel getallen in de tekstvenstertjes invullen. Doe dat maar.
Vul bijv. 14 in het eerste venster, en 23 in het tweede. En klik dan op "Reken uit!".
Er gebeurt niets. En dat is logisch, want dat moeten we nog programmeren, dus intypen.

Maar eerst nog even iets anders. Probeer ook een getal in het derde tekstvenster te typen.
Dat kan ook zonder problemen. Maar eigenlijk is dat niet de bedoeling.
Het is de bedoeling dat in dat venstertje de som van de bovenste getallen verschijnt, en verder niet.

Klik op de sluitknop. Dan stopt het programma. En het ontwerpscherm komt weer te voorschijn.

Klik op het derde tekstvenster, naast "Som". Als het goed is staat in het propertiesvenster bovenaan dan "Text3     Text"
Klik nu op Enabled. En klik op het pijltje rechts ervan. Je kunt dan kiezen uit True en False.
Klik op False.

Klik in de menuregel, bovenaan, nu weer op Run, en Start. Dan start het programma weer.
Probeer nu weer een getal in het derde tekstvenster te typen: het lukt niet !
Dat komt dus doordat je bij Enabled: False hebt gezet !.

  8.1.5. Programmaregels intypen.

We hebben helemaal nog geen programmaregels ingetypt, alleen nog maar getekend, en eigenschappen vastgelegd. Daarom werkt het programma ook nog niet goed.
Daarom gaan we nu bespreken hoe je programmaregels in kunt typen.

Dubbelklik op de knop met "Reken uit!".
Dan verschijnt er een venster, waarin je programmaregels (dat noem je ook wel code) kunt typen.




Bovenin staat links in een tekstvenstertje: Command1 (dat is het object waar de code bij hoort)
En rechts bovenaan staat in een tekstvenstertje: Click.
Als je op het pijltje achter Click klikt, dan verschijnt er een heel rijtje onder:
Click, Dragdrop, Dragover, Gotfocus, Keydown, Keypress, enz.
Klik op Click, want die moeten we hebben.
Dan kun je intypen wat er moet gebeuren als je op de knop klikt.

In het code-venster verschijnt het volgende:

Private Sub Command1_Click()
- - - - - - - - -
End Sub

Tussen die regels in kun je iets typen. Die bovenste en onderste regel moeten beslist blijven staan !
In die bovenste regel staat eigenlijk dat het een procedure is, die uitgevoerd moet worden als er op Button nr. 1 geklikt wordt.

Wat moet er gebeuren ?
Je moet eerst de variabelen declareren. Daarover straks, eerst de rest maar.

Het eerste getal is ingetypt in de textbox met de naam Text1
De inhoud daarvan wordt aangegeven met Text1.text
De inhoud van de tweede textbox wordt aangegeven met Text2.text
  • Als je het getal uit de eerste textbox in geheugenplaats g1 wilt bewaren, dan is de opdracht daarvoor: g1=Val(Text1.text)
    Het woordje val moet er voor omdat de inhoud van Text1 een string is, dus een tekst. En g1 moet een getal worden, dat moet dus de getalswaarde van die string zijn.

    Val is de afkorting van Value, en dat betekent "getalswaarde"
    (er hoeft geen dubbele punt voor de =, zoals in Pascal. Er hoeft ook geen punt-komma achter de opdracht).

  • Als je het getal, dat in de tweede tekstbox is ingetypt, in de variabele g2 wilt zetten, dan wordt de opdracht daarvoor natuurlijk: g2 = Val(Text2.text)

  • Vervolgens krijg je de volgende opdrachten, die je waarschijnlijk wel begrijpt:
    s = g1 + g2
    v = g1 - g2
    p = g1 * g2
    q = g1 / g2

  • Dan moet er voor gezorgd worden dat de waarde van s in de derde tekstbox wordt geplaatst.
    Dan moet het getal s eerst weer worden omgezet in een string, en de opdracht daarvoor is: Text3.text=Str(s)
    Verder krijg je natuurlijk nog: Text4.text=Str(v) en Text5.text=Str(p) en Text6.text=Str(q)

  • Meestal worden de opdrachten onder elkaar gezet, zonder punt-komma of iets dergelijks.
    Ze mogen ook wel achterelkaar (op één regel) getypt worden, maar dan moet er een dubbele punt tussen.

  • De laatste opdracht kunnen we trouwens beter nog wat veranderen.
    Want als g2 gelijk aan 0 is, dan zul je een foutmelding krijgen, omdat delen door 0 niet mag en kan.

    I.p.v. q = g1 / g2 kunnen we beter typen: If g2<>0 then q = g1/g2
    En Text6.text = Str(q) vervangen we door:
    If g2<>0 then Text6.text=Str(q) else Text6.text = " "

    Dat heeft tot gevolg dat als g2 gelijk is aan 0 er geen foutmelding komt, maar dat er in het zesde tekstveld niets verschijnt.

  • Dan moeten we de variabelen nog declareren.
    Alleen q wordt een kommagetal (dat is in Pascal: real; dat is hier: single, of double) en de rest kunnen gehele getallen zijn (integers).

    In Pascal zou je bijv. krijgen: VAR g1, g2, s, v, p : integer;
    Hier moet je i.p.v. VAR het woordje DIM typen.
    En in plaats van de dubbele punt moet je het woordje AS typen.     Je krijgt dan dus (bovenaan) de volgende regels:
    Dim g1,g2, s, v, p as integer
    Dim q as single
De totale procedure wordt dan als volgt, en zó typ je het in: 


Private Sub Command1_Click()

   Dim g1,g2, s, v, p as integer 
   Dim q as single

   g1=Val(Text1.text)
   g2=Val(Text2.text)
   s = g1 + g2
   v = g1 - g2 
   p = g1 * g2 
   if g2<>0 then q = g1 / g2
   Text3.text=Str(s)
   Text4.text=Str(v)
   Text5.text=Str(p) 
   If g2<>0 then Text6.text=Str(q) else Text6.text = " "

End Sub

Deze programmaregels noem je de eventhandler, het engelse woord voor gebeurtenisafhandeling.
Deze programmaregels moeten worden uitgevoerd als er iets gebeurt, namelijk als er op de bereken-knop wordt geklikt.

Het kan zijn dat, als je de declaraties weglaat, het programma toch wel werkt en er geen foutmelding volgt.
Maar het is verstandig wel te declareren, omdat dat in vrijwel alle andere programmeertalen verplicht is.
Je kunt er ook voor zorgen dat VB wel een foutmelding geeft als je de declaraties weglaat.
Dan moet je dus verplicht declareren. Verplicht declareren kun je instellen (je hoeft het maar één keer in te stellen, die instelling blijft bewaard). Klik daarvoor in de menubalk op Tools, kies dan voor Options. En zorg er dan voor dat het vakje Require Variable Declaration aangevinkt is.

  8.1.6. Het programma opslaan.

Als je dit alles hebt ingetypt, dan klik je op de sluitknop van het edit-venster.
En dan is het verstandig om het programma eerst op de harde schijf op te slaan.
Dat doe je als volgt:

Klik op Bestand (boven in de menubalk), en klik op Save Project as

Dan moet je eerst een map uitkiezen. Standaard staat daar de map VB. Klik daarop, zodat de submappen verschijnen. Klik dan op H4 (als je in havo-4 zit) of V4 (als je in vwo-4 zit).

Geef als naam van het bestand (dat is het totale project): Les1
Klik dan op OK.

Klik dan ook nog op: Save File As ...
Dan wordt het formulier apart opgeslagen. Geef ook dat bestand de naam Les1

Het project krijgt automatisch de extensie VBP en het formulier de extensie FRM.
Die moet je altijd apart opslaan.

Klik dan op het blauwe driehoekje in de werkbalk (of klik op Run, en dan op Start), dan gaat het programma lopen.
Als er fouten in het programma zitten, dan zul je die eerst moeten verbeteren.

Als het loopt, dan typ je in het bovenste venster 14 in, in het tweede 23.
Klik dan op de knop "Reken uit!", en als je het goed hebt gedaan verschijnen de uitkomsten in de venstertjes er onder.

Er zit direkt een herhaling in. Als je de getallen gaat veranderen, en je klikt weer op "Reken uit!", dan krijg je de nieuwe uitkomsten. En dat kun je zo vaak doen als je zelf wilt.
Het programma stopt pas als je op de sluitknop klikt.
Kijk ook eens wat er gebeurt als je in het tweede venstertje 0 invult. Gaat het goed ?

  8.1.7 Reageren op Change. Objecten verwijderen.

We nemen aan dat je het programma hebt bewaard, en dat je VB hebt afgesloten.
Als je VB dan opnieuw opstart, dan klik je op Bestand, en dan op Open Project.
Dan moet je eerst de juiste map uitkiezen, en als je dat gedaan hebt dan kun je het project, dus het programma uitkiezen. Laat het programma "Les1" zo opnieuw inlezen.

Misschien zie je dan niet direkt het ontwerpvenster. Waarschijnlijk zie je in ieder geval wel het project-venster. (als dat er ook niet staat dan moet je op Window klikken, en dan het Project-venster openen).

Als je dan klikt op "View Form", dan verschijnt het ontwerp-formulier.
Als je op F4 drukt dan verschijnt het properties-venster, en als je op "View Code" klikt dan verschijnt het programma-venster.
Dat laatste kun je ook krijgen door op een object te dubbelklikken.

Dubbelklik maar eens op de knop "Reken uit!". Dan verschijnen de programmaregels, die je zelf hebt ingetypt.
Die gaan we kopiëren naar een andere plaats.
Je moet de regels dan eerst selecteren, zonder de eerste en de laatste regel (die je zelf ook niet hebt ingetypt, want die stonden er al). Druk dan op Ctrl/C , of klik op Bewerken en dan Kopiëren.

Dubbelklik dan op de eerste Textbox. Dan verschijnt er een programmavenster voor Textbox1.
Kies in het rechter keuzevenstertje voor Change.

Dan kun je de procedure invoeren, die aangeeft wat er moet gebeuren als je iets aan de eerste textbox verandert.

Zet de cursor op de regel tussen de eerste regel ( Private Sub Text1_Change) en de laatste regel (End Sub), en druk dan op Ctrl/V, of klik op Bewerken en dan op Plakken.
Dan verschijnen de programmaregels, die je voor de Commando-button had ingetypt, ook hier.
Klik op de sluitknop van het programmavenster.

Dubbelklik dan op op de tweede Textbox. Dan verschijnt er een programmavenster voor Textbox2. Kies in het rechter keuzevenstertje weer voor Change.
Zet de cursor ook nu tussen de eerste regel ( Private Sub Text2_Change) en de laatste regel (End Sub), en druk dan op Ctrl/V. Dan verschijnen ook hier de zelfde programmaregels.
Klik op de sluitknop van het programmavenster.

Laat het programma nu weer lopen.

Zodra je nu iets in tekstbox1 of tekstbox2 typt (dus iets verandert aan die tekstbox), dan komen de uitkomsten van de sommen er onder.
Als je bijv. in de eerste 5 intypt, en in de tweede 13, dan verschijnen de uitkomsten al zodra je de 1 van 13 hebt ingetypt. En als je de 3 intikt van 13 dan verschijnen de nieuwe uitkomsten !

Je hebt de knop, waar "Reken uit!" op staat nu helemaal niet meer nodig. Die kun je dus wel verwijderen.

Stop het programma door op de sluitknop te drukken, dan heb je het ontwerpvenster weer in beeld.
Klik op de knop met "Reken uit!", en druk op Delete. En de knop is weg !

  8.1.8 Reageren op Keypress.

De uitkomsten worden nu ingevuld zodra je iets typt in één van de twee hokjes.

Het zou eigenlijk mooier zijn als dat pas gebeurde als je iets hebt ingetypt, en je drukt op de entertoets. Dat kan ook, en wel m.b.v. Keypress.

Dubbelklik maar eens op de Textbox1. Dan verschijnen de programmaregels. Selecteer de regels nog eens, en druk op Ctrl/C.

Klik op het pijltje naast Change. En klik dan op Keypress.
Dan kun je de procedure invoeren, die aangeeft wat er moet gebeuren als er op een bepaalde toets wordt gedrukt. En welke toets dat is, dat moet je nog in de procedure aangeven.

Zet de cursor op de regel tussen de eerste en de laatste regel , en druk dan op Ctrl/V.
Dan verschijnen de bekende programmaregels weer. Maar er moet nog iets bij.

Onder de declaratieregels typ je het volgende: If Keyascii = 13 Then
en voor de laatste regel typ je: EndIf

If KeyAscii=13 betekent: Als de ASC-code van de toets 13 is dan ......
en de ASC-code van de entertoets is 13 !

Er staat in de procedure dan in totaal het volgende: 


Private Sub Text1_KeyPress(Keyascii as Integer)
   Dim g1,g2, s, v, p as integer
   Dim q as single

   If KeyAscii = 13 Then
       g1=Val(Text1.text)
       g1=Val(Text1.text)
       s = g1 + g2 
       v = g1 - g2
       p = g1 * g2
       if g2<>0 then q = g1 / g2
       Text3.text=Str(s)
       Text4.text=Str(v)
       Text5.text=Str(p)
       If g2<>0 then Text6.text=Str(q) else Text6.text = " "
   EndIf

End Sub

Klik op de sluitknop van het programmavenster. En doe dan hetzelfde voor Textbox2.
En probeer het uit !

  Opgaven

Opgaven.
Maak nu opgave 1 van de oefenopgaven van hoofdstuk 8