PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

Nouveauté WINDEV 24 !
  • Ce que vous allez apprendre dans cette leçon
  • Présentation
  • L'instruction POUR
  • L'instruction BOUCLE
  • L'instruction TANTQUE
  • Exemple pratique : Utilisation des boucles
  • Projet manipulé
  • Création de la fenêtre
  • Création des champs
  • Test de la fenêtre
Leçon 2.3. Les boucles
Ce que vous allez apprendre dans cette leçon
  • L'instruction POUR.
  • L'instruction BOUCLE.
  • L'instruction TANTQUE.
  • Exemple pratique.

Durée estimée : 1 h
Leçon précédenteSommaireLeçon suivante
Présentation
Les instructions de boucle permettent d'exécuter un traitement de manière récurrente. Selon le nombre d'occurrences (connu ou pas), on utilise une instruction de boucle particulière. Il existe plusieurs instructions pour faire des boucles :
  • POUR ...
  • BOUCLE ...
  • TANTQUE ...

L'instruction POUR

L'instruction POUR est utilisée lorsque l'on connaît le nombre d'occurrences à traiter. Cette instruction permet de gérer le nombre d'occurrences à l'aide d'une variable dans laquelle on va compter les passages effectués dans la boucle.
La syntaxe de l'instruction POUR est la suivante :
POUR Indice = Valeur de départ A Valeur de fin
Traitement à exécuter
FIN
Par exemple, le code suivant exécute 2000 fois le traitement :
POUR nCpt = 1 À 2000
// Traitement à exécuter
FIN
Remarque : Il est possible de définir un pas d'incrémentation de l'indice grâce au mot-clé PAS. Par exemple, le code suivant exécute 200 fois le traitement et la variable nCpt diminue de 10 en 10 :
POUR nCpt = 2000 À 1 PAS -10
// Traitement à exécuter
FIN

L'instruction BOUCLE

L'instruction BOUCLE est utilisée pour faire des boucles lorsque le nombre d'occurrences à traiter n'est pas connu. Dans ce cas, il faut utiliser un test pour sortir de la boucle.
La syntaxe de l'instruction BOUCLE est la suivante :
BOUCLE
Traitement à exécuter
SI <Expression> ALORS SORTIR
FIN
Par exemple :
Compteur est un entier
Compteur = 10
BOUCLE
// Traitement à exécuter
Compteur = Compteur - 1
SI Compteur = 0 ALORS SORTIR
FIN

Astuce

L'instruction BOUCLE permet d'avoir le même comportement qu'une instruction POUR : il suffit d'utiliser la syntaxe avec sortie selon le nombre d'itérations :
BOUCLE (<Nombre d'itérations>)
...
FIN
Exemple :
BOUCLE(10)
// Traitement à exécuter
FIN

L'instruction TANTQUE

L'instruction TANTQUE fonctionne sur le même principe que l'instruction BOUCLE. La différence réside dans le fait que le test de la condition de sortie est effectué AVANT l'exécution du code de la boucle. Ce test permet de comparer une variable. Cette variable commence à une valeur de départ et est modifiée dans la boucle jusqu'à arriver à la valeur qui provoque la sortie de la boucle.
La syntaxe de l'instruction TANTQUE est la suivante :
<Initialisation de la variable à sa valeur de début>
TANTQUE <Comparaison de la variable à sa valeur de fin>
Traitement à exécuter
<Modification de la variable>
FIN
Par exemple :
Compteur est un entier
Compteur = 0
TANTQUE Compteur<10
// Traitement à exécuter
Compteur = Compteur + 1
FIN
Exemple pratique : Utilisation des boucles
Pour tester l'utilisation des boucles, nous allons créer une fenêtre dans laquelle nous allons déplacer un champ Image.

Projet manipulé

Pour manipuler les différents concepts de cette leçon, nous allons réaliser différentes fenêtres. Ces fenêtres vont être créées dans le projet "WD Mes premières fenêtres".
  • Ouvrez si nécessaire le projet "WD Mes Premières Fenêtres".
    Pour cela, dans la page d'accueil de WINDEV (Ctrl + <), cliquez sur "Cours d'auto-formation" et sélectionnez le premier projet "Mes premières fenêtres (Exercice)".

Création de la fenêtre

  • Créez une nouvelle fenêtre vierge :
    1. Cliquez sur Création parmi les boutons d'accès rapide. La fenêtre de création d'un nouvel élément s'affiche : cliquez sur "Fenêtre­" puis sur "Fenêtre". L'assistant de création de fenêtres s'affiche.
    2. Sélectionnez "Vierge" et le gabarit "Elegant".
    3. Validez. La fenêtre est automatiquement créée sous l'éditeur. La fenêtre de sauvegarde de l'élément créé apparaît.
    4. Indiquez le titre de la fenêtre "Boucles". Le nom de la fenêtre "FEN_Boucles" est automatiquement proposé.
    5. Validez les informations affichées dans la fenêtre de sauvegarde en cliquant sur le bouton vert.

Création des champs

Nous allons tout d'abord créer le champ Image puis nous créerons les boutons permettant de manipuler cette image.
  • Pour créer un champ Image :
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur "Image". Positionnez le champ dans la fenêtre.
    2. Faites un clic droit sur le champ et sélectionnez l'option "Description".
    3. Nous allons associer une image au champ Image grâce au catalogue d'images de WINDEV.

      Note

      Dès qu'une image peut être affichée dans un champ ou une fenêtre, WINDEV propose d'utiliser le catalogue d'images. Ce catalogue d'images est lancé via l'option "Catalogue" (disponible en cliquant sur le bouton Menu déroulant). Ce catalogue contient plusieurs milliers d'images, de cliparts, ...
    4. Cliquez sur le bouton Menu déroulant à droite du champ "Image". Dans le menu contextuel qui s'affiche, sélectionnez l'option "Catalogue".
      Menu Catalogue
      La fenêtre du catalogue d'images apparaît.
    5. Saisissez "Animal" dans la zone de recherche. Lancez la recherche en cliquant sur la loupe.
      Catalogue d'images
    6. Sélectionnez l'image Image et validez (bouton vert).
    7. Une fenêtre permettant de paramétrer l'image apparaît. Conservez les options par défaut et validez.
    8. L'image apparaît dans le champ Image. Validez.
    9. Sauvez la fenêtre (Ctrl + S ou cliquez sur Enregistrer parmi les boutons d'accès rapide).
  • Nous allons maintenant créer un bouton permettant à l'image de se déplacer de 300 pixels vers la droite dans la fenêtre. Nous allons pour cela utiliser l'instruction POUR du WLangage.
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur Champ Bouton.
    2. Cliquez à l'emplacement de création du bouton (par exemple sous le champ Image).
    3. Cliquez sur le bouton que vous venez de créer. Le texte affiché dans le bouton passe en édition. Saisissez le libellé "Instruction POUR".
    4. Validez la saisie avec la touche Entrée.
    5. Adaptez la taille du champ.
    6. Affichez les traitements associés au bouton (touche F2).
    7. Saisissez le code de clic suivant :
      // Déplace l'image horizontalement de 300 pixels
      POUR i = 1 À 300
      IMG_SansNom1..X++
      FIN
      Ce code permet de modifier l'abscisse du champ Image (propriété ..X) dans une boucle de 1 à 300. A chaque tour de boucle, l'abscisse augmente d'un pixel.

      Note

      Lors de la saisie des instructions conditionnelles sous l'éditeur de code, l'éditeur de code propose dans une liste les différentes syntaxes possibles.
      Si vous sélectionnez une de ces syntaxes, la structure de l'instruction est automatiquement insérée dans l'éditeur de code. Il suffit de saisir le code correspondant à chaque partie de l'instruction.
  • Créons maintenant un bouton permettant de déplacer l'image jusqu'au bord droit de la fenêtre. Nous allons pour cela utiliser l'instruction TANTQUE du WLangage.
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur Champ Bouton.
    2. Cliquez à l'emplacement de création du bouton (par exemple à droite du bouton "Instruction POUR").
    3. Cliquez sur le bouton que vous venez de créer. Le texte affiché dans le bouton passe en édition. Saisissez le libellé "Instruction TANTQUE".
    4. Validez la saisie avec la touche Entrée.
    5. Adaptez la taille du champ.
    6. Affichez les traitements associés au bouton (touche F2).
    7. Saisissez le code de clic suivant :
      // Déplace l'image horizontalement jusqu'au bord de la fenêtre
      TANTQUE IMG_SansNom1..X < FenIntLarg() - IMG_SansNom1..Largeur
      IMG_SansNom1..X++
      FIN
      Ce code permet de modifier l'abscisse du champ Image (propriété ..X) jusqu'à ce qu'une condition soit vraie. Dans notre cas, cette condition est la suivante : il faut que la position de l'image (sa propriété ..X) corresponde à la largeur de la fenêtre moins la largeur de l'image.

Astuce

Lorsqu'une ligne de code est trop longue pour rentrer dans la fenêtre de l'éditeur de code, il est possible de la couper en 2 en utilisant le retour à la ligne.
  • Créons maintenant un dernier bouton permettant de déplacer l'image jusqu'au bord gauche de la fenêtre. Nous allons pour cela utiliser l'instruction BOUCLE du WLangage.
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur Champ Bouton.
    2. Cliquez à l'emplacement de création du bouton (par exemple à droite du bouton "Instruction TANTQUE").
    3. Cliquez sur le bouton que vous venez de créer. Le texte affiché dans le bouton passe en édition. Saisissez le libellé "Instruction BOUCLE".
    4. Validez la saisie avec la touche Entrée.
    5. Adaptez la taille du champ.
    6. Affichez les traitements associés au bouton (touche F2).
    7. Saisissez le code de clic suivant :
      // Déplace l'image à gauche
      BOUCLE
      IMG_SansNom1..X--
      SI IMG_SansNom1..X <= 0 ALORS SORTIR
      FIN
      Ce code permet de modifier l'abscisse du champ Image (propriété ..X). A chaque tour, une condition est vérifiée.
      Si cette condition est vraie, le programme sort de la boucle. Dans notre cas, la condition est la suivante :
      • la position de l'image est 0,
      • la position de l'image est inférieure à 0 (permet de gérer le cas où l'utilisateur appuie plusieurs fois sur le bouton).

Note

Lors de la saisie de ce code, l'instruction BOUCLE peut apparaître soulignée d'un trait vert et un warning peut apparaître dans le volet des erreurs de compilation.
Ce warning rappelle qu'une instruction de sortie doit être présente dans le code de la boucle pour éviter une boucle infinie.

Test de la fenêtre

  • Nous allons tester la fenêtre :
    1. Cliquez sur GO de fenêtre parmi les boutons d'accès rapide (ou utilisez la touche F9).
    2. La fenêtre que vous avez créée se lance en exécution.
    3. Cliquez sur les différents boutons.
      Test de la fenêtre
    4. Fermez la fenêtre de test.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 24
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire