QT Lesson 2

This lesson we look at laying out of Widgets. The new code is in bold. Modified code is in italics.

Create a new project and enter the following code into your blank project .cpp file.





#include <QApplication>
#include <QHBoxLayout>
#include <QSlider>
#include <QSpinBox>
#include <QLabel>
#include <QVariant>
#include <QAction>
#include <QButtonGroup>
#include <QCalendarWidget>
#include <QDial>
#include <QHeaderView>
#include <QtGui/QLabel>
#include <QtGui/QWidget>

int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QWidget *window = new QWidget;
window->setWindowTitle("All purpose widget example ");
QSpinBox *spinBox = new QSpinBox;
QSlider *slider = new QSlider(Qt::Horizontal);

QLabel *label = new QLabel(window);
label->setObjectName(QString::fromUtf8("label"));
label->setGeometry(QRect(20, 20, 46, 20));
QObject::connect(spinBox, SIGNAL(valueChanged(int)), label, SLOT(setNum(int)));

spinBox->setRange(0, 80);
slider->setRange(0, 80);
QObject::connect(spinBox, SIGNAL(valueChanged(int)),slider, SLOT(setValue(int)));
QObject::connect(slider, SIGNAL(valueChanged(int)),spinBox, SLOT(setValue(int)));
spinBox->setValue(35);
//font setup
QFont font;
font.setFamily(QString::fromUtf8("Pigment 08"));
font.setPointSize(22);
font.setBold(true);
font.setItalic(false);
font.setWeight(75);
font.setItalic(false);
font.setWeight(75);
font.setKerning(false);
label->setFont(font);
label->setMouseTracking(true);
label->setFocusPolicy(Qt::StrongFocus);
label->setScaledContents(true);
label->setFont(font);
//calendar setup
QCalendarWidget *calendarWidget;
calendarWidget = new QCalendarWidget(window);
calendarWidget->setObjectName(QString::fromUtf8("calendarWidget"));
calendarWidget->setGeometry(QRect(30, 160, 232, 141));
//dial setup
QDial *dial;
dial = new QDial(window);
dial->setObjectName(QString::fromUtf8("dial"));
dial->setGeometry(QRect(20, 70, 50, 64));

// code to connect calendar and spinbox to each other and to slider.
QObject::connect(dial, SIGNAL(sliderMoved(int)), calendarWidget, SLOT(showNextMonth()));
QObject::connect(spinBox, SIGNAL(valueChanged(int)), calendarWidget, SLOT(showNextMonth()));
QObject::connect(spinBox, SIGNAL(valueChanged(int)), dial, SLOT(setValue(int)));
QObject::connect(dial, SIGNAL(sliderMoved(int)), spinBox, SLOT(setValue(int)));

QHBoxLayout *layout = new QHBoxLayout;

layout->addWidget(spinBox);
layout->addWidget(slider);
window->setLayout(layout);
window->show();
return app.exec();
}.



The Calendar automatically updates itself when the the dial, slider or spinbox is moved.

Here it is unmoved;



Once compiled and run it looks like  the top photo .  The second photo shows what the widget looks like when one of the controls are moved.

In order to get the code for this widge use Qt Designer. You can actually see how any window ,dialog or widget runs. You then paste the code into program you are writing. That is how I created this one.

The only difference is to watch your header files .For instance in Qt Designer the headers files for the prototype follow this form>:

#include <QtCore/QVariant>
#include<QtGui/QAction> ….

Removing the QtGui part will make your program run.

The last part is tricky Itis how slots and signals function. The connect function is;

connect(sender, SIGNAL(signal), receiver, SLOT(slot));

I will explain how the code displays

Let a=spinBox,b=slider c= text d=dial and e=calendar then for the seven statements:
1.QObject::connect(a SIGNAL(valueChanged(int)),b, SLOT(setValue(int)));
2.QObject::connect(b, SIGNAL(valueChanged(int)),a, SLOT(setValue(int)));

3.QObject::connect(a SIGNAL(valueChanged(int)), c, SLOT(setNum(int)));

4. QObject::connect(d SIGNAL(sliderMoved(int)), e, SLOT(showNextMonth()));
5. QObject::connect(a, SIGNAL(valueChanged(int)), e, SLOT(showNextMonth()));
6.QObject::connect(a, SIGNAL(valueChanged(int)),d, SLOT(setValue(int)));
7. QObject::connect(d, SIGNAL(sliderMoved(int)), a, SLOT(setValue(int)));



We see in statements 1-2 form a loop. Then from a it controls c. So the text diaplays the number.Now how about everything else ? In statements 6 and 7 we have a similar loop. a->d &d->a. So what does a control in statements 4 ? a controls e .Similarily for statement 4.



This completes this lesson. We have just discussed how to make UI code. If this stuff is new to you, and you have learnt something, great.