Les 4: EuroCC met RadioButtons

 
In deze versie van EuroCC vervangen we de drukknoppen, de Buttons, door RadioButtons.
Tevens introduceren we subroutines, de kracht van elke (serieuze) programmeertaal.
 
 

Voorbereidingen

  1. Indien je dit nog niet gedaan hebt, download dan euronl02.zip naar \DelphiLa.
    Momentje, nog niet decomprimeren: herinner je dat elk project zijn eigen directory krijgt en dat we alle originele zip-bestanden bewaren in \DelphiLa.
  2. Maak een nieuwe directory aan met de naam \DelphiLa\EuroNL02.
  3. Copieer euronl02.zip naar \DelphiLa\EuroNL02 en "unzip" het bestand in deze directory. Check of je de bestanden euronl02.dpr, euroform.dfm en euroform.pas hebt.

Wat gaan we maken?

Zoals in de vorige lessen, bekijken we eerst eens wat versie 2 van EuroCC gaat worden.

  1. Start Delphi en open het project euronl02.dpr.
  2. Compileer de toepassing. Delphi start de toepassing in de "omgeving" van de debugger.

    Euronl02 start na de compilatie
  3. Speel even met het programma. Vergelijk dit met de vorige versie, EuroNl01: merk op dat het label voor de start-munteenheid verdwenen is (MuntLabel). Het label met de caption "is gelijk aan" is vervangen door een knop. De knoppen voor de conversies (EuroButton en BEFButton) zijn vervangen door een groep met "RadioButtons" (een RadioGroup).

    Wat je niet ziet wanneer je het programma uitvoert, maar alleen in de "design" modus, is dat het aantal labels voor de resultaten en de namen van de munteenheden gehalveerd is. In elk label tonen we zowel het bedrag als de munteenheid, die we voor dit doel achter elkaar plakten tot één string.

    Wat je wel ziet, is dat de bedragen nu mooi uitgelijnd onder elkaar staan. Dit komt doordat we het lettertype (font) voor deze Labels vervingen door een font met vaste letterafstand en daarbij ook nog de labels rechts uitlijnend maakten.
  4. Stop de applicatie.
    Kies daarna in menu File de opdracht Close All.
  5. Verwijder alle bestanden uit \DelphiLa\EuroNL02 (je originele zip-bestand zit toch nog in \DelphiLa).
  6. Start in Delphi een nieuwe applicatie: New Application.
  7. Sla alvast de bestanden op (zie les 2). Bij Save Unit1 as kies je de directory \DelphiLa\EuroNL02 en als bestandsnaam typ je euroform. In het volgende venster, Save Project1 As, typ je als bestandsnaam euronl02.

 

Even analyseren

een korte analyse1 Euro is gelijk aan 40.3399 BEF (overigens dezelfde koers als de Luxemburgse Franc).

1 Euro is gelijk aan 2.20371 NLG (Nederlandse Gulden).

Bij het klikken op de knop "is gelijk aan" wordt de waarde die in de edit-box staat omgerekend naar Euro. De wijze van berekening hangt af van de radioknop die geselecteerd is.

Daarna wordt de waarde in Euro omgerekend naar de andere valuta en worden de resultaten getoond in labels. Het label voor de munteenheid van waaruit gestart is, mag niet zichtbaar zijn.

Deze conversie moet ook gebeuren na een klik op een van de radioknoppen EN vlak nadat het programma start.

Wanneer het programma start, staat er reeds een startwaarde 100 ingevuld. Tevens moet de allereerste (automatische) conversie starten vanuit Euro naar de andere valuta.

Componenten voor onze applicatie, voor 3 verschillende valuta: 1 edit-box voor het invoeren van gegevens, 1 drukknop, 3 labels voor de resultaten plus munteenheden.

Componenten plaatsen en properties instellen

  1. Plaats de vereiste componenten op de form (die vind je allemaal in de standard pagina van het componentenpalet), zodat je ongeveer het volgende verkrijgt:

    Form1 met de componenten
  2. In de Object Inspector stel je de eigenschappen van de componenten in als volgt:

    Edit1
       Name : InputEdit
       Text: 100

    Button1
       Name : ConvertButton
       Caption : is gelijk aan

    RadioGroup1
       Name : ValutaRadioG
       Caption : verwijder de caption die er nu staat volledig
       ItemIndex : 0

    Label1
       Name : EuroLabel

    Label2
       Name : BEFLabel

    Label3
       Name : NLGLabel
  3. Selecteer de RadioGroup. Klik in de Object Inspector op de property Items. Klik daarna op de knop met de drie puntjes verschijnt:

    De property Items
  4. Typ nu de volgende drie regels in de String list editor, waarna je op OK klikt:

    String list editor
  5. Na wat schuiven met de componenten en wat aanpassingen van hun afmetingen krijg je het volgende:

    Componenten beter geschikt
  6. Selecteer nu op de form de drie labels; dat doe je door SHIFT ingedrukt te houden, waarna je op elke label klikt (een andere methode is: druk op SHIFT en trek met de muis een selectierechthoek rond de drie componenten).

    Nu kan je in de Object Inspector een aantal properties voor de drie labels tegelijk instellen:

Drie labels zijn geselecteerd

Eerste eenvoudige versie van de code

  1. Selecteer de ConvertButton. Klik daarna in de Object Inspector bovenaan op de tab Events en dubbelklik op het witte vakje naast OnClick. In het vakje verschijnt: ConvertButtonClick.

    In de Editor heeft Delphi alvast een skelet voor deze event handler aangemaakt. Vervolledig de event handler als volgt:
    procedure TForm1.ConvertButtonClick(Sender: TObject);
    begin
      ValutaConvert;
    end;
  2. Selecteer de RadioGroup. Maak ook voor zijn OnClick event een event handler aan in de Object Inspector en vul die vervolgens in de code editor aan:
    procedure TForm1.ConvertRadioGClick(Sender: TObject);
    begin
      ValutaConvert;
    end;
    ValutaConvert is de naam van de procedure die het rekenwerk doet en de resultaten toont. Dat is natuurlijk de kracht van een programmeertaal, want anders zouden we die code in beide event handlers moeten herhalen. En in een later stadium zouden we zelfs nog een derde en een vierde keer hetzelfde moeten schrijven (in de event handler voor het drukken op de ENTER toets na het invullen van het bedrag, en dan nog eens in een event handler die de allereerste conversie automatisch uitvoert).
  3. Eerst geven we aan dat er een procedure met de naam ValutaConvert in het programma gebruikt zal worden; die declaration komt in het eerste gedeelte van de code, in de interface sectie. Plaats de cursor in de editor op het einde van de regel met:
    { Private declarations }

    Druk op ENTER om een nieuwe regel aan te maken. Vervolledig met wat hieronder in het rood staat:
    private
      { Private declarations }
       procedure ValutaConvert;
  4. De code voor onze procedure komt in de implementation sectie. Plaats de cursor na de punt-komma die de laatste event handler afsluit, dus na de end;
    Laat een blanco regel en typ dan het volgende:
    procedureTForm1.ValutaConvert;
    var
      StartBedrag, Euro: real;
      S1: string;
    begin
      StartBedrag := StrToFloat(InputEdit.Text);
      Euro := StartBedrag;
      S1 := FormatFloat('0.00', Euro);
      EuroLabel.Caption := S1 + ' Euro';
    end;
    Natuurlijk is dit maar een klein gedeelte van het programma, want we houden nog geen rekening met de radioknoppen en we maken geen enkele conversie. Maar het is een goede gewoonte regelmatig je programma te testen.
  5. Compileer het programma. Klik op de knop ConvertButton. Typ iets in de Edit-box en klik op een van de radioknoppen.
    Stop het programma.

Beslissingen nemen: IF... THEN... ELSE...

Welke eerste beslissing moet het programma nemen?

Zo'n beslissing wordt genomen met if:
if een_bepaalde_voorwaarde then een_instructie;

Na then mag ook een blok met instructies komen, een aantal instructies die staan tussen de gereserveerde woorden begin en end. Maar dat hebben we in ons eenvoudige programmaatje nog niet nodig.

Rekening houdend met het feit dat de eerste radiobutton het nummer 0 draagt, zouden we dus de regel

Euro := StartBedrag;

kunnen vervangen door het volgende:

if ValutaRadioG.ItemIndex = 0 then 
  Euro := StartBedrag;
if ValutaRadioG.ItemIndex = 1 then
  Euro := StartBedrag / 40.3399;
if ValutaRadioG.ItemIndex = 2 then
  Euro := StartBedrag / 2.20371;

Met if... then... else... wordt het eleganter en sneller (dat "sneller" zal je hier natuurlijk niet merken, maar bij uitgebreidere programma's is dat wel belangrijk). We krijgen dan iets als volgt:

if ValutaRadioG.ItemIndex = 0 then 
  Euro := StartBedrag
else
  bereken_de_waarde_in_euro;

Merk op dat er geen puntkomma mag staan na de instructie die een else voorafgaat. Dit is zo omdat de volledige if...then...else als één instructie gezien wordt door de compiler.

Ook bereken_de_waarde_in_euro valt uiteen in twee delen, dus hebben we nog een if...then...else nodig, die in de eerste zal "genest" worden:

if ValutaRadioG.ItemIndex = 0 then
  Euro := StartBedrag
else
  if ValutaRadioG.ItemIndex = 1 then
    Euro := StartBedrag / 40.3399
  else
    Euro := StartBedrag / 2.20371;

De tweede beslissing die het programma moet nemen, komt na de berekeningen en het tonen van de resultaten:

Dat zouden we ook met if...then...else kunnen oplossen. Elke zichzelf respecterende programmeur gruwt echter bij die drie maal herhaalde "en de twee andere labels zichtbaar". Eerste oplossing: maak alle labels zichtbaar en maak er daarna eentje onzichtbaar via een if...then...else constructie.

Maar het kan veel eenvoudiger, helemaal zonder "if"! Want om een component zichtbaar of onzichtbaar te maken, ken je aan zijn property "visible" een logische ("boolean") waarde toe, TRUE of FALSE. Of een uitdrukking die een logische waarde oplevert. Wat dacht je van volgend stukje pseudo code:

EuroLabel.Visible := knop_0_is_niet_geselecteerd;
BEFLabel.Visible  := knop_1_is_niet_geselecteerd;
NLGLabel.Visible  := knop_2_is_niet_geselecteerd;

Let's code!

  1. Vervolledig de procedure ValutaConvert als volgt (ik voegde al meteen wat commentaar toe, dat doe je natuurlijk naar eigen smaak):
    { Conversie naar Euro van de waarde in InputEdit,
      afhankelijk van de radiobutton die in ValutaRadioG
      geselecteerd is. Daarna conversie van Euro naar
      andere valuta                                     }
    procedure TForm1.ValutaConvert;
    var
      StartBedrag, Euro, BEF, NLG: real;
      S1, S2, S3: string;
    begin
      // Converteer tekst van de EDIT naar een numerieke waarde
      StartBedrag := StrToFloat(InputEdit.Text);
      // Bereken bedrag in Euro
      if ValutaRadioG.ItemIndex = 0 then
        Euro := StartBedrag
      else
        if ValutaRadioG.ItemIndex = 1 then
          Euro := StartBedrag / 40.3399
       else
          Euro := StartBedrag / 2.20371;
      //Converteer naar andere valuta
      BEF := Euro * 40.3399;
      NLG := Euro * 2.20371;
      { Converteer de floating point getallen naar string-formaat.
        '0.00' is de "Format String" en betekent:
        'geef het resultaat met 2 cijfers na de komma'            }
      S1 := FormatFloat('0.00', Euro);
      S2 := FormatFloat('0.00', BEF);
      S3 := FormatFloat('0.00', NLG);
      // Plaats de strings in de CAPTION van de LABELs
      EuroLabel.Caption := S1 + ' Euro   ';
      BEFLabel.Caption  := S2 + ' BEF/LUF';
      NLGLabel.Caption  := S3 + ' NLG    ';
      { Plaats de strings in de CAPTION van de LABELs
        en laat volgen door de munteenheid. Vul aan
        met spaties, zodat alles even lang wordt.     }
      EuroLabel.Visible := (ValutaRadioG.ItemIndex <> 0);
      BEFLabel.Visible := (ValutaRadioG.ItemIndex <> 1);
      NLGLabel.Visible := (ValutaRadioG.ItemIndex <> 2);
    end;
    Nu wordt duidelijk waarom ik het lettertype Courier New voorstelde voor de labels: alle tekens zijn hierbij even breed, dus ook de spaties. En aangezien we de labels rechts-uitlijnend maakten, komt alles mooi onder elkaar.

    Compileer je programma en test alles goed uit.
  2. We voegen een event handler toe die de eerste automatische conversie afhandelt. Dat gebeurt best op het ogenblik dat Form1 "aangemaakt" wordt. Zoals alle andere componenten zijn forms immers ook objecten, die automatisch voor ons aangemaakt worden op het ogenblik dat het programma start.

    Selecteer de form zelf, ofwel in de listbox van de Object Inspector, ofwel door ergens op een lege plek van de form te klikken. Dubbelklik in de Object Inspector in het vakje naast OnCreate, en vervolledig in de code-editor de event handler:
    procedure TForm1.FormCreate(Sender: TObject);
    begin
      ValutaConvert;
    end;
    Zo eenvoudig is dat ! Test meteen of het werkt.
  3. Tot slot van deze les geven we de finishing touch aan deze versie van EuroCC. Ook een druk op de ENTER toets zal de conversie laten uitvoeren. Tenminste, wanneer de cursor in de Edit-component staat. In Windows-jargon: wanneer die de focus heeft.

    Selecteer InputEdit en dubbelklik in de Object Inspector op het vakje naast OnKeyPress. Vervolledig de event handler als volgt:
    procedure TForm1.InputEditKeyPress(Sender: TObject; var Key: Char);
    begin
      if Key = #13 then ValutaConvert;
    end;
    De variabele Key die we van Delphi meekrijgen (in de hoofding van de procedure), bevat de "letter" van de toets die gedrukt is. Letter is character, vandaar dat Delphi schreef:
    var Key: Char

    Met # zetten we een decimaal getal om in het corresponderende teken. Dus #13 betekent: het teken met code 13, het "character" dat Windows ontvangt wanneer je op ENTER drukt.

    Testen maar!
Tot volgende keer bij les 5!

[ TOP ]   [ HOME ]  

Wat is een string?
Een string is een serie tekens. Een string kan je tonen door ze te plaatsen in de Caption van een component (b.v. een Form, Label, Button) of de Text van een component (b.v. een Edit).
In de broncode plaats je de inhoud van een string tussen enkele aanhalingstekens.
Op strings kan je allerlei bewerkingen loslaten, bijvoorbeeld: twee strings samenvoegen tot een nieuwe string:
S2 := 'ABC' + 'DEF';

© Copyright 1999 - 2007 
DelphiLand