NB Deze informatie is van november 2010!

Qt

We zullen hier kort proberen uit te leggen hoe je met Qt ("cute" of "Q-T", http://qt.digia.com/) een mooie gebruikers-interface voor het spelletje Boter, kaas en eieren kunt maken. Het werkt onder KDE, ook wel onder GNOME, op de Mac, en onder Windows. KDE zelf is met behulp van Qt gemaakt. Er zijn vele versies van Qt in omloop; in het onderstaande is op een tweetal plekken onderscheid tussen Linux en Windows. Qt is een gigantisch pakket, het eventueel installeren kost dan ook aardig wat tijd.

We doen drie stappen: eerst maken we de interface, daarna bouwen we het C++-programma dat Boter, kaas en eieren speelt, en tot slot combineren we dit tot een fraai programma.

Stap 1

We zullen met behulp van Qt Designer/Creator een mooie gebruikers-interface (GUI) maken. Begin in een lege directory bke.

Linux-versie
Op de computers in zaal 302/304 is Qt al geinstalleerd. Er zijn via internet ook gratis versies voor Linux op te halen.
Start Qt Designer met designer &. Creëer een nieuwe "Form" van type "Widget", die BKEForm moet gaan heten (bij objectName).

Windows-versie
Installeer onder de LPGL open source licentie van http://qt.nokia.com/downloads, op de eigen PC, "Qt SDK for Windows* (322 MB)". Het uitpakken van de file qt-sdk-win-opensource-2010.05.exe (versie november 2010) levert 1.6 GB aan software op! Er wordt onder meer een complete C++-compiler meegeleverd: MinGW.
Start Qt Creator door op de Qt-ikoon te klikken. Kies File->New File or Project, en selecteer bij Projects nu Qt (links), Qt Designer Form (rechts). Kies daarna Widget, en als filenaam bke.ui in directory bke. Noem de "Form" BKEForm (bij objectName).

We gaan voor beide systemen als volgt verder. In deze stap maken we alleen de interface.
De interface moet bestaan uit een 9-tal knoppen ("Push Buttons") waarmee straks Boter, kaas en eieren kan worden gespeeld, een Stop-knop (om te stoppen), een Undo-knop (die we voor van alles en nog wat kunnen gaan gebruiken; optioneel), en een tekst-veld ("Label") waarin de status staat, zoals "X is aan de beurt". Zie hier (of de hoofdstukken hiervoor en hierna) voor meer informatie. We gebruiken voorlopig alleen maar knoppen en één "Label", geheten Tekst.
Noem de 9 spelknoppen bijvoorbeeld Vak11, Vak12, ..., Vak33, en maak de tekst in de knoppen leeg via de "properties". Gebruik "Horizontal Spacers" en "Vertical Spacers", en "Horizontal/Vertical Layout", om de ruimte goed te verdelen.
Koppel het clicked()-signaal van de Stop-knop aan het close()-slot van de Form. Zie hier voor meer informatie. Gebruik Edit->Edit Signals/Slots. Je kunt dan met de linker muisknop op de Stop-knop klikken, naar de achtergrond van de "Form" slepen, en daar het juiste slot kiezen; misschien moet je nog een optie in het windowtje aanvinken om de mogelijkheden zichtbaar te krijgen.
Test de interface met Form->Preview, of bij Tools->Form Editor->Preview. Save hem geregeld als (bijvoorbeeld) bke.ui. Als je wat aan de interface wilt wijzigen, moet dat dus hier.

Stap 2

Deze stap is geheel systeem-onafhankelijk.
Haal de C++-file boter.cc op, en zet deze in directory bke. Dit is een compleet C++--programma dat een beetje Boter, kaas en eieren speelt. Compileer (met een compiler naar keuze, g++ of Dev-C++) het maar eens, en speel er wat mee. Probeer de code enigszins te begrijpen.
Splits de file in boter.h (met de definitie van de klasse bke) en boter.cc (met de functies). Voeg boven en onder in boter.h enkele regels toe:
   #ifndef BOTER_H
   #define BOTER_H

   ... klasse bke ...

   #endif //BOTER_H
Zo zorg je ervoor dat zaken maar één keer meegecompileerd worden.
Voeg bovenin boter.cc toe (onder #include <iostream>): #include "boter.h". Compileer het programma opnieuw en speel er weer even mee. Hopelijk werkt het nog precies hetzelfde.
Haal de functie main uit boter.cc weg — nu werkt het programma tijdelijk niet meer. Waarschijnlijk hoeven boter.h en boter.cc later niet meer gewijzigd te worden, maar het mag wel.

Stap 3

Nu moeten we de interface en de boter-code nog koppelen: het echte werk. Dit gaat op beide systemen nagenoeg hetzelfde, met of zonder Qt.

Haal allereerst main.cc op. Deze file hoeft ook niet meer gewijzigd te worden.
Nu komt het. Je hoeft je niet druk te maken om de "control-flow" zoals tot nu toe gebruikelijk. Het wordt namelijk event-driven: je hoeft slechts aan te geven wat er moet gebeuren als je op de knoppen klikt. Haal daartoe bkespel.h en bkespel.cc op, en pas deze twee herhaald aan door functies hierin toe te voegen en steeds te wijzigen. Let erop dat verschillende namen hierin overeen moeten komen met de namen zoals die in Stap 1 zijn gekozen. De executable gaat bijvoorbeeld heten naar de directory. En de "Form" moet als objectName (zie properties) BKEForm hebben.

Als je al deze files hebt (bke.ui, boter.h, boter.cc, main.cc, bkespel.h en bkespel.cc, alle in dezelfde directory bke), geef dan onder Linux achtereenvolgens:
   qmake -project
   qmake
   make
De eerste regel maakt een projectfile bke.pro, daarna maakt qmake een "makefile", die het hele compilatie-proces netjes regelt, en die je steeds met make uitvoert. Hopelijk is er nu een executable bke ontstaan. Later hoef je trouwens alleen steeds make te doen, tenzij je files hebt toegevoegd.
Onder Windows kan dit ook, maar kun je het ook met de knoppen regelen. Eenvoudiger is de file bke.pro hier op te halen, dit project in Qt te laden, en dan met de knoppen te compileren. De executable gaat hier bke.exe heten.

Het middelste van de 9 vakjes, Vak22, doet nu iets. Probeer het te snappen, verbeter het, en breidt dit uit naar de andere vakjes. Het spel moet nu goed gespeeld kunnen worden.
Het is wellicht verstandig — als je dit allemaal werkend wilt krijgen — om een functie te maken die een coördinatenpaar binnen krijgt, en dan de juiste acties doet. Of eigenlijk was dit vanaf het begin beter geweest. En een functie printbord ( ) is ook niet gek.
Tot slot: laat de "Undo"-knop het veld weer leeg maken. Of laat de computer een zet doen via de functie randomzet ( ).

Als je meer hulp wilt: geef onder Linux assistant &, of kijk onder Windows in de help-files. Wil je bijvoorbeeld plaatjes op de knoppen zetten? Doe Vak22->setIcon (QIcon ("iets.jpg")). Zoek maar eens naar de functies van QPushButton's.
Natuurlijk valt er veel meer over Qt te vertellen, maar dat doen we hier niet. Succes!