TP1 : présentation Qt/python, utilisation d'objets de base, disposition d'objet dans une fenêtre

Transcription

1 TP1 : présentation Qt/python, utilisation d'objets de base, disposition d'objet dans une fenêtre Introduction L'objectif de ce TP est de vous présenter le Framework multi plateforme Qt, cette bibliothèque est utilisée pour réaliser l'environnement KDE, le logiciel openoffice et bien d'autres applications sous Mac, Linux ou windows voir : ( introduction a qt.html). Pour réaliser des applications libres (GUI), alors vous pouvez utiliser la version libre de Qt gratuitement. Mais pour réaliser des logiciels «propriétaires» : il faut se renseigner sur le site Il existe un environnement très ressemblant qui permet de réaliser des applications sur les appareils mobiles (Qtopia). Nokia vient d'acquérir la société trolltech. De nombreuses sociétés utilisent cette bibliothèque : google, archos, adobe... La documentation est assez riche (comparé à GTK (gnome gimp...). On peut développer des applications en C++ (c'est ce qui est conseillé au début, si on est autodidacte, car tout les exemples sont en C++). Mais par la suite on peut développer des application en java, en python... Dans notre cas, on utilisera le python, il y a moins de code et l'objectif n'est pas de savoir utiliser Qt en quelques heures, mais de l'utiliser comme support pour la présentation des aspects ergonomiques d'un outil métier. Place de Qt dans l'ergonomie logiciel : c'est une bibliothèque graphique complète qui permet de réaliser des interfaces. Cette bibliothèque est assez standard et ressemble beaucoup aux autres du même type, donc s'adapter ne présente souvent aucun problème. Nos objectifs seront : objectif des TPs sur Qt: Réaliser une interface avec des objets de base en utilisant Qt. Gérer certains événements des objets de base sous Qt et modifier le comportement des entrées/sorties. Faire un lien entre le document résumé IHM et la réalisation d'une interface. Remarque Importante : pour faire des choses très intéressantes avec la bibliothèque Qt, il faut manipuler le concept de programmation objet, et ce n'est pas le rôle de ce module. Il existe un outil Qt Designer qui permet de réaliser de façon graphique des interfaces, mais pour mettre du code derrière après c'est assez compliqué, Qt Designer génère de l'xml qu'il faut exploiter correctement. (avec Qt3, c'était plus simple car le seul code géré était le C+ +). On ne commencera donc pas par l'utilisation de ce logiciel. Le «langage» à connaître : GUI (Graphical User Interface) : Interfaces Utilisateurs Graphiques (avec des fenêtres et objets graphiques) Framework : ensemble d'outils, de bibliothèques et de conventions pour réaliser des applications, un espace de travail modulaire pour produire une application aboutie et facile à maintenir. IHM_TP1_09_10.odt 1 05/09/10

2 1. Premier programme Premier Programme en Python : exo1_1.py #-*- coding:utf8 -*- from PyQt4.QtCore import * app = QApplication(sys.argv) Mon_bouton = QPushButton("Hello world!") Mon_bouton.resize(100, 30) Mon_bouton.show() sys.exit(app.exec_()) Rendre ce script exécutable et le tester 2. Objets de base Qt et Modification de ces objets Comme dans tout objet bien écrit, un objet est composé d'attributs et de méthodes, on peut modifier les attributs à l'aide d'accesseurs (méthodes qui permettent de consulter ou modifier les attributs d'un objet tout en vérifiant que l'utilisateur passe de bons paramètres ) Dans l'exemple ci dessous, voici quelques accesseurs pour modifier le comportement, l'apparence ou récupérer le contenu du bouton. exemple : modifier les programmes précédents avec le code ci dessus et rajouter des accesseurs pour modifier l'objet graphique QPushButton. Programme en Python : exo1_2.py #-*- coding:utf8 -*- from PyQt4.QtCore import * #permet d'utiliser les objets de base Qt app = QApplication(sys.argv) #crée un nouvel objet de type QApplication Mon_bouton=QPushButton("mon premier bouton en Qt") #crée un nouvel objet QpushButton où on passe au constructeur le contenu à afficher Mon_bouton.setText("nouveau contenu du bouton") # accesseur pour modifier le contenu affiché par le QpushButton print "\n contenu du bouton :",Mon_bouton.text() # permet d'afficher des données Qt sur la sortie standard mapolice=qfont("comic Sans MS",30,80,True) # crée un objet Qfont pour utiliser un style de police : police, taille, épaisseur en %, italic Mon_bouton.setFont(maPolice); # accesseur pour appliquer le police au contenu affiché par le QpushButton Mon_bouton.setIcon(QIcon("smile.jpg")) # la même chose avec un icône Mon_bouton.setCursor(Qt.PointingHandCursor) # une souris prédéfinie Mon_bouton.setToolTip("Texte d'aide pour le bouton") # une bulle d'aide Mon_bouton.show() # appel de la méthode show# : afficher app.setstylesheet("qpushbutton { background-color: yellow }"); #utilisation d'un style comme en Web (CSS) sys.exit(app.exec_()) # appel de la méthode exec de l'objet pour lancer l'application IHM_TP1_09_10.odt 2 05/09/10

3 Ergonomie : Faire attention à : * la police de caractères de votre logiciel (3 polices maxi, normes...) * la couleur des objets (charte graphique, signification des couleurs, mise en valeur de l'objet en fonction de son importance). Utiliser une syntaxe homogène pour le libellé des commandes (distinguer les objets et les états du logiciel ; utiliser de préférence des verbes à l'infinitif suivi éventuellement d'un substantif pour être plus précis ) Boutons Ils servent à déclencher une commande par un clic de souris (généralement gris quand ils sont inactifs ). Recommandations : * Employer les boutons pour les commandes fréquemment utilisées. * Préciser l'intitulé de la commande en toutes lettres dans l'étiquette du bouton. («Imprimer», «ouvrir» et non «Ok», «Valider») Informations sur Qt Beaucoup d'objets (boutons...) que l'on affiche hérite de la classe widget (objet de base : fenêtre ), on peut insérer plusieurs objet dans un widget. Exemple de décomposition partielle QObject QCoreApplication QApplication QLayout QBoxLayout QHBoxLayout QWidget : setgeometry settooltip... QAbstractButton QPushButton QSpinBox QCheckBox QRadionButton QProgressBar QFrame QLabel QLCDNumber QTabWidget (le conteneur à onglets) voici un programme qui dans un widget insère plusieurs autres objets de type widget : En termes Qt : un widget parent est un widget qui en contient d'autres. IHM_TP1_09_10.odt 3 05/09/10

4 3. Première fenêtre et placement d'objets dans une fenêtre La majorité des objets Qt s'obtient en dérivant un objet de base ( dériver un objet revient à modifier un objet de base pour qu'il ait le comportement souhaité ). En C++, c'est un peu plus technique que en Python, M. Domas proposera en S4 un module sur le C++ et Qt. L'objectif de ce module n'est pas de faire de la programmation Objet. On utilise le langage python car il y a moins de code et c'est plus simple pour tester les objets, cependant le C++ reste un langage plus adapté au framework Qt =>Un gros projet se fait en C++ (voir java) avec la bibliothèque Qt. Programme en Python : exo1_3.py #-*- coding:utf8 -*- from PyQt4.QtCore import * #permet d'utiliser les objets de base Qt class mon_widget_perso(qwidget): def init (self, parent=none): # constructeur de l'objet QWidget. init (self, parent) textedit1 = QLineEdit("10",self) # contenu et objet parent textedit1.move(20,20) # position x,y dans la fenêtre textedit1.setfixedsize(70,30) # dimension de l'objet # le mot clef self fait référence à l'objet (this en java ou C++) # on donne à chaque objet son parent : notre objet graphique Mon_bouton=QPushButton("mon premier bouton en Qt",self) Mon_bouton.setGeometry(60, 50,180,40) MonSpinBox=QSpinBox(self) MonSpinBox.setFixedSize(60, 40) MonSpinBox.move(100,100) MonLabel1=QLabel("texte du label1",self) MonLabel1.setFixedSize(180, 40) MonLabel1.move(50,150) MonLabel2=QLabel("texte du label2",self) MonLabel2.setFixedSize(180, 40) MonLabel2.move(50,180) MonLabel3=QLabel("texte du label3",self) MonLabel3.setGeometry(50,210,180, 40) if name == " main ": MonAppli = QApplication(sys.argv) #crée un nouvel objet de type QApplication Mafenetre = mon_widget_perso() Mafenetre.setBaseSize(450, 200) #setfixedsize : fenetre fixe Mafenetre.setWindowIcon(QIcon("smile.jpg")) Mafenetre.show() Mafenetre.setWindowTitle("titre de l'application") MonAppli.exec_() IHM_TP1_09_10.odt 4 05/09/10

5 Exercice 1 à faire Valider : Le code ci dessus donne le résultat ci dessous, modifier les accesseurs et la déclaration des objets pour obtenir le résultat de droite Vous remplacerez les accesseurs move et setfixedsize par setgeometry agrandir et diminuer la taille de la fenêtre. Bref rien de facile la dedans, cependant presque toutes les bonnes bibliothèques graphiques possèdent un certain nombre d'objets pour faciliter la vie des développeurs et notamment les layouts 4. Disposer des objets dans un widget avec des «layout» Pour construire une fenêtre, on dispose de «layout», ce ne sont pas des Widgets (objets graphique ) mais des conteneurs d'objets graphique. Exemple : on veut utiliser 4 objets : QDial, QLabel, QLineEdit, QLCDNumber, pour saisir un poids (un seul objet suffirait) Pour plus d'information : positionner seswidgets avec les layouts.html IHM_TP1_09_10.odt 5 05/09/10

6 Programme en Python : exo1_4.py # * coding:utf8 * from PyQt4.QtCore import * #permet d'utiliser les objets de base Qt class Widget_lecure_poids(QWidget): def init (self, parent=none): # constructeur de l'objet QWidget. init (self, parent) #partie 1 self.textlabel_poids = QLabel("&Poids") # le & souligne le P self.textlabel_poids2 = QLabel("Kg") self.lineedit_poids = QLineEdit("40") self.dial_poids=qdial() self.lcd_poids=qlcdnumber() layout_s_poids=qhboxlayout() #déclaration du conteneur #déclaration et instanciation des objets layout_s_poids.addwidget(self.textlabel_poids) layout_s_poids.addwidget(self.lineedit_poids) layout_s_poids.addwidget(self.textlabel_poids2) layout_s_poids.addspacing(200) #espace fixe en pixels layout_poids=qvboxlayout() #déclaration du conteneur layout_poids.addlayout(layout_s_poids) #méthode pour rajouter un layout dans un autre Layout layout_poids.addstretch(2) #espace qui varie avec la taille de la fenetre layout_poids.addwidget(self.dial_poids) layout_poids.addstretch(1) #espace qui varie avec la taille de la fenetre layout_poids.addwidget(self.lcd_poids) Dial self.dial_poids.setnotchesvisible(true) #accesseurs pour modifier le self.dial_poids.setwrapping(false) # continu self.dial_poids.setmaximum(100) #echelle self.dial_poids.setpagestep (10) #pas self.lineedit_poids.setfixedwidth(40) #accesseurs pour modifier le LineEdit self.textlabel_poids.setbuddy(self.lineedit_poids) REpoids=QRegExp( "[1 2]{0,1}[0 9]{1,2},[0 9]" ) self.lineedit_poids.setvalidator(qregexpvalidator(repoids, self)) self.setlayout(layout_poids) # permet d'afficher le layout dans widget self: Widget_lecure_poids if name == " main ": #cette partie de code permet de créer app = QApplication(sys.argv) #un programme principal et une fenêtre Mafenetre = Widget_lecure_poids() #dans laquelle on insère l'objet # si on exécute le script, Mafenetre. SetBaseSize(450, 200) # si on utilise l'objet # dans une autre application Mafenetre.show() # ce code n est pas interprete Mafenetre.setWindowTitle("lecture du poids") app.exec_() IHM_TP1_09_10.odt 6 05/09/10

7 Tester et Visualiser l'objet, étirer la fenêtre avec et sans le «Stretch», avec et sans l'espace fixe. Conclusion par rapport à un positionnement fixe des objets sans tenir compte du support d'affichage. Ergonomie sous Qt : l'ensemble de ces éléments permet de définir la position d'un objet dans une fenêtre si on redimensionne la fenêtre ou l'objet qui le contient. Le Layout est un conteneur, pour positionner facilement des objets. Le Strech est un espace «élastique» avec la dimension de la fenêtre void QBoxLayout::addStretch ( int stretch = 0 ) strech est le facteur d'élasticité (si on met 2 strech(s) le coefficient fixe le rapport d'espace entre 2 strech(s). void QBoxLayout::addSpacing ( int size ) insert un espace fixe Ergonomie : * champs de saisie Il permet de fournir des informations au logiciel. Choisir le libellé le plus court possible. Présenter les champs de saisie de façon cohérente par rapport aux autres supports de travail. Proposer par défaut la valeur la plus courante (éventuellement une liste historique des dernières saisies). Prévenir les erreurs de saisie. (regexp sous qt, test avec ereg en PHP... ) Laisser l'utilisateur choisir les unités. Préciser le format de saisie. * Pour l'ensemble des champs Présenter uniquement les informations pertinentes vis à vis de la tâche Présenter les composants dans l'ordre d'utilisation Guider l'utilisateur Minimiser le déplacement de la souris (prévoir une saisie au clavier, car c'est plus rapide pour les utilisateurs expérimentés), permettre un accès rapide et direct aux utilisateurs expérimentés. Faciliter l'accès aux composants de la fenêtre les plus fréquemment utilisés. Remarque : utilisation du mot self : self devant un nom d'objet ou devant une méthode permet de rendre public l'objet et l'utiliser partout dans les méthodes. IHM_TP1_09_10.odt 7 05/09/10

8 Exercice 2 : Sur le même modèle, compléter le programme ci dessous pour réaliser l'interface ci dessous * disposer correctement le lineedit et les 2 label(s) dans un layout * disposer tout ces éléments dans un layout * insérer un espace fixe de 100 avant le label * insérer un strech de coefficient 2 avant le slider (après lineedit) * insérer un strech de coefficient 1 avant le lcdnumber (après le slider ) # * coding:utf8 * from PyQt4.QtCore import * #permet d'utiliser les objets de base Qt class Widget_lecure_taille(QWidget): def init (self, parent=none): QWidget. init (self, parent) # constructeur de l'objet self.textlabel_taille = QLabel("&taille") # le & souligne le t self.textlabel_taille2 = QLabel("cm") self.lineedit_taille = QLineEdit("40") self.textlabel_taille.setbuddy(self.lineedit_taille) REtaille=QRegExp( "[1 2]{0,1}[0 9]{1,2}" ) #REpoids.setCaseSensitivity(Qt.CaseInsensitive) self.lineedit_taille.setvalidator(qregexpvalidator(retaille, self)) self.slider_taille=qslider(qt.horizontal) self.lcd_taille=qlcdnumber() self.slider_taille.settickposition(qslider.ticksbelow) self.slider_taille.setrange(0,200) # ou setmaximum(200) self.slider_taille.settickinterval(10) self.setlayout(layout_taille) # permet d'afficher le layout dans widget self: Widget_lecure_poids IHM_TP1_09_10.odt 8 05/09/10

9 if name == " main ": #cette partie de code permet de creer app = QApplication(sys.argv) #un programme principale et une fenetre Mafenetre = Widget_lecure_taille() #dans laquelle on insere l'objet si on execute Mafenetre. setbasesize(500, 300) #le script, si le on utilise l'objet dans une autre application Mafenetre.show() #ce code n est pas interprete Mafenetre.setWindowTitle("lecture de la taille") app.exec_() ANNEXES Vous pouvez commencer à utiliser l'aide de Qt, surtout la rubrique «All Class» qui regroupe toutes les méthodes et les attributs d'un objet. Référence des différentes classes en C++ en Python IHM_TP1_09_10.odt 9 05/09/10