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 :

 
Sélectionnez
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 :

 
Sélectionnez
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 :

 
Sélectionnez
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.