Les 2: EuroCC: forms, edits, buttons

 
In deze les maken we een sterk vereenvoudigde versie van EuroCC, de toepassing die ik voorstelde in les 1. De nadruk ligt daarbij niet zozeer op wat de toepassing doet, maar op de wijze hoe je aan een project begint, de bestanden opslaat, componenten toevoegt, enzovoort. In les 3 gaan we dan verder in een hogere versnelling.
 
 

Voorbereidingen

  1. Indien je dit nog niet gedaan hebt, download dan euronl01.zip naar \DelphiLa.
    Momentje, nog niet decomprimeren: elk project krijgt zijn eigen directory, en je bewaart best alle originele zip-bestanden in \DelphiLa.
  2. Maak een nieuwe directory aan met de naam \DelphiLa\EuroNL01. Natuurlijk kan je andere namen kiezen voor je directories en projecten, maar het overnemen van de structuur die ik voorstel maakt het wel wat makkelijker om mekaar te begrijpen.
  3. Copieer euronl01.zip naar \DelphiLa\EuroNL01 en "unzip" het bestand in deze directory. Check of je de bestanden euronl01.dpr, euroform.dfm en euroform.pas hebt.

Starten met het einde

Zoals gewoonlijk beginnen we ook hier weer met het einde: we bekijken eerst eens wat versie 1 van EuroCC gaat worden.

  1. Start Delphi en open het project euronl01.dpr via het menu File en Open Project...
  2. Compileer de toepassing. Dat is overigens zeer eenvoudig (bekijk anders even les 1 indien je die nog niet doorgenomen hebt).
  3. Zoals na elke geslaagde compilatie, start Delphi de toepassing in de "omgeving" van de debugger.

    Euronl01 start onmiddellijk na de compilatie
  4. Speel even met het programma en kijk wat het allemaal doet. Merk op dat Delphi een error message geeft en het programma tijdelijk pauzeert, indien je een ongeldige waarde typt en op een van de twee knoppen klikt. Om daarna verder te gaan kies je Run in het menu Run, of je drukt op F9. In de message-box die nu verschijnt klik je op OK. Daarna komt er geen tweede foutboodschap, want in deze eenvoudige versie controleert het programma zelf niet op de geldigheid van de invoer (vergelijk dit even met les 1).

    200 is ingevuld en er is op de tweede knop geklikt
  5. Stop de applicatie.
    Kies daarna in menu File de opdracht Close All. Verwijder vervolgens via je favoriete file manager (Windows Explorer,...), alle bestanden uit \DelphiLa\EuroNL01.

 

Nu is het jouw beurt

  1. Open in Delphi het menu File en kies New Application. Delphi start een nieuw project:
     
    • Bovenaan, in de titelbalk, staat de standaard naam die aan het nieuwe project toegekend is: Project1. Dit betekent dat Delphi een dpr-bestand (project-bestand) aangemaakt heeft met de naam Project1.dpr.
      Opmerking: indien je tijdens de zelfde sessie meerdere nieuwe projecten na elkaar start, krijgt het tweede project de naam Project2.dpr, het volgende wordt Project3,... Je zal zien dat Delphi deze techniek consequent volgt voor de naamgeving van nieuwe bestanden en componenten.
    • Tevens zie je een venster met in de titelbalk de vermelding Form1. Dat venster (formulier, form) is de basis voor het project. Delphi-applicaties zijn op Forms gebaseerd: elke applicatie bevat één of meerdere Forms.
      Een Form is een component in de vorm van een venster. Vandaar trouwens de naam Windows; goed gevonden, niet?
      Op de form plaats je andere componenten, zoals knoppen (buttons), Edit-boxen, radiobuttons, keuzelijsten(ListBox, ComboBox), enz..., allemaal welbekend van Windows.
    • Achter het venster "Form1" bevindt zich het venster van de Editor, waarin de broncode geplaatst wordt. Deze broncode is het resultaat van de samenwerking tussen Delphi en jezelf, waarbij Delphi een soort van sjabloon (schema, skelet) maakt dat je verder kan aanvullen.
      Waarschijnlijk zie je nu alleen maar de bodem van dat venster, in feite de statusbalk van de Editor.

  2. Klik nu eens in het Editor venster, bijvoorbeeld op zijn statusbalk (dus de strook met de vermelding 1 :1 Modified Insert). Het hele Editor-venster wordt nu zichtbaar:

    Unit1 is de naam van de Unit die hoort bij Form1. Dit betekent dat Delphi een bestand met de naam Unit1.pas aanmaakte, waar de broncode in komt die behoort bij Form1, het hoofdvenster van je applicatie.

    Let op: de zopas vernoemde bestanden bestaan momenteel enkel nog maar in het RAM-geheugen. We gaan ze nu opslaan op de harde schijf.

  3. Kies in het File menu de optie Save All.
    In het venster Save Unit1 as kies je de directory \DelphiLa\EuroNL01 en in het vakje voor de bestandsnaam typ je euroform. Delphi bewaart nu de tekst van de unit in euroform.pas en de gegevens van de form in euroform.dfm.
  4. In het volgende venster, Save Project1 As, staat de directory reeds juist. Typ als bestandsnaam euronl01. Delphi bewaart nu de samenstelling van het project als euronl01.dpr (hierin staan o.a. de namen van de units en forms die je aanmaakte, plus andere units waarvan het project gebruik maakt).
Merk op dat ondertussen in de titelbalk van het Editor venster de naam van de unit staat: euroform.pas. Maar waar is het project-bestand, het dpr-bestand? Dat zie je momenteel niet, maar het is op dit ogenblik ook niet belangrijk. Als algemene regel geldt dat je zelf niets aan dpr-bestanden wijzigt zolang je niet exact weet wat je doet: laat het beheer van het project voorlopig maar aan Delphi over.

Bestanden en de keuze van bestandsnamen

Ik raad je aan alle bestanden van een nieuw project zo vroeg mogelijk op te slaan: zo kom je later nooit voor verrassingen te staan, zoals een project dat je niet meer vindt (hoe heette het ook weer?) of een ander bestaand project dat je per ongeluk overschrijft (en dat is heel wat erger...)

Even analyseren

een korte analyseEen goeie analyse vooraf is meer dan de helft van het werk.

We weten dat 1 Euro gelijk is aan 40.3399 BEF (Belgische frank, overigens dezelfde wisselkoers als de Luxemburgse frank).

Bij het klikken op een knop wordt de waarde die in de edit-box staat omgerekend naar een andere munteenheid, afhankelijk van welke knop aangeklikt is. Tevens moet de benaming van de start-munteenheid gewijzigd worden.

Componenten voor onze applicatie: 1 edit-box voor het invoeren van gegevens, 2 drukknoppen (eentje voor het omrekenen van Euro naar Belgische frank, eentje voor de omgekeerde conversie), 6 labels (1 voor het weergeven van de munteenheid van waaruit we starten, 1 voor de tekst "is gelijk aan", 2 voor de resultaten, twee voor de munteenheden naar dewelke we converteren).

Het plaatsen van de componenten

In de volgende stappen plaats je de vereiste componenten op de form:

  1. Klik op het form venster zodat het naar de voorgrond komt. Tip: je kan ook drukken op functietoets F 12: hiermee schakel je tussen de "unit" in de editor en de "form".
    Je zal allicht een raster zien, een patroon van puntjes. Dat vergemakkelijkt het uitlijnen van de componenten op de form. Omwille van de duidelijkheid toon ik dit niet in de afbeeldingen. Overigens heb ik het raster op mijn PC uitgeschakeld: zowat alles in Delphi kan je personalizeren. Maar niet te snel als je pas begint met Delphi, want anders vind je niks meer terug, en in het ergste geval zit er dan niets anders op dan Delphi helemaal opnieuw te installeren :-(((
  2. Klik in het componentenpalet op de afbeelding van de Edit-box. Die staat op de standard pagina van het componentenpalet:

  3. Klik ergens in de form: er verschijnt een Edit-box, waarin je de tekst Edit1 ziet (dit is de naam van de component).
  4. Sleep de component Edit1 tot net onder de titelbalk van Form1.

  5. Klik in het componentenpalet op het symbool van een Label.

    Klik rechts van Edit1: Label1 verschijnt.

  6. Selecteer opnieuw een Label in het componentenpalet en klik vervolgens naast Label1 op de Form.
  7. Klik in het componentenpalet op de afbeelding van de Button (staat ook op de standard pagina). Klik daarna in de Form, ergens onder de Edit-box. Er verschijnt een knop met de naam Button1.
  8. Plaats op dezelfde wijze een tweede button ergens onder Button1.
  9. Plaats twee labels ongeveer ter hoogte van Button 1 (Label3 en Label4). Plaats eveneens twee labels ter hoogte van Button2 (Label5 en Label6). Je hebt nu het volgende:

  10. Je kan de componenten verslepen tot het geheel er ongeveer zoals in de afbeelding uit ziet.

    Waarschijnlijk is je form ook groter dan degene die je hierboven ziet. De afmetingen kan je gemakkelijk wijzigen, net zoals je dat dat met gelijk welk Windows venster doet: namelijk door het verslepen van de randen. Probeer het eens uit.
  11. Tijd om alles op te slaan: in het menu File kies je Save All.
  12. We gaan testen: klik in het menu Run op Run. Ofwel druk je op de functietoets F9, dat is handig en snel.

    Alles wordt nu gecompileerd en het programma start.
    Het programma doet ogenschijnlijk niets, maar vergis je niet: dit is wel een volwaardige Windows-applicatie! Je kan het venster van de applicatie vergroten, verkleinen, maximalizeren,... Typ eens iets in de Edit-box. Klik op de knoppen.
  13. Stop de applicatie.

De Object Inspector: Properties en Events

Tijd om wat leven in de brouwerij te brengen.

  1. In de Object Inspector stel je de eigenschappen van de componenten in, hun properties: caption, kleur, grootte, font,...
    Indien je de Object Inspector niet ziet, open je hem via het commando in het menu View, ofwel klik je op functietoets F11.

    Object Inspector
  2. Zorg ervoor dat in de Object Inpector Form1 geselecteerd is, zoals in de afbeelding hierboven (selecteer Form1 in de listbox bovenaan de Inspector indien er iets anders staat). Klik daarna naast de property Caption en typ: Euro Convertor. Deze tekst verschijnt nu in de titelbalk van Form1.
  3. Klik in de form op Label2 en wijzig in de Object Inspector zijn Caption in is gelijk aan (je kan de component Label2 ook selecteren via de listbox bovenaan de Inspector). Wijzig op dezelfde manier de Caption van Label4 in Euro en die van Label6 in BEF.
    Wijzig de Caption van Button1 in Euro -- BEF.
    Wijzig de Caption van Button2 in BEF -- Euro.
  4. De namen van onze de componenten zeggen niet veel. We zullen ze namen geven die aansluiten bij hun functie, zodat later de broncode van het programma wat leesbaarder wordt. Selecteer Edit1 en wijzig in de Object Inspector zijn property Name in InputEdit.
    Wijzig ook de namen van de andere componenten die later in de broncode zullen opduiken als volgt:
    Label1 : MuntLabel
    Label3 : EuroLabel
    Label5 : BEFLabel
    Button1 : EuroButton
    Button2 : BEFButton
  5. Wijzig de Text property van InputEdit tot 100. Zo zal InputEdit een startwaarde bevatten bij het begin van het programma.
  6. In de Object Inspector geef je tevens aan op welke events (gebeurtenissen) een component moet reageren. Selecteer maar eens de EuroButton en klik daarna in de Object Inspector bovenaan op de tab Events: je ziet de events OnClick, OnDoubleClick,...
  7. Dubbelklik op het witte vakje naast OnClick. In het vakje verschijnt: EuroButtonClick. Dit is de naam die in het programma aan de Event Handler zal gegeven worden, de routine waarin staat wat er moet gebeuren bij een klik op EuroButton.

    event OnClick
  8. In de Editor heeft Delphi alvast een skelet voor deze Event Handler aangemaakt:
    procedure TForm1.EuroButtonClick(Sender: TObject);
    begin
    
    end;
  9. We experimenteren even met wat voorlopige programmacode. Tussen de woorden begin en end van de Event Handler typ je de code die uitgevoerd zal worden wanneer iemand op EuroButton klikt. Typ hier:
    MuntLabel.Caption := 'Euro';
    EuroLabel.Caption := InputEdit.Text;
    De volledige Event Handler luidt nu dus als volgt:
    procedure TForm1.EuroButtonClick(Sender: TObject);
    begin
      MuntLabel.Caption := 'Euro';
      EuroLabel.Caption := InputEdit.Text;
    end;
    Let op: rond het woord Euro staan enkele aanhalingstekens, dus geen dubbele!
  10. Compileer het programma. Typ daarna iets in de Edit-box en klik op de knop EuroButton: de tekst 'Euro' verschijnt in MuntLabel en de tekst van de Edit komt in EuroLabel. In Delphi-jargon:
    • de string 'Euro' wordt toegekend aan de property Caption van MuntLabel;
    • de property text van InputEdit wordt toegekend aan de property Caption van EuroLabel.
  11. Stop het programma en sla het project op (Save All).

Tot volgende keer bij les 3!

[ TOP ]   [ HOME ]  

Elke applicatie bevat één of meerdere Forms...
Op elke regel is er een uitzondering... ;-)
Met Delphi kan je ook toepassingen maken zonder vensters, maar die behandelen we niet in deze lessenreeks.

© Copyright 1999-2016
DelphiLand