Batch Index du Forum
S’enregistrerRechercherFAQMembresGroupesConnexion
Répondre au sujet Page 1 sur 1
[tuto] Faites des interfaces graphiques avec AGraf
Auteur Message
Répondre en citant
Message [tuto] Faites des interfaces graphiques avec AGraf 
Bonjour les amis !

Aujourd'hui, je vais vous apprendre comment concevoir des interfaces graphiques avec AGraf.

Heu désolé, mais c'est quoi une interface graphique ?   


Une interface graphique c'est ce qui permet à l'utilisateur de communiquer avec un programme. En gros, toutes les fenêtres de windows sont toutes des interfaces graphiques (sauf la console bien sûr Mr. Green )

Voici un petit exemple :
   


Voilà, je pense que tout le monde voit de quoi je parle... Bien, sachez tout de même que le cette fenêtre à été faite via AGraf Very Happy

Bon maintenant, y'a plus qu'a Laughing

Obtenir AGraf !   


Bon pour obtenir AGraf, il faut télécharger la commande externe AGraf... pour l'instant, il n'est pas possible d'intégrer AGraf à vos batchs, mais nous travaillons sur une solution.
Donc dans le dossier, il faut que vous téléchargiez AGraf.exe et VEdit.exe (Ça vous permettra d'éviter d'avoir à coder en dur les interfaçes graphiques). Sinon vous pouvez toujours tenter l'expérience via BatMan, mon IDE pour Batch : http://batch.xoo.it/t2888-IDE-BatMan-IDE-Batch.htm



Simple comme bonjour n'est-ce pas Question

Votre première interface graphique en batch !   


Bon à partir de maintenant, je vais supposer que vous utilisez VEdt.exe, que vous pouvez télécharger plus haut. Donc lancez VEdit et surprise, vous obtenez ça :
   


La première fenêtre à gauche permet de modifier les propriétés de la fenêtre, d'ajouter et de naviguer parmi les composants de votre interfaçe. Si vous voulez modifier après sa création un composant, il suffira de cliquer sur son nom dans la liste pour pouvoir le modifier de nouveau.

La fenêtre du milieux permet de modifier les caractéristiques des composants de votre interface. Ces caractéristiques sont les suivantes
  • Nom : Nom qui identifie le composant de l'interface
  • Contenu : Texte qui sera contenu dans le composant
  • X , Y : Position en pixel du composant dans la fenêtre (attention: le point qui a pour coordonnées 0,0 est le coin supérieur gauche de la fenêtre
  • Largeur, hauteur : dimensions du composant dans la fenêtre


La fenêtre de droite, quant-a elle, représente l'interface que AGraf créera

Bon pour l'aprentissage, on va créer une petite fenêtre avec du texte et deux boutons, par exemple une une message Box qui demande quelque chose à l'utilisateur

Attention : Sachez qu'il est impératif que votre interface contienne au moins un bouton, en effet AGraf ne s'arrêtera et ne transmettra les données au batch que si l'utilisateur appuie sur un bouton

Bon par, exemple, utilisez l'éditeur pour placer un texte et deux boutons. Ne conservez pas les nom auto-générés, c'est plus clair pour le traitement des information ensuite... Et si le texte que vous avez entré dans 'contenu', n'est pas affiché, pensé à agrandir le composant (dans la limite des dimensions de la fenêtre bien sûr Mort de Rire )

Bon je suppose que vous pouvez essayer par vous même, normalement, vous arriverez à ça

Pour ma part, ce sera une fenêtre pour demander le temps à l'utilisateur




Bon maintenant il vous reste plus qu'a récupérer le code ?  


Pour cela, il vous suffit d'appuyer sur le bouton "Générer le code", pour ma part, ça me donne :

Code:
::#Gui_0
::Window "AGraf - Fenêtre" 321 60
::Button "Mauvais" "Mauvais" 210 30 100 25
::Button "Beau" "Magnifique" 10 30 100 25
::Text "Bonjour utilisateur ! Quel temps fait il aujourd'hui ?" 10 10 300 15
::#EndGui


On va un peu étudier ce code :
  • Les code est encadré par des directive, qui commencent par un '#'. La première directive '#Gui_0' permet de donner un nom à une interface (ce qui permet de pouvoir en stocker plusieurs dans un même batch). C'est comme une étiquette en batch. Quand vous lancerez AGraf, ce sera ce nom la que vous devrez passer en paramètre. Il va sans dire que vous pouvez modifier le nom, en '#DemandeTemps' par exemple.
  • La seconde directive, '#EndGui' marque la fin de la dernière interface lancée, ici '#Gui_0'
  • Le code est dans des commentaires, ce qui l'empêche d'être exécuter par le batch, ce qui causerait des erreurs d'interprétation. Ne vous inquiétez pas, vous pouvez toujours utiliser vos bons vieux commentaires avec '::' Mr. Green Enfin tant qu'il ne vous prends pas l'envie d'y écrire '#EndGui' :lol
  • Toutes les autres lignes sont des commandes


Et c'est parti pour l'interfaçe Razz  


Stop Twisted Evil il faut qu'on modifie le nom de l'interface pour que ce soit plus lisible en 'DemandeTemps' par exemple (pour ceux qui n'ont rien compris, retour à la partie précédente Mort de Rire )
Code:
::#DemandeTemps
::Window "AGraf - Fenêtre" 321 60
::Button "Mauvais" "Mauvais" 210 30 100 25
::Button "Beau" "Magnifique" 10 30 100 25
::Text "Bonjour utilisateur ! Quel temps fait il aujourd'hui ?" 10 10 300 15
::#EndGui


Bon bah voilà, c'était pas dur non ? Wink

Bon donc maintenant, il vous faut :
  • AGraf.exe : pour afficher et gérer l'interface à placer dans le même dossier que votre batch
  • Un batch : pour lancer AGraf et contenir le code de l'interface
  • Un cerveau (facultatif) : même si maintenant vous n'avez plus qu'a dérouler, son utilisation demeure conseillée Mr. Green
    Si vous n'en avez pas encore, sachez qu'il est possible de se procurer des modèles de qualité et quasi-neuf chez certains sportifs de haut niveau, en particulier chez les coureurs cyclistes qui n'en ont pas l'usage Mort de Rire


Donc pour lancer l'interface, il faut utiliser la commande AGraf. La syntaxe est la suivante :
Code:

AGRAF fichier #Nom_interface

    fichier : le fichier dans lequel ce trouve le code de l'interface, ici ce sera notre batch, donc on mettra "%~0".
  • #Nom_interface : le nom de l'interfaçe qu'on veut ouvrir, ici c'est "#DemandeTemps'


d'ou pour lancer l'interface :
Code:
AGRAF "%~0" #DemandeTemps


puis plus qu'a copier coller le code de l'interface dans le batch.

ce qui nous donne, au complet
Code:
@ECHO OFF
AGRAF "%~0" #DemandeTemps
PAUSE
::#DemandeTemps
::Window "AGraf - Fenêtre" 321 60
::Button "Mauvais" "Mauvais" 210 30 100 25
::Button "Beau" "Magnifique" 10 30 100 25
::Text "Bonjour utilisateur ! Quel temps fait il aujourd'hui ?" 10 10 300 15
::#EndGui


Et tadam ! votre interface s'ouvre :shocked:

Heu attends y'a un lézard là, j'ai un truc bizarre qui s'affiche Mr. Green




Ah ça ? c'est normal, ne vous inquiétez pas Very Happy c'est juste que AGraf vous a renvoyé le contenu l'interface

Alors comme ça AGraf essaie de m'expliquer la fenêtre ?


Exactement ! plongeons un petit peu plus dans le code de l'interface :

Code:

::#DemandeTemps
::Window "AGraf - Fenêtre" 321 60
::Button "Mauvais" "Mauvais" 210 30 100 25
::Button "Beau" "Magnifique" 10 30 100 25
::Text "Bonjour utilisateur ! Quel temps fait il aujourd'hui ?" 10 10 300 15
::#EndGui


On a vu les directives, maintenant, regardons les commandes...
il existe 3 types de commandes différentes
  • Les commandes de composants : ce sont les commandes qui créent des composants qui interagissent avec l'utilisateur c'est le cas de '::Button'
  • Les commandes statique : ce sont les commandes qui créent des composants qui n’interagissent pas avec l'utilisateur, C'est le cas de '::Window' et '::Text'
  • Les commandes de style : ce sont des commandes qui modifient le style des composants. Il n'y en a aucune ici (vous inquiétez pas, c'est pour plus tard Mort de Rire )


Les commandes de composants partagent les mêmes paramètres:
Code:

::Button "nom" "contenu" posX posY largeur hauteur

  • nom : nom qui identifie le composant
  • contenu : le texte contenu dans le composant
  • posX posY : les coordonnées du composant (en pixels)
  • largeur hauteur: les dimensions du composant en pixel


Et donc, lors de la fin de l'exécution, AGraf retourne son nom et son contenu (ou état). Dans l'exemple précédent, j'avais cliqué sur le bouton "mauvais" (hé oui désolé, c'est le temps normand qui déteint sur moi Mr. Green ), donc l'état de "Mauvais" était 1 (cliqué) , alors que l'état de "Beau" était 0 (non cliqué, j'ai qu'une seule souris Razz )

Ouf, on est sauvé, ça marche ^^

Récupérer les donnés de la fenêtre 


Bon maintenant, il ne nous reste plus qu'a récupérer les données dans des variables via une boucle for.

J'ai préféré utiiser une fonction plutot que de surcharger le code de boucles
Code:

GOTO:EOF
:ShowGui_
FOR /F "tokens=1,* delims=:" %%A IN ('AGRAF "%~1" %2') DO SET %%A=%%B
GOTO:EOF


copiez ce code à la fin de votre batch puis remplacez tous les
Code:

AGRAF "%~0" #Nom_interface

par
Code:

CALL :ShowGui_ "%~0" #Nom_interface


Ce qui nous donne :
Code:

@ECHO OFF

CALL :ShowGui_ "%~0" #DemandeTemps
PAUSE
::#DemandeTemps
::Window "AGraf - Fenêtre" 321 60
::Button "Mauvais" "Mauvais" 210 30 100 25
::Button "Beau" "Magnifique" 10 30 100 25
::Text "Bonjour utilisateur ! Quel temps fait il aujourd'hui ?" 10 10 300 15
::#EndGui

GOTO:EOF
:ShowGui_
FOR /F "tokens=1,* delims=:" %%A IN ('AGRAF "%~1" %2') DO SET %%A=%%B
GOTO:EOF


Ah cool, mais on fait comment maintenant pour récupérer les données ? 


Bah par les variable voyons Very Happy à la fin de AGraf, chaque composant crée une variable qui porte le nom du composant et sont état ou son contenu.

vous pouvez tester en ajoutant
Code:

ECHO %mauvais%


Vous pouvez maintenant faire un batch qui affiche un message différent en fonction du bouton cliqué Mr. Green
Code:

@ECHO OFF

CALL :ShowGui_ "%~0" #DemandeTemps
IF "%mauvais%"=="1" ECHO aH, zut c'est dommage, je préfère quand il fait beau :P
IF "%beau%"=="1" ECHO aH chouette, j'adore quand il fait beau :P
PAUSE>NUL
::#DemandeTemps
::Window "AGraf - Fenêtre" 321 60
::Button "Mauvais" "Mauvais" 210 30 100 25
::Button "Beau" "Magnifique" 10 30 100 25
::Text "Bonjour utilisateur ! Quel temps fait il aujourd'hui ?" 10 10 300 15
::#EndGui

GOTO:EOF
:ShowGui_
FOR /F "tokens=1,* delims=:" %%A IN ('AGRAF "%~1" %2') DO SET %%A=%%B
GOTO:EOF

Après clic sur "Magnifique" :


Après clic sur "Mauvais" :



Voilà, le tuto arrive à sa fin, j'espère que ça vous a aidé, et n'oubliez pas que la méthode pour récupérer les données dans des variables marche aussi avec les composants d'édition de texte "Edit" et pour le checkbox et les radiobuttons

Prochain chapitre : utilisation des composants Edit et Edit-Multiligne

@+



Visiter le site web du posteur Skype
Message Publicité 
PublicitéSupprimer les publicités ?


Répondre en citant
Message [tuto] Faites des interfaces graphiques avec AGraf 
Hellooooo,

J'ai pas tout lu car j'ai commencé à avoir mal à la tête Mr. Green .
Sinon bof, peu mieux faire Mort de Rire nan bravo pour Agraf et les explications Okay Okay Okay

A +

ps: je prendrais le temps pour lire le tout et t'en dirais des nouvelles plus tard, là je prend un doliprane *_*.




______________________________________________________
Le batch est mon joujou de tout les jours,
plus pour le loisir que pour le travail,
et avec j'apprend presque tout les jours,
comment programmer et le travailler,
pour avoir enfin un résultat cool.

Ed la poignée du 93 (^_^)
Yahoo Messenger MSN Skype
Répondre en citant
Message Bouton radio et checkbox 
Salut,

Je ne parviens pas à trouver les commandes pour les boutons radios et checkbox. Quelles sont elles ?

Merci infiniment.

P.S. : Je sais que tu arrête le support de cette application mais, ce que tu as fait est terrible ! Razz



Répondre en citant
Message [tuto] Faites des interfaces graphiques avec AGraf 
Yep, pour AGraf.exe --------- = https://app.box.com/s/7bb58c22a077e7ff2b14
Et pour AGraf's Visual Editor = https://app.box.com/s/7d69786b5db6ef9f9d6c

A++ Okay




______________________________________________________
Visiter le site web du posteur
Répondre en citant
Message Thks 
Yeah ! Skywalker you Rocks !
Merci beaucoup !!! Wink



Répondre en citant
Message [tuto] Faites des interfaces graphiques avec AGraf 
Pas de quoi Laughing




______________________________________________________
Visiter le site web du posteur
Répondre en citant
Message [tuto] Faites des interfaces graphiques avec AGraf 
Très bon tuto, avec en plus, une pointe d'humour, j'adore !

Agraf, c'est vraiment de la balle, merci les gars ! Very Happy




______________________________________________________
Cordialement, </Troud>.
Répondre en citant
Message [tuto] Faites des interfaces graphiques avec AGraf 
il ne faut pas oublier agrafV2 (qui n'est plus un portage linux) : http://batch.xoo.it/t5092-C-DEV-AgrafV2-Cr-ateur-d-interface-graphique-TSna…




______________________________________________________
Partager permet le savoir. Le savoir permet de partager de nouveau savoirs.
Message [tuto] Faites des interfaces graphiques avec AGraf 


Montrer les messages depuis:
Répondre au sujet Page 1 sur 1
  



Index | créer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Copyright 2008 - 2016 // Batch