Windows GUI applicatie met Borland C++ Builder 6.

© Harry Broeders.

Deze pagina is bestemd voor studenten van de Haagse Hogeschool - Academie voor Technology, Innovation & Society Delft.

Met behulp van C++ Builder kun je twee soorten windows applicaties ontwikkelen:

• GUI (Graphical User Interface) applications.
  Dit zijn, zoals de naam al zegt, applicaties met een grafische gebruikers interface (menu, buttons, toolbar, statusbar, dialog boxes enz.).
• Console applications.
  Console applicaties zijn windows programma's die geen gebruik maken van een grafische gebruikers interface en die draaien in een console window.

Tot nu toe hebben we bij dit practicum console applicaties gemaakt. Ik zal jullie op deze pagina laten zien hoe eenvoudig het is om een Windows applicatie (inclusief menu, knoppen enz) in elkaar te zetten met behulp van Borland C++ Builder 6.

Inhoud.

• Het Windows operating systeem.
• Je eerste windows GUI programma met behulp van C++ Builder.
• Reageren op de muis.
• Toevoegen van menubalk, knoppenbalk en statusbalk.
• Toevoegen van dialog schermen.
• Tips en Trucs.
• Meer informatie.

Het Windows operating systeem.

Voordat we kunnen beginnen moet ik jullie eerst enkele dingen vertellen over het Windows OS (operating systeem). Zoals je wel weet is het operating systeem verantwoordelijk voor alle beheerszaken in de PC. Het operating systeem is onder andere verantwoordelijk voor:

• Procesbeheer:
  • Starten en afbreken van applicaties.
  • "Tegelijkertijd" laten draaien van verschillende applicaties.
• Geheugenbeheer:
  • Toewijzen van geheugen aan de verschillende actieve applicaties.
  • Beheren van het "virtuele" geheugen.
• Filebeheer:
  • Beheer van de harde schijf en andere schijven.
• Input/Output-beheer:
  • Aansturen van het beeldscherm.
  • Communicatie met een modem.
  • Inlezen van de muis
  • Inlezen van het toetsenbord.
  • Aansturen van de netwerkkaart.

Een applicatie kan (moet) dus voor al deze zaken gebruik maken van het operating systeem. De vraag is nu hoe communiceert jouw Windows-applicatie met het Windows OS. Dit gaat door middel van functie-aanroepen. Alle functies die aan te roepen zijn in het Windows operating systeem vormen een zogenaamde API (Application Programmers Interface). Als we gebruik maken van de zogenaamde win32 API dan draaien onze applicaties op Windows95, Windows98, Windows2000 en WindowsXP. Het aantal functies in deze API is heel groot en het gebruik van deze API is zeker niet eenvoudig. Behalve dat onze applicatie met het Windows OS moet communiceren moet het Windows OS ook events (gebeurtenissen) aan onze applicatie kunnen doorgeven. Denk daarbij aan dingen zoals:

• De gebruiker heeft de muis op een window van de applicatie geplaatst.
• De gebruiker heeft een bepaalde menu optie van de applicatie geselecteerd.
• De gebruiker heeft iets ingetypt in een window van de applicatie.
• Via het netwerk is een TCP/IP message bestemd voor de applicatie ontvangen.
• enz.

Als z'n event optreedt dan stuurt het Windows OS een message naar het Window waarop dit event betrekking heeft. Een applicatie kan bestaan uit meerdere windows. Het OS ziet een knop of een scrollbar overigens ook als een apart "window". Elk window moet daarom bij het opstarten het adres van een zogenaamde messagehandler opgeven aan het OS. Als er dan een event optreedt dan zal het Windows OS de messagehandler van het betreffende window aanroepen. Als argument geeft Windows dan een message datastructuur mee. Deze message bevat het message-id en enkele parameters. De messagehandler van een window bestaat dus uit een groot switch statement waarin bepaald wordt welke message het OS naar dit window stuurt en welke actie het window daarop moet ondernemen.

Samengevat kunnen we dus zeggen:

• Een applicatie kan een opdracht of boodschap aan het Windows OS doorgeven door een API functie aan te roepen.
• Het Windows OS geeft events door aan een applicatie door de messagehandler van een window van deze applicatie aan te roepen met een message als argument.

De meeste windows applicaties zullen nadat ze opgestart zijn niets anders doen dan wachten op messages van het OS en afhankelijk van deze message's bepaalde acties uitvoeren. Omdat de events die optreden het gedrag van z'n programma bepalen noemt men zulke programma's event-driven.

Het Windows operating systeem heeft dus geen object georiënteerde interface maar een procedurele interface. Het ligt natuurlijk voor de hand om een groep met classes te ontwikkelen die de complexiteit van de win32 API voor ons verbergen. Een verzameling bij elkaar behorende classes die gebruikt kunnen worden om bepaalde applicaties te ontwikkelen (in dit geval GUI = Graphical User Interface applicaties) wordt een framework genoemd. Er zijn meerdere bekende frameworks voor het ontwikkelen van Windows applicaties:

• MFC Microsoft Foundation Library. Dit framework is door de makers van het Windows OS gemaakt en dus erg populair. De meeste classes in dit framework beginnen met de letter C b.v. CWindow.
• VCL Visual Component Library van Borland. Deze library is ontwikkeld in Object Pascal voor Delphi en later omgezet naar C++ voor C++ Builder. De meeste classes in dit framework beginnen met de letter T b.v. TForm. (De T komt van Turbo een voorvoegsel die veel door Borland gebruikt is (b.v. Turbo-Pascal enz.).)

Behalve de frameworks bieden zowel Microsoft als Borland ontwikkeltools die het gebruik van deze frameworks aanzienlijk vereenvoudigen. Microsoft noemt deze hulptools Wizards. Zo heeft de Microsoft C++ ontwikkelomgeving een ClassWizard en een ApplicationWizard. De C++ Builder ontwikkelomgeving heeft vergelijkbare tools.

Je eerste windows GUI programma met behulp van C++ Builder.

Als je een applicatie ontwikkelt met behulp van het VCL framework maak je (bijna zonder dat je er erg in hebt) gebruik van overerving. Om een GUI applicatie te kunnen maken moet je het volgende doen:

• Start C++ Builder. Er wordt nu automatisch een project aangemaakt voor een GUI applicatie met één (leeg) window.
• Kies File, Save Project As...
• Blader naar de directory waarin je het programma wilt opslaan. B.v. H:\cpp\winapp1. Kies (eventueel) een andere naam voor de source file (.cpp) en de project file (.bpr). Pas op:
  • Het directorypath mag geen spaties of + tekens bevatten!
  • Je moet het project (default naam Project1) en de source file (default naam Unit1) nooit onder dezelfde naam saven (er wordt namelijk automatisch een cpp file genaamd ProjectNaam.cpp aangemaakt en als de het project dezelfde naam krijgt als de source file dan wordt de source file overschreven).
• Je kunt het programma nu compileren en starten door op F9 te drukken. Het programma bestaat uit een leeg window getiteld Form1:
  
  
  
  
• Sluit het window Form1.
• Deze door Borland Builder aangemaakte "lege" applicatie bestaat uit één class. Als je op het tabblad Unit.h klikt verschijnt de class declaratie van TForm1 in de editor.
  
  
  
  De keywords __published en __fastcall zijn specifieke Borland extensies en kun je negeren. Je ziet dat deze class is afgeleid van de class TForm. De class TForm heeft heel veel properties en memberfuncties die TForm1 dus allemaal overerft. Properties zijn een specifieke Borland extensie van C++. Op dit moment kun je net doen of properties membervariabelen zijn. Deze properties kun je eenvoudig aanpassen in de Object Inspector.
  
  
  
  
• Pas de volgende properties aan:
  • Zet Caption op Een window met een kruis. Deze tekst komt in de titelbalk van het Window.
  • Zet ClientHeight op 250. Dit is de hoogte van de binnenkant van het window (zonder de titelbalk en randen).
  • Zet ClientWidth op 250. Dit is de hoogte van de binnenkant van het window (zonder de titelbalk en randen).
  • Zet Color op clWindow.
• Compileer en run het programma (F9). Het window ziet er nu als volgt uit:
  
  
  
  
• Als het window getekend moet worden stuurt het OS een message (WM_PAINT) naar het window. We kunnen reageren op dit event door met behulp van de Object Inspector een eventhandler te definiëren. Klik op de tab Events en selecteer de regel OnPaint en dubbelklik op het invoerveld. De memberfunctie FormPaint wordt nu automatisch aan de class Form1 toegevoegd en de code voor deze memberfunctie wordt in de editor geopend.
  
  

• Voer in de memberfunctie TForm1::FormPaint de volgende code in:

     Canvas->Pen->Color=clGray;
     Canvas->Pen->Width=2;
     Canvas->MoveTo(0, 0);
     Canvas->LineTo(ClientWidth, ClientHeight);
     Canvas->MoveTo(0, ClientHeight);
     Canvas->LineTo(ClientWidth, 0);
     Canvas->Font->Name="Arial";
     Canvas->Font->Size=20;
     Canvas->Font->Color=clBlue;
     Canvas->TextOut(10, 10, "Hallo!");
  

• Compileer en run het programma (F9). Het window ziet er nu als volgt uit:
  
  
  
  
• De class TForm1 is afgeleid van TForm en deze class bevat een groot aantal properties en memberfuncties (methods). Zet in de editor de cursor op het woord TForm1 en druk op F1 om uit te vinden welke proporties en memberfuncties beschikbaar zijn. Let op je kunt kiezen uit twee help pagina's voor TForm.
  
  
  
  Je moet voor de tweede kiezen! Borland Builder ondersteund namelijk twee class libraries voor het bouwen van Windows applicaties:
  • VCL Visual Component Library (deze library gebruiken we in dit voorbeeld).
  • CLX Component Library for Cross-Platform. Een class library die ontworpen is om zowel op Windows als op Linux systemen gebruikt te kunnen worden.

  
  
  
  Als je op Hierarchy klikt zie je dat een TForm is afgeleid van TCustomForm die is afgeleid van TScrollingWinControl die is afgeleid van TWinControl die is afgeleid van TControl die is afgeleid van TComponent die is afgeleid van TPersistent die (tot slot) is afgeleid van TObject. Ben je er nog?
  Als je op Properties klikt zie je de beschikbare properties. Als je een stukje naar beneden scrolt vindt je de properties Caption en Color (overgeërfd van TControl) die we al eerder met behulp van de Object Inspector hadden aangepast.
  Als je op methods klikt zie je de memberfuncties die je kunt aanroepen.
  Als je op events klikt zie je welke events (windows messages) deze class kan afvangen. Uiteraard staat het OnPaint event dat we hebben afgevangen ook in deze lijst.

• In de lijst met properties kun je vinden dat de variabele (property) Canvas die we in de memberfunctie TForm1::FormPaint hebben gebruikt een pointer naar een object van het type TCanvas is. De eigenschappen van deze class kun je in de helpfile vinden:
  
  
  
  Zoals je in deze helpfile kunt lezen is een TCanvas een ding waarop je kunt schrijven of tekenen. De class TCanvas bevat veel properties en memberfuncties die je kunt gebruiken om te tekenen/schrijven. Laten we de eerste 4 regels van de memberfunctie TForm1::FormPaint nog eens wat beter bekijken.

      Canvas->Pen->Color=clGray;
      Canvas->Pen->Width=2;
      Canvas->MoveTo(0, 0);
      Canvas->LineTo(ClientWidth, ClientHeight);
  

  In de eerste regel heb ik de property Pen (een pointer naar een TPen) gebruikt. Dit is een class uit VCL die een pen voorstelt waarmee we op een TCanvas kunnen tekenen. Zoals je in de helpfile van TPen kunt vinden heeft een TPen een property Color die de kleur van de pen bepaald (in dit geval dus clGray). clGray is een constante van het type TColor.
  In de tweede regel heb ik de property Width van de Pen (de dikte van de pen) op 2 pixels gezet.
  In de derde regel stuur ik de pen met behulp van de memberfunctie (method) MoveTo van Canvas naar de positie 0,0 in het window (dat is de linker bovenhoek).
  In de vierde regel gebruik ik de memberfunctie LineTo van Canvas om met de pen een lijn te tekenen naar de positie ClientWidth,ClientHeight in het window. ClientWidth en ClientHeight zijn properties (een soort member variabelen) van TForm1 (overgeërfd van TForm) die respectievelijk de breedte en de hoogte van de binnenkant van het window aangeven. De positie ClientWidth,ClientHeight komt dus overeen met de rechter benedenhoek van het window.
  Deze 4 regels tekenen dus een grijze lijn van 2 pixels breed van linksboven naar rechtsonder in het window.

• 
  

  Opdracht A. Probeer nu zelf met behulp van de helpfiles van C++ Builder de rest van de FormPaint memberfunctie te verklaren.

• Aan het window kun je een eigen icoontje (plaatje linksboven in een window) koppelen. Dit kun je als volgt doen:
  • Kies Tools, Image Editor. Als je deze tool niet in het Tools menu kunt vinden dan kun je ook gebruik maken van het Paint programma.
  • Kies File, New, Icon File.
  • Kies 32x32 en 16 color.
  • Teken een spetterend icon.
  • Save deze icon (in dezelfde directory als het project) en sluit de Image Editor.
  • Zoek in de Object Inspector de property Icon en klik op het knopje dat verschijnt zodra je deze property selecteert.
    
  • Druk op de knop Load en selecteer het zo juist aangemaakte .ico bestand.
  • Run de applicatie om je icoontje te bewonderen.
• 
  

  Opdracht B. Pas het programma nu zodanig aan dat het kruis met een groene stippellijn die slechts 1 pixel dik is wordt getekend. Zorg er tevens voor dat de tekst veel groter en in een rode kleur wordt weergegeven.

Reageren op de muis.

Laten we het programma nu eens zodanig aanpassen dat dit programma reageert op bepaalde events die veroorzaakt worden door de gebruiker. Bijvoorbeeld op een muisklik. We willen het volgende:

• Als op de rechtermuisknop wordt gedrukt dan moet een rood kruis getekend worden.
• Als op de linkermuisknop wordt gedrukt dan moet een groen kruis getekend worden.

Om dit mogelijk te maken moeten we een eventhandler schrijven de juiste acties uitvoert als op een muisknop wordt gedrukt:

• In de class TForm1 moet een private variabele van het type TColor worden opgenomen genaamd penKleur. Deze variabele wordt in de constructor op clGray (grijs) gezet en in de FormPaint memberfunctie gebruikt om de keur van de pen te kiezen.
  • TForm1 ziet er nu als volgt uit:

    class TForm1 : public TForm
    {
    __published:
       void __fastcall FormPaint(TObject *Sender);
    private:
       TColor penKleur; 
    public:
       __fastcall TForm1(TComponent* Owner);
    };
    

  • De constructor wordt nu:

    __fastcall TForm1::TForm1(TComponent* Owner)
       : TForm(Owner), penKleur(clGray) 
    {
    }
    

  • Het begin van FormPaint wordt nu:

    void __fastcall TForm1::FormPaint(TObject *Sender)
    {
       Canvas->Pen->Color=penKleur;	
    

• Met behulp van de Object Inspector kun je het event OnMouseDown afvangen. De benodigde code ziet er als volgt uit:

  void __fastcall TForm1::FormMouseDown(TObject *Sender, TMouseButton Button,
        TShiftState Shift, int X, int Y)
  {
     switch (Button) {
        case mbRight: penKleur=clRed;   break;
        case mbLeft:  penKleur=clGreen; break;
     }
     Invalidate();
  }
  

  De memberfunctie die het OnMouseDown event afhandeld TForm1::FormMouseDown heeft diverse parameters. De parameter Button geeft aan welke muisknop (links, midden of rechts) is ingedrukt. De parameter Shift geeft de toestand van de shift, ctrl en alt toetsen op het moment dat op de muis werd gedrukt. De parameters X en Y bevatten de positie in het window waar de muiscursor zich bevond toen op de muisknop werd gedrukt. In dit programma maken we alleen gebruik van de parameters Button. In de FormMouseDown memberfunctie kennen we de gewenste kleur toe aan de variabele penKleur en roepen we de memberfunctie Invalidate van de baseclass TWinControl aan. Deze aanroep zal een win32 API functie aanroepen waarmee de applicatie aan het Windows OS vraagt of die het window opnieuw wil tekenen. Als het Windows OS hier tijd voor heeft dan stuurt hij dit window de message WM_PAINT. Deze message zal het aanroepen van de memberfunctie FormPaint tot gevolg hebben waarin het window opnieuw wordt getekend. We kunnen ook zelf meteen de memberfunctie FormPaint aanroepen vanuit de FormMouseDown functie. Als we Invalidate aanroepen wordt het window echter eerst gewist en dat gebeurt niet als we rechtstreeks FormPaint aanroepen.

• 
  

  Opdracht C. Als je de grootte van het window aanpast door aan de randen van het window te trekken dan wordt het kruis niet opnieuw getekend. Dit geeft een slordig beeld. Als een window van grootte veranderd stuurt het windows OS de message WM_SIZE (event OnResize). Zorg er voor dat het window netjes opnieuw wordt getekend als de grootte wijzigt.

• 
  

  Opdracht D. Pas het programma aan zodat de kleur van het kruis ook met het toetsenbord aangepast kan worden. Als je op een G drukt moet de kleur groen worden, als je op een R drukt rood en als je op een B drukt blauw. Om dit voor elkaar te krijgen moet je de windows message WM_CHAR (event OnKeyPress) afvangen. Maak gebruik van de helpfiles om de benodigde informatie te vinden.

Toevoegen van menubalk, knoppenbalk en statusbalk.

VCL bevat (zoals de naam al aangeeft) een groot aantal kant en klare componenten. Laten we eens kijken hoe je deze componenten kunt gebruiken om je programma van een menubalk, knoppenbalk en een statusbalk te voorzien. De menubalk en de knoppenbalk kunnen we gebruiken om commando's naar het programma te sturen. De statusbalk gebruiken we om informatie (hints) over deze commando's te laten zien.

Het toevoegen van de statusbar gaat als volgt:

• Dubbelklik op de StatusBar component op de Win32 tab van het component window.
  
  
  
  
• Je ziet dat er aan de onderkant van het applicatie window een statusbar is verschenen.
  
  
  
  
• Zet met behulp van de Object Inspector de properties AutoHint en ParentShowHint op true. Dit zorgt ervoor dat de statusbar de hints van de menubalk en knoppenbalk die we zo meteen gaan toevoegen zal weergeven.

Bepaalde commando's zullen zowel in de knoppenbalk als in de menubalk voorkomen. Om deze reden bied C++ Builder de mogelijkheid om commando's te definiëren in een ActionList. Later kun je deze commando's dan bij het definiëren van menu-items en knoppen gebruiken.

Hieronder volgt een overzicht van de commando's die we willen toevoegen:

Commando	Menu	In knoppenbalk?	Beschrijving
Afsluiten	-	Nee	Sluit de applicatie.
Blauw	Kleur	Ja	Kleur het kruis blauw.
Groen	Kleur	Ja	Kleur het kruis groen.
Rood	Kleur	Ja	Kleur het kruis rood.

Voordat we deze commando's gaan toevoegen gaan we eerst de plaatjes voor de knoppen tekenen:

• Kies Tools, Image Editor.
• Kies File, New, Bitmap File.
• Zet de Width en Height op 16 en selecteer VGA (16 colors).
• Teken een plaatje voor bij het commando (de knop) blauw. Bijvoorbeeld:
• Kies File, Save en sla de file op in hetzelfde directory als het project onder de naam blauw.bmp.
• Maak op dezelfde manier de files groen.bmp en rood.bmp

Deze plaatjes moet je opslaan in een zogenaamde ImageList component. Dit gaat als volgt:

• Dubbelklik op de ImageList component op de Win32 tab van het component window.
  
  
  
  
• Je ziet dat er in het applicatie window een icoontje is verschenen. Dit icoontje is bij het uitvoeren van het programma niet zichtbaar maar kan bij het ontwikkelen van het programma gebruikt worden om de ImageList te benaderen.
  
  
  
  
• De plaatjes voor de commando's kunnen nu als volgt aan de ImageList worden toegevoegd:
  • Dubbelklik op het icoontje van de ImageList. Er wordt nu een nieuwe tool de zogenaamde ImageList Editor geopend.
  • Druk op de Add... knop en selecteer het bestand blauw.bmp.
  • Zet het invoerveld Transparent Color op clWhite.
  • Voeg op dezelfde manier de files groen.bmp en rood.bmp toe (vergeet niet steeds de Transparent Color op clWhite te zetten).
    
    

De commando's kun je nu als volgt invoegen:

• Dubbelklik op de ActionList component op de Standard tab van het component window.
  
  
  
  
• Je ziet dat er in het applicatie window een nieuw icoontje is verschenen. (Het icoontje van de ActionList staat half over het icoontje van de ImageList maar je kunt het met je muis eenvoudig een stukje verplaatsen.) Dit icoontje is bij het uitvoeren van het programma niet zichtbaar maar kan bij het ontwikkelen van het programma gebruikt worden om de ActionList te benaderen.
  
  
  
  
• De commando's kunnen nu als volgt aan de ActionList worden toegevoegd:
  • Dubbelklik op het icoontje van de ActionList. Er wordt nu een nieuwe tool de zogenaamde ActionList Editor geopend.
  • Klik op de knop New Action .
  • Gebruik de Object Inspector om de volgende properties te wijzigen:
    • Zet Caption op Af&sluiten. Een & voor een letter zorgt ervoor dat deze letter in het menu onderstreept wordt als de ALT toets wordt ingedrukt. Je kunt dan die letter samen met de ALT toets indrukken om de betreffende menuoptie te selecteren.
    • Zet Hint op Sluit de applicatie.
    • Zet Name op Afsluiten.
  • Klik op de Events tab van de Object Inspector en dubbelklik op de OnExecute event. De memberfunctie TForm1::AfsluitenExecute wordt nu aangemaakt en in de editor geopend. Vul hier de volgende code in:

       Close();
    

    Als het commando Afsluiten wordt gekozen wordt nu dus de memberfunctie Close van Form1 (overgeërfd van TCustomForm) aangeroepen. Deze memberfunctie zorgt ervoor dat het window wordt gesloten.

  • Ga weer naar de ActionList Editor.
  • Klik op de knop New Action .
  • Gebruik de Object Inspector om de volgende properties te wijzigen (klik eerst op de tab Properties):
    • Zet Caption op &Blauw.
    • Zet Category op Kleur.
    • Zet Hint op Kleur het kruis blauw.
    • Zet ImageIndex op 0. Dit koppelt plaatje nummer 0 uit de ImageList aan dit commando.
    • Zet Name op Blauw.
  • Klik op de Events tab van de Object Inspector en dubbelklik op de OnExecute event. De memberfunctie TForm1::BlauwExecute wordt nu aangemaakt en in de editor geopend. Vul hier de volgende code in:

       penKleur=clBlue;
       Invalidate();
    

    Als het commando Blauw wordt gekozen wordt nu dus de penKleur op clBlue gezet en wordt het window opnieuw getekend.

  • Voeg nu op dezelfde manier de commando's Groen en Rood toe.
  • Door All Actions te selecteren in de ActionList Editor kun je alle gedefinieerde commando's zien.
    
    

We kunnen nu de menubalk als volgt toevoegen:

• Dubbelklik op de MainMenu component op de Standard tab van het component window.
  
  
  
  
• Je ziet dat er in het applicatie window een nieuw icoontje is verschenen. (Het icoontje van het MainMenu staat half over het icoontje van de ImageList maar je kunt het met je muis eenvoudig een stukje verplaatsen.) Dit icoontje is bij het uitvoeren van het programma niet zichtbaar maar kan bij het ontwikkelen van het programma gebruikt worden om het MainMenu te benaderen.
  
  
  
  
• De commando's kunnen nu als volgt aan het Mainmenu worden toegevoegd:
  • Dubbelklik op het icoontje van het MainMenu. Er wordt nu een nieuwe tool de zogenaamde Menu Designer geopend.
  • Zet met behulp van de Object Inspector de property Action op Afsluiten.
  • Klik in de Menu Designer op het vakje naast Afsluiten.
  • Zet met behulp van de Object Inspector de property Caption op &Kleur.
  • Zet de property hint op Kies de kleur van het kruis.
  • Klik in de Menu Designer onder het vakje Kleur.
  • Zet de property Action op Blauw.
  • Klik in de Menu Designer onder het vakje Blauw.
  • Zet de property Action op Groen.
  • Klik in de Menu Designer onder het vakje Groen.
  • Zet de property Action op Rood.
    
    
    
    
  • Sluit de Menu Designer.
  • Je ziet dat het menu in het applicatie window is toegevoegd:
    
    
    
    
  • Als je op een commando in het menu klikt dan wordt de bijbehorende code in de editor geopend! Dit is erg handig als je de bij een commando behorende code wilt wijzigen.

We kunnen nu de knoppenbalk als volgt toevoegen:

• Dubbelklik op de ToolBar component op de Win32 tab van het component window.
  
  
  
  
• Je ziet dat er in het applicatie window een (lege) toolbar is verschenen.
  
  
  
  
• Gebruik de Object Inspector om de volgende properties te wijzigen :
  • Zet Color op clBtnFace.
  • Zet Flat op true. Dit zorgt ervoor dat de knop pas verschijnt als je er met de muis overheen gaat (ziet er moderner uit).
  • Zet Images op ImageList1.
• De commando's kunnen nu als volgt aan het ToolBar worden toegevoegd:
  • Klik in de ToolBar op de rechter muisknop en kies New Button. De knop voor het commando Blauw verschijnt.
  • Zet met behulp van de Object Inspector de property Action op Blauw.
  • Voeg op dezelfde manier de knoppen voor de commando's Groen en Rood toe.
    
    
    
    
  • Als je op een knop in de knoppenbalk klikt dan wordt de code van het bijbehorende commando in de editor geopend! Dit is erg handig als je de bij een commando behorende code wilt wijzigen.
• Compileer en test het programma (F9).
  
  
  
  
• De knoppen en het menu werken prima. De hints worden netjes in de statusbalk weergegeven. Je kunt ook hints tevoorschijn laten komen als je met de muis over een knop beweegt. Zet met de Property Inspector voor het object TForm1 de property ShowHint op true.

Helaas staan de knoppenbalk en de statusbalk over het kruis heen getekend. Dit kunnen we oplossen door het kruis niet rechtstreeks op de TForm te tekenen maar gebruik te maken van de PaintBox component:

• Dubbelklik op de PaintBox component op de System tab van het component window.
  
  
  
  
• Je ziet dat er in het applicatie window een paintbox is verschenen.
  
  
  
  
• Gebruik de Object Inspector om de volgende properties te wijzigen :
  • Zet Align op alClient. Dit zorgt ervoor dat de PaintBox alle (nog vrije) ruimte in de TForm1 opvult.
  • Selecteer nu in de Object Inspector het object Form1::TForm1 en zet ClientHeight op 298.
• Klik in de PaintBox en gebruik de Object Inspector om de event OnPaint af te vangen.
• Vul in de memberfunctie TForm1::PaintBox1Paint de volgende code in:

     PaintBox1->Canvas->Pen->Color=penKleur;
     PaintBox1->Canvas->Pen->Width=2;
     PaintBox1->Canvas->MoveTo(0, 0);
     PaintBox1->Canvas->LineTo(PaintBox1->ClientWidth, PaintBox1->ClientHeight);
     PaintBox1->Canvas->MoveTo(0, PaintBox1->ClientHeight);
     PaintBox1->Canvas->LineTo(PaintBox1->ClientWidth, 0);
     PaintBox1->Canvas->Font->Name="Arial";
     PaintBox1->Canvas->Font->Size=20;
     PaintBox1->Canvas->Font->Color=clBlue;
     PaintBox1->Canvas->TextOut(10, 10, "Hallo!");
  

• Verwijder de memberfunctie TForm1::FormPaint (ook uit de class declaratie in Unit1.h).
• Klik in de PaintBox en gebruik de Object Inspector om de event OnMouseDown af te vangen.
• Vul in de memberfunctie TForm1::PaintBox1MouseDown de volgende code in:

     switch (Button) {
        case mbRight: RoodExecute(this); break;
        case mbLeft: GroenExecute(this); break;
     }
  

• Verwijder de memberfunctie TForm1::FormMouseDown (ook uit de class declaratie in Unit1.h).
• Om helemaal consequent te zijn moet de code van de memberfunctie TForm1::FormKeyPress gewijzigd worden in:

     switch (Key) {
        case 'R':
        case 'r': RoodExecute(this);  break;
        case 'G':
        case 'g': GroenExecute(this); break;
        case 'B':
        case 'b': BlauwExecute(this); break;
     }
  

• Compileer en test het programma (F9):
  
  
  

Het aanpassen van de kleur door op de muisknoppen te klikken is nu een beetje overbodig.

• Verwijder de memberfunctie TForm1::PaintBox1MouseDown.
• 
  

  Opdracht E. Breidt het programma uit met een zogenaamd "context menu" (een popup menu dat verschijnt als je op de rechtermuisknop drukt) waarmee je de kleur van het kruis kunt kiezen. Dit kun je doen door een PopupMenu component (Standard tab) aan TForm1 toe te voegen. Je moet ook de property PopupMenu van Form1 vullen met het zojuist aangemaakte PopupMenu1 (te selecteren m.b.v. van het knopje).

Toevoegen van dialog schermen.

Windows kent een aantal zogenaamde "common dialogs". Dit zijn standaard in Windows beschikbare dialogs. Laten we ons programma eens uitbreiden met de standaard dialog om een kleur te kiezen.

• Dubbelklik op de ColorDialog component op de Dialogs tab van het component window.
  
  
  
  
• Je ziet dat er in het applicatie window een nieuw icoontje is verschenen. (Met de muis kun je dit eenvoudig een stukje verplaatsen.) Dit icoontje is bij het uitvoeren van het programma niet zichtbaar maar kan bij het ontwikkelen van het programma gebruikt worden om de ColorDialog te benaderen.
  
  
  
  
• Klik op het ActionList icoontje en voeg het commando Kiezen toe. (Denk aan het invullen van alle relevante properties.)
• Vang de OnExecute event van dit commando af en voer de volgende code in voor de memberfunctie TFom1::KiezenExecute:

     if (ColorDialog1->Execute())
        penKleur=ColorDialog1->Color;
     Invalidate();
  

• Breidt de memberfunctie TForm1::FormKeyPress als volgt uit:

     switch (Key) {
        case 'R':
        case 'r': RoodExecute(this);  break;
        case 'G':
        case 'g': GroenExecute(this); break;
        case 'B':
        case 'b': BlauwExecute(this); break;
        case 'K': 
        case 'k': KiezenExecute(this); break; 
     }
  

• Compileer en test het programma (F9). De colordialog kan worden opgeroepen door op de K toets te drukken.
  
  
  
• 
  

  Opdracht F. Zorg ervoor dat het commando kiezen ook  in de menubalk, in de knoppenbalk en in het popupmenu wordt opgenomen.

Het is ook mogelijk om zelf dialog schermen te ontwerpen.

• Kies File, New Form.
• Plaats een RadioGroup, een Button en 3 RadioButton Componenten op Form2.
  
  
• 
  

  Opdracht G. Zorg ervoor dat Form2 er als volgt uitziet: Vergeet niet om een passend icon te maken. Geef de 3 radiobuttons de volgende namen (Name property) RadioButtonBlauw, RadioButtonGroen en RadioButtonRood. Geef de knop de naam (Name property) ButtonSluiten.

• Definieer de code die moet worden uitgevoerd als de RadioButtonBlauw wordt gekozen door op deze radiobutton te dubbelklikken:

     void __fastcall TForm2::RadioButtonBlauwClick(TObject *Sender)
     {
        Form1->BlauwExecute(this);
     }
  

• Om een memberfunctie van TForm1 in TForm2 aan te kunnen roepen moet boven in de file Unit2.cpp de volgende regel worden opgenomen:

     #include "Unit1.h"
  

• 
  

  Opdracht H. Definieer zelf de code voor RadioButtonGroen, RadioButtonRood en ButtonSluiten.

• 
  

  Opdracht I. Form2 moet met een commando vanuit Form1 worden geopend: Voeg aan de ActionList van TForm1 een commando MijnDialog toe. Met de volgende OnExecute event afhandelingfunctie: void __fastcall TForm1::MijnDialogExecute(TObject *Sender) { Form2->ShowModal(); } Om een memberfunctie van TForm2 in TForm1 aan te kunnen roepen moet boven in de file Unit1.cpp de volgende regel worden opgenomen: #include "Unit2.h" Neem dit commando op in het MainMenu en het PopupMenu van TForm1. Compileer en test het programma (F9).

• Het zou aardig zijn als Form2 bij het openen meteen de juiste radiobutton zou selecteren als het kruis al blauw, groen of rood is. Dit kun je voor elkaar krijgen door het OnShow event van TForm2 af te vangen:

     void __fastcall TForm2::FormShow(TObject *Sender)
     {
        switch (Form1->getPenKleur()) {
           case clBlue:  RadioButtonBlauw->Checked=true; break;
           case clGreen: RadioButtonGroen->Checked=true; break;
           case clRed:   RadioButtonRood->Checked=true;  break;
        }
     }
  

• De memberfunctie getPenKleur van TForm1 moet je nog wel definiëren. In de headerfile Form1.h moet de volgende declaratie worden toegevoegd:

     TColor __fastcall TForm1::getPenKleur() const;
  

  De definitie moet in de file Form1.cpp worden opgenomen en spreekt voor zich:

     TColor __fastcall TForm1::getPenKleur() const
     {
        return penKleur;
     }
  

• 
  

  Opdracht J. Ontwerp en implementeer zelf een dialog waarmee de tekst (inhoud en lettertype) die in het TForm1 wordt weergegeven (Hallo!) kan worden aangepast. Er is een common dialog beschikbaar voor het kiezen van een lettertype.

Tips en Trucs.

Bij het gebruik van Builder zijn er een aantal dingen die heel handig zijn om te weten:

• Je kunt altijd om hulp vragen met F1 of via de mail: mailto:J.Z.M.Broeders@hhs.nl.
• Als je tijdens het editen Ctrl indrukt en code aanwijst met de muis dan verschijnt een soort hyperlink waarmee je bijvoorbeeld naar de definitie van een variabele kunt springen.
• Rechts boven in de editor zitten browser knoppen waarmee je weer terug, en daarna ook weer vooruit kunt springen.
• Als je tijdens het editen Ctrl+Space indrukt dan verschijnt een keuzewindow met mogelijke waarden/parameters/memberfuncties.
• Als je tijdens het editen Ctrl+J indrukt dan kun je kiezen uit veel voorkomende stukjes code (zoals bijvoorbeeld een switch statement).
• Als je tijdens het debuggen (na een breakpunt) een variabele naam aanwijst dan verschijnt de huidige waarde van deze variabele in een klein windowtje (tool-tip).
• Springen naar ander tab blad (bijvoorbeeld in de editor) gaat met Ctrl+Tab.

Meer informatie.

Op de volgende plaatsen vind je meer informatie over het gebruik van C++ Builder.

• Specifieke onderwerpen:
  • Het gebruik van een InputQuery Dialog in C++ Builder.
  • Het gebruik van een Timer in C++ Builder.
  • Het gebruik van Drag en Drop. 
• Help files. De belangrijkste zijn:
  • C++ Builder Language Guide (Bcb6lang.hlp). file:\\C|\Program Files\BORLAND\CBuilder6\Help\bcb6lang.hlp
  • Standard C++ Library Reference (Bcb6scl.hlp). file:\\C|\Program Files\BORLAND\CBuilder6\Help\bcb6scl.hlp
  • Using C++ Builder (Bcb6.hlp). file:\\C|\Program Files\BORLAND\CBuilder6\Help\bcb6.hlp
• Andere documenten:
  • Quick Start.
  • Developer’s Guide.