Programming'z fury Index du Forum
S’enregistrerRechercherFAQMembresGroupesConnexion
Koda Form Designer

 
Répondre au sujet    Programming'z fury Index du Forum » Apprentis-Programmeurs » Tutoriels Sujet précédent
Sujet suivant
Koda Form Designer
Auteur Message
DrK_AluChe
Apprenti-Programmeur

Hors ligne

Inscrit le: 11 Juil 2010
Messages: 17
Sexe: Masculin

Message Koda Form Designer Répondre en citant
Tuto Koda Form Designer

Bon voila créer des GUI à la main c'est long et pas toujours précis.
Avec Koda Form Designer ( télechargeable ici -> Koda Form Designer <-)
on va pouvoir créer des GUI ( les créer seulement pas les programmer ) assez rapidement mais surtout beaucoup plus facilement qu'à la main.

Donc pour ça on ouvre Koda Vous devriez tomber sur un écran tel que celui-ci :





Alors qu'est ce qu'on remarque sur cet interface ?
On remarque qu'il y a 5 "fenêtres" présentes dans le logiciel Koda.
Alors la première : la barre du haut c'est la barre d'outil. c'est elle qui va nous permettre d'ajouter toutes sortes de contrôles tels que :
-des menus
-des zones de textes
-des inputbox
-des boutons, etc,etc ...
Dans cette barre d'outils on remarque aussi différents onglets : les onglets standard, additional, Win32 et Custom.
ces onglets vont nous permettre d'ajouter toutes sortes de contrôles tels que des images, des icônes, des sliders, des progressbar, des inputbox pour IP, et meme des listes d'images.
Mais nous verrons cela plus tard.

On passe a la seconde fenêtre nommée : Object TreeView.
Cette fenêtre permet de voir de toutes les GUI et de tout les contrôles qui sont dans vos GUI tout ça organisé en arbre

Troisième fenêtre maintenant : Form1
Cette fenêtre quadrillé est votre "tableau". Le "socle" sur lequel vous allez Créer votre GUI en y plaçant des boutons, et d'autre contrôles divers et variés.
le quadrillage présent sur cette fenêtre ne sers que de repère au placement de vos contrôles, il n'apparaitra donc pas sur votre GUI "exécutée"

Quatrième fenêtre : Form List
assez facile à comprendre c'est la liste de toutes vos fenêtres.

Et enfin dernière fenêtre en bas à gauche : Object inspector
Ce sont les propriétés du contrôle sélectionné vous pouvez donc à partir de cette fenêtre renommer un bouton ou insérer du texte dans une zone prévu à cet effet.

Je vous laisse regarder et vous amuser un peu avec tout les contrôles que l'on peut ajouter sur koda.


Alors maintenant on passe à l'édification de notre GUI
Pour faire Simple on va créer une GUI avec 2 inputbox et 2 boutons
Donc pour cela on va dans la barre d'outils, dans l'onglet standard et on sélectionne : Input
ensuite on va faire un cliquer-glisser pour créer la zone de l'inputbox.




Voila vous avez votre première inputbox. on refait la même manip pour le 2ème et vous devriez arriver à ça.




Maintenant on va insérer les boutons, donc comme pour les inputbox, on choisi dans l'onglet standard le bouton et on fait un cliquer-glisser






On refait la même manip pour le 2ème bouton et on arrive donc à ça :






Maintenant on va réduire la taille de la GUI on va donc sélectionner le coin en bas à droite de la fenêtre Form1 et faire un cliquer glisser jusqu'à la taille souhaitée






Ca nous donne donc notre GUI finale.


Maintenant on va s'intéresser à la fenêtre en bas à gauche : l'Object Inspector.

On sélectionne donc l'input1 et dans l'Object Inspector on va changé la valeur true en false en face de Enabled, car on ne veut pas pouvoir écrire directement dedans.
En face de name on va mettre affich à la place de input1 (c'est la désignation du contrôle qu'on utilisera lors de sa programmation ( il sera nommé $affich))
En face de Text on va mettre : Ici sera affiché votre texte


Pour l'input2 on va changer le name en Affich_txt
Et en face de text on va mettre : Entrez le texte à afficher

Voila les 2 input sont maintenant prêtes

On passe aux boutons :

Pour le Button1 on va changer sa désignation en Entrer (toujours en face de Name) et pour changer le texte à l'intérieur du bouton on va mettre en face de Caption : Entrez

Pareil pour le Button2 on change sa désignation en Sauvegarder et le Texte à l'intérieur en Sauvegarder.

Voila vous devriez donc arriver à quelque chose comme ça (Vous remarquerez que les noms ont changés dans l'ObjectTreeViewer)






Maintenant on va voir l'ajout d'une progressbar.

Augmenter un peu la hauteur de votre Form1 ( 2 lignes suffiront )
Pour cela on va aller dans la barre d'outils, onglet Win32 et on sélectionne progress.
On va créer la progressbar en dessous des boutons Entrer et Enregistrer.
Comme pour les boutons on va faire un cliquer glisser.
Vous devriez avoir une fenêtre qui s'apparente à celle-ci.





Maintenant que vous avez créé votre GUI il faut l'afficher dans votre script pour ça on va soit appure sur F9 soit, dans la barre d'outils appuyer sur : Generate code

Koda va donc ouvrir une fênetre nommée : Code





Le code de cette fenêtre est le code qui va vous permettre d'afficher votre GUI lors de l'éxécution de votre script.
On retrouve donc dans ce code les includes :

Code:
#include <ButtonConstants.au3>
#include <EditConstants.au3>
#include <GUIConstantsEx.au3>
#include <ProgressConstants.au3>
#include <WindowsConstants.au3>


le code de la GUI,

Code:
#Region ### START Koda GUI section ###
$Form1_1 = GUICreate("Form1", 171, 152, 193, 124)
$Affich = GUICtrlCreateInput("Ici sera affiché votre texte", 8, 8, 153, 21)
GUICtrlSetState(-1, $GUI_DISABLE)
$Affich_txt = GUICtrlCreateInput("Entrez le texte à afficher", 8, 40, 153, 21)
$Entrer = GUICtrlCreateButton("Entrée", 8, 72, 73, 49, 0)
$Enregistrer = GUICtrlCreateButton("Enregistrer", 88, 72, 73, 49, 0)
$Progress1 = GUICtrlCreateProgress(8, 128, 153, 17)
GUISetState(@SW_SHOW)
#EndRegion ### END Koda GUI section ###



et enfin la boucle.

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

   EndSwitch
WEnd



On fait donc un copier coller de toute ces belles lignes dans AutoIT ce qui nous donne :

Code:

#include <ButtonConstants.au3>
#include <EditConstants.au3>
#include <GUIConstantsEx.au3>
#include <ProgressConstants.au3>
#include <WindowsConstants.au3>

#Region ### START Koda GUI section ### Form=f:\koda\forms\tuto koda.kxf
$Form1_1 = GUICreate("Form1", 171, 152, 193, 124)
$Affich = GUICtrlCreateInput("Ici sera affiché votre texte", 8, 8, 153, 21)
GUICtrlSetState(-1, $GUI_DISABLE)
$Affich_txt = GUICtrlCreateInput("Entrez le texte à afficher", 8, 40, 153, 21)
$Entrer = GUICtrlCreateButton("Entrée", 8, 72, 73, 49, 0)
$Enregistrer = GUICtrlCreateButton("Enregistrer", 88, 72, 73, 49, 0)
$Progress1 = GUICtrlCreateProgress(8, 128, 153, 17)
GUISetState(@SW_SHOW)
#EndRegion ### END Koda GUI section ###

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

   EndSwitch
WEnd


Et voila vous avez votre GUI. vous lancez le script et celle-ci apparait.

Voila vous savez maintenant comment créer une GUI sur Koda En ajoutant divers contrôles

Fin du Tuto sur la création de GUI sous Koda Form Designer

[Djirix je te laisse le soin de trouver un exercice approprié à ce tuto Wink ]
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------
Élargissement de ce tuto pour la programmation de la GUI sur AutoIT v3
-------------------------------------------------------------------------------------------

Bon pour cette GUI toute simple on va pas faire compliquer on veut que le texte qu'on rentre dans l'input du bas soit enregistré; alors la progressbar avance a 50 % puis on veut que lorsque l'on appuie sur entrée le texte que l'on avait entré dans l'input du bas s'affiche dans l'input du haut. Donc pour ca on va programmer la GUI.

On retrouve donc les includes, la GUi et la boucle.
Code:

#include <ButtonConstants.au3>
#include <EditConstants.au3>
#include <GUIConstantsEx.au3>
#include <ProgressConstants.au3>
#include <WindowsConstants.au3>

#Region ### START Koda GUI section ### Form=f:\koda\forms\tuto koda.kxf
$Form1_1 = GUICreate("Form1", 171, 152, 193, 124)
$Affich = GUICtrlCreateInput("Ici sera affiché votre texte", 8, 8, 153, 21)
GUICtrlSetState(-1, $GUI_DISABLE)
$Affich_txt = GUICtrlCreateInput("Entrez le texte à afficher", 8, 40, 153, 21)
$Entrer = GUICtrlCreateButton("Entrée", 8, 72, 73, 49, 0)
$Enregistrer = GUICtrlCreateButton("Enregistrer", 88, 72, 73, 49, 0)
$Progress1 = GUICtrlCreateProgress(8, 128, 153, 17)
GUISetState(@SW_SHOW)
#EndRegion ### END Koda GUI section ###

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

   EndSwitch
WEnd


Pour la programmation on va coder dans la boucle.

Donc 1ère étape:
Si l'on appuie sur Enregistrer, alors on fait avancer la progressbar jusqu'à 25% puis on enregistre le texte présent dans l'input nommée $Affich_txt, ensuite $Affiche_txt se vide, on fait avancer la progressbar jusqu'à 50 et alors apparait une MsgBox nous informant que l'enregistrement a été effectué :
Code:
While 1
   $nMsg = GUIGetMsg()
   Switch $nMsg
      Case $GUI_EVENT_CLOSE
         Exit
Case $Enregistrer ;si l'on apppuie sur enregistrer , alors

         GUIctrlsetdata($Progress1, 25) ; la progressbar avance jusqu'a 25
         Sleep(200) ;temp d'attente pour rendre plus "réaliste" =)
         $print=GUICtrlRead($Affich_txt);le texte présent dans $Affich_txt est enregistré sous la variable : $print
         GUICtrlSetData($Affich_txt,"");$Affich_txt se vide
         GUIctrlsetdata($Progress1, 50);la progressbar avance jusqu'à 50%
         MsgBox(0,"Avancement","enregistrement effectué"); MsgBox qui nous informe que l'enregistrement a été effectué


2ème étape :
Si l'on appuie sur Entrée, alors on fait avancer la progressbar jusqu'à 75, ensuite on affiche le texte enregistré dans l'input nommée $Affich, la progressbar se complète et enfin une MsgBox nous informe que le texte a été restitué :
Code:
      Case $Entrer ;si l'on appuye sur entrée

         GUICtrlSetData($Progress1,75); la progressbar avance jusqu'a 75
         Sleep(100);temp d'attente pour rendre plus "réaliste"
         GUICtrlSetData($Affich,$Print &"");on affiche le texte enregistré sous $print dans l'input $affich  ($Print &"") $print est la variable, "" précise que l'on affiche du texte et & sers à afficher le texte de $print et pas un chiffre. faites le test avec & et sans & vous verrez
         GUICtrlSetData($Progress1,100); la progressbar avance jusqu'à 100
         MsgBox(0,"Avancement","Texte restitué"); MsgBox qui nous indique que le texte a été restitué
   EndSwitch
WEnd


Voila au final ca nous donne donc :

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

      Case $Enregistrer ;si l'on apppuye sur enregistrer , alors

         GUIctrlsetdata($Progress1, 25) ; la progressbar avance jusqu'a 25
         Sleep(200) ;temp d'attente pour rendre plus "réaliste" =)
         $print=GUICtrlRead($Affich_txt);le texte présent dans $Affich_txt est enregistré sous la variable : $print
         GUICtrlSetData($Affich_txt,"");$Affich_txt se vide
         GUIctrlsetdata($Progress1, 50);la progressbar avance jusqu'à 50%
         MsgBox(0,"Avancement","enregistrement effectué"); MsgBox qui nous informe que l'enregistrement a été effectué

      Case $Entrer ;si l'on appuye sur entrée

         GUICtrlSetData($Progress1,75); la progressbar avance jusqu'a 75
         Sleep(100);temp d'attente pour rendre plus "réaliste"
         GUICtrlSetData($Affich,$Print &"");on affiche le texte enregistré sous $print dans l'input $affich  ($Print &"") $print est la variable, "" précise que l'on affiche du texte et & sers à afficher le texte de $print et pas un chiffre. faites le test avec et sans vous verrez
         GUICtrlSetData($Progress1,100); la progressbar avance jusqu'à 100
         MsgBox(0,"Avancement","Texte restitué"); MsgBox qui nous indique que le texte a été restitué
   EndSwitch
WEnd


[images spoilées]



Coridalement, DrK_AluChe


Dernière édition par DrK_AluChe le Dim 22 Aoû - 15:12 (2010); édité 1 fois
Ven 30 Juil - 22:18 (2010)
Publicité






Message Publicité
PublicitéSupprimer les publicités ?

Ven 30 Juil - 22:18 (2010)
DrK_AluChe
Apprenti-Programmeur

Hors ligne

Inscrit le: 11 Juil 2010
Messages: 17
Sexe: Masculin

Message Koda Form Designer Répondre en citant
Up

1ère partie du Tuto terminé

Cordialement, DrK_AluChe


Jeu 5 Aoû - 22:47 (2010)
Contenu Sponsorisé






Message Koda Form Designer

Aujourd’hui à 04:03 (2018)
Montrer les messages depuis:    
Répondre au sujet    Programming'z fury Index du Forum » Apprentis-Programmeurs » Tutoriels Toutes les heures sont au format GMT + 2 Heures
Page 1 sur 1

 
Sauter vers: 

Index | creer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Powered by phpBB © 2001, 2005 phpBB Group
Design by Freestyle XL / Music Lyrics.Traduction par : phpBB-fr.com