How to do it...

To learn how to use signals and slots with UI events, follow these steps:

1. Let's create a new Qt Widgets Application project.
2. Drag and drop a Push Button, Combo Box, Line Edit, Spin Box, and Slider from the Widget Box into your UI canvas:

1. Then, right-click on the push button and select clicked() and press the OK button to proceed. A slot function will be created for you by Qt Creator:

1. Repeat the previous step, but this time, select the next selection until every function in QAbstractButton has been added to the source code:

void on_pushButton_clicked();
void on_pushButton_clicked(bool checked);
void on_pushButton_pressed();
void on_pushButton_released();
void on_pushButton_toggled(bool checked);

1. Next, repeat the same steps again on the combo box until all the slot functions available under the QComboBox class have been added to the source code:

void on_comboBox_activated(const QString &arg1);
void on_comboBox_activated(int index);
void on_comboBox_currentIndexChanged(const QString &arg1);
void on_comboBox_currentIndexChanged(int index);
void on_comboBox_currentTextChanged(const QString &arg1);
void on_comboBox_editTextChanged(const QString &arg1);
void on_comboBox_highlighted(const QString &arg1);
void on_comboBox_highlighted(int index);

1. The same goes for lineEdit, all of which are under the QLineEdit class:

void on_lineEdit_cursorPositionChanged(int arg1, int arg2);
void on_lineEdit_editingFinished();
void on_lineEdit_returnPressed();
void on_lineEdit_selectionChanged();
void on_lineEdit_textChanged(const QString &arg1);
void on_lineEdit_textEdited(const QString &arg1);

1. After that, add the slot functions from the QSpinBox class for our spin box widget as well, which is relatively short:

void on_spinBox_valueChanged(const QString &arg1);
void on_spinBox_valueChanged(int arg1);

1. Lastly, repeat the same step for our slider widget, which yields similar results:

void on_horizontalSlider_actionTriggered(int action);
void on_horizontalSlider_rangeChanged(int min, int max);
void on_horizontalSlider_sliderMoved(int position);
void on_horizontalSlider_sliderPressed();
void on_horizontalSlider_sliderReleased();
void on_horizontalSlider_valueChanged(int value);

1. Once you're done with that, open up mainwindow.h and add the QDebug header, as highlighted in the following code:

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QDebug>

namespace Ui {
class MainWindow;
}

1. Let's implement the slot functions for our push button:

void MainWindow::on_pushButton_clicked() {
    qDebug() << "Push button clicked";
}
void MainWindow::on_pushButton_clicked(bool checked) {
    qDebug() << "Push button clicked: " << checked;
}
void MainWindow::on_pushButton_pressed() {
    qDebug() << "Push button pressed";
}
void MainWindow::on_pushButton_released() {
    qDebug() << "Push button released";
}
void MainWindow::on_pushButton_toggled(bool checked) {
    qDebug() << "Push button toggled: " << checked;
}

1. If you build and run the project now, and then click on the push button, you will see that a different status gets printed out but at a slightly different timing. This is due to different signals being emitted at different actions during the whole clicking process:

Push button pressed
Push button released
Push button clicked
Push button clicked: false

1. Next, we will move on to the combo box. Since the default combo box is empty, let's add some options to it by double-clicking on it from mainwindow.ui and adding the options that are shown in the pop-up window:

1. Then, let's implement the slot functions for the combo box in mainwindow.cpp:

void MainWindow::on_comboBox_activated(const QString &arg1) {
    qDebug() << "Combo box activated: " << arg1;
}
void MainWindow::on_comboBox_activated(int index) {
    qDebug() << "Combo box activated: " << index;
}
void MainWindow::on_comboBox_currentIndexChanged(const QString &arg1) {
    qDebug() << "Combo box current index changed: " << arg1;
}
void MainWindow::on_comboBox_currentIndexChanged(int index) {
    qDebug() << "Combo box current index changed: " << index;
}

1. We will continue to implement the rest of the slot functions for the combo box:

void MainWindow::on_comboBox_currentTextChanged(const QString &arg1) {
    qDebug() << "Combo box current text changed: " << arg1;
}
void MainWindow::on_comboBox_editTextChanged(const QString &arg1) {
    qDebug() << "Combo box edit text changed: " << arg1;
}
void MainWindow::on_comboBox_highlighted(const QString &arg1) {
    qDebug() << "Combo box highlighted: " << arg1;
}
void MainWindow::on_comboBox_highlighted(int index) {
    qDebug() << "Combo box highlighted: " << index;
}

1. Build and run the project. Then, try click on the combo box, hover over the other options, and select an option by clicking on it. You should see similar results to the following in your debug output:

Combo box highlighted: 0
Combo box highlighted: "Option One"
Combo box highlighted: 1
Combo box highlighted: "Option Two"
Combo box highlighted: 2
Combo box highlighted: "Option Three"
Combo box current index changed: 2
Combo box current index changed: "Option Three"
Combo box current text changed: "Option Three"
Combo box activated: 2
Combo box activated: "Option Three"

1. Next, we will move on to line edit and implement its slot functions, as shown in the following code:

void MainWindow::on_lineEdit_cursorPositionChanged(int arg1, int arg2) {
    qDebug() << "Line edit cursor position changed: " << arg1 << arg2;
}
void MainWindow::on_lineEdit_editingFinished() {
    qDebug() << "Line edit editing finished";
}
void MainWindow::on_lineEdit_returnPressed() {
    qDebug() << "Line edit return pressed";
}

1. We will continue to implement the rest of the slot functions of line edit:

void MainWindow::on_lineEdit_selectionChanged() {
    qDebug() << "Line edit selection changed";
}
void MainWindow::on_lineEdit_textChanged(const QString &arg1) {
    qDebug() << "Line edit text changed: " << arg1;
}
void MainWindow::on_lineEdit_textEdited(const QString &arg1) {
    qDebug() << "Line edit text edited: " << arg1;
}

1. Build and run the project. Then, click on the line edit and type Hey. You should see results similar to the following appearing on the debug output panel:

Line edit cursor position changed: -1 0
Line edit text edited: "H"
Line edit text changed: "H"
Line edit cursor position changed: 0 1
Line edit text edited: "He"
Line edit text changed: "He"
Line edit cursor position changed: 1 2
Line edit text edited: "Hey"
Line edit text changed: "Hey"
Line edit cursor position changed: 2 3
Line edit editing finished

1. After that, we need to implement the slot functions for the spin box widget, as shown in the following code:

void MainWindow::on_spinBox_valueChanged(const QString &arg1){
    qDebug() << "Spin box value changed: " << arg1;
}
void MainWindow::on_spinBox_valueChanged(int arg1) {
    qDebug() << "Spin box value changed: " << arg1;
}

1. Try to build and run the program. Then, click the arrow buttons on the spin box, or directly edit the value in the box – you should get something similar to this:

Spin box value changed: "1"
Spin box value changed: 1
Spin box value changed: "2"
Spin box value changed: 2
Spin box value changed: "3"
Spin box value changed: 3
Spin box value changed: "2"
Spin box value changed: 2
Spin box value changed: "20"
Spin box value changed: 20

1. Lastly, we'll implement the slot functions for the horizontal slider widget:

void MainWindow::on_horizontalSlider_actionTriggered(int action) {
    qDebug() << "Slider action triggered" << action;
}
void MainWindow::on_horizontalSlider_rangeChanged(int min, int max) {
    qDebug() << "Slider range changed: " << min << max;
}
void MainWindow::on_horizontalSlider_sliderMoved(int position) {
    qDebug() << "Slider moved: " << position;
}

1. Continue to implement the slot function for the slider, as shown in the following code:

void MainWindow::on_horizontalSlider_sliderPressed() {
    qDebug() << "Slider pressed";
}
void MainWindow::on_horizontalSlider_sliderReleased() {
    qDebug() << "Slider released";
}
void MainWindow::on_horizontalSlider_valueChanged(int value) {
    qDebug() << "Slider value changed: " << value;
}

1. Build and run the program. Then, click and drag the slider to the left and right – you should be seeing results that are similar to the following:

Slider pressed
Slider moved: 1
Slider action triggered 7
Slider value changed: 1
Slider moved: 2
Slider action triggered 7
Slider value changed: 2
Slider moved: 3
Slider action triggered 7
Slider value changed: 3
Slider moved: 4
Slider action triggered 7
Slider value changed: 4
Slider released