• 10 hours
  • Easy

Free online content available in this course.

You can get support and mentoring from a private teacher via videoconference on this course.

Got it!

Last updated on 1/7/13

Koda

Log in or subscribe for free to enjoy all this course has to offer!

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. ;)

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. ;)

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.

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.

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.

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.

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.

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
  7. 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 ? ;)

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 !

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.

Example of certificate of achievement
Example of certificate of achievement