Qt/C++ - Tutorial 090. How to make a learning dialogue with highlighting widgets in the program

QWidget, Tutorial, Qt, Stylesheet

I suggest studying a small application in which a dialog box will be created, thanks to which the user can be trained in the functionality of your program, step by step explaining which program widget is responsible for what.

To implement such functionality, you need to create an application window that will have the buttons "Previous widget", "Next widget", "Close window". Before starting, widgets will be transferred to this window in the sequence in which they should be presented to the user in your program, as well as text messages that will describe the widgets.

The program will look like this:

Introduction

As we agreed, we will create a tutorial dialog that will accept a sequence of widgets that we need to talk about.
In this case, the current widget will be highlighted by overriding its styles, that is, the red border of the widget will be set.
I’ll say right away that redefining styles through stylesheet can entail a complete redefinition of the styles of some widgets under some platforms, so it’s better to create a fully customized application style or redefine widgets with an override of the paintEvent method. In any case, for a more beautiful highlight, you will have to do significant work on styling the application, but for the purpose of the training article, I will show only a minimal redefinition of styles.

TutorialDialog

A dialog is created in the Qt graphic designer to not clutter up useful code. That is, the dialogue itself is formed using the ui file. It will look like this. You can take the program code in the EVILEG example repository at the end of the article.

TutorialDialog.h

In the header file of the dialog box, you will need to use the TutorialInfo structure, which will store the pointer to the widget, as well as its description.
We will also need a variable that will store the old style of the current widget and the index of the current widget.

#ifndef TUTORIALDIALOG_H
#define TUTORIALDIALOG_H

#include <QDialog>

namespace Ui {
class TutorialDialog;
}

class TutorialDialog : public QDialog
{
    Q_OBJECT

public:
    explicit TutorialDialog(QWidget *parent = nullptr);
    ~TutorialDialog();

    // add widget and text information about this widget to tutorial dialog
    void addWidgetToTutorial(QWidget* widget, const QString& text);

private:
    void onPreviousButtonClicked(); // slot which reacts on click of previous button
    void onNextButtonClicked();     // slot which reacts on click of next button
    void updateButtonsEnabled();    // update actual enabled status of buttons
    void returnOldStyle();          // return old style to widget, which was highlighted
    void setTextAndStyle();         // set text information to tutorial dialog and set highlight style to widget

    Ui::TutorialDialog *ui;

    // This structure contains text information aboout some widget
    struct TutorialInfo
    {
        QWidget* widget;
        QString text;
    };

    // highlight style
    const QString HIGHLIGHT_STYLE {"border: 1px solid red"};
    QVector<TutorialInfo> m_infoItems;      // vector of widgets in tutorial
    int m_currentTutorialInfoIndex {-1};    // index of current highlighted widget
    QString m_oldStyleOfWidget;             // old widget style
};

#endif // TUTORIALDIALOG_H

TutorialDialog.cpp

#include "TutorialDialog.h"
#include "ui_TutorialDialog.h"

#include <QDebug>

TutorialDialog::TutorialDialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::TutorialDialog)
{
    ui->setupUi(this);
    setModal(true);                 // this dialog should be modal
    setWindowFlags(Qt::Window);     // but it doesn`t create shadow on mainwindow

    connect(ui->closeButton, &QPushButton::clicked, this, &TutorialDialog::close);
    connect(ui->previousButton, &QPushButton::clicked, this, &TutorialDialog::onPreviousButtonClicked);
    connect(ui->nextButton, &QPushButton::clicked, this, &TutorialDialog::onNextButtonClicked);

    updateButtonsEnabled();
}

TutorialDialog::~TutorialDialog()
{
    // When dialog was destrcucted, we should set up old style to current widget
    returnOldStyle();
    delete ui;
}

void TutorialDialog::addWidgetToTutorial(QWidget* widget, const QString& text)
{
    if (m_infoItems.empty())
    {
        m_currentTutorialInfoIndex = 0;
    }

    m_infoItems.push_back({widget, text});
    updateButtonsEnabled();

    if (m_infoItems.size() == 1)
    {
        setTextAndStyle();
    }
}

void TutorialDialog::onPreviousButtonClicked()
{
    returnOldStyle();
    --m_currentTutorialInfoIndex;
    setTextAndStyle();
    updateButtonsEnabled();
}

void TutorialDialog::onNextButtonClicked()
{
    returnOldStyle();
    ++m_currentTutorialInfoIndex;
    setTextAndStyle();
    updateButtonsEnabled();
}

void TutorialDialog::updateButtonsEnabled()
{
    ui->previousButton->setEnabled(m_currentTutorialInfoIndex != -1 && m_currentTutorialInfoIndex > 0);
    ui->nextButton->setEnabled(m_currentTutorialInfoIndex != -1 && m_currentTutorialInfoIndex < m_infoItems.size() - 1);
}

void TutorialDialog::returnOldStyle()
{
    if (m_currentTutorialInfoIndex != -1)
    {
        m_infoItems[m_currentTutorialInfoIndex].widget->setStyleSheet(m_oldStyleOfWidget);
    }
}

void TutorialDialog::setTextAndStyle()
{
    ui->textBrowser->setText(m_infoItems[m_currentTutorialInfoIndex].text);
    m_oldStyleOfWidget = m_infoItems[m_currentTutorialInfoIndex].widget->styleSheet();
    m_infoItems[m_currentTutorialInfoIndex].widget->setStyleSheet(HIGHLIGHT_STYLE);
}

MainWindow

And then we will need to create this dialog in the launch slot of the tutorial dialog, as well as add widgets and information about these widgets to the dialog.

MainWindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    void onStartTutorialButtonClicked();

    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H

MainWindow.cpp

#include "MainWindow.h"
#include "ui_MainWindow.h"
#include "TutorialDialog.h"
#include "TutorialDialog.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    connect(ui->startTutorialButton, &QPushButton::clicked, this, &MainWindow::onStartTutorialButtonClicked);
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::onStartTutorialButtonClicked()
{
    TutorialDialog tutorialDialog;  // Create tutorial dialog

    // Add widgets to tutorial dialog
    tutorialDialog.addWidgetToTutorial(ui->projectStructureTreeView, tr("This is project structure"));
    tutorialDialog.addWidgetToTutorial(ui->createProjectButton, tr("Create new project using this button"));
    tutorialDialog.addWidgetToTutorial(ui->openProjectButton, tr("Open your project using this button"));
    tutorialDialog.addWidgetToTutorial(ui->infoWidget, tr("Here You will see some information about objects in your project"));

    // Start tutorial dialog
    tutorialDialog.exec();
}

Conclusion

To develop the idea of a learning window, you can use either the inheritance of all widgets used in the program with an override of the paintEvent method to add and remove a highlighted border, or completely override all the styles used by the widgets so that when installing stylesheet those styles that were not planned to break.

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.
- company blog
Support the author Donate

Comments

Only authorized users can post comments.
Please, Log in or Sign up
Donate

Hello, Dear Users of EVILEG!!!

If the site helped you, then support the development of the site financially, please.

You can do it by following ways:

Thank you, Evgenii Legotckoi

DK
Jan. 16, 2020, 2:19 a.m.
Dmitrij Korjagin

C++ - Test 001. The first program and data types

  • Result:73points,
  • Rating points1
LZ
Jan. 16, 2020, 2:03 a.m.
Lilija Ziganurova

C++ - Test 005. Structures and Classes

  • Result:50points,
  • Rating points-4
p
Jan. 13, 2020, 3:59 p.m.
popkadurak

C++ - Test 002. Constants

  • Result:100points,
  • Rating points10
Last comments
Jan. 17, 2020, 1:31 a.m.
Andrej Jankovich

Выглядит как ошибка библиотеки. Расскажите подробно на какой платформе вы собираете проект (MinGW или MSVC) их версии и версии Qt.
D
Jan. 16, 2020, 11:06 a.m.
DENIZ1819

Доброго времени суток, не подскажите, что делать в данной ситуации, после того, как я сделал все вышеуказанные инструкции для подключения библиотеки к проекту?
Jan. 14, 2020, 4:33 a.m.
Evgenij Legotskoj

Рекомендую Wt, достаточно мощная вещь. Этот фреймворк может использоваться для написания сайтов на C++, либо можно использовать только отдельный компоненты, например только ORM. Но я не знаю, ка…
a
Jan. 14, 2020, 4:29 a.m.
ayb

Спасибо за инфу. Поиск качественной ORM привел меня только к sqlite_orm, но не подходит из-за необходимости полноценной поддержки c++14. Про framework Wt не слышал, спасибо за наводку.
Jan. 14, 2020, 1:50 a.m.
Evgenij Legotskoj

Вы заблуждаетесь. Любая нормальная ORM позволяет выполнение сырых SQL запросов. А если хорошо разобраться в работе моделей данных в Qt, то не составит труда использовать ORM вместе с Qt, ту же с…
Now discuss on the forum
Jan. 17, 2020, 1:20 a.m.
Intruder

Александр, доброго дня! Я тоже только учусь и поэтому мой код может быть не совершенен. За отклик большое спасибо.
L
Jan. 16, 2020, 7:14 p.m.
LesLype

Oct Products Similiar To Lasix Kamagra Now.Co.Uk Sky Pharmacy Canada [url=http://cialibuy.com]Buy Cialis[/url] Viagra Ricetta Ripetibile
Jan. 16, 2020, 5:05 p.m.
Aleksej Vnukov

в лоадер вроде как нельзя передать значение при загрузке, я не нашел такой возможности, через стек без проблем. если использую лоадер - я передаю в С++ нужные параметры, а потом при загрузке стр…
Jan. 16, 2020, 7:16 a.m.
Aleksej Vnukov

доброго времени, есть приложение для телефона с iOS, интерфейс написан на QML, в котором получаю через FileDialog адрес картинки на устройсве (что-то вроде этого "file:assets-library://asset/as…
a
Jan. 16, 2020, 6:32 a.m.
ayb

Правильно ли я понимаю, что используя MVC, модель будет писаться на c++, а представление и контроллер объединены в qml? Не будет ли возникать тормозов в программе и перегруженности кода в qml из…
EVILEG
About
Services
© EVILEG 2015-2019
Recommend hosting TIMEWEB