Premiers pas en programmation avec Qt Widgets

Dans cette rubrique, nous vous enseignons les bases de Qt en développant une application « Bloc-notes » simple à l’aide de C++ et du Qt Widgets module. Cette application est un petit éditeur de texte qui vous permet de créer un fichier texte, de l'enregistrer, de l'imprimer ou de le rouvrir pour le modifier à nouveau. Vous pouvez également définir la police à utiliser.

Exécution de l'exemple

Vous pouvez exécuter l’exemple à partir de :

• Qt Creator

  Ouvrez le mode « Welcome » et sélectionnez l’exemple dans « Examples ». Pour plus d’informations, consultez Qt Creator: Tutoriel : Compiler et exécuter.

• Qt Extension for Visual Studio Code

  Exécutez la commande « Qt: Open Qt examples » à partir de l’ Command Palette, puis sélectionnez l’exemple dans la liste. Pour plus d’informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler 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 tout au long du processus de création du projet. L’assistant vous invite à saisir les paramètres requis pour ce type de projet particulier et crée le projet à votre place.

Pour créer le projet « Notepad », sélectionnez « File » > « New Project » > « Application (Qt) » > Qt Widgets Application > « Choose », puis 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’ Qt Widgets Application assistant crée un projet contenant un fichier source principal et un ensemble de fichiers définissant une interface utilisateur (widget Notepad) :

• CMakeLists.txt : le fichier de 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 d'interface utilisateur du widget Notepad.

Ces fichiers contiennent le code standard nécessaire pour vous permettre de compiler et d'exécuter le projet. Nous examinerons plus en détail le contenu de ces 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 possèdent un fichier d'en-tête portant leur nom.

#include "notepad.h"

#include <QApplication>

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

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

La ligne suivante crée un objet ` QApplication `. Cet objet gère les ressources à l’échelle de l’application et est nécessaire pour exécuter tout programme Qt utilisant ` Qt Widgets`. Il construit un objet `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. Parmi les exemples de widgets, on peut citer les champs de saisie de texte, les barres de défilement, les étiquettes et les boutons radio. Un widget peut également servir de conteneur à d’autres widgets ; une boîte de dialogue ou une fenêtre d’application principale, par exemple.

    Notepad w;

La ligne suivante affiche le widget Notepad à l’écran dans sa propre fenêtre. Les widgets peuvent également servir de conteneurs. C’est le cas, par exemple, d’ 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 fait entrer l’ QApplication dans sa boucle d’événements. Lorsqu’une application Qt est en cours d’exécution, des événements sont générés et envoyés aux widgets de l’application. Les clics de souris et les frappes au clavier sont des exemples d’événements.

    return a.exec();

En savoir plus

Conception d’une interface utilisateur

L'assistant génère une définition d'interface utilisateur au format XML : notepad.ui. Lorsque vous ouvrez le fichier notepad.ui dans Qt Creator, celui-ci s'ouvre automatiquement dans le concepteur d'Qt Widgets s intégré.

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

Utilisation de l’ Qt Widgets Designer

L’assistant crée une application qui utilise un fichier . QMainWindow. Celle-ci dispose de sa propre mise en page à laquelle vous pouvez ajouter une barre de menus, des widgets ancrables, des barres d’outils et une barre d’état. La zone centrale peut accueillir n’importe quel type de widget. L’assistant y place le widget Notepad.

Pour ajouter des widgets dans l’ Qt Widgets Designer :

1. En mode « Edit » d’ Qt Creator, double-cliquez sur le fichier notepad.ui dans la vue « Projects » pour ouvrir le fichier dans le Designer intégré d’ Qt Widgets.
2. Glissez-déposez les widgets Text Edit (QTextEdit) dans le formulaire.
3. Appuyez sur Ctrl+A (ou Cmd+A) pour sélectionner les widgets, puis 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 dans Qt Widgets Designer :

Vous pouvez consulter 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 précise la version XML et le codage de 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 d’interface utilisateur est utilisé conjointement avec le fichier d’en-tête et le fichier source de la classe Notepad. Nous examinerons le reste du fichier d’interface utilisateur dans les sections suivantes.

Fichier d'en-tête Notepad

L’assistant a généré un fichier d’en-tête pour la classe Notepad qui contient les #include 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 l’ QMainWindow, qui fournit une fenêtre principale à l’application :

#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 d’interface utilisateur générées à partir de fichiers .ui par l’outil uic:

namespace Ui {
class Notepad;
}

La déclaration de classe contient la macro ` Q_OBJECT `. Elle doit figurer en premier dans la définition de la classe et déclare notre classe comme une ` QObject`. Naturellement, elle doit également hériter de ` QObject`. Une ` QObject ` ajoute plusieurs fonctionnalités à une classe C++ standard. Notamment, le nom de la classe et les noms des slots peuvent être interrogés lors de l’exécution. Il est également possible d’interroger les types de paramètres d’un slot et de l’appeler.

class Notepad : public QMainWindow
{
    Q_OBJECT

Les lignes suivantes déclarent un constructeur comportant un argument par défaut nommé « parent ». La valeur 0 indique que le widget n’a pas de parent (il s’agit d’un widget de niveau supérieur).

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

La ligne suivante déclare un destructeur virtuel destiné à libérer les ressources acquises par l’objet au cours de son cycle de vie. Conformément à la convention de nommage 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 afin de garantir que les destructeurs des classes dérivées soient correctement appelés lorsqu’un objet est supprimé via un pointeur vers la classe de base.

    ~Notepad();

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

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

Fichier source de Notepad

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 de la classe ` Notepad ` :

Notepad::Notepad(QWidget *parent) :

La ligne suivante appelle le constructeur de la classe « 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’attribue au membre ui:

    ui(new Ui::Notepad)

La ligne suivante configure l'interface utilisateur :

{
    ui->setupUi(this);

Dans le destructeur, nous supprimons l’ ui:

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

Fichier de projet

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

# 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

Ajout d'interactions utilisateur

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

Cliquez sur « Type Here », puis ajoutez les options « New », « Open », « Save », « Save as », « Print » et « Exit ». Cela crée 5 lignes dans l'éditeur d'actions ci-dessous. Pour associer les actions aux slots, cliquez avec le bouton droit sur une action, sélectionnez « Go to slot > triggered() », puis complétez le code correspondant à ce slot.

Si vous souhaitez également ajouter ces actions à une barre d’outils, vous pouvez attribuer une icône à chaque « QAction », puis faire glisser l’« QAction » vers la barre d’outils. Pour attribuer une icône, saisissez un nom d’icône dans la propriété « Icon » de l’action concernée. Une fois l’« QAction » glissé vers la barre d’outils, un clic sur l’icône lancera l’emplacement 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 du fichier `notepad.h` :

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

Ouverture d’un fichier

Dans « notepad.ui », cliquez avec le bouton 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 ` reçoit en paramètre le fichier sélectionné ` file_name `. Nous stockons également le fichier sélectionné dans la variable globale ` currentFile ` pour une utilisation ultérieure. 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 une QTextStream instream pour le paramètre myfile. Le contenu du fichier myfile est copié dans QString text . setText(text) remplit le tampon de notre éditeur avec text.

Enregistrement d’un fichier

Nous créons la méthode permettant d'enregistrer un fichier de la même manière que pour l'ouverture d'un fichier, en cliquant avec le bouton droit 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`, qui contient le fichier sur lequel nous travaillions. Si nous ne parvenons pas à ouvrir ` myfile`, un message d'erreur s'affiche et la méthode s'arrête. Nous créons un objet ` QTextStream ` de type ` outstream`. Le contenu du tampon de l'éditeur est converti en texte brut, puis écrit dans ` outstream`.

Enregistrer 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();
}

La procédure est identique à celle utilisée pour enregistrer un fichier, à la seule différence qu'ici, vous devez saisir un nouveau nom de fichier pour le fichier à créer.

Imprimer un fichier

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

find_package(Qt6
    REQUIRED COMPONENTS Core Gui Widgets
    OPTIONAL_COMPONENTS PrintSupport
)

Dans ` notepad.cpp`, nous déclarons un objet `QPrinter` nommé ` 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 ouvrons une boîte de dialogue d’impression et enregistrons l’imprimante sélectionnée dans l’objet ` printDev`. Si nous avons cliqué sur ` Cancel ` sans sélectionner d’imprimante, la méthode revient à son point de départ. La commande d’impression proprement dite est lancée via ` 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 une variable booléenne indiquant si nous avons sélectionné une police à l’aide de ` QFontDialog`. Si c’est le cas, nous définissons la police à l’aide de ` ui->textEdit->setFont(myfont)`.

Copier, couper, coller, annuler et rétablir

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 les opérations de coupure, de collage, d’annulation et de rétablissement.

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

En savoir plus

Compilation et exécution depuis la ligne de commande

Pour compiler une application d'exemple à partir de la ligne de commande, créez un répertoire de compilation dédié. Accédez à ce répertoire et exécutez la commande ` qt-cmake ` pour configurer votre projet en vue de la compilation. Si la configuration du projet aboutit, les fichiers générés vous permettent de compiler le projet.

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

Ces commandes créent un exécutable dans le répertoire de compilation. L’outil CMake lit le fichier de projet et génère des instructions indiquant comment compiler l’application. Le générateur utilise ensuite ces instructions pour produire le binaire exécutable.

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

md notepad-build
cd notepad-build
C:\Qt\6.12.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 compiler l’application à la place de ` ninja` :

cmake --build