Différences

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

--- issue73:python [2013/09/01 15:41] – [7] fredphil91
+++ issue73:python [2013/09/18 14:49] (Version actuelle) – andre_domenech
@@ Ligne 11: / Ligne 11: @@
 Make sure that 'Main Window' is selected, and click the 'Create' button. Now you will have a blank form that you can drag and drop controls onto.**
-Nous allons laisser de côté ce mois-ci notre programme TVRage pour répondre en partie à une question d'un lecteur. On m'a demandé de parler de Qt Creator, et comment l'utiliser pour concevoir des interfaces utilisateur pour des programmes Python.
+Nous allons laisser de côté ce mois-ci notre programme TVRage pour répondre en partie à une question d'un lecteur. On m'a demandé de parler de Qt Creator et comment l'utiliser pour concevoir des interfaces utilisateur pour des programmes Python.
-Malheureusement, d'après ce que je peux dire, le support de Qt Creator n'est pas encore prêt pour Python. Il est en cours d'élaboration, mais n'est pas tout à fait « prêt pour la grande sortie ».
+Malheureusement, que je sache, le support de Qt Creator n'est pas encore prêt pour Python. Il est effectivement en cours d'élaboration, mais n'est pas tout à fait « prêt pour les heures de grande écoute ».
-Ainsi, dans un effort pour nous préparer pour ce prochain article, nous allons travailler avec QT4 Designer. Vous aurez besoin d'installer (si ce n'est pas déjà fait) python-qt4, qt4-dev-tools, python-qt4-dev, pyqt4-dev-tools et libqt4-dev.
+Ainsi, afin de nous préparer pour ce futur article, nous allons travailler avec QT4 Designer. Vous aurez besoin d'installer (si ce n'est pas déjà fait) python-qt4, qt4-dev-tools, python-qt4-dev, pyqt4-dev-tools et libqt4-dev.
-Une fois que c'est fait, vous pouvez trouver QT4 Designer sous Applications | Programmation. Allez-y et lancez-le. Vous devriez voir quelque chose comme ceci :
+Une fois que c'est fait, vous trouverez QT4 Designer sous Applications | Programmation. Allez-y et lancez-le. Vous devriez voir quelque chose comme ceci :
-Assurez-vous que « Main Window » est sélectionné et cliquez sur le bouton Créer. Vous verrez alors un formulaire vierge sur lequel vous pouvez faire glisser et déplacer des contrôles.
+Assurez-vous que « Main Window » est sélectionné et cliquez sur le bouton « Créer ». Vous verrez alors un formulaire vierge sur lequel vous pouvez faire glisser et déplacer des contrôles.
 ====== 2 ======
@@ Ligne 29: / Ligne 29: @@
 In the parentheses are the X and Y positions of the object (push-button in this case) on the form, followed by its width and height. I moved mine to 200,260.**
-La première chose à faire est de redimensionner la fenêtre principale. Réglez-la environ à 500x300. Vous pouvez voir sa taille en regardant l'éditeur de propriétés dans la partie « géométrie » sur le côté droit de la fenêtre du concepteur. Maintenant, faites défiler vers le bas la liste de l'éditeur de propriétés jusqu'à ce que vous voyez « windowTitle ». Remplacez le texte « MainWindow » par « Python Test1 ». Vous devriez voir le changement dans la barre de titre de la fenêtre de conception : « Python Test1 - untitled * ». C'est maintenant le bon moment pour sauver notre projet. Nommez-le "pytest1.ui». Ensuite, nous allons mettre un bouton sur notre formulaire. Ce sera un bouton pour quitter le programme de test. Sur le côté gauche de la fenêtre du concepteur, vous verrez toutes les commandes qui sont disponibles. Trouvez la section « Boutons » et faites glisser un « Push Buton » sur le formulaire. Contrairement aux concepteurs graphiques que nous avons utilisé dans le passé, vous n'avez pas à créer des grilles pour contenir vos contrôles lorsque vous utilisez QT4 Designer. Déplacez le bouton à proximité du centre en bas du formulaire. Si vous regardez l'éditeur de propriétés sous « géométrie », vous verrez quelque chose comme ceci :
+La première chose à faire est de redimensionner la fenêtre principale. Réglez-la à environ 500x300. Vous pouvez voir sa taille en regardant l'éditeur de propriétés dans la partie « géométrie » sur le côté droit de la fenêtre du concepteur. Maintenant, faites défiler vers le bas la liste de l'éditeur de propriétés jusqu'à ce que vous voyiez « windowTitle ». Remplacez le texte « MainWindow » par « Python Test1 ». Vous devriez voir le changement dans la barre de titre de la fenêtre de conception : « Python Test1 - untitled* ». C'est maintenant un bon moment pour sauvegarder notre projet. Nommez-le "pytest1.ui». Ensuite, nous allons mettre un bouton sur notre formulaire. Ce sera un bouton pour quitter le programme de test. Sur le côté gauche de la fenêtre du concepteur, vous verrez toutes les commandes qui sont disponibles. Trouvez la section « Buttons » et faites glisser un « Push Button » sur le formulaire. Contrairement aux concepteurs graphiques que nous avons utilisés dans le passé, vous n'avez pas à créer des grilles pour contenir vos contrôles lorsque vous utilisez QT4 Designer. Déplacez le bouton presque au centre en bas du formulaire. Si vous regardez l'éditeur de propriétés sous « géométrie », vous verrez quelque chose comme ceci :
 [(200,260), 97x27]
@@ Ligne 43: / Ligne 43: @@
 Next add a label. You will find it in the toolbox on the left under 'DisplayWidgets'. Put it close to the center of the form (I put mine at 210,130), and set its objectName property to lblDisplay. We will want to make it bigger than what it is by default, so set its size to somewhere around 221 x 20. In the property editor, scroll down to the 'Qlabel’ section, and set the Horizontal alignment to 'AlignHCenter'. Change the text to blank. We will set the text in code—when the btnClickMe is clicked. Now save the project again.**
-Juste au-dessus se trouve la propriété « objectName » qui, par défaut, est réglé sur « pushButton ». Changer cela en « btnQuitter». Maintenant, faites défiler vers le bas la liste de l'éditeur de propriétés jusqu'à la section « QAbstractButton », et définissez la propriété « text » à « Quitter ». Vous pouvez voir sur notre formulaire que le texte sur la touche a changé.
+Juste au-dessus se trouve la propriété « objectName » qui, par défaut, est réglée sur « pushButton ». Changez cela en « btnQuitter». Maintenant, faites défiler vers le bas la liste de l'éditeur de propriétés jusqu'à la section « QAbstractButton », et définissez la propriété « text » à « Quitter ». Vous pouvez voir sur notre formulaire que le texte sur le bouton a changé.
-Maintenant, ajoutez un autre bouton et positionnez-le en 200.200. Réglez sa propriété objectName à « btnCliqueMoi » et son texte à « Cliquez-moi ! ».
+Maintenant, ajoutez un autre bouton et positionnez-le en 200,200. Réglez sa propriété objectName à « btnCliqueMoi » et son texte à « Cliquez-moi ! ».
-Ensuite, ajoutez une étiquette (Label). Vous la trouverez dans la boîte à outils sur la gauche, sous « DisplayWidgets ». Mettez-la à proximité du centre du formulaire (j'ai mis la mienne en 210,130), et réglez sa propriété objectName à lblAffichage. Nous voulons la rendre plus grande qu'elle n'est par défaut, réglez-donc sa taille à quelque chose comme 221 x 20. Dans l'éditeur de propriétés, descendez jusqu'à la section « QLabel », et définissez l'alignement horizontal à « AlignementCentreH ». Modifiez le texte en le vidant. Nous réglerons le texte dans le code lorsque le btnCliqueMoi sera cliqué. Maintenant, sauvegardez à nouveau le projet.
+Ensuite, ajoutez une étiquette (Label). Vous la trouverez dans la boîte à outils sur la gauche, sous « DisplayWidgets ». Mettez-la à proximité du centre du formulaire (j'ai mis la mienne en 210,130), et réglez sa propriété objectName à lblAffichage. Nous voulons la rendre plus grande qu'elle n'est par défaut, réglez donc sa taille à quelque chose comme 221 x 20. Dans l'éditeur de propriétés, descendez jusqu'à la section « QLabel », et définissez l'alignement horizontal à « AlignHCenter » (AlignementCentreH). Modifiez le texte en blanc. Nous réglerons le texte dans le code lorsque le btnCliqueMoi sera cliqué. Maintenant, sauvegardez à nouveau le projet.
 ====== 4 ======
@@ Ligne 59: / Ligne 59: @@
 Slots et signaux
-La section suivante est peut-être un peu difficile à faire entrer dans votre tête, surtout si vous avez été avec nous pendant une longue période et avez utilisé les concepteurs graphiques précédents. Dans les autres concepteurs, nous avons utilisé les événements qui sont déclenchés quand un objet est cliqué, comme un bouton. Avec QT4 Designer, les événements sont appelés signaux, et la fonction qui est appelée par ce signal est appelé un slot. Donc, pour notre bouton Quitter, nous utilisons le signal « cliquer » pour appeler le slot « fermeture de la fenêtre principale ». Êtes-vous totalement perdus maintenant ? Je l'étais quand j'ai eu affaire à QT au début, mais cela commence à faire sens après un certain temps.
+La section suivante est peut-être un peu difficile à faire entrer dans votre tête, surtout si vous avez été avec nous pendant une longue période et avez utilisé les concepteurs graphiques précédents. Dans les autres concepteurs, nous avons utilisé des événements qui se sont déclenchés quand on a cliqué sur un objet, comme un bouton. Avec QT4 Designer, les événements s'appellent des signaux et la fonction appelée par ce signal s'appelle un slot. Donc, pour notre bouton Quitter, nous utilisons le signal « cliquer » pour appeler le slot « fermeture de la fenêtre principale ». Êtes-vous totalement perdus maintenant ? Je l'étais quand j'ai eu affaire à QT au début, mais cela commence à sembler logique après un certain temps.
-Heureusement, il existe un moyen très simple pour utiliser les slots et les signaux prédéfinis. Si vous appuyez sur la touche F4 sur le clavier, vous irez dans le mode d'édition des signaux et des slots. (Pour sortir du mode d'édition, appuyez sur F3.) Maintenant, faites un clic gauche et maintenez enfoncé sur le bouton Quitter, puis faites glisser légèrement vers le haut et vers la droite, en dehors du bouton sur le formulaire principal, puis relâchez le clic. Vous verrez une fenêtre surgissante qui ressemble à celle ci-dessus.
+Heureusement, il existe un moyen très simple pour utiliser les slots et les signaux prédéfinis. Si vous appuyez sur la touche F4 du clavier, vous irez dans le mode d'édition des signaux et des slots. (Pour sortir du mode d'édition, appuyez sur F3.) Maintenant, faites un clic gauche et maintenez le bouton Quitter enfoncé, puis faites glisser légèrement vers le haut et vers la droite, en dehors du bouton et sur le formulaire principal, puis relâchez le clic. Vous verrez une fenêtre de dialogue qui ressemble à celle ci-dessus.
 ====== 5 ======
@@ Ligne 75: / Ligne 75: @@
 pyuic4 -x pytest1.ui -o pytest1.py**
-Cela nous donnera un moyen facile de connecter le signal « clicked » au formulaire. Sélectionnez la première option sur la gauche qui devrait être « clicked() ». Cela activera la partie droite de la fenêtre et sélectionnera l'option " close() » dans la liste, puis cliquez sur « OK ». Vous verrez quelque chose qui ressemble à ceci :
+Cela nous donnera un moyen facile de connecter le signal « clicked » au formulaire. Sélectionnez la première option sur la gauche qui devrait être « clicked() ». Cela activera la partie droite de la fenêtre et sélectionnera l'option « close() » dans la liste, puis cliquez sur « OK ». Vous verrez quelque chose qui ressemble à ceci :
 Le signal de clic (événement) est lié à la routine de clôture de la fenêtre principale.
@@ Ligne 97: / Ligne 97: @@
 QtCore.QObject.connect(self.btnExit, QtCore.SIGNAL(_fromUtf8("clicked()")), MainWindow.close)**
-Le paramètre -x indique d'inclure le code pour exécuter et afficher l'interface utilisateur. Le paramètre -o indique de créer un fichier de sortie plutôt que de simplement afficher le fichier sur la sortie standard. Une chose importante à noter ici. Assurez-vous d'avoir tout fait dans QT4 Designer avant de créer le fichier python. Sinon, il sera complètement réécrit et vous devrez recommencer à partir de zéro.
+Le paramètre -x indique d'inclure le code pour exécuter et afficher l'interface utilisateur. Le paramètre -o indique de créer un fichier de sortie plutôt que de simplement afficher le fichier sur la sortie standard. Une chose importante à noter ici : assurez-vous d'avoir vraiment tout fait dans QT4 Designer avant de créer le fichier python, sinon il sera complètement réécrit et vous devrez recommencer à partir de zéro.
-Une fois que vous avez fait cela, vous aurez votre fichier python. Ouvrez-le dans votre éditeur de texte favori.
+Une fois que vous aurez fait cela, vous aurez votre fichier python. Ouvrez-le dans votre éditeur de texte favori.
-Le fichier lui-même ne contient que 65 lignes environ, y compris les commentaires. Nous n'avons placé que quelques contrôles, c'est pour cela qu'il n'est pas très long. Je ne vais pas montrer beaucoup de code. Vous devriez être en mesure de suivre la plupart du code maintenant. Cependant, nous allons créer et ajouter d'autre code afin de mettre la fonctionnalité pour définir le texte de l'étiquette.
+Le fichier lui-même ne contient que 65 lignes environ, y compris les commentaires. Nous n'avons placé que quelques contrôles, c'est pour cela qu'il n'est pas très long. Je ne vais pas montrer beaucoup de code. Vous devriez être en mesure de suivre la plupart du code maintenant. Cependant, nous allons créer et ajouter d'autres codes afin de mettre la fonctionnalité pour définir le texte de l'étiquette.
 La première chose que nous devons faire est de copier la ligne de signal et de slot et la modifier. Quelque part autour de la ligne 47 devrait se trouver le code suivant :
@@ Ligne 126: / Ligne 126: @@
 QtCore.QObject.connect(self.btnCliqueMoi, QtCore.SIGNAL(_fromUtf8("clicked()")), self.reglerAffichage)
-Ceci va créer la connexion signal/slot pour notre routine qui va afficher le texte de l'étiquette. Sous la routine retranslateUi, ajoutez le code suivant :
+Ceci va créer la connexion signal/slot pour notre routine qui va régler le texte de l'étiquette. Sous la routine retranslateUi, ajoutez le code suivant :
 def reglerAffichage (self):
@@ Ligne 145: / Ligne 145: @@
 See you next time.**
+Bien que ce soit un exemple très simple, je suis sûr que vous êtes assez avancé pour jouer avec QT4 Designer et vous faire une idée de la puissance de l'outil.
+Le mois prochain, nous reviendrons de notre détour et commencerons à travailler sur l'interface utilisateur pour notre programme de TVRage.
+Comme toujours, le code peut être trouvé sur pastebin à http://pastebin.com/FniB3s85 pour le code .ui et http://pastebin.com/K7zViFu3 pour le code python. [NdT: code traduit par l'équipe francophone. Pour le code original, voir http://pastebin.com/98fSasdb pour le code .ui et http://pastebin.com/yC30B885 pour le code python]
+Rendez-vous la prochaine fois.