In deze leeropdracht leer je properties (of eigenschappen) van een component te veranderen met behulp van het properties panel.

Transcriptie

1 0. Componenten, properties, methodes en events Als je een nieuw project maakt met VS.NET, dan kun je gebruik maken van de toolbox om componenten op een formulier (form) te plaatsen. Op deze wijze kun je op een eenvoudige manier een grafische User Interface (GUI) maken. In dit hoofdstuk gaan we eens een aantal mogelijkheden onderzoeken van componenten, voordat we er daadwerkelijk mee gaan programmeren. De beste manier om zaken te leren is door opdrachten te maken waarbij het een en ander wordt uitgelegd. Dit soort opdrachten worden leeropdrachten genoemd. Gewone opdrachten voer je uit om te oefenen wat je in een leeropdracht hebt geleerd. Leeropdracht 0.1 Een nieuw project maken In deze leeropdracht leer je properties (of eigenschappen) van een component te veranderen met behulp van het properties panel. Start eerst Visual Studio NET vanuit Start > Programma s Als je Visual Studio.NET voor de eerste keer start, dan krijg je het scherm van figuur 0.1 te zien. Figuur 0.1 Het startscherm van Visual Studio Aan de linkerkant van het scherm zie je een tabblad met de tekst Toolbox (zie figuur 0.2) Als je op dit tabblad klikt, dan wordt de toolbox zichtbaar. In dit geval bevat de toolbox nog niets. 0.1

2 Het tabblad Toolbox Figuur 0.2 Aan de rechterkant van het scherm zie je een venster met in de tittelbalk de tekst Solution Explorer. Ook dit is in de huidige situatie leeg. In de solution explorer kun je de documenten in een project beheren. In het midden zie je een pagina met het tabblad Start Page (zie figuur 0.1). Op deze pagina zie je wat algemene informatie over.net en een aantal mogelijkheden om nieuwe projecten te maken en bestaande projecten op te vragen. We gaan nu een nieuw project maken. Een project is een verzameling documenten die nodig zijn om een applicatie in Visual C#.NET te maken. Dit doe je als volgt: Druk op de knop links boven in het scherm. Het volgende dialoogvenster (figuur 0.3) wordt zichtbaar: Figuur 0.3 Hier de naam en de locatie van je project invoeren 0.2

3 Let op: Let bij dit scherm op dat de programmeertaal voor het project Visual C# is. Dit kun je zien aan de linkerkant van het dialoogvenster. Indien dit niet het geval is, dan moet je een aan de linkerkant van het dialoogvenster bij Other Languages alsnog Visual C# kiezen. Geef het project een naam en een locatie (zie figuur 0.3). Op deze locatie wordt dan een folder gemaakt met daarin alle benodigde bestanden van het project. Kies nu het type project. In figuur 0.3 zie je hoe dit moet. In het panel Recent Templates kies je Visual C# en daaronder Windows. In het middelste panel kies je Windows Forms Application. Druk nu op de knop OK. Nadat je op de OK knop hebt gedrukt, krijg je het volgende scherm (figuur 0.4) te zien (de naam van dit project is MijnEersteApp). Figuur 0.4 Je hebt nu een C# Windows Forms Application gemaakt. Einde Leeropdracht

4 Nu je een project hebt gemaakt kunnen we verder. Eerst moet je een beetje thuis raken in de programmeeromgeving. Leeropdracht 0.2 De programmeeromgeving ontdekken In figuur 0.5 zie je weer het scherm met het project dat je zojuist hebt gemaakt. Figuur 0.5 Het kan zijn dat het scherm er bij jou anders uitziet dan in figuur 0.5. De verschillen zitten hem in de panels links en rechts van het scherm met het formulier (Form1). We beginnen met een scherm zonder de panels links en rechts. Klik de panels links en rechts weg met Het resultaat zie je in figuur 0.6. Figuur

5 Nu gaan we de, tot nu toe, belangrijkste panels weer op het scherm plaatsen. Dat zijn: De Toolbox en Het Properties panel Plaats de toolbox op het scherm met de knop of met de toetscombinatie Ctrl W (loslaten) X. Met de toolbox kun je componenten zoals knoppen, tekstvelden, datagrids en comboboxen op het formulier plaatsen. Zo kun je op een eenvoudige manier een Grafische User Interface (GUI) maken. Het formulier (Form1) zelf is ook een component. Een GUI maken zonder de toolbox kan ook, maar dat vereist veel meer programmeervaardigheden. Plaats het properties panel op het scherm met de knop of met de toetsencombinatie Ctrl W (loslaten) P. Met het properties panel kun je de eigenschappen van componenten beïnvloeden. Voorbeelden van eigenschappen zijn Size, Text, Location, BackColor en BackGroundImage. In deze lesbrief wordt hierop nog teruggekomen. Het scherm ziet er nu uit zoals in figuur 0.7. Het formulier (Form1) De toolbox Het properties panel Figuur

6 Je kunt nu de toolbox en het properties panel verwijderen en weer oproepen. Van het formulier Form1 is het design te zien. Dat kun je zien aan de tab boven het formulier. Daar staat Form1.cs [Design]*. Behalve een design heeft Form1 ook een codeblad. Dit codeblad krijg je als volgt te zien: Klik rechts op Form1, je krijgt dan een popup menu te zien. Kies in dit menu View Code Je krijgt hetzelfde resultaat door op F7 te drukken. Het codescherm zie je in figuur 0.8. Figuur 0.8 Er staat al wat code in het codescherm. Breng hierin geen wijzigingen aan! In het algemeen geld: verwijder niet zomaar code die Visual Studio zelf genereert, tenzij je weet wat je doet. Tevens zie je dat de toolbox en het properties panel in deze situatie onbruikbaar zijn. Je ziet dat het codescherm in een apart tabblad staat( Form1.cs). Het lijkt alsof achter het formulier een codeblad bestaat. Het codeblad wordt ook wel de code behind genoemd. Je kunt weer schakelen naar het design door het betreffende tabblad te selecteren. Het is nu de bedoeling dat je, na het maken van een GUI, programmeercode op het codeblad schrijft, zodat het geheel werkt zoals jij hebt bedacht. In figuur 0.9 zie je een voorbeeld van een codeblad met programmeercode. Waarschijnlijk zegt deze code je (nog) niets. Het is C# - code (spreek uit : sie sharp code). Het enige wat je waarschijnlijk herkent is het for-statement midden op de pagina. Oefen nog maar een beetje met het tonen en verwijderen van de verschillende panels en het codescherm. 0.6

7 Figuur 0.9 Einde Leeropdracht 0.2 In de volgende leeropdracht ga je componenten op het formulier plaatsen en de properties ervan wijzigen. 0.7

8 Leeropsdracht 0.3 Een GUI maken We gaan de GUI maken voor een programma waarmee je het volgend kunt doen: Selecteer een land in een combobox Als dit land geselecteerd is, dan krijg je de vlag van dat land te zien en de tekst "Dit is de vlag van???" in de landstaal (??? is het land). Tevens krijg je te horen hoe de tekst in die landstaal wordt uitgesproken. Dit laatste punt is misschien nog te ingewikkeld in dit stadium, en hoeft niet te worden gemaakt. De GUI ziet er in eerste instanie als volgt uit: Figuur 0.10 Op het formulier staan 5 componenten (waarvan er 4 in figuur 0.10 te zien zijn): 2 maal een component Label 1 component ComboBox 1 component PictureBox 1 component ImageList (niet te zien in figuur 0.10) Je kunt de componenten vanuit de toolbox naar het formulier slepen. De plaats en de grootte doet er nog niet zoveel toe. De component ImageList is niet te zien in het formulier, maar onder het formulier, in een apart panel. Deze component behoort wel tot de applicatie, maar zie je niet in de GUI. Je gaat nu de GUI vormgeven. Dat wil zeggen dat je het uiterlijk ervan gaat veranderen. Zo kun je de kleur, de plaats en de grootte van het de componenten wijzigen, of het formulier een achtergrondsafbeelding geven. Kortom, je kunt de GUI zo mooi maken als je zelf wilt. Je kunt dit het beste doen met behulp van het properties panel. 0.8

9 Je begint eenvoudig, daarna kun je vrij experimenteren. Klik (enkel!) op de component Label1 en bekijk het properties panel (zie figuur 0.11) Elke component heeft een naam. De naam van een component staat achter de eigenschap Name. In dit geval is de naam van het label Label1. Je kunt in het properties panel de eigenschap Name eenvoudig veranderen. Verander de naam van de component in lblkiesland. Als je dit hebt gedaan, dan zie je bovenin het properties panel dat de naam van het label ook is aangepast. Het is een goede gewoonte om de naam van een component op te bouwen uit een onderdeel dat iets zegt over het type component en uit een onderdeel dat iets zegt over het doel van de component. In dit geval zegt de prefix lbl dat het hier een te label betreft, en KiesLand dat de component iets te maken heeft met de keuze van een land. In de naam van een component mag geen spatie voorkomen. Het is een goede gewoonte de naam met een kleine letter te beginnen (de prefix) gevolgd door 1 of meer woorden die beginnen met een hoofdletter. Deze notatiewijze wordt Camel Case genoemd. Je ziet dat, ondanks de wijziging van de naam, de tekst van het label op het formulier nog steeds Label1. Deze tekst kun je wijzigen met de eigenschap Text van het label. Figuur 0.11 Wijzig nu de eigenschap Text van de component lblkiesland in "Kies een land". Voer nog wat wijzigingen uit op de component lblkiesland, zoals het lettertype, de kleur van de letters, de achtergrondkleur, de locatie, enz. Wijzig de naam van de component Label2 in lbltoelichting en de eigenschap Text in "Toelichting in landstaal". Breng eventueel nog wat zelf gekozen wijzigingen in de eigenschppen aan. Wijzig de naam van de ComboBox in cbxkiesland en breng eventueel nog wat zelf gekozen wijzigingen in de eigenschappen aan. Wijzig de naam van de PictureBox in pbxvlag en breng eventueel nog wat zelf gekozen wijzigingen in de eigenschappen aan. Wijzig de naam van de Form1 in frmlandvlag en breng eventueel nog wat zelf gekozen wijzigingen in de eigenschappen aan. Wijzig de naam van de ImageList in imlvlaggen. Breng hier verder geen wijzigingen aan. Dit proces heeft nog niets met programmeren te maken, maar meer met vormgeven. 0.9

10 Na het aanpassen van de eigenschappen zou het design er als volgt kunnen uitzien (zie figuur 0.12) Figuur 0.12 Einde Leeropdracht 0.3 Nu je een ontwerp hebt gemaakt van je applicatie, is het de bedoeling dat je het geheel aan de praat gaat krijgen, zoals eerder is geformuleerd: Selecteer een land in een combobox Als dit land geselecteerd is, dan krijg je de vlag van dat land te zien en de tekst "Dit is de vlag van???" in de landstaal (??? is het land). Tevens krijg je te horen hoe de tekst in die landstaal wordt uitgesproken. Voordat dit mogelijk is, moet je eerst iets over events weten. Dit kun je het beste oefenen in een nieuw project. Als je hierin wat oefeningen hebt gemaakt, dan kun je het toepassen in het project van Leeropdracht 0.3. In Leeropdracht 0.4 ga je oefenen met events. Leeropdracht 0.4 Oefenen met events Events zijn gebeurtenissen die kunnen plaatsvinden als je een applicatie uitvoert. Veel voorkomende events zijn: Op een knop klikken De applicatie wordt gestart Met je muis over een plaatje bewegen Tekst in een tekstveld veranderen Een optie kiezen in een combobox of in een groep radiobuttons Een checkbox aanvinken Een rij selecteren in een DataGridView 0.10

11 Het idee achter event driven programmeren (EDP) is: Als een event optreedt, dan wordt er een stukje programmacode uitgevoerd. Dat stukje programmacode heb jij als programmeur gemaakt. In plaats van een grote lijst met programmacode, wordt de programmacode over meer kleine stukjes verdeeld. Voor elk event een stukje code. Voordat je gaat programmeren, moet je daarom eerst nagaan welke events belangrijk zijn tijdens de uitvoering van je applicatie. Events die belangrijk zijn zijn events waarvoor een stukje code voor moet gemaakt. Open een nieuwe applicatie met de naam OefenEvents en sla de applicatie op in een door jou geselecteerde map. Plaats op het formulier een knop (Button). Het resultaat zie je in figuur Figuur 0.13 Van een knop kun je wel zeggen dat het belangrijkste event het event Click is. Dit is het event dat optreedt als je op de knop klikt met je muisaanwijzer. Welke events een knop nog meer heeft kun je zien in het Events panel. Het events panel is onderdeel van het properties panel van de knop. Je krijgt het event panel als volgt te zien (voer de opdrachten uit): Selecteer de knop (1 maal klikken!) Geef de knop de naam btnoefenevent. Geef de eigenschap Tekst van de knop de waarde "Test event". Kies bovenin het properties panel de knop. Je ziet dan in het properties panel het events panel (zie figuur 0.14) Laat het event panel van het formulier op een overeenkomstige manier zien. Schakel terug naar het properties scherm van het formulier met de knop boven in het event panel. Maak ten slotte het event panel van de knop weer zichtbaar. 0.11

12 In het event panel van de knop zie je alle events van de knop. Dit is een behoorlijk aantal. De meeste events zal je niet gebruiken. Uiteraard zal het event Click het meest worden gebruikt. Als je dit event wil gaan gebruiken, dan moet eerst hit evend worden aangemeld bij de applicatie. Dit gaat als volgt (voer de opdrachten uit): Plaats de cursor achter het event Click (zie figuur 0.14). Dubbelklik op deze plaats met de muis. Als je dit hebt gedaan, dan krijg je het codeblad te zien. Op het codeblad heeft Visual Studio automatisch code gegenereerd (zie figuur Het event is nu bij de applicatie aangemeld. Plaats hier de cursor Figuur 0.14 Deze code heeft Visual Studio in het codeblad geplaatst bij het aanmelden van het event bij de applicatie. Figuur

13 De code die Visual Studio in het codeblad heeft gepalaatst wordt een Evend Handler genoemd. Een Event Handler is de koppeling tussen het event en de applicatie. In de eventhandler kun je code schrijven die wordt uitgevoerd als het event optreedt. Let op: Maak maak geen event handler door de code die je in figuur 0.15 ziet letterlijk in te tikken. Genereer de eventhandler zoals hiervoor is beschreven. Verwijder nooit zomaar een event handler uit het codeblad (weet je nog wel: verwijder niet zomaar code die Visual Studio zelf genereert, tenzij je weet wat je doet, bladzijde 0.6). Het kan voorkomen dat je een verkeerde evend handler hebt gegenereerd en je wilt hem toch verwijderen. Dit doe je als volgt (voer de opdrachten uit): Maak het event panel van de knop zichtbaar. Je ziet dat achter het event Click de volgende tekst staat: btnoefenevent_click (dit is de naam van de event handler). In figuur 0.16 zie je de situatie. Verwijder deze tekst. Figuur 0.16 Verwijder de tekst achter het event Click (zie figuur 0.16) Druk op Enter. Schakel naar het codeblad (F7) In de meeste gevallen is de event handler ook daar verwijderd. Is dit niet het geval, dan kun je nu de gehele event handler (inclusief de twee accolades) uit het codeblad verwijderen. Je kunt testen of de event handler op de juiste wijze is verwijderd door de applicatie uit te voeren. Dit doe je met de volgende knop of met F5. De applicatie stoppen doe je met de knop of met Shift F5. Er mag bij het uitvoeren van de applicatie mag nu geen foutmelding optreden. Is dit wel het geval, dan is het event waarschijnlijk verkeerd verwijderd. Als je de applicatie uitvoert, dan is de applicatie in runtime. Voer de applicatie uit. Als er een foutmelding komt, roep dan de docent. Hij moet het probleem dan oplossen. Stop de applicatie als er geen foutmelding te zien is. We oefenen nog wat met het genereren van event handlers en het verwijderen ervan. 0.13

14 Genereer de event handler voor het event Load van het formulier. Verwijder het even Load van het formulier. Controleer of het event goed is verwijderd door de applicatie uit te voeren. Stop de applicatie. Genereer de event handler voor het event MouseHover van de knop. Verwijder het even MouseHover van de knop. Controleer of het event goed is verwijderd door de applicatie uit te voeren. Stop de applicatie. Genereer weer het event Click voor de knop. We gaan nu een klein stukje code in de event handler plaatsen. Met dit stukje code laat je een MessageBox op het scherm verschijnen. De code luidt: MessageBox.Show("Its Alive!!!"); Deze code is C# code. De programmeertaal die we gebruiken. Voer de code tussen de accolades van de event handler in (zie figuur 0.17). Let op: C# is hoofdlettergevoelig. Laat je tijdens het intikken van de code leiden door Intelli Sense (dat is het pop up scherm dat verschijnt met daarin de mogelijk in te voeren code). Figuur 0.17 Voer de applicatie uit. Laat het event Click van de knop plaatsvinden. De MessageBox zoals in figuur 0.18 moet nu op het beeldscherm verschijnen. Figuur 0.18 Klik op de knop OK van de MessageBox (de messagebox verdwijnt). Stop de applicatie. 0.14

15 De knop heeft een eigenschap Visible. Als deze eigenschap de waarde true heeft, dan is de knop zichtbaar. Als deze eigenschap de waarde false heeft, dan is de knop onzichtbaar. Je kunt dit in het properties panel instellen, maar je kunt dit ook daar middel van een stukje code realiseren. De code voor het onzichtbaar maken van de knop met behulp van de eigenschap Visible is: btnoefenevent.visible=false; Genereer de event handler Click van het formulier. Dit event zal optreden al je met de muisaanwijzer op het formulier klikt. Voeg de code voor het onzichtbaar maken van de knop toe aan de event handler. Voer de applicatie uit, en test of het optreden van het event het gewenste resultaat geeft. Stop de applicatie. Je kunt de knop weer zichtbaar maken door nog een keer op het form te klikken (als de knop tenminste onzichtbaar is tijdens runtime). Je kunt nu een if statement gebruiken dat er als volgt uitziet: if (btnoefenevent.visible == true) { //plaats hier code } else { //plaats hier code } Pas de applicatie nu aan, zodat na elke klik op het formulier de knop verdwijnt (als hij zichtbaar is), of zichtbaar wordt (als hij onzichtbaar is). Toet nu toe veranderde je eigenschappen van componenten tijdens design met behulp van het properties panel. In dit voorbeeld echter, heb je een eigenschap van een component tijdens runtime veranderd. Je kunt dit met meer eigenschappen doen. Eigenlijk is dat heel eenvoudig. De syntax (notatie) hiervoor is: naamvandecomponent.eigenschap=nieuwewaarde; btnoefenevent.text="test"; btnoefenevent.enabled=false; (hiermee blijft de knop zichtbaar, maar functioneert niet meer). pbxvlag.image = imlvlaggen.images[0] (deze code ga je gebruiken in het project de vlaggen). this.backcolor=color.black; Je zal in het vervolg nog heel vaak deze wijze van noteren moeten gebruiken (niet alleen in C#.NET, maar ook in andere programmeertalen). Experimenteer nog eens met verschillende events van componenten test deze door in de eventhandler code op te nemen (MessageBoxen starten, eigenschappen van componenten veranderen, enz). Einde Leeropdracht

16 0.16