Outils pour utilisateurs

Outils du site


issue73:python

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision
Révision précédente
issue73:python [2013/09/12 18:51] – [4] auntieeissue73:python [2013/09/18 14:49] (Version actuelle) andre_domenech
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.** 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 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é 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 presqu'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 :+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] [(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.** 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 le bouton 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 à « 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.+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 ====== ====== 4 ======
Ligne 75: Ligne 75:
 pyuic4 -x pytest1.ui -o pytest1.py** 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. 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)** 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 : 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) 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): def reglerAffichage (self):
Ligne 145: Ligne 145:
 See you next time.** 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 avoir une idée de la puissance de l'outil.+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. 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. uiet http://pastebin.com/K7zViFu3 pour le code python.+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. Rendez-vous la prochaine fois.
issue73/python.1379004692.txt.gz · Dernière modification : 2013/09/12 18:51 de auntiee