Premiers pas dans la programmation avec Qt Qt Widgets

Dans cette rubrique, nous enseignons les connaissances de base de Qt en mettant en œuvre une simple application Notepad à l'aide de C++ et du module Qt Widgets et le module L'application est un petit éditeur de texte qui vous permet de créer un fichier texte, de le sauvegarder, de l'imprimer ou de le rouvrir et de le modifier à nouveau. Vous pouvez également définir la police de caractères à utiliser.

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt Creatorouvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.

Création du projet Notepad

La configuration d'un nouveau projet dans Qt Creator est facilitée par un assistant qui vous guide pas à pas dans le processus de création du projet. L'assistant vous invite à saisir les paramètres nécessaires pour ce type particulier de projet et crée le projet pour vous.

Pour créer le projet Notepad, sélectionnez File > New Project > Application (Qt) > Qt Widgets Application > Choose, et suivez les instructions de l'assistant. Dans la boîte de dialogue Class Information, saisissez Notepad comme nom de classe et sélectionnez QMainWindow comme classe de base.

L'assistant Qt Widgets Application crée un projet qui contient un fichier source principal et un ensemble de fichiers qui spécifient une interface utilisateur (widget Notepad) :

• CMakeLists.txt - le fichier du projet.
• main.cpp - le fichier source principal de l'application.
• notepad.cpp - le fichier source de la classe notepad du widget Notepad.
• notepad.h - le fichier d'en-tête de la classe notepad du widget Notepad.
• notepad.ui - le formulaire UI pour le widget Notepad.

Les fichiers sont livrés avec le code de base nécessaire pour que vous puissiez construire et exécuter le projet. Nous examinerons de plus près le contenu des fichiers dans les sections suivantes.

En savoir plus

Fichier source principal

L'assistant génère le code suivant dans le fichier main.cpp :

#include "notepad.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Notepad w;
    w.show();
    return a.exec();
}

Nous allons parcourir le code ligne par ligne. Les lignes suivantes incluent les fichiers d'en-tête pour le widget Notepad et QApplication. Toutes les classes Qt ont un fichier d'en-tête qui porte leur nom.

#include "notepad.h"

#include <QApplication>

La ligne suivante définit la fonction main qui est le point d'entrée de toutes les applications basées sur le C et le C++ :

int main(int argc, char *argv[])

La ligne suivante crée un objet QApplication. Cet objet gère les ressources de l'application et est nécessaire à l'exécution de tout programme Qt qui utilise Qt Widgets. Il construit un objet d'application avec les arguments de ligne de commande argc exécutés dans argv(pour les applications GUI qui n'utilisent pas Qt Widgets, vous pouvez utiliser QGuiApplication à la place).

    QApplication a(argc, argv);

La ligne suivante crée l'objet Notepad. Il s'agit de l'objet pour lequel l'assistant a créé la classe et le fichier d'interface utilisateur. L'interface utilisateur contient des éléments visuels appelés widgets dans Qt XML. Des exemples de widgets sont les éditions de texte, les barres de défilement, les étiquettes et les boutons radio. Un widget peut également être un conteneur pour d'autres widgets ; une boîte de dialogue ou une fenêtre d'application principale, par exemple.

    Notepad w;

La ligne suivante montre le bloc-notes à l'écran dans sa propre fenêtre. Les widgets peuvent également fonctionner comme des conteneurs. C'est le cas par exemple de QMainWindow, qui contient souvent plusieurs types de widgets. Les widgets ne sont pas visibles par défaut ; la fonction show() rend le widget visible.

    w.show();

La ligne suivante permet à QApplication d'entrer dans sa boucle d'événements. Lorsqu'une application Qt Widgets est en cours d'exécution, des événements sont générés et envoyés aux widgets de l'application. Des exemples d'événements sont les pressions de souris et les frappes de touches.

    return a.exec();

En savoir plus

Conception d'une interface utilisateur

L'assistant génère une définition de l'interface utilisateur au format XML : notepad.ui. Lorsque vous ouvrez le fichier notepad.ui à l'adresse Qt Creator, il s'ouvre automatiquement dans l'interface intégrée Qt Widgets Designer.

Lorsque vous créez l'application, Qt Creator lance le programme Qt User Interface Compiler (uic) qui lit le fichier .ui et crée un fichier d'en-tête C++ correspondant, ui_notepad.h.

Utilisation de l'assistant Qt Widgets Designer

L'assistant crée une application qui utilise une page QMainWindow. Elle possède sa propre disposition à laquelle vous pouvez ajouter une barre de menu, des widgets d'ancrage, des barres d'outils et une barre d'état. La zone centrale peut être occupée par n'importe quel type de widget. L'assistant y place le widget Notepad.

Pour ajouter des widgets dans Qt Widgets Designer:

1. En mode Qt Creator Edit , double-cliquez sur le fichier notepad.ui dans la vue Projects pour lancer le fichier dans la vue intégrée Qt Widgets Designer.
2. Faites glisser et déposez les widgets Text Edit (QTextEdit) dans le formulaire.
3. Appuyez sur Ctrl+A (ou Cmd+A) pour sélectionner les widgets et cliquez sur Lay out Vertically (ou appuyez sur Ctrl+L) pour appliquer une disposition verticale (QVBoxLayout).
4. Appuyez sur Ctrl+S (ou Cmd+S) pour enregistrer vos modifications.

L'interface utilisateur se présente désormais comme suit : Qt Widgets Designer:

Vous pouvez visualiser le fichier XML généré dans l'éditeur de code :

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Notepad</class>
 <widget class="QMainWindow" name="Notepad">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>800</width>
    <height>400</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Notepad</string>
  </property>
  <widget class="QWidget" name="centralWidget">
   <layout class="QVBoxLayout" name="verticalLayout">
    <item>
     <widget class="QTextEdit" name="textEdit"/>
    </item>
   </layout>
  </widget>
  <widget class="QMenuBar" name="menuBar">
    ...

La ligne suivante contient la déclaration XML, qui spécifie la version XML et le codage des caractères utilisés dans le document :

<?xml version="1.0" encoding="UTF-8"?>

Le reste du fichier spécifie un élément ui qui définit un widget Notepad :

<ui version="4.0">

Le fichier UI est utilisé avec l'en-tête et le fichier source de la classe Notepad. Nous examinerons le reste du fichier UI dans les sections suivantes.

Fichier d'en-tête du bloc-notes

L'assistant a généré un fichier d'en-tête pour la classe Notepad qui contient les #includes nécessaires, un constructeur, un destructeur et l'objet UI. Le fichier se présente comme suit :

#include <QMainWindow>

QT_BEGIN_NAMESPACE
namespace Ui {
class Notepad;
}
QT_END_NAMESPACE

class Notepad : public QMainWindow
{
    Q_OBJECT

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

private:
    Ui::Notepad *ui;
    QString currentFile;
};

La ligne suivante inclut QMainWindow qui fournit une fenêtre d'application principale :

#include <QMainWindow>

Les lignes suivantes déclarent la classe Notepad dans l'espace de noms Ui, qui est l'espace de noms standard pour les classes UI générées à partir des fichiers .ui par l'outil uic:

namespace Ui {
class Notepad;
}

La déclaration de classe contient la macro Q_OBJECT. Elle doit venir en premier dans la définition de la classe, et déclare notre classe comme étant une QObject. Naturellement, elle doit aussi hériter de QObject. Un QObject ajoute plusieurs capacités à une classe C++ normale. Notamment, le nom de la classe et les noms des slots peuvent être interrogés au moment de l'exécution. Il est également possible d'interroger les types de paramètres d'un slot et de l'invoquer.

class Notepad : public QMainWindow
{
    Q_OBJECT

Les lignes suivantes déclarent un constructeur ayant un argument par défaut appelé parent. La valeur 0 indique que le widget n'a pas de parent (c'est un widget de premier niveau).

public:
    explicit Notepad(QWidget *parent = nullptr);

La ligne suivante déclare un destructeur virtuel pour libérer les ressources acquises par l'objet au cours de son cycle de vie. Selon la convention de nommage du C++, les destructeurs portent le même nom que la classe à laquelle ils sont associés, préfixé par un tilde (~). Dans QObject, les destructeurs sont virtuels pour garantir que les destructeurs des classes dérivées sont invoqués correctement lorsqu'un objet est supprimé par le biais d'un pointeur vers la classe de base.

    ~Notepad();

Les lignes suivantes déclarent une variable membre qui est un pointeur sur la classe Notepad UI. Une variable membre est associée à une classe spécifique et accessible à toutes ses méthodes.

private:
    Ui::Notepad *ui;
    QString currentFile;
};

Fichier source du bloc-notes

Le fichier source généré par l'assistant pour la classe Notepad se présente comme suit :

#include "notepad.h"
#include "ui_notepad.h"

Notepad::Notepad(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::Notepad)
{
    ui->setupUi(this);

}

Les lignes suivantes incluent le fichier d'en-tête de la classe Notepad généré par l'assistant et le fichier d'en-tête de l'interface utilisateur généré par l'outil uic:

#include "notepad.h"
#include "ui_notepad.h"

La ligne suivante définit le constructeur Notepad:

Notepad::Notepad(QWidget *parent) :

La ligne suivante appelle le constructeur QMainWindow, qui est la classe de base de la classe Notepad :

    QMainWindow(parent),

La ligne suivante crée l'instance de la classe UI et l'affecte au membre ui:

    ui(new Ui::Notepad)

La ligne suivante configure l'interface utilisateur :

{
    ui->setupUi(this);

Dans le destructeur, nous supprimons le membre ui:

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

Fichier de projet

L'assistant génère le fichier de projet suivant, CMakeLists.txt, pour nous :

# Copyright (C) 2022 The Qt Company Ltd.
# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

cmake_minimum_required(VERSION 3.16)
project(notepad LANGUAGES CXX)

find_package(Qt6
    REQUIRED COMPONENTS Core Gui Widgets
    OPTIONAL_COMPONENTS PrintSupport
)

qt_standard_project_setup()

qt_add_executable(notepad
    main.cpp
    notepad.cpp notepad.h notepad.ui
)

set_target_properties(notepad PROPERTIES
    WIN32_EXECUTABLE TRUE
    MACOSX_BUNDLE TRUE
)

target_link_libraries(notepad PRIVATE
    Qt6::Core
    Qt6::Gui
    Qt6::Widgets
)

if(TARGET Qt6::PrintSupport)
    target_link_libraries(notepad PRIVATE Qt6::PrintSupport)
endif()

# Resources:
set(notepad_resource_files
    "images/bold.png"
    "images/copy.png"
    "images/create.png"
    "images/cut.png"
    "images/edit_redo.png"
    "images/edit_undo.png"
    "images/exit.png"
    "images/font.png"
    "images/info.png"
    "images/italic.png"
    "images/new.png"
    "images/open.png"
    "images/paste.png"
    "images/pencil.png"
    "images/print.png"
    "images/save.png"
    "images/save_as.png"
    "images/underline.png"
)

qt_add_resources(notepad "notepad"
    PREFIX
        "/"
    FILES
        ${notepad_resource_files}
)

install(TARGETS notepad
    BUNDLE  DESTINATION .
    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
)

qt_generate_deploy_app_script(
    TARGET notepad
    OUTPUT_SCRIPT deploy_script
    NO_UNSUPPORTED_PLATFORM_ERROR
)
install(SCRIPT ${deploy_script})

Le fichier de projet spécifie les fichiers source, d'en-tête et d'interface utilisateur inclus dans le projet.

En savoir plus

Ajouter une interaction avec l'utilisateur

Pour ajouter des fonctionnalités à l'éditeur, nous commençons par ajouter des éléments de menu et des boutons sur une barre d'outils.

Cliquez sur "Type Here", et ajoutez les options New, Open, Save, Save as, Print et Exit. Cela crée 5 lignes dans l'éditeur d'actions ci-dessous. Pour relier les actions aux emplacements, cliquez avec le bouton droit de la souris sur une action et sélectionnez Go to slot > triggered(), puis complétez le code pour l'emplacement en question.

Si vous souhaitez également ajouter les actions à une barre d'outils, vous pouvez attribuer une icône à chaque action QAction, puis faire glisser l'action QAction vers la barre d'outils. Vous attribuez une icône en saisissant un nom d'icône dans la propriété Icon de l'action concernée. Lorsque le QAction a été glissé dans la barre d'outils, un clic sur l'icône permet de lancer le slot associé.

Complétez la méthode newDocument():

void Notepad::newDocument()
{
    currentFile.clear();
    ui->textEdit->setText(QString());
}

La variable currentFile est une variable globale contenant le fichier en cours d'édition, et clear() efface le tampon de texte. La variable currentFile est définie dans la partie privée de notepad.h :

private:
    Ui::Notepad *ui;
    QString currentFile;

Ouverture d'un fichier

Dans notepad.ui, faites un clic droit sur actionOpen et sélectionnez Go to Slot.

La méthode complète open().

void Notepad::open()
{
    QString fileName = QFileDialog::getOpenFileName(this, "Open the file");
    if (fileName.isEmpty())
        return;
    QFile file(fileName);
    currentFile = fileName;
    if (!file.open(QIODevice::ReadOnly | QFile::Text)) {
        QMessageBox::warning(this, "Warning", "Cannot open file: " + file.errorString());
        return;
    }
    setWindowTitle(fileName);
    QTextStream in(&file);
    QString text = in.readAll();
    ui->textEdit->setText(text);
    file.close();
}

QFileDialog::getOpenFileName ouvre une boîte de dialogue vous permettant de sélectionner un fichier. L'objet QFile myfile a pour paramètre le fichier sélectionné file_name. Nous stockons également le fichier sélectionné dans la variable globale currentFile à des fins ultérieures. Nous ouvrons le fichier avec file.open en tant que fichier texte en lecture seule. S'il ne peut pas être ouvert, un avertissement est émis et le programme s'arrête.

Nous définissons un QTextStream instream pour le paramètre myfile. Le contenu du fichier myfile est copié dans QString text . setText(text) remplit la mémoire tampon de notre éditeur avec text.

Enregistrement d'un fichier

Nous créons la méthode d'enregistrement d'un fichier de la même manière que pour l'ouverture d'un fichier, en cliquant avec le bouton droit de la souris sur actionSave et en sélectionnant Go to Slot.

void Notepad::save()
{
    QString fileName;
    // If we don't have a filename from before, get one.
    if (currentFile.isEmpty()) {
        fileName = QFileDialog::getSaveFileName(this, "Save");
        if (fileName.isEmpty())
            return;
        currentFile = fileName;
    } else {
        fileName = currentFile;
    }
    QFile file(fileName);
    if (!file.open(QIODevice::WriteOnly | QFile::Text)) {
        QMessageBox::warning(this, "Warning", "Cannot save file: " + file.errorString());
        return;
    }
    setWindowTitle(fileName);
    QTextStream out(&file);
    QString text = ui->textEdit->toPlainText();
    out << text;
    file.close();
}

QFile L'objet myfile est lié à la variable globale current_file, la variable qui contient le fichier avec lequel nous avons travaillé. Si nous ne pouvons pas ouvrir myfile, un message d'erreur est émis et la méthode s'arrête. Nous créons un QTextStream outstream . Le contenu de la mémoire tampon de l'éditeur est converti en texte brut, puis écrit sur outstream.

Enregistrement d'un fichier sous un autre nom

void Notepad::saveAs()
{
    QString fileName = QFileDialog::getSaveFileName(this, "Save as");
    if (fileName.isEmpty())
        return;
    QFile file(fileName);

    if (!file.open(QFile::WriteOnly | QFile::Text)) {
        QMessageBox::warning(this, "Warning", "Cannot save file: " + file.errorString());
        return;
    }
    currentFile = fileName;
    setWindowTitle(fileName);
    QTextStream out(&file);
    QString text = ui->textEdit->toPlainText();
    out << text;
    file.close();
}

Il s'agit de la même procédure que pour l'enregistrement d'un fichier, à la seule différence que vous devez saisir un nouveau nom pour le fichier à créer.

Impression d'un fichier

Si vous souhaitez utiliser les fonctionnalités d'impression, vous devez ajouter PrintSupport au fichier du projet :

find_package(Qt6
    REQUIRED COMPONENTS Core Gui Widgets
    OPTIONAL_COMPONENTS PrintSupport
)

Dans notepad.cpp, nous déclarons un objet QPrinter appelé printDev:

void Notepad::print()
{
#if defined(QT_PRINTSUPPORT_LIB) && QT_CONFIG(printer)
    QPrinter printDev;
#if QT_CONFIG(printdialog)
    QPrintDialog dialog(&printDev, this);
    if (dialog.exec() == QDialog::Rejected)
        return;
#endif // QT_CONFIG(printdialog)
    ui->textEdit->print(&printDev);
#endif // QT_CONFIG(printer)
}

Nous lançons une boîte de dialogue d'impression et stockons l'imprimante sélectionnée dans l'objet printDev. Si nous avons cliqué sur Cancel et que nous n'avons pas sélectionné d'imprimante, la méthode est renvoyée. La commande d'impression réelle est donnée par ui->textEdit->print avec notre objet QPrinter comme paramètre.

Sélection d'une police

void Notepad::selectFont()
{
    bool fontSelected;
    QFont font = QFontDialog::getFont(&fontSelected, this);
    if (fontSelected)
        ui->textEdit->setFont(font);
}

Nous déclarons un booléen indiquant si nous avons sélectionné une police avec QFontDialog. Si c'est le cas, nous définissons la police avec ui->textEdit->setFont(myfont).

Copier, couper, coller, annuler et refaire

Si vous sélectionnez du texte et que vous souhaitez le copier dans le presse-papiers, vous appelez la méthode appropriée de ui->textEdit. Il en va de même pour couper, coller, annuler et rétablir.

Ce tableau indique le nom de la méthode à utiliser.

En savoir plus

Construction et exécution à partir de la ligne de commande

Pour construire une application d'exemple à partir de la ligne de commande, créez un répertoire de construction. Accédez au répertoire de construction et exécutez qt-cmake pour configurer votre projet en vue de sa construction. Si le projet est configuré avec succès, les fichiers générés vous permettent de construire le projet.

md <build_directory>
cd <build_directory>
<qt_installation_directory>\bin\qt-cmake -GNinja <source_directory>
<generator>

Les commandes créent un exécutable dans le répertoire de construction. L'outil CMake lit le fichier de projet et produit des instructions sur la manière de construire l'application. Le générateur utilise ensuite les instructions pour produire le binaire exécutable.

Par exemple, pour construire l'exemple Notepad sous Windows, si vous utilisez Ninja comme générateur, entrez les commandes suivantes :

md notepad-build
cd notepad-build
C:\Qt\6.11.0\msvc2022_64\bin\qt-cmake -GNinja C:\Examples\notepad
ninja

Si vous n'utilisez pas Ninja comme générateur, utilisez la commande CMake indépendante du générateur pour construire l'application au lieu de ninja:

cmake --build