Donnerstag, 28. Oktober 2010

Erste Erfolge mit Qt und dem Qt-SDK

Herzlich Willkommen!

Dies ist mein erstes Tutorial.
Überhaupt.
Also seid mir nicht böse, wenn nicht alles so ist, wie ihr euch das erhofft.

Es geht hier um die ersten Schritte mit Qt in C++ und die Nutzung des Qtcreator.

Als erstes sollte das Qt-SDK installiert werden. Dieses findet ihr genau da:
http://qt.nokia.com/downloads/
Nehmt die LGPL Variante, diese sollte eigentlich fürs Erste reichen. Im kompletten SDK befinden sich die nötigen Bibliotheken, der Qt-Creator und weitere Tools.

Frisch installiert kann es los gehen mit dem Start des Qt-Creator.
Dort erstellt ihr ein neues Projekt, welches eine Qt-GUI-Application sein sollte. Setzt den Namen des Projekts und den Pfad, in dem ihr das Projekt speichern wollt. Bei mir heißt das Projekt: BinCalc und befindet sich dann unter ~/projects/ . Die Einstellung der Qt Version kann so voll angehakt belassen werden. Dann kommt die Wahl nach einem Klassennamen, welcher bei mir "binCalc" wird. Bei "Base Class" lassen wir das QMainWindow. Die unteren Eingaben können auch so übernommen werden. Versionsverwaltung werden wir hier nicht benutzen. Damit ist das Anlegen des Projektes auch schon abgeschlossen.

Es erscheint der Designer.

Nun erstmal etwas zum Aufbau:

1) Hier kann schnell das Projekt Erstellt und gestartet werden.
2) Die Liste beinhaltet viele Widgets, die zum Erstellen der GUI genutzt werden können. Per Drag-n-Drop können diese einfach in die eigene Anwendung platziert werden.
3) Die eigene Anwendung.
4) Der Object Inspector zeigt die eingesetzten Objekte an.
5) Im Property Editor können alle möglichen Eigenschaften von den eingesetzten Komponenten manipuliert werden.

Nun bauen wir uns unseren binären Rechner zusammen.
Dazu ziehen wir ein "LCD Number" Widget aus der linken Leiste aus den Display Widgets auf die graue Fläche, unsere Anwendung, in der Mitte. Oben rechts befindet sich der "Object Inspector", in dem wir nun erstmal den Namen auf binaryLCD setzten. Gleiches kann auch im Property Editor darunter gemacht werden. Dort stellen wir noch die numDigits und digitCount auf 8 und den mode auf Bin für binary, also binär.

Als nächstes ziehen wir ein paar Push Button in unsere Anwendung. Wir benötigen "0", "1", "AND", "OR", "CLR" und "=".
Die Buttons werden erstmal als PushButton angezeigt. Per u.a. Doppelklick oder F2 könnt ihr die Beschriftung passend ändern. Im Object Inspector passen wir auch wieder die Namen passend an, um später die Buttons leichter zu identifizieren. Ich habe meine b0, b1, bAND, bOR, bCLR und bIS genannt.

Nun könnt ihr schonmal eure Anwendung testen. Per RUN sollte auch die Anwendung immer neu Erstellt werden, bevor sie gestartet wird, falls es seit dem letzten Mal Änderungen gab. Es sollte ein Fenster erscheinen, dass so aussieht, wie ihr es euch im Designer zusammengeschoben habt. Allerdings tut sich noch nichts beim drücken der Buttons.

Dies machen wir nun.
Dazu könnt ihr die Anwendung schließen und wieder in den Qt Creator zurückkehren.


Ihr drückt nun mit der rechten Maustaste im Designer auf den "0" Button und fordert: "Go to slot ..." und wählt euch dort den "clicked()". Damit solltet ihr in den Codeeditor kommen.

Nun nur schnell eine Übersicht über die Ansicht im Code-Editor:
An sich ist die Aufteilung schnell erklärt:
Im Bereich 1) sieht man die Dateien, die zum Projekt dazu gehören. Im 2) Bereich befindet sich der Code der ausgewählten Datei. Dieser kann geändert werden. Im 3) Bereich letztendlich ist bei mir die Hilfe-Anzeige, in der ich schnell nachschlagen kann ( z.B. in dem ich einen Klassennamen anklicke und F1 klicke), was z.B. eine Klasse für Eigenschaften hat.
Der Cursor blinkt nun an der Stelle, an der der Code für die Behandlung des Drückens der "0" kommt.
Dieser ist bei mir:
ui->binaryLCD->display( ui->binaryLCD->value()*2);
Mit dem ui Objekt haben wir Zugriff auf die einzelnen Dinge in unserem Widget. Wir wollen beim Drücken der "0" die LCD-Anzeige ändern. Deswegen rufen wir das Objekt binaryLCD auf und dort die Methode display, die einen Wert entgegen nimmt, den die LCD-Anzeige anzeigen soll. Der neue Wert soll teilweise aus dem alten Wert bestehen. Dazu holen wir uns mit der Methode value von dem Objekt binaryLCD den aktuellen Wert der Anzeige. Um nun eine 0 binär zum aktuellen Wert hinzuzufügen, müssen wir den aktuellen Wert nur mit 2 multiplizieren.
Damit wäre auch schon alles für den "0"-Button erledigt.
Ähnlich sieht es bei dem "1"-Button aus.
Dies lass ich euch mal selber probieren.

Versuchen wir uns also am AND-Button.
Dieser soll den aktuellen Wert mit dem nächsten Wert UND verknüpfen.
Wie bei dem "0" und dem "1" Button gehen wir zum Slot "clicked" und bekommen das Editorfenster. Mein Code sieht nun wie folgt aus:
    if( AndOr == 1)
        last =  (int)ui->lcdNumber->value() & (int)last;
    else if(AndOr == 2)
        last = (int)ui->lcdNumber->value() | (int)last;
    else
        last = ui->lcdNumber->value();
    AndOr = 1;
    ui->lcdNumber->display( 0);

Was passiert hier?
Als erstes schaue ich nach, ob ich bereits AND oder OR anwenden wollte. Dazu hatte ich mir eine private Variable angelegt. Die Deklaration steht in der Header-Datei binCalc.h im Bereich private: und sieht ungefähr so aus:
double last;
int AndOr;
Damit wird eine Variable vom Type double festgelegt, die den letzten berechneten Wert enthält und eine int-Variable, die bestimmt, ob noch nichts (0), ANDOR (2) gedrückt wurden.
Passend wird im Code in der IfAND oder OR oder nicht zusammengefügt und in last gespeichert. Damit wird auch AndOr auf 1 gesetzt, da wir ja gerade im AND-Teil sind. Die LCD-Anzeige wird auf 0 gesetzt. Somit kann eine neue Zahl eingegeben werden.

Ähnlich geht es im Code des OR-Buttons vor sich. Diesen dürft ihr euch wieder selber zusammen basteln.

Nehmen wir uns nun den CLR-Button vor. Dieser soll die Anzeige auf 0 setzten und die Variablen wieder auf 0 setzten.
Dieses solltet ihr inzwischen hinbekommen.

Also gehen wir auch schon zum =-Button über.
Dieser berechnet das Ergebnis und gibt dies aus.
Weiterhin wird er auch die Buttons außer sich selber und den CLR-Button deaktivieren. Dies geschieht mit der Methode setDisabled( true) der einzelnen Button-Objekte.
Für den Button b0 sähe das so aus:
ui->b0->setDisabled(true);
Um die Buttons wieder zu aktivieren, packen wir noch die Aktivierung in den CLR-Button. Bei diesem kommt ein false als Argument in das setDisabled.

Damit sollte unser kleiner binärer Rechner fertig sein.
Versucht ihn nun laufen zu lassen.
Meiner sieht nun so aus:


Herzlichen Glückwunsch!

Ihr habt euren kleinen einfachen binären Rechner in Qt und C++ fertig.
Ich hoffe, euch hat dieses kleine Tutorial gefallen und auch etwas gebracht.

Hier: http://code.google.com/p/manuel-bellersen/source/browse/#hg/tutorials/binaryCalc findet ihr den Code, den ich dazu erstellt habe.



Viel Spaß nun mit Qt und C++.