Tutorial Visual Basic

In deze tutorial ga ik jullie een beetje de basis van Visual Basic uitleggen. Deze tutorial is het meest geschikt voor mensen die nog geen VB(VB staat voor Visual Basic) gedaan hebben. Ik doe deze tutorial met VB \'08 express edition, het is dus ook het slimste die te gebruiken bij deze tutorial.

Nu beginnen we, open Visual Basic ’08 en start een nieuw project(file -> new project). Dan laadt ‘ie even, en dan kun je beginnen.

Een lay-out maken.

Als eerst laat ik jullie een screenshot zien met nummering:

1. het “Ding” wat je maakt. Zoiets wordt een Form genoemd. Dit is Form1, omdat het mijn eerste form is. Projecten kunnen uit meerdere forms bestaan, dus uit meerdere schermen.
2. Een soort van navigatiebalk. Hier staan je verschillende pagina’s. zoals je ziet ben ik nu op het design(ontwerp) van form1. Als er geen design bij staat, dan ben je in de code. Ook staat hier “Start page” bij. Dat opent altijd op het begin als je vb ’08 opent, dit kun je gewoon wegklikken. Dan staat er nog een “rekenmachine”. Dat is de naam van mijn project, en ik kom daar nog op terug.
3. De toolbox. Hier staan allemaal dingen in die je in je form kunt zetten. Zoals je ziet is het 2de item in de toolbox de “Button”. Daarmee zet je een knop op de forum, zoals ik heb(je ziet het misschien niet goed, maar ik heb 1 knop waar als text een “=” op staat).
4. Dit is de solution explorer. Hier vind je alles van je project, wat dus ook bovenin te vinden is(zie punt 2). Punt 2 is meer tijdelijk, in de solution explorer vind je alles. My Project is dus rekenmachine en form1 = form1. rechts bovenin zie je ook nog 2 knoppen. De linker is voor de code, en de rechter voor Design(ik bedoel dan ook alleen de 2 meest rechtse knoppen).
5. Properties staat daar. Dat betekent eigenschappen. Misschien zegt het je nu al wat, dit is de plek waar je al je eigenschappen kan veranderen van bijvoorbeeld je form of van je knop. Als je form1 hebt geselecteerd staan(erop klikken), dat staat er bij properties bij text “Form1”. Dat is de titel van je form. Doe je dit terwijl je je knop selecteert, dan is het de tekst wat er op je knop staat. Ook hierop kom ik terug.
6. Ok. De belangrijkste dingen heb ik nu kort samen gevat. deze knop(6 dus) is om een nieuwe form te maken. Dan kun je meerdere forms in 1 project hebben. Het pijltje aan de rechterkant is om niet alleen nieuwe forms aan te maken, maar daarmee kan je forms die al bestaan, en die je hebt opgeslagen, weer openen in een ander project. Als je een nieuwe form maakt, moet je gewoon op windows form drukken, dat is een standaard, lege form.
7. Deze knop is een groen pijltje. Dit is om te Debuggen(de fouten, bugs genaamd, uit je programma halen). Als je een programma hebt gemaakt, voert VB hem uit, als je op deze knop drukt. Vind je dan fouten, dan geeft VB meteen aan waar in welke regel je fout zit en wat er fout is(dit is wel in het engels).
8. De error list. Als er een bug in je programma is gevonden, staat er hier wat er aan de hand is, dus dan staat er bijvoorbeeld “textox1 is not found”. Dan heb je bijvoorbeeld dus een typfoutje gemaakt en is het niet textox1 maar textbox1(textboxen ga je waarschijnlijk ook veel gebruiken, ik heb er 3 in het plaatje zoals je ziet.

Heb je dit helemaal doorgelezen, dan kun je als het goed is al een goede Lay-out maken en kun je die ook al runnen!

Je eigen programma maken!
Ik ga niet heel saai met jullie alles uitvoerig doornemen, maar ik ga gewoon jullie zelf programma’s laten maken. Tijdens het maken van een programma zal ik jullie stukje bij beetje een boel uitleggen. Ik heb wel een idee wat we kunnen maken, namelijk een rekenmachine zoals hier! En op het einde doe ik er nog wat leuks extra’s bij.

Als het goed is heb je al een project met een form. Haal de knop maar even weg. Ik heb je al uitgelegd hoe je de titel van de form veranderd, verander dat maar naar iets als “Rekenmachine” of “Calculator”(dat kun je zelf kiezen, natuurlijk). Dan is zoals ik een rekenmachine gemaakt hebt het makkelijkste. Daarvoor moet je in je form zetten:

Een textbox
Een combobox
Een textbox
Een Button
Een textbox

Als je het goed gedaan hebt, heten je objecten nu(van boven naar beneden): textbox1, combobox1, textbox2, button1, textbox3.

Dit is nu de lay-out. Hoewel, nog niet helemaal. Als je je programma bijvoorbeeld uitvoert(groen pijltje, weet je nog? ;-)), en je klikt dan op je combobox, dan heb je geen keuze. Dat moet dus veranderd worden! Ga in visual basic zelf(dus niet in je programma) naar het groene pijltje, hierop kun je nu niet drukken. Ga daarentegen daar rechts van en druk op het vierkantje(om te stoppen dus). Nu sluit je programma meteen en kom je weer in VB. Dan klik je op je combobox en zie je zoiets:

daar rechts bovenin zie je een soort pijltje. Als je daarop klikt kun je iets aanvinken en zie je “Edit items” staan. Klik daarop. Dan krijg je een dialoogje waar je van alles in kan zetten, zoals je hier ziet:

zet daar op elke nieuwe regel een nieuwe operator(+, -, *, /, ^).

+ is plus natuurlijk
- is min
* is keer
/ is gedeeld door
^ is machtsverheffing

Dan druk je op OK, klik je combobox1 weer aan en ga je naar properties(eigenschappen). Daar ga je naar text en daar staat als het goed is niets. Dat kun je veranderen naar iets als “Kies je operator” of je laat het gewoon leeg. Je kunt het ook veranderen naar “+” dat dat dan standaard is.

Nu lijkt het al heel veel meer op wat ik heb. Klik nu op je form, en ga bij eigenschappen naar Icon. Als je dat hebt aangeklikt, dan verschijnt er een mini-knop met 3 puntjes erop. Als je daarop klikt dan krijg je een open dialoogje waarmee je icoontjes kan openen voor bij je programma. Heb je geen icoontje? Hier is degene die ik gebruik:

Dan klik je op je derde textbox. Daarbij ga je naar eigenschappen, en dan naar ReadOnly. Die zet je op true, nu kunnen de gebruikers wel alles selecteren en kopieren, maar niets veranderen.

Ik neem aan dat je de eigenschappen nu wel een beetje onder de knie heb, dus nu ga ik er wat sneller doorheen. Zet in eigenschappen de text van button1 naar “=”.

Ook is mijn achtergrond anders, maar dat maakt niet uit. Bij form1 bij eigenschappen naar backgroundimage.

De code.
Nu heb je wel de Lay-out, maar hij kan nog niks. Voordat hij wat doet, moet hij een code hebben. De handigste manier om in de code te komen, is door dubbel te klikken op het gene waarvan je een code wilt toevoegen. Bij onze rekenmachine doen we dat bij onze knop. Als je dubbel klikt op je knop, dan krijg je zoiets:

Je code moet dan tussen private sub en end sub als je de code wilt voor de knop. Bijvoorbeeld, zet daar maar eens “end” neer (zonder de aanhalingstekens). Als je dan je programma uitvoert, dan is er niks. Klik je op de knop, beëindigt je programma zichzelf. Dat is dan een code. Codes die nu komen, worden moeilijker. Kijk maar.

Dim text1, text2, antwoord as double

Dim betekent “geef een waarde aan”. Je geeft dus met deze code een waarde aan text1, text2 en antwoord. de soort van de waarde is “Double”. Double is een grote cijferreeks, die cijfers achter de komma leest als cijfer achter de komma(integer als voorbeeld, die doet dat niet).

Text1 = textbox1.text
Text2 = textbox2.text

Als je op de knop drukt, zijn de dingen die je in textbox1 en textbox2 zet, nu een double geworden de namen text1 en text2 toegewezen.

If ComboBox1.Text = \"+\" Then
antwoord = text1 + text2
ElseIf ComboBox1.Text = \"-\" Then
antwoord = text1 - text2
ElseIf ComboBox1.Text = \"*\" Then
antwoord = text1 * text2
ElseIf ComboBox1.Text = \"/\" Then
antwoord = text1 / text2
ElseIf ComboBox1.Text = \"^\" Then
antwoord = text1 ^ text2
End If

Ik heb het meteen even gehighlight, zodat het duidelijk wordt. “If” is engels voor “als”. Dus als de text van combobox1 “+” is, dan is de variabele antwoord text1 + text2. “else” betekend “anders”. Dus anders als de text van combobox1 “-” is, dan is de variabele antwoord text1 - text2 etc.

Nu mis je nog 1 ding, namelijk dat de gebruiker zijn antwoord ziet. Hoe doen we dat? Heel simpel:

Textbox3.text = antwoord

Nu heb je een eigen rekenmachine gemaakt! Maar hij is zeker niet helemaal goed. Bijvoorbeeld, bij je textbox1 en textbox2, daar kun je letters invoegen. Ik zal je uitleggen hoe je ervoor zorgt dat alleen cijfers erin komen en de letters niet. Ik heb deze code zelf bedacht, misschien kan het makkelijker.

Dubbelklik op textbox1 en voeg deze code toe:

Dim numeric1 As Double
If IsNumeric(TextBox1.Text) Then
numeric1 = TextBox1.Text
ElseIf Not IsNumeric(TextBox1.Text) Then
TextBox1.Text = numeric1
End If

Als textbox1.text numeriek is, dan is numeric1 de text van textbox1.text. als textbox1.text niet numeriek is, dan is de text van textbox1 de variabele numeric1.

Nu heb je nog maar 1 textbox gedaan, precies hetzelfde moet je doen bij textbox2, behalve dat je in plaats van textbox1, textbox2 moet gebruiken. Ook zou ik in plaats van numeric1, numeric2 doen.

Nu is je rekenmachine af! Hoewel, hij is nog niet gedebugged. Druk maar eens op F5 (hetzelfde als het groene pijltje). Wat is er nu niet goed aan je programma zou je zeggen? Dit staat er in je programma:

Durf nu maar eens op de MIDDELSTE knop te drukken. Dat is al een fout in je programma. Dit is een van de meest gemaakte fouten, vooral bij beginners. Sluit je programma af, en klik op je form. Ga dan bij properties naar Maximizebox en zet die op “False”. Dat doe je door er bijv. dubbel op te klikken. Persoonlijk vind ik het mooier dat je ook het minnetje weghaalt, zijn zijn ze helemaal weg IPV dat het vergroot knopje donkerder wordt. Dat doe je door Minimizebox op false te zetten. Dat was weer een fout uit je programma. Je hebt nu nog een soortgelijke fout. Namelijk, start je je programma, en ga je naar de rechts-onderhoek. Dan krijg je zo’n speciale cursor en kan je je form vervormen. Om dat te voorkomen, ga je bij form1 naar properties en naar formborderstyle. Daar zou ik hem op fixed dialog zetten, dat vind ik hier het mooiste. Nu zitten er naar mijn idee geen fouten meer in. Om je programma leuk af te werken, doen we nog een paar dingen.

Ga bij de Solution explorer naar “My Project”. Daar zijn nog een paar leuke opties. Icon kun je daar weer veranderen in je eigen icoontje. Daar onderin kun je ook een splash screen maken. Dat gaan we nu doen. Klik links bovenin op new form(en dan new windows form). Nu heb je een form2. Hier kun je een leuk achtergrond-plaatje inzetten bij properties -> backgroundimage. Ga ook bij properties naar formborderstyle en zet die op none. Nu heb je geen rand of iets om je form heen. Je kunt er nog een label uit je toolbox aan toevoegen, een label is om text in een form te zetten. Dan ga je weer naar my project en dan onderin naar splash screen. Zet de splash screen op form2.

Dan is er nog 1 ding. Sla je project op door middel van CTRL+SHIFT+S. Dan staat je programma in de locatie waar je je project hebt opgeslagen, en dan dit:
… rekenmachine\\rekenmachine\\bin\\Release
kun je je programma niet vinden? Ga dan naar VB en dan bovenin naar build -> build rekenmachine. als het goed is staat je .exe er dan wel.

Deze tut wordt ooit nog verlengt, ik vind dat ik voor vandaag genoeg heb geschreven

Jyy

© Copyright 2008

Psssssssssssst!
Wil je een extraatje weten? Hier leg ik een system tray uit.

Open je gemaakte rekenmachine. voeg een nieuwe windows form toe. Dat is form3. Zet bij properties de opacity op 0% en de showintaskbar op false. Zet dan bij toolbox een Notifyicon erbij. Die komt niet ín je form, maar eronder in een balkje. Klik op je notifyicon, en kijk dan voor de zekerheid of visible op true staat. Bij icon moet je weer een icoontje selecteren, zonder icoontje werkt dit ook niet. Dan zet je bij text nog iets meer als rekenmachine. Dan ga je weer naar je toolbox en dan naar contextmenustrip. Zet daar 3 dingen onder elkaar: Show, Hide en Exit. Ga dan naar notifyicon1 en ga bij properties naar contextmenustrip. Zet die op contextmenustrip1. dan klik je weer op contextmenustrip1, en dan klik je dubbel op show.

Daar voeg je deze code toe:
Form1.show()

Doe hetzelfde bij hide maar voeg dan deze code toe:

Form1.hide()

Dan doe je weer hetzelfde bij exit maar daar voeg je deze code toe:

End

Dan klik je dubbel op je form en voeg je deze code toe:

Form1.show

Dan ga je naar my project en daar zet je de startup form naar form3 zoals hier met form1 wordt gedaan: