Bonjour,
Vu que j'ai du temps libre et que je n'ai pas vu de "vrai" gros tuto sur les GUI en AutoIt j'ai décider de le faire. Je commence très progressivement de la base vers l'avancée (Je ne connais pas tout non plus ^^).
I.Introduction
Tout d'abords qu'est ce qu'une GUI ?
Définition : Graphical User Interface <<interface utilisateur graphique>>
Un environnement graphique est, en informatique, ce qui est affiché en mode pixel au moniteur d'ordinateur et sur lequel l’utilisateur peut agir avec différents périphériques d’entrée comme le clavier, la souris, la dictée vocale, etc. Des images, des animations (en 2 ou 3 dimensions), et même des vidéos peuvent être rendues à l’écran.
En quoi ça peut être utile pour mon programme ?
Déjà ça fait plus jolie (et oui ^^) et ça rend le programme vivant, l'utilisateur peut facilement intérargir avec le logiciel. De plus ça évite d'utiliser les fenêtre de bases (InputBox, MessageBox,SplashTextOn ...).
Et je peux tout faire avec ?
Et bien cela dépend de vous, vous pouvez faire une GUI avec une fenêtre 2 bouton windows ou une Fenêtre avec des trous dedans, des images en relief, des ombres, des boutons personnalisés, des affichage qui change selon le programme, ajouter des fenêtre transparente et j'en passe. Mais avant d'arriver la il faut quelques bases.
Mais c'est difficile à faire ?
Comme il est dit plus haut ça dépend de ce que vous faites, mais nous pouvons nous aidez d'un logiciel pour faire à votre guise la forme de votre fenêtre, des boutons etc ... il s'agit de Koda mais nous verrons son fonctionnement plus tard.
Alors je commence quand ?
Tout de suite :mrgreen:
II.Les premiers pas
Avant de faire votre première fenêtre il faut comprendre comment ça marche. Voici un schéma qui décris le fonctionnement
Cliquez pour révéler
Cliquez pour masquer
Création de fenêtre (stocker dans la mémoire)
Sélection de la couleur et autre détails si nécessaire
-----------------------------------
Contenu de la fenêtre : boutons, textes ou tout autres commandes
Afficher la fenêtre créer
-----------------------------------
Intéraction Utilisateur<->GUI
-----------------------------------
Cacher la fenêtre de l'écran possibilité de la réactiver
...
Fenêtre détruite impossible de la ré afficher
(Vous remarquerez que j'ai utiliser différentes couleurs et ce n'est pas pour rien ^^)
Donc voici ce que ça donnerais en AutoIt :
;Ces includes sont obligatoire et permettent d'utiliser des GUI en AutoIt, il y en a plusieurs ce ne sont pas les seuls
#include <ButtonConstants.au3> ;les variables des boutons
#include <GUIConstantsEx.au3> ;les variables des paramètres Ex d'une fenêtre
#include <StaticConstants.au3> ;variables général
#include <WindowsConstants.au3> ;variables Windows
$MaGUI = GUICreate("Ma première fenêtre", 250, 100, 250, 125) ;je créer ma fenêtre...
$BoutonOK = GUICtrlCreateButton("OK", 10,50, 90, 25, 0);...mon bouton...
$BoutonCancel = GUICtrlCreateButton("Cancel", 120, 50, 90, 25, 0);...mon 2eme bouton...
$Text = GUICtrlCreateLabel("Mon text", 80, 20, 50, 20)...et mon texte
GUISetState(@SW_SHOW);j'affiche ma fenêtre
While 1 ;et je test constamment si j'appuie sur un bouton
$nMsg = GUIGetMsg() ;GUIGetMsg() = valeur de la commande où j'ai appuyer
Switch $nMsg
Case $GUI_EVENT_CLOSE ;si j'ai appuyer sur la croix alors
ExitLoop ;je quitte la boucle
;On mettras ici l'action que fait chaque boutons ou commandes
EndSwitch
WEnd
GUISetState(@SW_Hide,$MaGui) ;je masque ma fenêtre
Sleep(2000) ;j'attends 2 secondes
GuiDelete($MaGui) ;je détruit ma GUI
Vous remarquez la variable $GUI_EVENT_CLOSE. Elle signifie l'événement de la fermeture d'une fenêtre (par la croix ou par ALT + F4... sauf par fermeture de processus). Il y a d'autres variables de ce genre qui sont défini dans les Include ci dessus. En voici la liste que j'ai a peu près détailler (désolé ^^) :
$GUI_EVENT_CLOSE : Fermeture de la fenêtre
$GUI_EVENT_MINIMIZE : Minimise de la fenêtre (dans la barre de tâche)
$GUI_EVENT_RESTORE : Restauration après minimisation
$GUI_EVENT_MAXIMIZE : Placement de la fenêtre en pleine écran
$GUI_EVENT_PRIMARYDOWN : Bouton gauche de la souris appuyé
$GUI_EVENT_PRIMARYUP : Bouton gauche de la souris relevé
$GUI_EVENT_SECONDARYDOWN : Bouton droit de la souris appuyé
$GUI_EVENT_SECONDARYUP : Bouton droit de la souris relaché
$GUI_EVENT_MOUSEMOVE : Mouvement de la souris
$GUI_EVENT_RESIZED : Redimension de la fenêtre
$GUI_EVENT_DROPPED : ??
Bon la GUI n'est pas jolie car elle est fait à la main mais on va voir après comment la faire précisément.
Et voilà, vous pouvez commencez à jouer un peu sur les contrôles changer, essayer etc ...
III.Koda : Faire des GUI jolies
Il faut l'accordez la GUI à la main ce n'est pas facile, bien que c'est obligatoire. Mais on peut quand même faire de belles GUI avec un programme conçu pour cette situation : Koda
Alors on va utiliser Koda, voici ce que vous pouvez facilement faire :
Loading Image
(cf. Gauntler 0.3.3.3)
Bon alors avant tout il faut déjà trouver Koda.
Koda est disponible ici : Koda 1.7.0.1
(Attention vérifiez la version elle n'est peut être plus à jour)
Démarrer Koda, voici comment Koda se compose :
On va refaire une GUI comme la précédente avec Koda, amusez vous à bidouiller un peu tout, mais ne vous fiez pas forcément l'apparence que Koda affiche elle est parfois différente quand elle est lancer en GUI avec AutoIt
*Attention : Pour modifier le nom changer la case Name et pour le texte la case Caption ou Text n'inverser pas !
Normalement vous devriez obtenir quelque chose comme :
#include <ButtonConstants.au3>
#include <GUIConstantsEx.au3>
#include <StaticConstants.au3>
#include <WindowsConstants.au3>
#Region ### START Koda GUI section ### Form=
$Form1 = GUICreate("MaGui", 302, 128, 193, 125)
$Button1 = GUICtrlCreateButton("Ok", 24, 72, 113, 41, 0)
$Button2 = GUICtrlCreateButton("Cancel", 160, 72, 113, 41, 0)
$Label1 = GUICtrlCreateLabel("Mon texte", 64, 8, 169, 41)
GUICtrlSetFont(-1, 28, 800, 4, "MS PMincho")
GUICtrlSetColor(-1, 0xFF0000)
GUISetState(@SW_SHOW)
#EndRegion ### END Koda GUI section ###
While 1
$nMsg = GUIGetMsg()
Switch $nMsg
Case $GUI_EVENT_CLOSE
Exit
EndSwitch
WEnd
(Bon je n'ai pas fait grand chose je n'ai pas changer les noms par exemple)
Alors j'ai fait un truc vite fais, je me suis amusé à changer le format du texte
*Attention : Si vous faites un programme avec plusieurs GUI penser à donner des noms différents à chaque contrôles (Au lieu de $Form1 mettez $GuiAvecTexte par exemple)
Allez je vous laisse découvrir Koda testez un peu tout, dans la prochaine partie on va apprendre à faire intérargir Utilisateur<->GUI
IV.Les fonctions 1er partie
On va reprendre le code d'avant et on va ajouter les contrôles :
#include <ButtonConstants.au3>
#include <GUIConstantsEx.au3>
#include <StaticConstants.au3>
#include <WindowsConstants.au3>
#Region ### START Koda GUI section ### Form=
$Form1 = GUICreate("MaGui", 302, 128, 193, 125)
$Button1 = GUICtrlCreateButton("Ok", 24, 72, 113, 41, 0)
$Button2 = GUICtrlCreateButton("Cancel", 160, 72, 113, 41, 0)
$Label1 = GUICtrlCreateLabel("Mon texte", 64, 8, 169, 41)
GUICtrlSetFont(-1, 28, 800, 4, "MS PMincho")
GUICtrlSetColor(-1, 0xFF0000)
GUISetState(@SW_SHOW)
#EndRegion ### END Koda GUI section ###
While 1
$nMsg = GUIGetMsg()
Switch $nMsg
Case $GUI_EVENT_CLOSE
Exit
Case $Button1
Case $Button2
Case $Label1
EndSwitch
WEnd
Pour savoir si on appuis sur un contrôle on rajoute dans la boucle While
Case "le nom de la variable qui désigne le contrôle"
Ce qu'il y a faire quand l'utilisateur qui utilise le contrôle
On va faire qu'il affiche un message quand on appuis sur OK ou sur Cancel
Case $Button1
Msgbox(0,"Bouton","Tu as appuyé sur le bouton OK")
Case $Button2
Msgbox(0,"Bouton","Tu as appuyé sur le bouton Cancel")
Rien de très marrant mais on avance ... maintenant on va modifier le texte du label1
Pour modifier le texte (plus précisément les donnés de le contrôle) on utilise GuiCtrlSetData ("l'ID du contrôle", "la modification")
Case $Button1
GuiCtrlSetData ($label1, "Le texte est changé")
Cela marche aussi pour les boutons
Case $Button1
GuiCtrlSetData ($Boutton2, "New")
Et puis on peux dans l'autre sens lire les donnès d'un contrôle avec GUICtrlRead ("contrôle")
Case $Button1
GuiCtrlSetData ($label1, "Bouton 2 ="&GuiCtrlRead ($Boutton2, "New"))
Avec ces 2 fonctions (GuiCtrlSetData et GuitCtrlRead) nous avons une multitude de possibilités. Nous ajoutons à cela la fonction GuiCtrlSetState qui nous permet de changer le statut d'un contrôle et nous avons maintenant les bases des fonctions GUI
Mais nous n'allons pas nous arrêter là, nous commençons à allez dans l'approfondit.
Il y a toute sortes de fonctions qui sert à la gestions des GUI voici la liste complète :
GUICreate Crée une fenêtre GUI (Graphical User Interface).
GUICtrlCreateAvi Crée un contrôle vidéo AVI pour la GUI.
GUICtrlCreateButton Crée un contrôle Bouton pour la GUI.
GUICtrlCreateCheckbox Crée un contrôle Cases à Cocher (Checkbox) pour la GUI.
GUICtrlCreateCombo Crée un contrôle liste déroulante (Combo) pour la GUI.
GUICtrlCreateContextMenu Crée un menu contextuel pour un contrôle ou pour toute la fenêtre GUI.
GUICtrlCreateDate Crée un contrôle Date pour la GUI.
GUICtrlCreateDummy Crée un contrôle factice pour la GUI.
GUICtrlCreateEdit Crée un contrôle Edition pour la GUI.
GUICtrlCreateGraphic Crée un contrôle Graphique pour la GUI.
GUICtrlCreateGroup Crée un contrôle Groupe pour la GUI.
GUICtrlCreateIcon Crée un contrôle Icône pour la GUI.
GUICtrlCreateInput Crée un contrôle d'entrée (Input) pour la GUI.
GUICtrlCreateLabel Crée un contrôle Etiquette statique pour la GUI.
GUICtrlCreateList Crée un contrôle Liste pour la GUI.
GUICtrlCreateListView Crée un contrôle Vue en liste pour la GUI.
GUICtrlCreateListViewItem Crée un élément pour un contrôle Vue en liste.
GUICtrlCreateMenu Crée un contrôle Menu pour la GUI.
GUICtrlCreateMenuItem Crée un élément de Menu pour la GUI.
GUICtrlCreateMonthCal Crée un contrôle Calendrier (Mois) pour la GUI.
GUICtrlCreateObj Crée un contrôle ActiveX dans la GUI.
GUICtrlCreatePic Crée un contrôle Image pour la GUI.
GUICtrlCreateProgress Crée un contrôle Barre de Progression pour la GUI.
GUICtrlCreateRadio Crée un contrôle Bouton Radio pour la GUI.
GUICtrlCreateSlider Crée un contrôle curseur pour la GUI.
GUICtrlCreateTab Crée un contrôle onglet pour la GUI.
GUICtrlCreateTabItem Crée un élément du contrôle onglet pour la GUI.
GUICtrlCreateTreeView Crée un contrôle vue en arbre (TreeView) pour la GUI.
GUICtrlCreateTreeViewItem Crée un élément dans le contrôle vue en arbre pour la GUI.
GUICtrlCreateUpdown Crée un contrôle ascenceur pour la GUI.
GUICtrlDelete Supprime un contrôle.
GUICtrlGetHandle Retourne le handle d'un contrôle et certains handles spéciaux (d'éléments) (Menu, ContextMenu, TreeViewItem).
GUICtrlGetState Retrouve l'état actuel d'un contrôle.
GUICtrlRead Lit l'état ou les données d'un contrôle.
GUICtrlRecvMsg Envoie un message à un contrôle et recupère l'information dans lParam.
GUICtrlRegisterListViewSort Enregistre une fonction-utilisateur pour une fonction interne de tri dans un ListView.
GUICtrlSendMsg Envoie un message à un contrôle.
GUICtrlSendToDummy Envoie un message à un contrôle fictif.
GUICtrlSetBkColor Définit la couleur d'arrière-plan d'un contrôle.
GUICtrlSetColor Définit la couleur du texte d'un contrôle.
GUICtrlSetCursor Définit l'icône du curseur de la souris pour un contrôle particulier.
GUICtrlSetDefBkColor Définit la couleur de fond par défaut de tous les contrôles de la fenêtre GUI.
GUICtrlSetDefColor Définit la couleur par défaut du texte de tous les contrôles de la fenêtre GUI.
GUICtrlSetData Modifie les données d'un contrôle.
GUICtrlSetFont Définit la police d'un contrôle.
GUICtrlSetGraphic Modifie les données d'un contrôle graphique.
GUICtrlSetImage Définit l'image bitmap ou l'icône à utiliser pour un contrôle.
GUICtrlSetLimit Limite le nombre de caractères/pixels d'un contrôle.
GUICtrlSetOnEvent Definit une fonction utilisateur appelée quand un contrôle est cliqué.
GUICtrlSetPos Change la position d'un contrôle à l'intérieur d'une fenêtre GUI.
GUICtrlSetResizing Definit la méthode de redimentionnement utilisée par un contrôle.
GUICtrlSetState Change l'état d'un contrôle.
GUICtrlSetStyle Change le style d'un contrôle.
GUICtrlSetTip Définit le texte de la bulle d'info associée à un contrôle.
GUIDelete Supprime une fenêtre GUI et tous ses contrôles.
GUIGetCursorInfo Retrouve la position du curseur de la souris par rapport à la fenêtre GUI.
GUIGetMsg Interroge la GUI pour voir si des événements ont eu lieu.
GUIGetStyle Retrouve les styles d'une fenêtre GUI.
GUIRegisterMsg Enregistre une fonction utilisateur pour un identificateur de message Windows (ID WM_MSG).
GUISetAccelerators Définit la table d'accélération à utiliser dans une fenêtre GUI.
GUISetBkColor Définit la couleur d'arrière-plan de la fenêtre GUI.
GUISetCoord Définit les coordonnées absolues du contrôle suivant.
GUISetCursor Définit l'icône du curseur de la souris pour la fenêtre GUI.
GUISetFont Définit la police par défaut d'une fenêtre GUI.
GUISetHelp Définit un fichier à exécuter quand le bouton F1 est pressé.
GUISetIcon Définit l'icône utilisée dans la fenêtre GUI.
GUISetOnEvent Definit une fonction utilisateur appelée quand un bouton système est cliqué.
GUISetState Change l'état d'une fenêtre GUI.
GUISetStyle Change les styles d'une fenêtre GUI.
GUIStartGroup Indique que les contrôles suivants seront "groupés" ensemble.
GUISwitch Change la fenêtre utilisée pour les fonctions GUI.
Code couleur :
######## : Fonction pour créer un contrôle
######## : Fonction pour gérer un contrôle
######## : Fonction pour gérer la GUI
V.Les fonctions 2eme partie
Voilà désormais vous savez :
-Créer une fenêtre design avec Koda
-Ajouter toutes sortes de contrôles
-Intérargir avec la GUI
-Utiliser les informations d'une GUI et les changer.
Bien, maintenant on va commencez à regarder les différentes fonctions ...
Vous avez du remarquez que vous ne pouvez pas utiliser deux fenêtres en même temps. Nous allons commencer par ça :
#include <ButtonConstants.au3>
#include <GUIConstantsEx.au3>
#include <StaticConstants.au3>
#include <WindowsConstants.au3>
#Region ### START Koda GUI section ### Form=
$Form1 = GUICreate("MaGui", 302, 128, 193, 125) ;Première forme
$Button1 = GUICtrlCreateButton("Ok", 24, 72, 113, 41, 0)
$Button2 = GUICtrlCreateButton("Cancel", 160, 72, 113, 41, 0)
$Label1 = GUICtrlCreateLabel("Mon texte", 64, 8, 169, 41)
GUICtrlSetFont(-1, 28, 800, 4, "MS PMincho")
GUICtrlSetColor(-1, 0xFF0000)
GUISetState(@SW_SHOW)
#EndRegion ### END Koda GUI section ###
While 1
$nMsg = GUIGetMsg()
Switch $nMsg
Case $GUI_EVENT_CLOSE
Exit
Case $Button1
Msgbox(0,"","Boutton OK pressé de la forme 1")
Case $Button2
Msgbox(0,"","Boutton Cancel pressé de la forme 1")
EndSwitch
WEnd
#Region ### START Koda GUI section ### Form=
$Form2 = GUICreate("MaGui", 100, 20, 193, 125) ;Forme identique à la deuxième placer autrepart
$Button1_2 = GUICtrlCreateButton("Ok", 24, 72, 113, 41, 0)
$Button2_2 = GUICtrlCreateButton("Cancel", 160, 72, 113, 41, 0)
$Label1_2 = GUICtrlCreateLabel("Mon texte", 64, 8, 169, 41)
GUICtrlSetFont(-1, 28, 800, 4, "MS PMincho")
GUICtrlSetColor(-1, 0xFF0000)
GUISetState(@SW_SHOW)
#EndRegion ### END Koda GUI section ###
While 1
$nMsg = GUIGetMsg()
Switch $nMsg
Case $GUI_EVENT_CLOSE
Exit
Case $Button1_2
Msgbox(0,"","Boutton OK pressé de la forme 2")
Case $Button2_2
Msgbox(0,"","Boutton Cancel pressé de la forme 2")
EndSwitch
WEnd
Mais quand vous lancer le programme seul les fonction de la Forme 1 marche, c'est normal ! Le programme est dans la boucle 1 qui est infini, il n'en sort par pour vérifiez si les boutons de la forme 2 sont pressé. Le plus facile serait de tout mettre dans une boucle :
#include <ButtonConstants.au3>
#include <GUIConstantsEx.au3>
#include <StaticConstants.au3>
#include <WindowsConstants.au3>
#Region ### START Koda GUI section ### Form=
$Form1 = GUICreate("MaGui", 302, 128, 193, 125) ;Première forme
$Button1 = GUICtrlCreateButton("Ok", 24, 72, 113, 41, 0)
$Button2 = GUICtrlCreateButton("Cancel", 160, 72, 113, 41, 0)
$Label1 = GUICtrlCreateLabel("Mon texte", 64, 8, 169, 41)
GUICtrlSetFont(-1, 28, 800, 4, "MS PMincho")
GUICtrlSetColor(-1, 0xFF0000)
GUISetState(@SW_SHOW)
#EndRegion ### END Koda GUI section ###
#Region ### START Koda GUI section ### Form=
$Form2 = GUICreate("MaGui", 100, 20, 193, 125) ;Forme identique à la deuxième placer autrepart
$Button1_2 = GUICtrlCreateButton("Ok", 24, 72, 113, 41, 0)
$Button2_2 = GUICtrlCreateButton("Cancel", 160, 72, 113, 41, 0)
$Label1_2 = GUICtrlCreateLabel("Mon texte", 64, 8, 169, 41)
GUICtrlSetFont(-1, 28, 800, 4, "MS PMincho")
GUICtrlSetColor(-1, 0xFF0000)
GUISetState(@SW_SHOW)
#EndRegion ### END Koda GUI section ###
While 1
$nMsg = GUIGetMsg()
Switch $nMsg
Case $GUI_EVENT_CLOSE
Exit
Case $Button1
Msgbox(0,"","Boutton OK pressé de la forme 1")
Case $Button2
Msgbox(0,"","Boutton Cancel pressé de la forme 1")
Case $Button1_2
Msgbox(0,"","Boutton OK pressé de la forme 2")
Case $Button2_2
Msgbox(0,"","Boutton Cancel pressé de la forme 2")
EndSwitch
WEnd
Mais le problème c'est que les deux formes ferme le programme, si on veut juste masquer le programme si une fenêtre est fermé il faut définir à quel forme appartient le contrôle. Rien de plus simple :
While 1
$nMsg = GUIGetMsg(1) ;on défini le mode avancé : $nMsg[0] = contrôle pressé $nMsg[1] = handle de la fenêtre du contrôle pressé
Switch $nMsg[0] ;on change donc $nMsg par $nMsg[0]
Case $GUI_EVENT_CLOSE
If $nMsg[1] = $Form1 Then ;Si l'handle = $form1 alors ...
GuiSetState ($Form1, @SW_HIDE) ;Cache la fenêtre 1, pas sûr du code GuiSetState ( @SW_HIDE,$Form1) si erreur
Elseif $nMsg[1] = $Form2 Then
GuiSetState ($Form1, @SW_HIDE)
Endif
....
EndSwitch
Wend
Attention à bien mettre les déclarations de forme avant la boucle sinon vous aurez une erreur ;)
Là ça marche ! Magnifique ^^ Mais se n'est pas le moyen le plus "gracieux" effectivement si vous avez un gros programme vous pourrez facilement vous y perdre, car si vous avez déclarez une forme dans une fonction vous ne pourrez pas avoir une boucle dans une autre fonction sauf si vous déclarez toutes les variables en global, ce qui est long et pas propre du tout. Favorisez donc cette méthode pour les petits programmes.
Remarque : Mais ce n'est pas très pratique d'avoir plein de fenêtre qui se balade comme ça, on vera lus tard comment faire une fenetre dites"mère" MDI avec des fenêtres dites "filles" MDI pour ranger tout ça.
Pour faire une fenêtre de message au premier plan du programme (comme un MsgBox) il va falloir
[Sujet Non terminé je le fais en 2 fois xD]