HANDLEIDING PROGRAMMEREN IN PASCAL (LAZARUS)

Transcriptie

1 HANDLEIDING PROGRAMMEREN IN PASCAL (LAZARUS) LES 3 De programma s die we in Les 1 en Les 2 gezien hebben, zagen er niet erg mooi uit. In deze les gaan we er onder andere naar kijken, hoe we de programma s er wat mooier uit kunnen laten zien, alvorens we naar andere nieuwe dingen gaan kijken. In Les 2 hebben we een optel-programmaatje gemaakt, dit zag er als volgt uit: Dit scherm wordt ook wel de GUI = Graphical User Interface genoemd van het programma. Zo n GUI kun je ontwerpen door objecten op een form te plaatsen, zoals we nu al bij 2 programma s gedaan hebben. De GUI van het optel-programma ziet er niet mooi uit. Ook is het maar een heel simpel programma. We gaan nu in deze les een ander programma maken met een mooiere GUI en met nieuwe objecten zoals radio buttons, checkboxes enzovoorts. We gaan een programma maken waarmee je (fictief natuurlijk: het is een voorbeeld!) informatie kunt aanvragen bij een rijschool over de verschillende categorieën (motor, personenauto, vrachtwagen enzovoort). Als je op je computerscherm je gegevens hebt ingevuld kun je op een knop klikken waarna je een overzicht krijgt van je verzoek, waarna je weer op een knop kunt klikken om te bevestigen dat je dit verzoek wilt versturen naar de rijschool (er wordt uiteindelijk natuurlijk niet echt een verzoek verstuurd, hoewel het maken van zoiets in Lazarus wel degelijk mogelijk is!).

2 Start indien je dit nog niet gedaan hebt Lazarus Start een nieuwe applicatie met File New Application Maak een GUI die er als hieronder uitziet (zie ook de aanwijzingen onder de afbeelding). Hiervoor heb je de volgende componenten nodig: 7 Labels 2 Edits 1 Combobox 2 Radiobuttons 6 Checkboxes 2 Buttons 6 Images

3 Je kunt in een Image een plaatje invoegen door op de Form op de Image te klikken en dan in de Object Inspector naast Picture te klikken op het knopje met de 3 zwarte puntjes: De grootte van een label (en dergelijke) kun je natuurlijk ook allemaal aanpassen in de Object Inspector, lettergrootte & type enzovoorts kun je aanpassen bij Fonts! Zorg dat de Style van de Combobox is: csdropdownlist (in Object Inspector aanpassen), hierdoor kan de gebruiker zelf niets intypen in de Combobox, maar de keuze alleen wijzigen met het pijltje: In de Combobox moet de gebruiker kunnen kiezen uit de jaartallen 1940 t/m 2000, deze jaartallen kun je invoeren door in de Object Inspector naast Items te klikken op het knopje met de 3 zwarte puntjes:

4 Als je daarop klikt, kun je zoals hieronder de jaartallen invoeren: Uiteraard doet het programma nog niet veel: er is wel al code door Lazarus zelf aangemaakt, maar we moeten natuurlijk ook zelf nog het een en ander aan code intypen. We kunnen wel eens kijken wat het programma tot nu toe WEL al doet, hiervoor starten we zodadelijk het programma. Eerst slaan we het programma natuurlijk op! Sla het programma op in een aparte map, noem de unit main in plaats van het door Lazarus voorgestelde unit1 en noem het programma (project) Rijschoolhouder in plaats van het door Lazarus voorgestelde Project1 Run het programma door op F9 te drukken en kijk wat je in het programma WEL al kunt doen Je hebt vast gemerkt dat er natuurlijk niets gebeurt als je op een knop klikt. Zorg ervoor, dat wanneer er op de knop Afsluiten geklikt wordt, het programma ook daadwerkelijk afgesloten wordt.

5 Wat er moet gebeuren indien er op de andere knop geklikt wordt (het tonen van een scherm met een overzicht van de ingevoerde gegevens ter bevestiging) bekijken we later. We gaan eerst naar iets anders kijken: het is niet zo netjes, dat je om als je je achternaam ingevoerd hebt, de TAB-toets of de muis moet gebruiken, om naar het volgende invoervakje (Edit) te gaan. We gaan er nu voor zorgen dat wanneer je na het intypen van je achternaam op de ENTERtoets drukt, de cursor automatisch naar het volgende invoervakje gaat! Dat kan op de volgende manier: Klik op de Form op het invoervakje voor de achternaam (Edit1 als je de naam niet gewijzigd hebt) Ga in de Object Inspector naar het tabblad Events en dubbelkik daar naast het vakje OnKeyPress. Er verschijnt nu de code waar je gaat programmeren wat er gebeurt als er op de ENTER-toets gedrukt wordt, dat moet er ongeveer zo uitzien: Tik nu in de procedure TForm1.Edit1KeyPress de volgende code tussen begin en end; : if Key=#13 then Edit2.Setfocus Wat je zojuist ingetikt hebt betekent: ALS de ingedrukte toets (key) de ENTER-toets is (#13 is daar de code voor), zet DAN de cursor in Edit2 (ofwel: zet de focus op Edit2) We hebben nu een belangrijke constructie gebruikt van Lazarus: de IF THEN constructie. Deze constructie zul je nog vaak gaan gebruiken, en zit als volgt in elkaar: IF (aan een bepaalde voorwaarde voldaan wordt) THEN (doe iets).

6 De voorwaarde die wij stelden was: de ingedrukte toets moet de ENTER-toets zijn Wat er moest gebeuren was indien aan de voorwaarde voldaan werd, was: zet de focus op Edit2 Run het programma door op F9 te drukken en controleer of het werkt! Misschien heb je iets opgemerkt aan het programma, wat nog niet werkt zoals je misschien wel zou willen: indien de gebruiker van je programma op de Enter-toets drukt terwijl de focus op Edit1 staat, dan wordt de focus OOK op Edit2 gezet indien de gebruiker nog geen achternaam heeft ingetypt! Daar gaan we wat aan doen, we gaan ervoor zorgen dat het programma eerst controleert of er iets ingevoerd is in Edit1, alvorens naar Edit2 te springen indien er op de ENTER-toets gedrukt wordt. Daarvoor gaan we de code die we ingetypt hadden: if Key=#13 then Edit2.Setfocus veranderen in: if (Key=#13) and (Edit1.Text<> ) then Edit2.Setfocus Doe dit.

7 Je ziet: we hebben nu TWEE voorwaarden gesteld alvorens het programma -indien er op een toets gedrukt wordt in Edit1 - naar Edit2 mag springen: - de ingetoetste toets moet de Entertoets zijn - de tekst in Edit1 mag niet leeg zijn Let op: <> betekent: is ongelijk aan '' is een lege String, een String is in Lazarus een stukje tekst De 2 voorwaarden moeten tussen haakjes staan en worden verbonden met het woordje AND. Je kunt natuurlijk ook 3 of meer voorwaarden stellen, die je dan kunt koppelen met AND. Zorg er op dezelfde manier voor, dat wanneer er in Edit2 op de ENTER-toets gedrukt wordt, de focus op Combobox1 gezet wordt. Dit mag echter alleen wanneer er in Edit2 door de gebruiker tekst ingevoerd is. We gaan het programma NOG beter maken. Heb je opgemerkt dat wanneer je het programma opstart, dat de cursor dan nog niet automatisch in Edit1 staat? Dat zou wel mooier zijn. We kunnen er als volgt voor zorgen dat dit wel gebeurt: Zorg dat het object in de Object Inspector Form1 is (je kunt dat doen door ergens op Form1 te klikken, of door in de Object Inspector met het pijltje omlaag voor Form1 te kiezen; misschien staat de Object Inspector al wel gericht op Form1) Dubbelklik in de Object Inspector op het tabblad Events op het vakje naast OnShow Je moet nu de volgende code te zien krijgen: Tussen begin en end; komt de code te staan die bepaalt wat er moet gebeuren zodra Form1 geshowd wordt.

8 Tik tussen begin en end de volgende code: Edit1.SetFocus Run het programma. Merk op dat je een programma ook kunt runnen door op de snelknop te klikken die er zo uitziet: Werkt het? Er is nog iets leuks wat we kunnen toevoegen. Stel dat je wilt dat de gebruiker wat meer informatie krijgt over een bepaalde categorie door met de muis op een plaatje van een categorie te gaan staan. Dat kan, en het is vrij eenvoudig. Zorg dat de Object Inspector gericht staat op Image1. Ga in het tabblad Properties naar Hint Vul daar in: Categorie A: Motoren Ga in het tabblad Properties naar ShowHint Zet deze op True Met de twee laatste stappen zorg je er voor dat de hint, zoals dat genoemd wordt, ook daadwerkelijk weergegeven wordt. Run het programma en kijk wat er gebeurt indien je met de muis op Image1 gaat staan. Werkt het?

9 Zorg ervoor dat bij de andere plaatjes de volgende hints komen te staan die weergegeven worden indien de gebruiker met de muis op een plaatje gaat staan: - Categorie B: personenauto - Categorie BE: personenauto met aanhangwagen - Categorie C: vrachtauto - Categorie CE: vrachtauto met aanhangwagen - Categorie D: bus Controleer of de hints werken. Je raadt het al: we gaan het programma nog professioneler maken. We gaan er onder andere voor zorgen dat het programma bij het opstarten automatisch in het midden van het beeldscherm komt te staan. Dat gaat vrij eenvoudig: Zorg dat de focus staat op Form1, oftewel zorg dat de Object Inspector daar op gericht is. Verander nu in het tabblad Properties de Propertie Position van podesigned naar poscreencenter Run het programma. Verschijnt het mooi in het midden van het scherm? Misschien heb je opgemerkt dat je, als je het programma runt, dat je dit kun maximaliseren met de bekende knop: Ga dit na en bekijk het resultaat. Het ziet er niet echt mooi uit!

10 Waarschijnlijk kreeg je dit te zien: Je ziet: doordat de componenten op de Form niet allemaal een stukje naar rechts en omlaag verschuiven terwijl de Form wel groter wordt, ziet het geheel er niet zo mooi uit. We gaan er daarom voor zorgen dat de Form niet meer gemaximaliseerd kan worden. Dat kan als volgt: Ga in de Object Inspector op het tabblad Properties naar BorderIcons en klap deze uit met behulp van het pijltje: Je krijgt dan het volgende te zien:

11 Verander de subproperty bimaximize in false. Nu kan het venster door de gebruiker niet meer gemaximaliseerd worden. Probeer uit of het inderdaad goed werkt! Nu is er nog iets wat ons niet helemaal bevalt. De gebruiker van het programma kan met de muis Form1 kleiner of groter maken. Run het programma maar eens en probeer dit uit. Dit probleem gaan we verhelpen en wel als volgt: Zorg dat de Object Inspector gericht staat op Form1 Ga in de Object Inspector op het tabblad Properties naar de propertie BorderStyle. Deze staat ingesteld op bssizeable, dat wil zeggen dat de gebruiker de grootte van Form1 kan aanpassen. Dat willen we niet. Verander bssizeable daarom in bssingle. Run het programma en controleer of je inderdaad de grootte van de Form niet meer kunt veranderen Dan gaan we nu kijken hoe we kunnen simuleren dat de gegevens opgestuurd worden naar de rijschool.

12 We gaan nu code invoeren die bepaalt wat er gebeurt indien er op Button2 geklikt wordt. Dat is de volgende code: procedure TForm1.Button2Click(Sender: TObject); begin if (Edit1.Text<>'') and (Edit2.Text<>'') and (Combobox1.Text<>'') and ((RadioButton1.Checked=true) xor (RadioButton2.Checked=true)) and ((Checkbox1.checked=true) or (Checkbox2.Checked=true) or (Checkbox3.Checked=true) or (Checkbox4.Checked=true) or (Checkbox5.Checked=true) or (Checkbox6.Checked=true)) then MessageDlg('De gegevens zijn naar de rijschool verzonden', mtinformation, [mbok],0) else MessageDlg('Alle gegevens invullen a.u.b.!'+#13+'gegevens NIET verzonden.', mtinformation, [mbok],0) end; Voer deze code in en test of het werkt. Je zou na het invullen van de gegevens en het klikken op Verstuur verzoek naar rijschool het volgende moeten zien:

13 In bovenstaande code staan nogal wat nieuwe dingen. Deze hoef je nu nog niet allemaal helemaal te begrijpen, maar zullen we in volgende lessen behandelen. Sla het programma op. EINDE VAN LES 3