Windows GUI applicatie met QT Creator.

© John Viser, Dave Stikkolorum en Harry Broeders.

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

Met behulp van QT kun je onder andere 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 QT Creator.

Inhoud.

• Het Windows operating systeem.
• Je eerste windows GUI programma met behulp van QT Creator.
• 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 zogenoemde Windows API dan draaien onze applicaties op WindowsXP, Windows Vista en Windows 7. 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 Express Editions van Visual Studio worden geleverd zonder de MFC libraries. Voor het .NET platform bied Microsoft de Framework Class Library (FCL) deze wordt wel meegeleverd met de Express Editions van Visual Studio. Wij zullen in deze tutorial gebruik maken van deze class library.
• Qt is een gratis open source C++ library voor het ontwikkelen van GUI applicaties. De library en de bijbehorende tool Qt Creator zijn ontwikkeld door Trolltech dat inmiddels is overgenomen door Nokia.
• VCL Visual Component Library van Borland. Deze library is ontwikkeld in Object Pascal voor Delphi en later omgezet naar C++ voor C++ Builder.
• WxWidgets. Dit is een gratis open source C++ class library voor het maken van cross platform GUI applicaties onder Windows.

Behalve de frameworks bieden zowel Microsoft als Borland ontwikkeltools die het gebruik van deze frameworks aanzienlijk vereenvoudigen. Qt Creator is een platform onafhankelijk ontwikkeltool waarmee zowel op linux als op een windows platform gewerkt kan worden.

Je eerste windows GUI programma met behulp van QT Creator.

Als je een applicatie ontwikkelt met behulp van het QT 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 QT Creator. Je ziet dan een beginscherm.
  
  
  -
• Kies voor Develop > Create New Project > QT4 Gui Application
  
  
  -
• Geef een naam op voor je project. Kies Next en daarna weer Next.
  
  
  -
  Er wordt getoond:
  
  
  -
• Geef de naam "HoofdScherm" op. Klik dan op Next.
  
  
  -
• Klik vervolgens op Finish.
  
  Er wordt nu automatisch een project aangemaakt voor een GUI applicatie met een (leeg) window.
  Om dit window te zien, moet je dubbel-klikken op de file die eindigt op .ui
  
  
  -
• Je kunt het programma nu compileren en starten door op Ctrl+r te drukken . Het programma bestaat uit een leeg window getiteld HoofdScherm:
  
  
  -
• Sluit het window HoofdScherm.
• Deze door QT Creator aangemaakte "lege" applicatie bestaat uit één class. Als je op hoofdscherm.h dubbel-klikt verschijnt de class declaratie van de class Hoofdscherm in de editor.
  
  
  -
  De class Hoofdscherm is afgeleid van QMainWindow en heeft een private variabele Ui::Hoofdscherm *ui; Dit is een pointer naar een object waar de grafische vormgeving van het window is verstopt. Tijdens het compileren maakt QT zelf de files (ui_hoofdscherm.h en moc_hoofdscherm.cpp) aan waarin de grafische vormgeving wordt gestopt. In de file ui_hoofdscherm.h wordt een klasse Ui_Hoofdscherm gedeclareerd. In deze klasse is de grafische vormgeving van het window opgenomen. Er wordt ook een namespace Ui aangemaakt. In deze namespace wordt een klasse Hoofdscherm aangemaakt die afgeleid is van Ui_Hoofdscherm. Er is dus een class Hoofdscherm (gedeclareerd in hoofdscherm.h) en die heeft een private variabele van het type Ui::Hoofdscherm (gedeclareerd in ui_hoofdscherm.h). Q_OBJECT is een macro die ervoor zorgt dat de class HoofdScherm kan reageren op events afkomstig van het operating system.

  Het window genaamd HoofdScherm heeft diverse eigenschappen (Engels: properties) die ingesteld kunnen worden als je de file hoofdscherm.ui selecteert in de editor. Op dit moment kun je net doen of properties membervariabelen zijn. Deze properties kun je eenvoudig aanpassen in de Property Editor (rechts in het scherm).
  
  
  -

• Pas de volgende properties aan:
  • Zet windowTitle op "Een window met een kruis". Deze tekst komt in de titelbalk van het Window.
  • Zet Height op 300 onder Geometry. Dit is de hoogte van de binnenkant van het window (zonder de titelbalk en randen).
  • Zet Width op 300 onder Geometry. Dit is de hoogte van de binnenkant van het window (zonder de titelbalk en randen).
  • Zet via palette de window color op rood.
• Compileer en run het programma (Ctrl+r). Het window ziet er nu als volgt uit:
  
  
  -
• Als het window getekend moet worden stuurt het Windows OS een message (WM_PAINT) naar het window. We kunnen reageren op dit event door de virtuele eventfunctie void paintEvent(QPaintEvent*) van de class QWidget te overriden. Dit is mogelijk omdat ons HoofdScherm afgeleid is van QMainWindow die op zijn beurt weer afgeleid is van QWidget.
  
  Deze memberfunctie moet in hoofdscherm.h gedeclareerd en in hoofdscherm.cpp gedefinieerd worden.

  Qt heeft een klasse QPainter waarmee op het scherm getekend kan worden. In de overridden memberfunctie HoofdScherm::paintEvent() wordt deze klasse gebruikt. In de code wordt een teken object p van de klass QPainter gemaakt en uiteindelijk wordt er een kruis en een tekst getekend. In hoofdscherm.cpp moeten de files QPainter en QPen ge-include worden.

  #include <QPainter>
  #include <QPen>
  
  //...
  
  void HoofdScherm::paintEvent(QPaintEvent*) {
      QPainter p(this);
      QPen pen(Qt::blue, 2, Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin);
      p.setPen(pen);
      p.setFont(QFont("tahoma", 30));
      p.drawText(rect(), Qt::AlignCenter, "Hoi!");
      pen.setColor(Qt::yellow);
      p.setPen(pen);
      p.drawLine(0, 0, width(), height());
      pen.setStyle(Qt::DotLine);
      p.setPen(pen);
      p.drawLine(width(), 0, 0, height());
  }
  

• Compileer en run het programma (Ctrl+r). Het window ziet er nu als volgt uit:
  
  
  --
  Wanneer we een verandering in de kleur van de lijn willen, veranderen we eerst de kleur van de pen en vervolgens kennen we de pen toen aan p (een QPainter). De klasse QPainter heeft echter ook een methode: void setPen(const QColor& color) die je als alternatief kunt gebruiken.
• 
  

  Opdracht A. Pas het programma nu zodanig aan dat er in het midden een cirkel wordt weergegeven. Tip: selecteer het woord QPainter in de editor en druk op F1 (Help). Nog een tip: Een cirkel is een eclipse weerbij de horizontale en verticale diagornaal gelijk zijn.

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.

• Om dit mogelijk te maken moeten we de mousePressEvent overiden van QWidget. Denk aan wat we met het paintEvent hebben gedaan. We nemen ook een private variable penKleur op om de kleur op te kunnen slaan.
  
  
  -
• De constructor ziet er dan als volgt uit:
  
  
  -
• 
  

  Opdracht B. Implementeer deze code en zorg ervoor dat wanneer met de muis geklikt wordt de kleur van het kruis groen wordt (vergeet niet #include <QMouseEvent> te doen). Vergeet ook niet om de variabele penKleur te gebruiken in de memberfunctie paintEvent. We willen onderscheid maken tussen de linker- en rechtermuisknop: Als op de rechtermuisknop wordt gedrukt dan moet een geel kruis getekend worden. Als op de linkermuisknop wordt gedrukt dan moet een groen kruis getekend worden. Deze gegevens zijn te vinden met de button() functie van het QMouseEvent object. Tip: Je kunt er voor zorgen dat het window opnieuw getekend wordt door de update() memberfuntie van QWidget (een base class van de class HoofdScherm) aan te roepen. 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 keyPressEvent) afvangen. Maak gebruik van de helpfiles (QWidget) om de benodigde informatie te vinden.

Toevoegen van menubalk.

Qt bevat een groot aantal kant en klare componenten. Laten we eens kijken hoe je deze componenten kunt gebruiken om je programma van een menubalk te voorzien. De menubalk kan gebruikt worden om commando's naar het programma te sturen.

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

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

De menu's kun je nu als volgt invoegen:

• Dubbel-klik op Type here in de al ingevoegde menubar van de applicatie (in de window editor). Als je een & teken voor een letter van een menu item typt dan wordt deze letter onderstreept als je op Alt drukt tijdens het uitvoeren van het programma en kun je deze letter gebruiken om de menu optie uit te voeren.Vul alle menu items en subitems als volgt in:
  
  
  -
• We willen nu de verschillende menu items koppelen aan de code die uitgevoerd moet worden als dit menu item tijdens het uitvoeren van het programma wordt gekozen. Dit kun je doen door in de Action Editor rechts op de action te klikken en Go to slot... te kiezen.
•  elke actie van de menubalk een methode van de class HoofdScherm aanroept. Dit kan bereikt worden door de betreffende methode als slot te declareren in de klasse HoofdScherm. Bijvoorbeeld: private slots: void action_Blauw();
  
  
  -
  Bevestig de keuze voor triggered() door op OK te drukken.
  
  
  -
  De editor wordt nu geopend zodat de code kunt intypen die bij de betreffende menu keuze uitgevoerd moet worden.

  void HoofdScherm::on_action_Blauw_triggered()
  {
      penKleur = Qt::blue;
      update();
  }
  

  Vul nu zelf de code voor de overige menu items in. Om het window te sluiten kun je de memberfunctie close() gebruiken. Als alternatief kun je deze zogenoemde slot memberfunctie ook met de Signals Slots Editor koppelen aan het menu item Afsluiten.
  
  
  -
  Compileer en test het programma (Ctrl+r).

Het programma heeft al een knoppenbalk en een statusbalk. Hoe je hier iets mee kunt doen zou ik graag uit willen leggen maar de tijd ontbreekt me...

Toevoegen van dialog schermen.

Dit deel moet nog geschreven worden...

Tips en Trucs.

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

• Je kunt altijd om hulp vragen met F1.

Meer informatie.

Op de volgende plaatsen vind je meer informatie over het gebruik van Qt Creator.

• Online help: http://doc.trolltech.com/
• Download Qt Creator http://qt.nokia.com/downloads