Visual Basic/De user-interface verkennen

Inleiding

Start Visual Studio op en klik onder Start op New Project.... Er verschijnt een venster waarin gevraagd wordt welk soort project je wilt starten. Zorg ervoor dat aan de linkerkant Templates is geselecteerd. Hier heb je de mogelijkheid om te kiezen tussen Visual Basic, C# en C++. Selecteer zo nodig Visual Basic. Je ziet in het midden de verschillende sjablonen voor Windows Forms Application, WPF Application, Console Application en Class Library. We richten ons eerst vooral op Windows Forms Applications. Selecteer deze en klik OK.

Onderdelen van het scherm

Het duurt even, maar dan zie je in het midden van het scherm het deel waar je jouw formulier ontwerpt. Dit de Designer. Daarboven op het tabblad staat Form1.vb [Design]. Form1.vb is de naam van het formulier en [Design] geeft aan dat dit venster bedoeld is om het formulier te ontwerpen.

Aan de rechterkant bovenin staat de Solution Explorer. Hier zie je de onderdelen van je solution. Een solution bestaat uit één (meestal) of meerdere projecten. Zoals je ziet bestaat je project onder andere uit configuratiegegevens (App.Config) en je formulierbestand (Form1.vb). Als je klikt op het driehoekje vóór Form1.vb, klapt dit uit en zie je dat Form1.vb één formulier bevat, Form1 genaamd.

Rechtonder (onder de Solution Explorer) staan de properties (kenmerken) van het onderdeel dat je in de Designer of de Solution Explorer aanklikt. Klik maar eens op Form1. Je ziet bij Properties een lijst eigenschappen. Als je maar één eigenschap (Name) ziet, moet je even op het tabblad Form1.vb [Design] klikken. Om de eigenschappen op alfabetische volgorde te zetten, klik je op het icoontje AZ (tweede van links). Je ziet nu een hele lijst properties die je kunt wijzigen. Scroll zo nodig naar boven. Hier staat een property (Name) (Name staat alleen maar tussen haakjes om hem bovenin de lijst te krijgen). Selecteer (dubbelklik) achter (Name) Form1, type MijnFormulier en druk Enter. Er verandert schijnbaar niets, maar in je programma heet je formulier nu niet Form1 maar MijnFormulier. Het is goed ieder formulier zijn eigen naam te geven, vooral als je later meerdere formulieren in een programma gebruikt. Als je b.v. in een programma drie formulieren hebt die Form1, Form2 en Form3 heten, kun je je gemakkelijker vertypen dat dat ze frmHallo, frmBerekenen en frmGegevens heten.

Let dus op: als je het formulier in de Solution Explorer aanklikt, krijg je in het venster Properties andere eigenschappen te zien dan wanneer je in de Dsigner op het formulier klikt.

Een tweede wijziging: scroll naar beneden naar de property Text en wijzig deze in Mijn formulier. Als je nu naar de designer kijkt, zie je dat de naam in de kopbalk is gewijzigd van Form1 in Mijn formulier. Deze tekst krijgt de gebruiker te zien als hij de applicatie start.

Op dezelfde manier kun je alle properties wijzigen. Dit komt zo meteen nog ter sprake.

Nu heet je formulier wel anders, maar de bestandsnaam is nog altijd Form1.vb. Dat moeten we ook wijzigen. Klik in Solution Explorer op Form1.vb. In het venster Properties zie je nu de eigenschappen. Wijzig File Name in MijnFormulier.vb.

Dubbelklik nu op het formulier in de designer. Er verschijnt een nieuw venster met op het tabblad Form1.vb*. Je ziet nu de code-editor, met de volgende code:

Public Class MijnFormulier

    Private Sub MijnFormulier_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load

    End Sub
End Class

In dit tabblad voer je je programmacode in. Je ziet nu het programma dat Visual Studio al voor je heeft aangemaakt. Het is eigenlijk een skelet om een deel van je programma te schrijven. Dit wordt nader besproken in het volgende hoofdstuk. Als je werkelijk gaat programmeren, schrijf je je code tussen de regels die beginnen met Private Sub en End Sub.

Let op: Je formulier heet nu MijnFormulier (deze naam staat bovenaan bij Properties rechtsonder. De kopregel van je formulier is nu Mijn formulier (deze naam staat boven in het formulier in de Designer) en het bijbehorende Visual Basic bestand heet Form1.vb (deze naam zie je terug in de Solution Explorer rechtsboven).

Natuurlijk klopt de naam Form1.vb nu niet meer. Klik in de Solution Explorer met de rechter muisknop op Form1.vb en selecteer in het snelmenu Rename. Wijzig de naam in MijnFormulier. Nu heet alles (ongeveer) hetzelfde en is duidelijk wat bij wat hoort.

Selecteren van component en methode

In bovenstaand voorbeeld is MijnFormulier het component en Load de methode waarbinnen je het programma kunt aanpassen.

Je kunt in dit scherm snel naar een ander component of methode gaan. Helemaal bovenin het codevenster (vlak onder de blauwe balk) zie je twee vakken:

(MijnFormulier Events)
Load

Achter die namen zie je een driehoekje. Als je daarop klikt, krijg je een lijst van alle componenten resp. methoden en kun je direct de juiste component of code selecteren. Bij de methoden zijn reeds gebruikte methoden vet gedrukt. Als je een niet-vetgedrukte methode aanklikt, wordt deze aangemaakt.

Designer en code-editor

Het middendeel van je scherm wordt voor meerdere toepassingen gebruikt. Er zijn eigenlijk meerdere vensters die je kunt selecteren door op de juiste tab boven het venster te klikken. Dit middendeel wordt voor twee doeleinden gebruikt:

als Designer, waarin je je formulier ontwerpt (het tabblad bevat de tekst [Design]). Je ziet hier het formulier dat je aan het ontwerpen bent.
als code-editor, waarin je je programma schrijft. Of beter: een deel van je programma. Je ziet hier de tekst van je bronprogramma.

Error list en Output

Onder in het scherm staat een vak met daaronder twee tabels Error List en Output.

de Error List toont foutberichten, bijvoorbeeld tijdens het compileren van het programma
Output bevat de uitvoer van een bepaald soort instructies in je programma. Dit kun je bijv. gebruiken tijdens het testen van je programma. Meer informatie hierover vind je verderop in dit handboek

Het menu

Bovenin het scherm zie je de menubalk. De menukeuzes zijn afhankelijk van de mogelijkheden die je op dat moment hebt. Zo heeft het startscherm minder menu-onderdelen dan tijdens het werken aan een project.

Het menu heeft tijdens het werken aan een project de volgende meest gebruikte opties:

FILE: nieuw project of bestand, openen project of bestand, toevoegen nieuw of bestaand project (een solution kan bestaand uit meerdere projecten), sluiten solution, opslaan bestand of solution, recente bestanden en solutions
EDIT: undo en redo, knippen, kopiëren, plakken en verwijderen, zoeken en vervangen
VIEW: hier selecteer je welk venster je wilt zien zoals Toolbox, Error List, Object Browser. Je kunt het beste alle mogelijkheden zelf proberen. Alle vensters kun je weer sluiten
PROJECT: toevoegen diverse onderdelen, opgeven startup project (het project dat je ziet als het programma start), eigenschappen project instellen
BUILD: compileren solution, publish solution (klaar maken om op een andere computer te installeren)
DEBUG: Solution starten met of zonder debugging, programma stap voor stap uitvoeren en breakpoints instellen
TEAM: bedoeld om in een team te werken met een Team Fondation Server. Deze optie gebruiken wij niet
TOOLS: configureren van de IDE
TEST: bedoeld voor speciale testen, die wij niet gebruiken
WINDOW: de voornaamste mogelijkheid staat onderin: het overschakelen naar een ander scherm

Menu en toolbar

Onder het menu zie je een rij icoontjes (de toolbar) om snel bepaalde functies uit te voeren. Als je met de cursor op zo'n icoontje gaat staan, krijg je een korte toelichting wat dat icoontje doet.

De pictogrammen in de toolbar zijn door verticale lijnen verdeeld in de volgende groepen:

navigatie
opties voor projecten en bestanden, zoals nieuw, openen, sluiten
undo/redo
starten en debuggen programma (Any CPU gebruiken we niet)
zoeken
uitlijnen componenten op het formulier
aanpassen grootte componenten op het formulier
aanpassen afstanden tussen componenten
componenten op de voorgrond of achtergrond zetten

Je bent nu bekend met de interface, dus we kunnen in het volgende hoofdstuk ons eerste programma schrijven.