Koda FormDesigner

Espace contenant des tutoriels divers concernant AutoIt.
Règles du forum
.

Tutoriel "La programmation avec Autoit" : https://openclassrooms.com/fr/courses/1 ... vec-autoit
Répondre
Amesamana
Niveau 5
Niveau 5
Messages : 108
Enregistré le : dim. 09 sept. 2012 16:37
Status : Hors ligne

Koda FormDesigner

#1

Message par Amesamana »

Koda FormDesigner
  • Koda est une application autonome qui a été développé pour aider à la création de formes (GUI) pour AutoIt3.
  • Cet outil vous permet de construire votre Gui. Vous pouvez agir sur les dimensions, les couleurs, la police, le nom de vos boutons, vos labels, vos zones d'édition... mais aussi le nom de vos variables ...
  • Koda(FormDesigner) se trouve dans Scite, via le menu Outils ou avec les touche Alt+M
  • Dans ce tutoriel nous allons voir les bases car cet outil offre beaucoup de possibilités.

Présentation de l'outil Koda FormDesigner

  • Dans la partie centrale nous voyons Form1, ceci est la GUI, votre interface. Nous allons donc construire cette GUI.
2016-03-12_001914.jpg
  • Par défaut Koda est en Anglais on peut le passer en Français. Pour cela cliquer sur Options ou les touche Ctrl+K, puis dans Langage sélectionner Français.
2016-03-13_103325.jpg
  • Pour les reste des options elles sont par défaut bien réglées, vous pouvez tout de même sous la partie Barre d'outils adapter et la modifier selon vos besoins.
  • J'ai fait un exemple en vidéo, interface simple mais c'est un exemple pour montrer qu'en quelques minutes on peut se faire une petite GUI.
films-icone-9570-64.png
films-icone-9570-64.png (7.5 Kio) Vu 21623 fois
[/url]
Le code édité par Koda :
#include <ButtonConstants.au3>
#include <EditConstants.au3>
#include <GUIConstantsEx.au3>
#include <StaticConstants.au3>
#include <WindowsConstants.au3>
#Region ### START Koda GUI section ### Form=
$hGUI = GUICreate("MA GUI", 418, 362, 2407, 196)
GUISetBkColor(0xC0C0C0)
$Label1 = GUICtrlCreateLabel("Voici ma GUI", 24, 8, 110, 24)
GUICtrlSetFont(-1, 12, 800, 0, "MS Sans Serif")
GUICtrlSetColor(-1, 0x0000FF)
$Edit1 = GUICtrlCreateEdit("", 16, 152, 385, 193)
GUICtrlSetData(-1, "Edit1")
$btACT1 = GUICtrlCreateButton("Action 1", 24, 48, 105, 25)
GUICtrlSetFont(-1, 10, 800, 0, "MS Sans Serif")
GUICtrlSetColor(-1, 0x0000FF)
GUICtrlSetBkColor(-1, 0x808000)
$btACT2 = GUICtrlCreateButton("Action  2", 24, 80, 105, 25)
GUICtrlSetFont(-1, 10, 800, 0, "MS Sans Serif")
GUICtrlSetColor(-1, 0x0000FF)
GUICtrlSetBkColor(-1, 0x808000)
$btACT3 = GUICtrlCreateButton("Action 3", 24, 112, 105, 25)
GUICtrlSetFont(-1, 10, 800, 0, "MS Sans Serif")
GUICtrlSetColor(-1, 0x0000FF)
GUICtrlSetBkColor(-1, 0x808000)
$ckNIV1 = GUICtrlCreateCheckbox("Niveau 1", 168, 48, 97, 17)
GUICtrlSetFont(-1, 8, 800, 0, "MS Sans Serif")
$ckNIV2 = GUICtrlCreateCheckbox("Niveau 2", 168, 80, 97, 17)
GUICtrlSetFont(-1, 8, 800, 0, "MS Sans Serif")
$ckNIV3 = GUICtrlCreateCheckbox("Niveau 3", 168, 112, 97, 17)
GUICtrlSetFont(-1, 8, 800, 0, "MS Sans Serif")
$Label2 = GUICtrlCreateLabel("Niveau :", 168, 24, 61, 20)
GUICtrlSetFont(-1, 10, 800, 0, "MS Sans Serif")
$Pic1 = GUICtrlCreatePic("E:\AutoIT\Files Folders Search\1308547900.jpg", 280, 24, 113, 113)
GUISetState(@SW_SHOW)
#EndRegion ### END Koda GUI section ###

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

   EndSwitch
WEnd
  • Il nous reste à saisir nos actions attribuer aux variables de la GUI. La partie la plus complexe :D
  • Commençons par la partie supérieur de l'outil qui nous offre plusieurs possibilités pour construire sa GUI.
  • Dans la partie supérieur de la fenêtre vous avez les onglets Standard, Additional, Win32 et Custom, vous trouverez les différents objets disponibles pour la création de votre fenêtre.
2016-03-25_080007.jpg
  • Dans la partie supérieur gauche vous avez des icônes avec une flèche verte; La petite flèche verte va vous permettre de générer le code que vous pourrez coller dans un script et pour la grosse flèche, lancer l'interface graphique afin de voir le résultat graphique. Vous pouvez voir aussi les autres icônes ouvrir des projets ou enregistrer.
2016-03-12_190629.jpg
2016-03-12_190629.jpg (10.11 Kio) Vu 21623 fois
  • La fenêtre de droite Form List contient la liste de toutes les fenêtres qui aurait pu être crées pour votre projet. Elles peuvent être multiples.
2016-03-12_185519.jpg
2016-03-12_185519.jpg (13.69 Kio) Vu 21623 fois
  • Dans la partie gauche, vous trouverez une fenêtre Object TreeView. Cette fenêtre contient la liste des objets (graphique ou non) de la GUI en cours de traitement, par exemple ici les groupes de projet.
2016-03-12_185815.jpg
2016-03-12_185815.jpg (18.21 Kio) Vu 21623 fois
  • Ci-dessous, ce nomme Object Inspector, qui vous donne l' accès à presque tout les éléments de contrôle d'un objet.
    A partir de cette fenêtre, vous pouvez en fonction de l'objet régler la taille, la position, le nom, le contenu, la couleur ...
  • Dans la partie inférieure, des onglets : Properties, Styles et ExStyles avec qui vous pouvez régler d'autres éléments de l'objet.
2016-03-12_190310.jpg
2016-03-12_190310.jpg (40.76 Kio) Vu 21623 fois
  • Voici une présentation simple mais qui vous permettra d'apprivoiser cet outil qui est pour tout simplement génial.
  • Voici quelques exemples de GUI que l'on peut construire (exemple graphique pas forcément fait avec Koda) :
USBFIX-2016.png
2016-03-25_081723.jpg
Modifié en dernier par Amesamana le lun. 11 avr. 2016 08:56, modifié 2 fois.
GMH
Niveau 6
Niveau 6
Messages : 227
Enregistré le : dim. 24 juin 2012 14:56
Status : Hors ligne

Re: Koda FormDesigner

#2

Message par GMH »

Merci amesamana pour cette présentation qui me fait découvrir cet outil.
davzell
Niveau 5
Niveau 5
Messages : 105
Enregistré le : jeu. 26 sept. 2013 14:15
Status : Hors ligne

Re: Koda FormDesigner

#3

Message par davzell »

est ce qu'il y a des codes quelque part des deux dernière GUI pour voir comment ils en sont arrivés à ce résultat.

moi ce que je fais est très très gris et classique :)
Amesamana
Niveau 5
Niveau 5
Messages : 108
Enregistré le : dim. 09 sept. 2012 16:37
Status : Hors ligne

Re: Koda FormDesigner

#4

Message par Amesamana »

Bonjour,

Je ne suis pas sur que les auteurs des ces outils soit décidés à donner leurs codes :lol:
Un peu dans l'idée de la première interface je vous ai fait un exemple, cela a pris une vingtaine de minutes avec Koda et en allant chercher les images sur le net, on peut par la suite modifier avec des fonctions (exemple : Images en .png pour profiter de fond transparent sur les boutons ou la GUI).
Un peu de couleur égaie l'interface, les choix ici sont pas très satisfaisant, mais bon pour l'exemple. :D
2016-03-26_175256.jpg
► Afficher le texte
Il faut avoir l'idée graphique, ce que j'ai fait ci-dessus est fait à la va vite pour l'exemple, donc si on prend un peu de temps on peut faire chose vraiment sympa : Mais bon le plus dur reste à faire ! Alimenter les actions des boutons ! :D
Voici d'autres exemples :
► Afficher le texte
Modifié en dernier par Amesamana le lun. 11 avr. 2016 08:58, modifié 1 fois.
Avatar du membre
orax
Modérateur
Modérateur
Messages : 1479
Enregistré le : lun. 23 mars 2009 04:50
Localisation : ::1
Status : Hors ligne

Re: Koda FormDesigner

#5

Message par orax »

Pour Linux Live Usb Creator, si, c'est un logiciel libre. Pour USBFIX je ne sais pas. Mais je ne vois pas comment on pourrait faire de genre d'interfaces avec Koda.

Un exemple de GUI utilisant une image : https://www.autoitscript.com/forum/topi ... nt=1300302
De petits détails peuvent faire toute la différence. — Quand la boule de neige commence à rouler… poussez-la. (Columbo)
Amesamana
Niveau 5
Niveau 5
Messages : 108
Enregistré le : dim. 09 sept. 2012 16:37
Status : Hors ligne

Re: Koda FormDesigner

#6

Message par Amesamana »

Merci orax !
Tuto modifié.
Avatar du membre
franco
Niveau 7
Niveau 7
Messages : 342
Enregistré le : lun. 03 oct. 2011 22:37
Localisation : Liévin
Status : Hors ligne

Re: Koda FormDesigner

#7

Message par franco »

Salut.

« Pour USBFIX je ne sais pas »
Connaissant bien les développeurs : non, ce n'est pas un logiciel libre.

https://www.usb-antivirus.com/fr/telecharger/usbfix/


++
L'entraide, c'est mon dada ;)
Répondre