Aller au menu - Aller au contenu

Icône Koda

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 96 sur ce chapitre classé 50/786
Koda, de son vrai nom Koda Form Designer, est un outil d'aide à la création d'interfaces graphiques.
Pour le lancer, vous trouverez son exécutable FD.exe dans le répertoire d'installation de Scite4AutoIt, dans le sous-dossier Koda. Vous pouvez également le lancer à partir de l'éditeur de code Scite en utilisant la combinaison de touche ALT + M lors de l'édition d'un fichier .au3.

L'apparence de cet utilitaire se rapproche fortement de celle de Visual C++ ou Delphi (dont il est issu), et permet de faire les mêmes types de manipulations sur les objets graphiques créés.

Interface graphique de Koda Form Designer

A l'instar de ses grands frères, vous ne pourrez pas intervenir directement sur le code généré.
Cela dit, rien que le fait de créer son interface graphique visuellement permet de gagner un temps considérable sur la partie conception. ;)
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Configuration

Avant d'utiliser Koda, nous allons effectuer quelques réglages de bases.

Vous trouverez la plupart des réglages décrits ci-dessous dans le sous-menu Options du menu Options. :)

Tout d'abord, si vous n'avez pas les menus de Koda en Français, dans la fenêtre des options, cliquez sur Langage et choisissez Français. Si cette langue n'est pas disponible, c'est que vous avez téléchargé une version inférieure ou égale à la version 1.7.2.0 de Koda. Dans ce cas, téléchargez la nouvelle version, ou récupérez le fichier langage sur ce lien : Fichier de langue Française pour Koda 1.7.2.0
Vous trouverez les explications sur la page du lien.

Bien, maintenant que vous avez Koda en Français, passons en revue les options principales.

Panneau de configuration de Koda


Sous menu Options du menu Options :
  • Général
    Dans ce menu, laissez les options par défaut et activez 'Créer une sauvegarde' en règlant éventuellement le niveau d'annulation et le nombre de fichiers récents.

  • Générateur de Code
    Si vous avez l'intention de créer un code événementiel, alors cochez la case correspondante.
    Si vous souhaitez créer un événement pour chacun des contrôles graphiques que vous allez mettre en place, alors cochez 'Générer des événements pour tous les contrôles'.

  • Mise en Forme
    Cette partie vous permet de régler les options de la mise en forme du code généré par Koda. Laissez les options par défaut.

  • Modèles
    Cette partie vous permet de gérer les modèles de boucle classique et événementiel.

  • Concepteur
    Cette partie vous permet de gérer la partie conception de Koda. Vous pouvez adapter à vos besoins, mais par défaut les options ne sont pas trop mal. ;)

  • Couleurs
    Cette partie permet de modifier la couleur de chaque élément du concepteur. Gardez les options par défaut.

  • Langue
    Pour choisir la langue...

  • Barre d'Outils
    Cette partie permet d'adapter la barre d'outils afin de la modifier à votre convenance. Faites selon vos besoins. ;)

Retour en haut

Tour d'horizon

Lorsque vous lancez Koda, vous vous retrouverez avec une interface composée de cinq éléments.
Nous allons voir ci-dessous l'utilité de chacun d'entre d'eux.


Panneau de Contrôle Principal


Panneau Principal

Dans la partie supérieure, nous trouvons le panneau de contrôle principal.
Cette zone est composée de trois parties :
  • Le menu, qui permet l'accès aux fonctions de base et à la configuration de Koda.
  • Sur la gauche, la barre d'outils standard avec en dessous la barre d'outils des fonctions (toutes deux personnalisables).
  • Sur la partie centrale, une barre à onglets contenant les objets graphiques pouvant être ajoutés à votre interface.


Panneau Liste des Interfaces


Panneau Liste des Interfaces

Sur la droite de notre interface, nous trouvons le panneau de la liste des interfaces.
Cette zone permet la gestion et la création des interfaces présentes sur le projet en cours.


Panneau Liste des Objets


Panneau Liste des Objets

Sur la gauche de notre interface, nous trouvons le panneau de la liste des objets présents dans l'interface en cours.
Cette zone permet la sélection rapide d'objets sans passer par la sélection des objets directement sur l'interface. Cette zone est importante : elle contient tous les objets que vous avez déjà insérés, vous permettant ainsi de modifier leur style, leur position, etc... et ceci grâce à l'inspecteur d'objet.


Panneau Inspecteur d'Objets


Panneau Inspecteur d'Objets (1) Panneau Inspecteur d'Objets (2) Panneau Inspecteur d'Objets (3)

Toujours sur la gauche de notre interface, nous trouvons le panneau Inspecteur d'Objets de l'objet en cours de sélection.
Cette zone composée de trois onglets (Propriétés, Styles, ExStyles), permet la modification des propriétés, des styles, des styles étendus de l'objet ainsi que certaines actions telles que la déclaration de l'événement de l'objet.
C'est sans aucun doute la partie la plus complexe de Koda, mais en vous amusant avec les différentes options et réglages, vous arriverez vite à comprendre l'utilité de chacune d'entre elles.


L'interface


Interface

Enfin, au centre de l'écran, vous trouvez l'interface en cours.
C'est ici que vous pouvez poser et modifier les différents objets qui composeront votre interface graphique.


Voilà pour le tour d'horizon de Koda. Nous allons maintenant créer notre première interface à l'aide de Koda.
Retour en haut

Créer une interface

Nous allons ci-dessous créer pas à pas une interface simple.

Tout d'abord, si vous ne l'avez pas encore fait, lancez Koda Form Designer.
Une fois lancé, celui-ci crée automatiquement une interface vierge dont le nom et titre est : Form1.

Koda


Si le titre de cette interface ne vous convient pas, allez simplement dans l'Inspecteur d'Objets et sur la ligne Caption, remplacez Form1 par le titre que vous souhaitez.
Ensuite, inspectez les différentes propriétés ou styles de votre interface afin de l'adapter à vos besoins. N'hésitez pas à trifouiller de partout. :-°

Création d'un bouton


Sélectionnez dans la barre des objets (onglet Standard), l'objet Bouton.

Sélection d'Objet


Cliquez dans votre interface afin de créer l'objet à l'endroit désiré.
Passez ensuite à l'Inspecteur d'Objets afin d'adapter le bouton à vos besoins.
La ligne OnClic ou un double clic sur l'objet vous permettra de définir si vous souhaitez la capture de l'événement pour celui-ci. Si vous ne mettez rien, et que plus tard vous souhaitez interagir avec le bouton (ce qui est certain d'arriver pour un bouton :) ) vous devrez le faire manuellement si vous ne l'avez pas fait avec Koda.

Vous pouvez bien évidemment déplacer ou redimensionner l'objet avec la souris


Interface avec bouton Gestion de l'événement


Procédez de la même manière pour chaque objet que vous souhaitez rajouter dans cette interface.

Vous pouvez, à tout moment lors de la création de votre interface, cliquer sur le bouton 'Lancer la Prévisualisation de l'Interface (F10)' Run afin de voir étape après étape, l'évolution de celle-ci.

Génération du code Autoit


Au cours de la réalisation de votre interface, il est fortement recommandé de cliquer régulièrement sur le bouton d'enregistrement Enregistrement afin de pouvoir sauvegarder et éventuellement reprendre là où vous en étiez la création de votre interface.

Une fois votre interface réalisée, vous n'avez plus qu'à cliquer sur le bouton 'Générer le Code (F9)' Générer le Code afin de voir apparaitre cette fenêtre :

Fenêtre du Code


Il vous suffit alors de choisir une des options disponibles au bas de la fenêtre afin de placer le code à l'endroit désiré.

Action sur le Code


Généralement, on copiera le code dans la fenêtre de Scite, afin de compléter le code des événements et de tout ce que vous n'aurez pas fait sous Koda. ;)

Action sur le Code


Et voilà, maintenant vous savez comment créer une interface simplement grâce à Koda.
Retour en haut

Copier une interface existante

A l'heure où j'écris ces quelques lignes, Koda dans sa version 1.7.2.0 est pourvu d'un outil extrêmement pratique pour capturer l'interface graphique de certains programmes.

La capture ne se fera que sur les objets standards. Tout objet non standard sera simplement ignoré.
Ne vous attendez pas à avoir un clone parfait de l'interface. Il faudra aussi mettre la main à la pâte. :D


Son utilisation est on ne peut plus simple :
  1. Lancez le programme dont vous voulez capturer l'interface
  2. Lancez Koda Form Designer
  3. Dans Koda cliquez sur : Fichiers, Importer puis "Import Externe"
  4. Dans le module d'import externe, choisissez Form Captor.au3
  5. Dans la fenêtre Form Captor, faites glissez la cible de gauche sur l'interface que vous voulez capturer.
    6. Form Captor
  6. Enfin, il vous suffit de cliquer sur OK et d'attendre quelques secondes, pour voir apparaitre une interface avec les mêmes éléments que votre original. ;)



Exemple


Fenêtre UltraVNC Viewer


Fenêtre UltraVNC Viewer


Interface capturée



Capture de UltraVNC Viewer



Ça se passe de commentaires, non ? ;)
Retour en haut

Exemples

Voici deux exemples simples d'interfaces réalisées avec Koda.

Boite A Propos

Image utilisateur



A vous de dépasser votre imagination pour créer de belles fenêtres !
Retour en haut
Voilà, vous devriez maintenant être en mesure de créer rapidement des interfaces simples.

N'oubliez pas de prendre le temps de tester chaque option afin de bien mesurer toute la puissance du concepteur et le gain de temps qu'il peut vous apporter.
Celui-ci évolue régulièrement. Parcourez de temps en temps ces quelques liens afin de surveiller toutes les évolutions de ce merveilleux produit.
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
2 commentaires pour "Koda"
Note moyenne : 3.56 / 4 (100 votes)
Pseudo Commentaire
Hors ligne Little Nooby # Posté le 24/03/2012 à 17:09:35
Je cause trop...
Avatar

Avis : Très bon

Ville : Namur
Pays : Belgique

 Chapitre vite avalé, génial ce logiciel. Juste Enorme! Fini de se perdre à travers 5 étages de conteneurs dans Java, je ferai toutes mes interfaces graphiques sur autoIt maintenant.
Je ne me trompe jamais, je trouve des façons de ne pas faire ce que je voulais.
 
Hors ligne Seeqo # Posté le 17/05/2012 à 19:09:57

Avis : Très bon

parcontre comment ont fait apres? moi j'ai crée un script mais après l'interface,

pour mettre mon script a l'interieur de mon interface?

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