Première utilisation de Qt Quick avec PyQt

Troisième partie : réalisation d'un programme complet avec Qt Quick et PyQt 5

Auteur

Charlie Gentil

Cet article clôture la série d'articles destinées à présenter l'utilisation de Qt Quick avec PyQt. La création d'un programme complet nous permettra de découvrir quelques fonctionnalités avancées de Qt Quick.

- Titre : Première utilisation de Qt Quick avec PyQt

- Auteur : Charlie Gentil

- Parution : 31 décembre 2013

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2013 Charlie Gentil. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Introduction

- II. Création de la GUI

- II-A. Création de la fenêtre principale

I - Introduction

Nous avons découvert dans les articles …. et …. comment créer une interface graphique avec Qt Quick et le langage ainsi qu'une manière de faire interagir ce code avec un code Python.

Nous allons aborder cette dernière partie avec un objectif simple : créer une application basique mais complète. Pour cela je vous propose la création d'un éditeur de texte. Celui-ci devra avoir à minima les fonctionnalités suivantes :

- création d'un nouveau fichier ;

- modification d'un fichier existant ;

- enregistrement des modifications ;

- parcours de dossiers à la recherche du fichier voulu (un FileDialog quoi) ;

- parcours de dossiers à la recherche d'un emplacement voulu (un DirDialog quoi) ;

- visualisation des informations du fichier (emplacement, taille, date de création, …).

Dans un premier temps nous allons créer l'interface graphique et la rendre la plus fonctionnelle possible sans passer par Python, ceci nous permettra de découvrir de nous items et/ou modules offerts par Qt Quick.

Une fois celle-ci achevée ou presque, nous passerons au code Python. Lors de cette phase nous rendrons l'application pleinement fonctionnelle. Lors de cette étape nous aurons potentiellement besoin d'adapter notre code QML, ce qui se fera, le cas échéant très simplement et sans recompilation fastidieuse.

II - Création de la GUI

Afin d'obtenir un résultat convenable commençons par définir notre besoin. Notre GUI devra être scindée en trois parties :

- la première sera réservée au placement des boutons qui nous permettrons de charger, sauvegarder, etc notre document ;

- la deuxième partie sera celle nous permettant d'éditer le document ;

- quant à la troisième elle contiendra les informations liées à notre document.

II-A - Création de la fenêtre principale

Jusqu'à présent nous avions utilisé exclusivement des items Rectangle pour la création de notre fenêtre principale. L'avantage de cet item est qu'il est très basique et très facilement configurable. Cependant, si nous souhaitons utiliser par exemple une barre de menu il va falloir tout faire soi-même.

Heureusement pour nous, il existe un module dans Qt Quick 2.x très pratique pour nous éviter ceci. Il s'agit du module QtQuick.Controls 1.x.

Celui-ci contient les quatres grandes familles d'items suivantes :

- fenêtre de l'application ;

- vues et navigation ;

- contrôles et widgets divers ;

- menus.

Voici comment créer notre fenêtre grâce à ce module et à l'item ApplicationWindow :

import QtQuick.Controls 1.0

ApplicationWindow {
title: "Traitement de textes"
width: 500
height: 700

}

Hé oui, ce nouveau module ne déroge pas à la règle de Qt Quick : simplicité et efficacité.

Comme nous l'avons vu plus haut, le but est ici de pouvoir facilement créer une fenêtre avec une barre de menu et tout autre « outil » nous permettant de rendre notre programme relativement complet.

Je vous propose donc d'y ajouter :

- une barre de menus ;

- une barre d'outils ;

- et une barre de statu.

L'item ApplicatioWindow possède, entre autre, trois propriétés permettant de faire ceci. Il s'agit tout simplement des propriétés menuBar, toolBar et statusBar qui seront respectivement à construire avec les items MenuBar, ToolBar et StatusBar. Voici le code :

import QtQuick.Controls 1.0

ApplicationWindow {
title: qsTr("Traitement de textes")
width: 1200
height: 700
menuBar: MenuBar {}
toolBar: ToolBar {}
statusBar: StatusBar {}
}

Il ne reste plus qu'à compléter chacun de ces trois items afin d'obtenir le résultat attendu.

Concernant la barre de menu nous allons nous contenter d'avoir un menu Fichier comprenant les options suivantes :

- créer ;

- ouvrir ;

- enregistrer ;

- et fermer.

Pour la barre de d'outils nous allons mettre en place les mêmes fonctionnalités.

La barre de statu nous permettra d'indiquer le nom du document qui sera en cours d'édition.

Voici comment compléter votre code :

import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0
ApplicationWindow {
title: qsTr("Envi'Tools")
width: 1200
height: 700
menuBar: MenuBar {
Menu {
id : fichier
title: qsTr("Fichier")
MenuItem {
text: qsTr("Créer")
}
MenuItem {
text: qsTr("Ouvrir")
}
MenuItem {
text: qsTr("Enregistrer")
}
MenuItem {
text: qsTr("Quitter")
onTriggered: Qt.quit()
}
}
}
toolBar: ToolBar {
RowLayout {
ToolButton{
text : "Créer"
}
ToolButton{
iconSource: "/home/charlie/dvp/redac/documents/03-programme-complet/images/document-open.png"
}
ToolButton{
text : "Enregistrer"
}
ToolButton{
text : "Fermer"
onClicked: Qt.quit()
}
}
}
statusBar: StatusBar {Label {text: "Aucun document d'ouvert"}}
}

Quelques petites explications sur ce que l'on a ajouté.

Tout d'abord, vous remarquerez un nouvel import. Celui-ci permet d'avoir un disposition les layouts de type Grid, Column et Row. Il est nécessaire pour notre barre d'outils. Dans l'immédiat nous ne rentrons pas plus dans le fonctionnement de ceux-ci.

Le MenuBar attend comme item enfant des Menus eux attendant soient d'autres Menu soit des MenuItem.