Visual Basic/De user-interface verkennen: verschil tussen versies

Uit Wikibooks
Verwijderde inhoud Toegevoegde inhoud
IPieter (overleg | bijdragen)
k niveau's koppen goed gezet
JohanBeckers (overleg | bijdragen)
Geen bewerkingssamenvatting
Regel 1: Regel 1:
Start Visual Studio op en klik onder ''Start'' op ''New Project...''.
Als je Visual Basic 2010 voor de eerste keer opstart zul een venster te zien, de ''UI (user-interface)''. De User-interface bestaat uit meerdere delen. Als u een nieuw project wilt starten klikt u op '''New project...''' of via '''File''' -> 'New project...'''. Dan komt er een venster te staan met enkele keuzes. Onder andere ''Windows Forms Application'' en ''WPF Application'. Wij gebruiken Windows Forms Application' omdat gebruikers met VB 2005 of 2008 alles ook kunnen volgen. WPF Application heeft echter een paar voordelen, waaronder ondersteuning voor meerdere core's.
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 zonodig ''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''.
Nadat u gekozen hebt voor Windows Forms Application kunt u ook een naam kiezen.


Het duurt even, maar dan zie je in het midden van het scherm het deel waar je je formulier ontwerpt. 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.
==Designer en code-editor==

Nadat u een project hebt aangemaakt krijgt u een venster te zien met in het midden een groot wit vlak met een afbeelding van een ander venster. Dit is de ''designer''. Hierin kunt u de lay-out van uw programma maken en aanpassen. De grootte van het venster in de designer kan aangepast worden door de kleine vierkantjes op de hoeken van dat venster.
Aan de rechterkant bovenin staat de ''Solution Explorer'''. van je ''Solution''. 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.
Indien u dubbelklikt op dat venster wordt de designer vervangen door de ''code-editor''. Daarin staat nu alleen deze code:
Rechtonder staan de properties (kenmerken) van het onderdeel dat je in 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 ''For1.vb [Design]'' klikken. Je ziet nu een hele lijst properties die je kunt wijzigen. Scroll zonodig naar boven. Hier staat een property '''(Name)''' (Name staat alleen maar tussen haakjes om hem bovenin de lijst te krijgen). Selecter (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.

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. Ik kom daar later nog op terug.

Dubbelkik 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:


<pre>Public Class Form1
<pre>Public Class Form1
Regel 13: Regel 20:
End Class</pre>
End Class</pre>


In dit tabblad voer je je programmacode in. Daarop ga ik verder in in het volgende hoofdstuk.
Hier gaan wij echter maar mee aan de slag met het volgende hoofdstuk: [[Visual Basic/Uw_eerste_programma|Uw eerste programma]].

==Toolbox, solutions explorer en properties==
Boven de code-editor staan er nu, als het goed is, twee tabbladen. Form1.vb en Form1.vb [design]. Als u terug gaat naar Form1.vb [design] zult u zien dat er aan de linkerkant in de ''Toolbox'''een lijst met besturingselementen komt. Deze toolbox zal zeer nuttig zijn bij alles wat u doet in visual basic.

Aan de rechterkant staan twee vakken. De ''solutions explorer'' en het vak ''properties''. Bij de solutions explorer kunt u door te dubbelklikken naar een ander venster gaan in een project met meerdere vensters. Bij properties kunt u eigenschappen van verschillende objecten, zoals knoppen of labels, aanpassen.


Tot slot verwijs ik even naar de toolbar bovenin. Hier vind je het menu-systeem zoals je ziet bij alle Windows-programma's met daaronder een rij icoontjes 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.
==Error list en toolbar==
Bovenaan staat de toolbar. Misschien kent u die nog van Word 2003? Het nut is hetzelfde: snel toegang tot bepaalde functies. Onderaan staat de ''Error list''. Als u een programma uitvoert met fouten erin kan het programma vast lopen (of erger). Dit zal u daarvoor proberen te behoeden. Ook zullen de fouten in de code door code-editor worden onderstreept. Zoals in Word, maar dan in het blauw.


Indien u denkt dat u de interface doorhebt kunt u doorgaan naar het volgende hoofdstuk.
Je bent nu bekend met de interface, dus we kunnen in het volgende hoofdstuk ons eerste programma schrijven.
{{Navigatie
|Boek=Visual Basic
|huidige=De User-interface verkennen
|volgende=Uw eerste programma
|tekstvolgende=Uw eerste programma
}}

Versie van 8 nov 2013 22:38

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 zonodig 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.

Het duurt even, maar dan zie je in het midden van het scherm het deel waar je je formulier ontwerpt. 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'. van je Solution. 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 staan de properties (kenmerken) van het onderdeel dat je in 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 For1.vb [Design] klikken. Je ziet nu een hele lijst properties die je kunt wijzigen. Scroll zonodig naar boven. Hier staat een property (Name) (Name staat alleen maar tussen haakjes om hem bovenin de lijst te krijgen). Selecter (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.

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. Ik kom daar later nog op terug.

Dubbelkik 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 Form1

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

    End Sub
End Class

In dit tabblad voer je je programmacode in. Daarop ga ik verder in in het volgende hoofdstuk.

Tot slot verwijs ik even naar de toolbar bovenin. Hier vind je het menu-systeem zoals je ziet bij alle Windows-programma's met daaronder een rij icoontjes 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.

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

Informatie afkomstig van https://nl.wikibooks.org Wikibooks NL.
Wikibooks NL is onderdeel van de wikimediafoundation.