Outils pour utilisateurs

Outils du site


fr:actionaz_qtscript

Différences

Ci-dessous, les différences entre deux révisions de la page.


Révision précédente
fr:actionaz_qtscript [2021/02/13 11:23] (Version actuelle) – modification externe 127.0.0.1
Ligne 1: Ligne 1:
 +====== Création d'une fenêtre avec QtScript ======
  
 +Après avoir lu quelques personnes ayant eu des soucis pour créer des fenêtres personnalisées, en faisant aussi partie, je me suis motivé pour écrire un petit tutoriel. Je vous pris de m'excuser par avance pour les fautes d'orthographe car je sais pertinement que malgrès les 20 000 relectures que je vais faire, je vais en oublier.
 +
 +Il necessitera malheuresement (oupah) quelques connaissances en javascript, d'un point de vue syntaxique surtout.
 +
 +Tout d'abord, je me suis beaucoup inspiré de ces 2 tutoriels, transcrit en JS (QtScript) utilisé par Actiona.
 +
 +  * [[http://web.univ-pau.fr/~puiseux/enseignement/python/tutoQt-zero/tuto-PyQt-zero.8.html#ss_part_1|Tuto 1]] (Python)
 +  * [[http://fr.openclassrooms.com/informatique/cours/programmez-avec-le-langage-c/introduction-a-qt|Tuto 2]] (C++)
 +
 +Maintenant la liste des classes (en c++ toujours) : 
 +
 +  * [[http://qt-project.org/doc/qt-5/classes.html|Documentation Officiel de Qt]]
 +  * [[http://qt.developpez.com/doc/4.7/classes/|Qt - Developpez.com]]
 +
 +Toute la documentation est écrite en c++, donc cela peux necessiter quelques connaissances pour le retranscrire en js. Il n'existe maheuresement pas de doc pour QtScript. (Si vous trouvez, pm me please =))
 +
 +===== Les widgets =====
 +
 +Un widget est l'élément de base de Qt. Tout les élements contenus dans une fenêtre sont des widgets. La plupart des classes que nous allons voir dans la suite de ce tutoriel hérite de QWidget.
 +
 +QWidget utilisé seul permet la création d'une fenêtre. Un widget contenu dans aucun autre widget est considéré comme une fenêtre.
 +
 +<code javascript>
 +var w = new QWidget();
 +w.show();
 +//La méthode show ne bloque pas le déroulement du programme, donc si vous utilisez ce code là tel quel, la fenêtre restera affiché une fraction de seconde avant de disparaitre.
 +</code>
 +
 +{{ :fr:qwidget.png?nolink&400 | Screen of QWidget }}
 +
 +Il n'est pas possible de rendre une fenêtre modal avec QWidget. Ainsi, QWidget n'est pas adapté pour être utilisé comme le widget parent d'une fenêtre. (Même si cela est possible en C++ ou en Python).
 +
 +<note tip>Modale : Est dit d'une fenêtre qui bloque les interactions possible avec le reste de l'application, met l'application en "pause".
 +
 +Non modale : Est dit d'une fenêtre qui ne bloque pas les interactions possible avec le reste de l'application, ne met pas l'application en "pause".</note>
 +
 +N'importe quelle classe ou presque hérité de QWidget peut être utilisé comme fenêtre, vous pouvez donc définir comme fenêtre principal un unique champ de texte ou un simple bouton.
 +
 +<code javascript>
 +var b = new QPushButton();
 +b.show();
 +//La méthode show ne bloque pas le déroulement du programme, donc si vous utilisez ce code là tel quel, la fenêtre restera affiché une fraction de seconde avant de disparaitre.
 +</code>
 +
 +{{ :fr:qpushbutton.png?nolink | Screen of QPushButton }}
 +
 +Bien entendu en pratique, personne ne fait ça mais plutôt ceci.
 +
 +<code javascript>
 +var w = new QWidget();
 +var b = new QPushButton("Hello World", w);
 +w.show();
 +//La méthode show ne bloque pas le déroulement du programme, donc si vous utilisez ce code là tel quel, la fenêtre restera affiché une fraction de seconde avant de disparaitre.
 +</code>
 +
 +{{ :fr:qpushbutton-2.png?nolink | Screen of QPushButton }}
 +
 +Un bouton dans un widget.
 +
 +Évidement, vous allez vous dire que tout ce que vous avez lu précédemment ne sert à rien car cela ne reste pas affiché et vous avez partiellement raison.
 +
 +Let's go pour la suite !!
 +
 +==== Les widgets spécifiques pour créer une fenêtre ====
 +
 +Les 2 principaux widget utilisés pour créer une fenêtre sont :
 +  * **QDialog** : Cette classe est plus générique, elle permet de créer une fenêtre simple de la même manière que QWidget à la différence qu'elle est modal par défaut. 
 +  * **QMainWindow** : Ce widget est le plus complet, il sert a créer la fenêtre principal d'une application avec des menus, des barres d'outils, de l'espace pour du contenu, etc.
 +
 +=== Propriété de QWidget ===
 +
 +Je vous le rapelle, QDialog, QPushButton, QLineEdit... Tout les objets que vous allez avoir à manipuler pour construire votre fenêtre sont des enfants de QWidget. 
 +Il y a donc des propriétés et des méthodes qui sont communes.
 +
 +<note>Rappel :
 +Tout widget peut servir de fenêtre.
 +C'est le widget qui n'a pas de parent qui sera considéré comme étant la fenêtre.</note>
 +
 +Certaines sont valides pour tout types de widgets, ainsi que pour les fenêtres, d'autre uniquement pour les fenêtres.
 +
 +<note important>Ceci n'est pas une liste exhaustive, je vous renvoie [[http://qt.developpez.com/doc/4.7/qwidget/|ici]] pour avoir la liste détaillé. Cependant attention, il peux y avoir quelques différences pour les objets QtScript.
 +
 +Ci-dessous la liste complète des propriétés et des méthodes contenus dans l'objet QDialog. Ce qui comprend celles contenus dans QWidget.</note>
 +
 +{{ :fr:classe-qwidget.png?direct | Screen of classe QDialog }}
 +
 +== Les communes ==
 +
 +Ceci n'est pas une liste exhaustive, je vous renvoie [[http://qt.developpez.com/doc/4.7/qwidget||ici]] pour avoir la liste détaillé.
 +
 +  * **cursor** : Propriété qui permet de choisir le curseur qui doit s'afficher.
 +
 +<code javascript>
 +var a = new QDialog(); //Créer un nouvel objet QDialog
 +a.cursor = new QCursor(Qt.CrossCursor);
 +a.exec(); //Permet d'afficher la fenêtre
 +</code>
 +
 +Paramètre attendu par QCursor [[http://qt.developpez.com/doc/4.7/qt/#cursorshape-enum|ici]]. Pensez à remplacer :: par . !
 +
 +  * **enabled** : Propriété qui permet d'activer ou de désactiver un widget, un widget désactivé est généralement grisé.
 +
 +<code javascript>
 +var a = new QDialog();
 +a.enabled = false;
 +a.exec();
 +</code>
 +
 +  * **size** : Propriété qui permet de modifier la taille d'un widget.
 +
 +<code javascript>
 +var a = new QDialog();
 +a.size = new QSize(200, 500); //a mesurera 200px de largeur sur 500px de hauteur
 +a.exec();
 +</code>
 +
 +<note important>Comme vous pouvez voir, sur l'image posté plus haut, QDialog a une propriété height et width, mais elle n'est pas modifiable directement. Je ne sais pourquoi, ça ne marche pas.</note>
 +
 +Pour modifier uniquement la hauteur ou la largeur d'un QWidget et garder l'autre valeur dynamique par rapport à votre contenu :
 +
 +<code javascript>
 +var a = new QDialog();
 +var b = new QPushButton("Tjhezrktjzeurtkhjerztg usdyukhf nukafhjazghef ezugfazejfbe zknhfkzejh fnkezjfgekz jhfezjfgezj kfhezhfkuez gfzkejhfjezkjfh kezhjf kze fezf", a);
 +
 +b.size = new QSize(b.sizeHint.width(), 100); //sizeHint récupère la taille d'un QWidget en fonction de son contenu
 +a.exec();
 +</code>
 +
 +Dans cette exemple, la hauteur du bouton devient 100px et la largeur reste dynamique.
 + 
 +<note important>Cela ne fonctionne pas si le widget (ici un bouton) est placé dans un layout.</note>
 +
 +Autre solution pour ne modifier que la hauteur ou la largeur... Ou les 2, qui fonctionne, que le widget à redimensionner soit placé dans un layout ou non.
 +
 +<code javascript>
 +var a = new QDialog();
 +var b = new QPushButton("Tjhezrktjzeurtkhjerztg", a);
 +
 +b.minimumWidth = 200; //Pour modifier la largeur
 +b.maximumWidth = 200;
 +
 +b.minimumHeight = 200; //Pour modifier la hauteur
 +b.maximumHeight = 200;
 +
 +b.minimumSize = new QSize(200, 200); //Pour modifier la largeur et la hauteur
 +b.maximumSize = new QSize(200, 200);
 +
 +a.exec();
 +</code>
 +
 +<note important>b.size = new QSize(200, 200); et b.minimumSize = new QSize(200, 200); b.maximumSize = new QSize(200, 200); donne tout les 2 le même résultat, dans les 2 cas, en cas de redimensionnement de la fenêtre, le widget gardera la taille spécifié. Cependant, le premier ne marche pas si le widget est placé dans un layout, tandis que le 2 fonctionne très bien.</note>
 +
 +  * **visible** : Propriété qui contrôle la visibilité d'une fenêtre.
 +
 +<code javascript>
 +var a = new QDialog();
 +var b = new QLabel("Hello World");
 +b.setVisible(false); //Par défaut la valeur est à true, cap'taine obvious me voilà =)
 +//b.hide(); //donne le même résultat et .show() le rend visible
 +a.exec();
 +</code>
 +
 +Il n'est pas possible de rendre le widget qui tient lieu de fenêtre principal de l'application invisible. Uniquement les fenêtres secondaires ou les widgets contenus dans une fenêtre.
 +
 +== Les spécifiques aux fenêtres ==
 +
 +  * ** setWindowFlags() ** : Méthode permettant de définir un comportement à la fenêtre.
 +
 +<code javascript>
 +var a = new QDialog();
 +a.setWindowFlags(Qt.WindowTitleHint);
 +a.exec();
 +</code>
 +
 +Il est aussi possible de spécifier le flag de cette manière.
 +
 +<code javascript>
 +var a = new QDialog(0, Qt.WindowTitleHint);
 +a.exec();
 +</code>
 +
 +Ici, le premier paramètre envoyé à l'objet QDialog est le widget parent (ici comme c'est le widget principal de l'application, il y en a pas donc on met 0) et le second le flag.
 +
 +Exemple de flag :
 +
 +  * Qt.WindowTitleHint : Permet d'afficher uniquement le titre de la fenêtre ainsi que la croix de fermeture dans le header de la fenêtre.
 +  * Qt.MSWindowsFixedSizeDialogHint : Permet de fixer la taille de la fenêtre à la taille spécifiée dans sizeHint (En gros, cela fixe la taille de la fenêtre, elle n'est plus redimensionnable).
 +
 +<note important>Il est possible de spécifier plusieurs flags mais je n'ai pas trouvé comment faire avec QtScript :(.</note>
 +
 +Le problème semble subvenir lorsque les flags sont à mettre en paramètre d'une méthode.
 +
 +<code javascript>var a = new QDialog(0, Qt.MSWindowsFixedSizeDialogHint | Qt.WindowTitleHint);</code>
 +
 +comme
 +
 +<code javascript>var a = new QDialog(); 
 +a.setWindowFlags(Qt.MSWindowsFixedSizeDialogHint | Qt.WindowTitleHint);</code>
 +
 +prennent en compte uniquement le second. 
 + 
 +<code javascript>var b = new QLabel("Hello", a, Qt.AlignBottom | Qt.AlignRight);</code>
 +
 +prend en compte uniquement le second aussi. Or
 +
 +<code javascript>var b = new QLabel("Hello", a);
 +b.alignment = Qt.AlignBottom | Qt.AlignRight;</code>
 +
 +prend bien en compte les 2.
 +
 +J'ai essayer pleins de syntaxes différentes pour le QDialog mais je n'ai rien trouvé de concluant.
 +
 +  * Qt.Tool : Permet d'afficher une fenêtre de type "Outil".
 +
 +  * ** setWindowTitle() ** : Méthode permettant de définir un titre à la fenêtre.
 +
 +<code javascript>
 +var a = new QDialog();
 +a.setWindowTitle("Hello World");
 +a.exec();
 +</code>
 +
 +  * ** windowIcon ** : Propriété permettant de définir une icône à la fenêtre.
 +
 +<code javascript>
 +var a = new QDialog();
 +a.windowIcon = new QIcon("icon.png");
 +a.exec();
 +</code>
 +
 +Cette propriété attend un objet QIcon, qui lui même attend le chemin d'une image en paramètre.
 +
 +  * ** setWindowOpacity ** : Méthode permettant de définir l'opacité de la fenêtre. (Il est aussi possible de modifier la propriété windowOpacity directement).
 +
 +<code javascript>
 +var a = new QDialog();
 +a.setWindowOpacity(0.5);
 +a.exec();
 +</code>
 +
 +==== QDialog ====
 +
 +QDialog est un widget qui a pour but d'afficher des boites de dialogues. C'est l'utilisation la plus adéquates de ce widget.
 +
 +Une boite de dialogue est une fenêtre secondaire qui va avoir pour but d’interagir avec l'utilisateur, lui poser une/des question(s), lui faire rentrer une donnée particulière, etc...
 +
 +Dans le cas d'une fenêtre principal, il est préférable d'utiliser QMainWindow.
 +
 +Il existe 2 méthodes pour définir si une fenêtre est modal ou non. Le QDialog ou QMainWindow principal de votre fenêtre sera obligatoirement modal, qui est son comportement par défaut, sinon il disparaitra à peine le script lancé. Les QDialogs secondaires peuvent ne pas être modal.
 +
 +  * ** exec() ** : Méthode permettant d'afficher une fenêtre modal.
 + 
 +  * ** show() ** : Méthode permettant d'afficher une fenêtre non modal.
 +
 +=== Les signaux et les slots ===
 +
 +Histoire de bien comprendre ce passage, je vous renvoie vers ce cours d'openclassrooms : [[http://fr.openclassrooms.com/informatique/cours/programmez-avec-le-langage-c/les-signaux-et-les-slots-2|Lien]].
 +
 +En théorie, si vous êtes revenus ici, c'est que vous savez ce qu'est un signal et un slot, cool !
 +
 +Voyons voir :
 +
 +<code javascript>
 +var a = new QDialog();
 +var b = new QDialogButtonBox(a); //Créer une boite pour ranger nos boutons, avec a comme widget parent, vu qu'on veux que le QDialogButtonBox soit dans le QDialog
 +b.addButton(QDialogButtonBox.Ok); //Créer un bouton ok dans cette boite
 +b.addButton(QDialogButtonBox.Cancel); //Créer un bouton annuler dans cette boite
 +
 +b.accepted.connect(a.accept); //accepted est un signal emis par le QDialogButtonBox qui execute le slot accept du QDialog
 +b.rejected.connect(a.reject); //rejected est un signal emis par le QDialogButtonBox qui execute le slot reject du QDialog
 +
 +a.exec();
 +</code>
 +
 +<code javascript>
 +b.accepted.connect(a.accept); 
 +</code>
 +
 +Ici, lorsque le signal "accepted" est émis, (quand on a cliqué sur Ok), il appelle le slot "accept" de a. Ce slot va fermer la fenêtre et permettre de continuer l’exécution du script et de passer à l’exécution des lignes de code qui vont suivre votre QDialog.exec().
 +
 +<code javascript>
 +b.rejected.connect(a.reject);
 +</code>
 +
 +Ici, lorsque le signal "rejected" est émis, (quand on a cliqué sur Quitter), il appelle le slot "reject" de a. Ce slot va fermer la fenêtre et stopper le script.
 +
 +Ces 2 signaux ne peuvent être émis que par un QDialogButtonBox, cependant n'importe quel signal peux interagir avec les slots "accept" et "reject" du QDialog.
 +
 +Autre petit exemple de signal/slot qui va permettre au passage d'introduire la prochaine sous partie.
 +
 +<code javascript>
 +var a = new QDialog();
 +var b = new QPushButton("Coucou", a);
 +
 +var c = new QDialog(a);
 +var d = new QPushButton("Barre toi", c);
 +
 +b.clicked.connect(function () { //clicked est un signal emis par le premier QPushButton qui execute une fonction anonyme
 + c.show();
 +});
 +
 +d.clicked.connect(function () { //clicked est un signal emis par le deuxième QPushButton qui execute une fonction anonyme
 + c.hide();
 +});
 +
 +
 +a.exec();
 +</code>
 +
 +Vous n’êtes pas obligé de connecter un signal à un slot prédéfinis comme les 2 précédemment vu, vous pouvez aussi le connecter à n'importe quel fonction. Ici, une fonction anonyme fait l'affaire.  Cependant, on peux imaginer une fonction plus imposante, et tient, nécessitant un paramètre de surcroit.
 +
 +<code javascript>
 +function main() {
 + var a = new QDialog();
 + var b = new QPushButton("Coucou", a);
 +
 + var c = new QDialog(a);
 + var d = new QPushButton("Barre toi", c);
 +
 + b.clicked.connect(c, show); //clicked est un signal emis par le premier QPushButton qui execute la fonction show, il envoie le QDialog c en paramètre pour qu'il puisse être montré par la fonction
 +
 + d.clicked.connect(c, hide); //clicked est un signal emis par le deuxième QPushButton qui execute la fonction hide, il envoie le QDialog c en paramètre pour qu'il puisse être caché par la fonction
 +
 + a.exec();
 +}
 +
 +function show() {
 + this.show();
 +}
 +
 +function hide() {
 + this.hide();
 +}
 +
 +main();
 +</code>
 +
 +Si vous avez plusieurs paramètres à faire passer à votre fonction, utilisez un tableau. 
 +
 +Il y a peut être moyen de faire ça sans tableau, mais encore une fois il n'y a pas de doc pour QtScript donc beaucoup de choses partagés ici sont des choses que j'ai trouvé en testant, à tâtons, et là j'ai pas trouvé d'autres solutions :p. 
 +
 +Il est possible de créer ses propres signaux et slots, mais je ne me suis pas penché sur la question.
 +
 +=== L'héritage des fenêtres (parent/enfant) ===
 +
 +<note tip>Un widget parent est un widget qui en contient d'autres.
 +Un widget fils est un widget qui n'en contient aucun autre.</note>
 +
 +''A faire''
 +
 +==== Les boutons ====
 +
 +Il existe divers de boutons, le plus classique étant QPushButton.
 +
 +Mais avant cela, il faut savoir que toutes les classes de boutons héritent de la classe mère, QAbstractButton, qui hérite elle même de QWidget, voir le schéma ci dessous, [[http://web.univ-pau.fr/~puiseux/enseignement/python/tutoQt-zero/tuto-PyQt-zero.8.html#ss_part_2|leech ici]] (Pa Tapay, il était tellement beau, ces rectangles si... Rectangle, sublime).
 +
 +{{ :fr:schema-button.png?nolink | Schema button }}
 +
 +Cette classe étant une classe abstraite, il n'est pas possible de l'instancier (de créer son objet). Elle sert comme classe de base pour ses classes filles, que nous allons utiliser.
 +
 +=== QPushButton ===
 +
 +Ce widget est un simple bouton, rien de plus, rien de moins !
 +
 +<code javascript>
 +var a = new QDialog();
 +var layout = new QFormLayout(); //Création d'un layout pour éviter que les boutons ne se superpose
 +a.setLayout(layout); //Attribue le layout à a
 +
 +var b = new QPushButton("Bouton");
 +
 +var c = new QPushButton("Bouton enfoncé"); 
 +c.checkable = true; //Permet au bouton de prendre 2 états, la forme pressé et le forme relâché
 +c.checked = true; //Le bouton s'affiche pressé 
 +
 +var d = new QPushButton("Bouton désactivé");
 +d.setEnabled(false); //Désactive le bouton
 +
 +layout.addRow(b); //Attribut les boutons au layout
 +layout.addRow(c);
 +layout.addRow(d);
 +
 +a.exec();
 +</code>
 +
 +{{ :fr:button.png?nolink | Screen of simple button }}
 +
 +== Signaux ==
 +
 +Le signal le plus utilisé est clicked(), mais il y a aussi pressed() qui s'active lorsque que le bouton est uniquement pressé et released() lorsqu'il est uniquement relâché.
 +
 +=== QCheckBox ===
 +
 +Ce widget est une checkbox, appelé truc à cocher en français =).
 +
 +<code javascript>
 +var a = new QDialog();
 +var layout = new QFormLayout(); //Création d'un layout pour éviter que les checkbox ne se superpose
 +a.setLayout(layout); //Attribue le layout à a
 +
 +var b = new QCheckBox("Checkbox");
 +
 +var c = new QCheckBox("Checkbox coché"); 
 +c.checked = true; //La checkbox s'affiche coché
 +
 +var d = new QCheckBox("Checkbox désactivé");
 +d.setEnabled(false); //Désactive la checkbox
 +
 +layout.addRow(b); //Attribut les checkbox au layout
 +layout.addRow(c);
 +layout.addRow(d);
 +
 +a.exec();
 +</code>
 +
 +{{ :fr:checkbox.png?nolink | Screen of checkbox }}
 +
 +
 +== Signaux ==
 +
 +La checkbox émet le signal stateChanged() qui permet de récupérer l'état de la case.
 +
 +<code javascript>
 +var a = new QDialog();
 +
 +var b = new QCheckBox("Checkbox");
 +
 +b.stateChanged.connect(b, function () {
 + Console.print(this.checkState()); //Retourne l'état du bouton, le plus souvent Checked ou Unchecked
 + Console.print(this.checked); //Retourne true si case coché, false sinon
 +});
 +
 +a.exec();
 +</code>
 +
 +Une checkbox peux avoir un 3ème état. Il faut l'activer avec la propriété tristate.
 +
 +<code javascript>
 +var a = new QDialog();
 +var layout = new QFormLayout(); //Création d'un layout pour éviter que les checkbox ne se superpose
 +a.setLayout(layout); //Attribue le layout à a
 +
 +var b = new QCheckBox("Checkbox etat 0");
 +b.tristate = true;
 +var c = new QCheckBox("Checkbox etat 1"); 
 +c.tristate = true;
 +var d = new QCheckBox("Checkbox etat 2");
 +d.tristate = true;
 +
 +c.setCheckState(Qt.PartiallyChecked);
 +d.setCheckState(Qt.Checked);
 +
 +Console.print(b.checkState()); //Affiche l'état de la checkbox dans la console
 +Console.print(c.checkState());
 +Console.print(d.checkState());
 +
 +layout.addRow(b); //Attribut les checkbox au layout
 +layout.addRow(c);
 +layout.addRow(d);
 +
 +a.exec();
 +</code>
 +
 +{{ :fr:Checkbox-tristate.png?nolink | Screen of checkbox with tristate }}
 +
 +== Groupe de checkbox ==
 +
 +Voir QGroupBox.
 +
 +=== QRadioButton ===
 +
 +C'est aussi une case à cocher à la différence de celle au dessus, qu'il ne peux y en avoir qu'une seule de coché parmi toute celles présente dans un même QWidget.
 +
 +<code javascript>
 +var a = new QDialog();
 +var layout = new QFormLayout(); //Création d'un layout pour éviter que les radiobuttons ne se superpose
 +a.setLayout(layout); //Attribue le layout à a
 +
 +var tabIntRadio = ["Radiobutton 0", "Radiobutton 1", "Radiobutton 2", "Radiobutton 3", "Radiobutton 4"]; //Tableau contenant le libelé des boutons radio
 +var tabRadio = []; //Tableau les objets QRadioButton
 +
 +for (var i = 0; i < tabIntRadio.length; i++) { //Boucle qui va pour chaque libelé
 + tabRadio[i] = new QRadioButton(tabIntRadio[i]); //Créer un objet QRadioButton ce libelé
 + layout.addRow(tabRadio[i]); //Attribuer les radiobuttons au layout
 +
 + tabRadio[i].toggled.connect(tabRadio[i], function () { //Lors du click sur un QRadioButton, test pour voir si il est checké
 + if (this.checked === true)
 + Console.print(this.text);
 + });
 +}
 +
 +a.exec();
 +</code>
 +
 +{{ :fr:radiobutton.png?nolink | Screen of radiobutton }}
 +
 +Il est possible de cocher une case ou de la désactiver grâce aux même propriétés qu’auparavant.
 +
 +== Signaux ==
 +
 +Il y a le signal toggled, plus les signaux qu'il hérite de QWidget, comme clicked
 +
 +== Groupe de radiobutton ==
 +
 +Voir QGroupBox.
 +
 +==== Les afficheurs ====
 +
 +=== QLabel ===
 +
 +Ce widget a pour but l'affichage de texte (brut ou HTML), image, image animé (GIF).
 +
 +== Général && texte simple ==
 +
 +<code javascript>
 +var a = new QDialog();
 +
 +var layout = new QFormLayout(); //Création d'un layout pour que ce soit plus jolie
 +a.setLayout(layout); //Attribue le layout à a
 +
 +var b = new QLabel("Hello"); //Affiche un QLabel
 +b.setText(b.text + " world"); //Selectionne le contenu du QLabel et rajoute du texte à la fin
 +
 +b.minimumSize = new QSize(500, 500); //Gestion de sa taille, attention il est contenu dans un layout
 +b.maximumSize = new QSize(500, 500);
 +
 +b.alignment = Qt.AlignBottom | Qt.AlignRight; //Gestion de l'alignement du texte
 +
 +b.textInteractionFlags = Qt.TextSelectableByMouse; //Il est ainsi possible de sélectionner le texte à la souris
 +
 +layout.addRow(b); //Attribut le QLabel au layout
 +
 +a.exec();
 +</code>
 +
 +{{ :fr:qlabel-texte-simple.png?nolink | Screen of QLabel, with simple text }}
 +
 +La méthode setText permet d'attribuer du texte à un QLabel.
 +
 +La propriété text permet de le récupérer.
 +
 +La propriété alignement attend un flag horizontal, vertical, ou les 2.
 +
 +  * **Horizontal**
 +
 +  * Qt.AlignLeft
 +  * Qt.AlignRight
 +  * Qt.AlignHCenter
 +  * Qt.AlignJustify
 +
 +  * **Vertical**
 +
 +  * Qt.AlignTop
 +  * Qt.AlignBottom
 +  * Qt.AlignVCenter
 +
 +Par défault, le texte est impossible à sélectionner, copier. La propriété textInteractionFlags permet de rajouter des comportements au QLabel.
 +
 +  * Qt.TextSelectableByMouse
 +  * Qt.TextSelectableByKeyboard => La politique de focus du widget est forcé à Qt.ClickFocus
 +  * Qt.LinksAccessibleByMouse
 +  * Qt.LinksAccessibleByKeyboard => La politique de focus du widget est forcé à Qt.StrongFocus
 +
 +== HTML ==
 +
 +<code javascript>
 +var a = new QDialog();
 +
 +var layout = new QFormLayout(); //Création d'un layout pour que ce soit plus jolie
 +a.setLayout(layout); //Attribue le layout à a
 +
 +var b = new QLabel(); //Affiche un QLabel
 +b.setText("<h1>Hello</h1><p><b>World ?</b></p><p><i>No !</i></p><p><a href=\"www.nelson-haha.com/\">Ah-Ah</a></p>"); //Ajout du texte dans le QLabel
 +
 +layout.addRow(b); //Attribut le QLabel au layout
 +
 +a.exec();
 +</code>
 +
 +{{ :fr:qlabel-html.png?nolink | Screen of QLabel, with HTML }}
 +
 +<note>Vous remarquerez la qualité indéniable du texte de ce QLabel !</note>
 +
 +Vous remarquez qu'il ne se passe rien quand le lien est cliqué, de plus il est impossible de le sélectionner, copier.
 +
 +<code javascript>
 +b.textInteractionFlags = Qt.LinksAccessibleByMouse;
 +</code>
 +
 +A rajouter pour que le lien puisse être copié, mais ça vous le savez =)
 +
 +<code javascript>
 +b.textInteractionFlags = Qt.LinksAccessibleByMouse | Qt.LinksAccessibleByKeyboard | Qt.TextSelectableByMouse;
 +</code>
 +
 +Si plusieurs flags... Au cas où =)
 +
 +<code javascript>
 +b.openExternalLinks = true;
 +</code>
 +
 +Pour qu'il ne se passe pas rien lors d'un click sur le lien !
 +
 +<code javascript>
 +b.linkActivated.connect(function(link) { //Le signal linkActivated est émis lors de l'actiovation du lien qui sera le plus souvent un simple click dessus, il renvoie une chaine de caractère (link) contenant le lien activé 
 + var a = QDesktopServices; 
 + a.openUrl(new QUrl(link)); //Ouverture de ce lien dans un nouvel onglet de votre navigateur préféré
 +});
 +</code>
 +
 +Ou comme ça aussi =)
 +
 +La variable link est une chaine de caractère qui contient le lien activé.
 +
 +Ok, si c'est juste pour ouvrir l'URL que vous avez mis dans le lien, le premier code suffit, mais si vous avez un esprit machiavélique, je vous laisse réfléchir à la meilleur utilisation de ce code :p !
 +
 +Ceci dit, Actiona est aussi là pour vous soulager dans cette dur et noble tâche (l'ouverture d'un lien dans un nouvel onglet du navigateur par défault), je vous laisse chercher sur le wiki le code héhé =).
 +
 +== Image ==
 +
 +<code javascript>
 +var a = new QDialog();
 +a.setWindowTitle("Salamèche est le plus beau"); //Celui qui me contredit, je le tabasse !
 +
 +var layout = new QFormLayout(); //Vous connaissez la chanson
 +a.setLayout(layout); //Lalalah
 +
 +var b = new QLabel();
 +b.setPixmap(new QPixmap("charmander.jpg")); //On attribut l'image au QLabel
 +
 +layout.addRow(b); //lalalah (bis)
 +
 +a.exec();
 +</code>
 +
 +{{ :fr:qlabel-image.png?nolink&300 | Screen of QLabel, with image }}
 +
 +Ici, rien de bien nouveau, ormis qu'au lieu d'attribuer du texte au QLabel avec setText, on attribut une image avec setPixmap, setPixmap attendant un objet QPixmap en paramètre.
 +
 +== image animé (GIF) ==
 +
 +<code javascript>
 +var a = new QDialog();
 +a.setWindowTitle("Les gifs, c'est la vie !"); //Attribution d'un titre à la fenêtre
 +
 +var layout = new QFormLayout(); //Création du layout
 +a.setLayout(layout); //Attribution du layout à l'objet QDialog
 +
 +var b = new QLabel(); //Création d'un QLabel
 +var c = new QMovie("charmander.gif") //Création d'un objet QMovie
 +b.setMovie(c); //On attribut le QMovie au QLabel
 +
 +c.start(); //Lecture du gif
 +
 +layout.addRow(b); //On ajoute l'objet QLabel dans le layout
 +
 +a.exec();
 +</code>
 +
 +Pour ajouter un gif dans un QLabel, il faut utiliser la méthode setMovie, qui attend un objet QMovie en paramètre, lui même attendant le chemin du gif que vous voulez lire.
 +
 +Ensuite il faut démarrer la lecture du gif avec la méthode start() appliqué au QMovie.
 +
 +Il est possible de contrôler la lecture du gif avec certaines méthodes comme :
 +
 +  * **start** : Elle affiche et lance la lecture du gif. Il faut savoir que sans cette méthode le gif ne s'affichera pas
 +  * **stop** : Elle stop la lecture du gif, si start est lancé ensuite, le gif reprendra depuis le débuts
 +  * **setPaused** //(true|false)// : Pour mettre en pause la lecture du gif, il attend 1 paramètre, true pour mettre la pause, false pour l'enlever, il est aussi possible de faire redémarrer la lecture avec la méthode start
 +  * **jumpToFrame** //(int)// : Pour changer la frame affichée, retourne true si succès, sinon retourne false
 +  * **jumpToNextFrame** : Pour passer à la frame suivante, retourne true si succès, sinon retourne false
 +
 +Il est possible de régler la vitesse de lecture avec la propriété speed
 +
 +<code javascript>
 +c.speed = 200; //x2
 +</code>
 +
 +<note important>Il est aparement possible de définir le nombre de fois que le gif va se lire car une méthode permet de récupérer ce chiffre (loopCount()), cependant je ne trouve pas la propriété qui permet de définir ce nombre é_è. Apparement présent dans l'objet QAbstractAnimation :S
 +</note>
 +
 +Il est cependant possible de récupérer ce nombre grâce au signal finished, qui est émis lorsque le gif est terminé.
 +
 +Les différents signaux :
 +  
 +<code javascript>
 + //Récapitulatif, utilisation signal stateChanged (bouton pause/lecture) et finished (incrément nb loop, affichage du nombre dans un QLabel)
 +</code>
 +
 +<note important>Ceci est loin d'être terminé mais j'avance lentement, lentement mais surement !!!!!</note>