Aller au menu - Aller au contenu

Icône Votre première interface graphique (GUI)

Par Avatar Timothée Malossane (timmalos)
Mise à jour : 10/11/2011
Difficulté : Facile Facile Durée d'étude : 1 jour Creative Commons BY-NC-SA
3 274 visites depuis 7 jours, dont 182 sur ce chapitre classé 50/786
Ce chapitre a pour but de vous apprendre à maitriser les techniques simples de création d'interfaces utilisateurs.
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Introduction aux interfaces graphiques

Une Interface graphique ? Késako ?



L'interface graphique, appelée communément la GUI (pour Graphical User Interface), est le lien entre l'utilisateur et la machine.
En effet, même si certains programmes tournent sur l'ordinateur sans aucune intervention de l'utilisateur, pour la majorité des scripts que vous allez coder, vous allez devoir interagir avec l'utilisateur. Pour cela, on utilise une interface graphique permettant de faire le lien entre l'utilisateur et le programme, et comme vous allez le voir, les GUIs offrent des possibilités quasiment illimitées, si ce n'est par votre imagination.

Vous avez peut-être remarqué que dans ce tutoriel nous ne nous sommes pas encore intéressés à la console, pour la simple et bonne raison que vous ne l'utiliserez quasiment jamais avec Autoit, à part parfois en mode débogage.


Plusieurs contrôles pour une fenêtre



La Gui est composée d'une fenêtre et d'éléments graphiques divers qu'on appelle également des contrôles.

Voici une liste non-exhaustive des contrôles que vous pourrez créer avec Autoit :
  • Label (texte simple)
  • Button (bouton)
  • InputBox (champ de saisie)
  • RadioBox (bouton radio)
  • CheckBox (boîte à cocher)
  • Et pleins d'autres...


L'exemple ci-dessous est un aperçu des contrôles de base que vous pourrez utiliser :

Image utilisateur


Et, pour répondre à votre question, 'oui' vous saurez très bientôt faire ce genre d'interfaces ! (Et si vous êtes meilleur designer que moi, elles seront également plus jolies :p )

Comme je ne cesse de vous le rappeler depuis le début de ce tutoriel, Autoit est un langage de programmation qui est codé pour nous simplifier la vie. Pour les interfaces graphiques, on ne déroge pas à la règle, tout sera simplifié au maximum. Vous aurez bien entendu besoin de connaissances primaires, que je vais vous apprendre très bientôt, mais il existe un logiciel du nom de Koda Form Designer qui vous simplifiera la vie en créant la base de votre GUI automatiquement, sans aucune connaissance requise, et cela visuellement. Vous n'aurez ensuite besoin de gérer que vos évènements (pas d'inquiétude si ce mot ne vous dit rien, nous verrons cela en temps voulu) et certains contrôles avancés.

Nous verrons bien entendu dans ce tutoriel l'utilisation de Koda, ceci afin de vous permettre d'utiliser facilement ce nouveau logiciel. Comme vous le constatez, Autoit est encore une fois très complet, toujours prêt à nous simplifier la vie grâce à des outils très utiles. Cependant ils ne font pas tout, et si Koda est très utile pour monter un schéma ou une maquette de votre future interface, vous allez vite voir que ce n'est que la partie émergée de l'Iceberg et que lorsque vous développerez un programme professionnel, vous devrez certainement vous en passer. Mais d'ici là, autant l'utiliser... :-°

Alors, au boulot !
Retour en haut

Les bases d'une GUI

Nous allons voir dans les lignes qui suivent comment créer une interface graphique simple.
Vous pourrez y lire le détail du code ainsi que toutes les explications de chacune des lignes qui le compose.

Présentation du code



Code : Autre
1
2
3

$GUI = GUICreate("Ma GUI", 200, 200, 300, 200)
$Bouton1 = GUICtrlCreateButton("OK", 60, 130, 75, 25)
GUISetState(@SW_SHOW)


J'espère que comme moi vous trouvez ce code simple et compréhensible. Je ne vous le répèterai jamais assez, à chaque fois que je vous présente une nouvelle fonction dans ce tutoriel, n'hésitez pas à chercher dans l'aide des informations complémentaires à ce que je peux dire. L'aide est très complète et vous expliquera toujours mieux que moi ce que chaque paramètre veut dire.

Quelques précisions



  • $GUI = GUICreate("Ma GUI", 200, 200, 300, 200) va créer une fenêtre graphique dont le titre sera "Ma GUI" et dont les dimensions seront de 200 pixels de hauteur par 250 pixels de largeur. Cette fenêtre sera placée à 300 pixels de la gauche de votre bureau et à 200 pixels du haut de votre bureau.
    Vous pouvez apercevoir qu'on inscrit le résultat de la fonction GUICreate dans la variable $GUI. Ceci vous sera expliqué en détails dans la prochaine sous-partie.

  • $Bouton1 = GUICtrlCreateButton("OK", 60, 130, 75, 25) va créer un bouton à 60 pixels de la gauche de la GUI et à 130 pixels du haut de la GUI, d'une largeur de 75 pixels et d'une hauteur de 25 pixels dont le texte sera 'OK'.

  • GUISetState(@SW_SHOW) est l'instruction qui affiche la GUI sur l'écran. Si vous regardez la documentation de cette commande, vous verrez que l'argument qui ce trouve entre les parenthèses peut prendre beaucoup d'autres valeurs, qui auront pour effet de modifier l'état de la fenêtre principale, et que cette fonction peut être appelée sans aucun argument comme ceci : GUISetState(). Dans ce cas c'est la macro @SW_SHOW qui est utilisée. Si vous avez bien compris, on aurait donc pu s'en passer dans cet exemple.

    Si vous êtes très observateur, vous remarquerez également la présence d'un second paramètre, qui nous sera utile lorsque nous créerons plusieurs fenêtres, autant dire pas tout de suite.


Bon, que se passe-t-il si nous compilons ce code pour le lancer ?

Très bonne question. Vous pourrez apercevoir une fenêtre s'ouvrir et se fermer immédiatement. C'est normal, le programme se ferme dès qu'il a fini nos 3 lignes, donc on n'a pas le temps de voir notre fenêtre !
On pourrait utiliser une boucle While, mais comme je ne vous ai pas encore appris à gérer les évènements, vous ne pourriez plus fermer votre fenêtre, on va donc l'éviter pour cette fois.

Si vous voulez apercevoir votre fenêtre, je vous conseille de rajouter la ligne Sleep(5000) à la fin de votre programme, pour que vous puissiez admirer ce que vous venez de faire... en seulement 3 lignes !

Code : Autre
1
2
3
4

$GUI = GUICreate("Ma GUI", 200, 200, 300, 200)
$Bouton1 = GUICtrlCreateButton("OK", 60, 130, 75, 25)
GUISetState(@SW_SHOW)
Sleep(5000)


Puissant non ? ^^
Retour en haut

Handle et ControlID

Bon, maintenant que vous avez compris le code de base, on va pouvoir faire un peu de théorie. (C'est la dernière fois je vous le promets :p )

Identification des contrôles et des fenêtres



Si vous avez essayé de cliquer sur le bouton de la fenêtre précédente, vous avez remarqué que le programme n'avait pas réagi. De même qu'on vous nomme par votre prénom quand vous êtes dans un groupe pour pouvoir communiquer avec vous, il va falloir différencier chaque contrôle de votre programme en lui donnant un identifiant. On appellera cet identifiant le ControlID. De même, vous savez que Windows est capable d'ouvrir plusieurs fenêtres en même temps, il faut donc que chaque fenêtre ait également un identifiant pour pouvoir communiquer avec elle. On appellera cet identifiant un Handle.

Dès que nous créerons un contrôle ou une fenêtre, vous avez compris qu'il sera nécessaire d'enregistrer le retour de la fonction dans une variable afin de pouvoir le manipuler plus tard. Si vous regardez bien, c'est exactement ce que nous avons fait plus tôt. Notre variable $GUI contient le Handle de notre fenêtre, et notre variable $Bouton1 contient le ControlID de notre bouton "ok".

Vous pouvez tester le code ci-dessous, pour vérifier mes dires :
Code : Autre
1
2
3
4

$GUI = GUICreate("Ma GUI", 200, 200, 300, 200)
$Bouton1 = GUICtrlCreateButton("OK", 60, 130, 75, 25)
MsgBox(0,"$GUI",$GUI)
MsgBox(0,"$Bouton1",$Bouton1)


Et comme il est souvent beaucoup plus simple de comprendre avec un petit schéma, voici un petit résumé de ce que je viens d'expliquer :
Image utilisateur


Généralités sur les ControlID


  • Si vous n'avez pas pris soin de stocker le ControlID du contrôle graphique dans une variable unique, alors vous ne pourrez plus intervenir sur celui-ci.
  • Si vous supprimez une fenêtre (nous verrons comment plus tard), alors tous les contrôles qu'elle contient seront supprimés.
  • Si vous supprimez puis re-créez un contrôle, alors son ControlID change.


Il faut savoir que l'attribution des numéros de ControlID se fait de manière incrémentielle.
Sur une interface graphique simple, généralement, le premier contrôle se voit attribuer le ControlID N°3. :o

Gné ? Pourquoi numéro 3 ? Ça n'aurait pas pu être 0 ou 1, comme d'habitude ?


Mais pourquoi diable cela commence-t-il à 3 ? :euh: Hé bien tout simplement parce que si vous réfléchissez bien, la fenêtre GUI que vous avez créée précédemment possède déjà 3 contrôles : les boutons systèmes "réduction", "agrandissement" et "fermeture" sont déjà présents, et comme ils ne dérogent pas à la règle, eux aussi ont un ControlID. Nous allons voir dans le prochain chapitre pourquoi ces trois contrôles sont déjà présents, comment les enlever et plus généralement comment modifier le style de sa fenêtre, en utilisant donc comme vous le savez maintenant, son handle.
Retour en haut

La gestion des évènements

Maintenant que les ControlID n'ont plus aucun secret pour vous, on va pouvoir s'attaquer à la gestion des évènements de notre fenêtre. J'entends par là le fait de gérer par exemple :
  • Si l'utilisateur clique ici, alors on lui dit "Bonjour".
  • S'il rentre quelque chose ici, alors on lui dit "Au Revoir".


Parce que bon, le Sleep(5000) ça va 5 secondes ( :euh: ) mais si l'utilisateur veut rester plus longtemps sur votre application ca risque de poser problème.
On va donc utiliser une boucle infinie, qui va détecter les actions de l'utilisateur et agir en conséquence.

Un peu de concret



Code : Autre
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#include <GUIConstantsEx.au3>

$GUI = GUICreate("Ma GUI", 200, 200, 300, 200)
$Bouton1 = GUICtrlCreateButton("OK", 60, 130, 75, 25)
GUISetState(@SW_SHOW)

While 1
        $nMsg = GUIGetMsg()
        Switch $nMsg
                Case $GUI_EVENT_CLOSE
                        Exit

                Case $Bouton1
                        MsgBox(64 + 8192, 'Message', 'Vous avez cliqué sur le bouton OK')
        EndSwitch
WEnd


Image utilisateur



Quelques explications


  • #include <GUIConstantsEx.au3>
    Dans la première partie du code, nous trouvons la déclaration d'un fichier Include qui nous permettra d'utiliser une variable spéciale $GUI_EVENT_CLOSE. C'est un fichier qu'il vous faudra pratiquement toujours inclure car il est nécessaire à la gestion des évènements liés à votre fenêtre.

  • $nMsg = GUIGetMsg() permet de 'capturer' les événements graphiques. GUIGetMsg() renvoie dans la variable $nMsg un ControlID. C'est cette fonction qui va retourner un ControlID dès que l'utilisateur fera une action, et grâce à notre boucle infinie on va pouvoir tester les actions de l'utilisateur autant de fois qu'on le souhaite.

  • Case $GUI_EVENT_CLOSE correspond au cas dans lequel la variable $nMsg est égale à la variable $GUI_EVENT_CLOSE, qui est en fait la variable associée à l'EventID de fermeture du programme. Un EventID est similaire au ControlID mais est généré par la fenêtre elle-même lorsque vous la fermez ou la redimensionnez. Si le test d'égalité est vérifié, alors la fonction Exit est exécutée, et le programme se ferme !

  • Case $Bouton1 correspond au cas dans lequel la variable $nMsg est égale au ControlID du bouton : $Bouton1
    Dans ce cas, le code qui suit est exécuté jusqu'au prochain Case.


Lancement du Code


Lorsque vous êtes dans l'éditeur Scite, un simple appui sur la touche F5 de votre clavier, lancera le code écrit.
Vous pouvez aussi lancer un script AutoIt, en faisant deux clics sur le fichier .au3 créé.

Image utilisateur


Vous pouvez constater l'utilisation de Switch ici. C'est quelque chose qu'on fera souvent lors de la gestion d'évènements car c'est beaucoup plus pratique que d'utiliser des suites de conditions If.

Une dernière chose : si vous utilisez Scite4Autoit pour écrire votre script, vous pouvez créer rapidement un squelette d'une interface graphique simple en tapant dans la fenêtre de saisie la commande setupgui suivi de la touche espace.
Retour en haut
Comme vous avez pu le constater, il n'est pas très difficile de créer une GUI simple.

Avec un peu de bon sens et surtout avec le fichier d'aide d'AutoIt, vous pourrez créer pratiquement n'importe quoi.
N'hésitez surtout pas à copier le code d'exemple fourni dans l'aide d'AutoIt afin de l'adapter à votre besoin.
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut

Lire aussi

Icône
La gestion des évènements
Icône
La programmation avec Autoit
Icône
Créer des interfaces graphiques en C++ avec gtkmm !
Retour en haut
14 commentaires pour "Votre première interface graphique (GUI)"
Note moyenne : 3.56 / 4 (100 votes)
Pseudo Commentaire
Hors ligne Hoera # Posté le 15/02/2012 à 19:00:49

Bonjour, moi j'ai un problème, quand je marque $GUI = GuiCreate et le reste, il me dit "$GUI = illegal character". Que faire ? Merci
Hors ligne Thitoy # Posté le 09/03/2012 à 07:22:44

Bonjour,
Pour information, je suis sous Windows 7 Intégrale 64Bits, et j'ai rencontré les mêmes soucis, mais en suivant les indications de Timmalos (créer un nouveau script en ecrivant moi même), cela fonctionne parfaitement (plus fastidieux, mais efficace).
Si ça peut aider...
Bonne journée.
Hors ligne Little Nooby # Posté le 22/03/2012 à 23:24:09
Je cause trop...
Avatar

Avis : Très bon

Ville : Namur
Pays : Belgique

 Citation : timmalos
Une dernière chose : si vous utilisez Scite4Autoit pour écrire votre script, vous pouvez créer rapidement un squelette d'une interface graphique simple en tapant dans la fenêtre de saisie la commande setupgui suivi de la touche espace.


Elle est où cette fenêtre de saisie? C'est là où on met tous notre code?
Je ne me trompe jamais, je trouve des façons de ne pas faire ce que je voulais.
 
Hors ligne timmalos # Posté le 23/03/2012 à 04:24:55
Avatar

Avis : Très bon

Études : INSA Lyon

 cest cela., mais un simple test vous aurait donné votre reponse plus rapidement...
Image utilisateur
 
Hors ligne Little Nooby # Posté le 24/03/2012 à 15:38:49
Je cause trop...
Avatar

Avis : Très bon

Ville : Namur
Pays : Belgique

 Bah, si je demandais c'est parce que ça ne marchait pas :-s. Suite à votre message, j'ai dèsinstaller/réinstaller (plus avec le pack fr cette fois) et maintenant ça marche.

J'adore la réponse à 4h24, vous vous donnez à fond dans vos tutoriels.
Je ne me trompe jamais, je trouve des façons de ne pas faire ce que je voulais.
 

Voir tous les commentaires
Ce tutoriel a été corrigé par les zCorrecteurs.