PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
New WINDEV 25 feature!
  • This lesson will teach you the following concepts
  • Overview
  • The FOR statement
  • The LOOP statement
  • The WHILE statement
  • Practical example: Using loops
  • Project used
  • Creating the window
  • Creating controls
  • Window test
Lesson 2.3. The loops
This lesson will teach you the following concepts
  • The FOR statement.
  • The LOOP statement.
  • The WHILE statement.
  • Practical example.
Lesson duration

Estimated time: 1 h
Previous LessonTable of contentsNext Lesson
Overview
The loop statements are used to run a process in a recurring way. A specific loop statement is used according to the number of occurrences. Several statements can be used to perform loops:
  • FOR...
  • LOOP...
  • WHILE...

The FOR statement

The FOR statement is used when the number of occurrences to process is known. This statement is used to manage the number of occurrences via a variable in which the passages performed in the loop will be counted.
The syntax of FOR statement is as follows:
FOR Subscript = Start Value TO End Value
Process to run
END
For example, the following code runs the process 2000 times:
FOR Cnt = 1 TO 2000
// Process to run
END
Remark: An increment step of subscript can be defined via the STEP keyword. For example, the following code runs the process 2000 times and the Cnt variable decreases by 10:
FOR Cnt = 2000 TO 1 STEP -10
// Process to run
END
See FOR statement for more details.

The LOOP statement

The LOOP statement is used to perform loops when the number of occurrences to process is unknown. In this case, a test must be used to exit from the loop.
The syntax of LOOP statement is as follows:
LOOP
Process to run
IF <Expression> THEN BREAK
END
For example:
Counter is int
Counter = 10
LOOP
// Process to run
Counter = Counter - 1
IF Counter = 0 THEN BREAK
END

Tip

The LOOP statement and the FOR statement can have the same behavior: all you have to do is use the syntax with exit according to the number of iterations:
LOOP (<Number of iterations>)
...
END
Example:
LOOP(10)
// Process to run
END
See LOOP statement for more details.

The WHILE statement

The WHILE statement and the LOOP statement operate according to the same principle. The difference is that the test of exit condition is performed BEFORE running the loop code. This test is used to compare a variable. This variable starts from a start value and it is modified in the loop until it reaches the value that triggers the exit from the loop.
The syntax of WHILE statement is as follows:
<Initialize the variable to its start value>
WHILE <Compare the variable to its end value>
Process to run
<Modify the variable>
END
For example:
Counter is int
Counter = 0
WHILE Counter<10
// Process to run
Counter = Counter + 1
END
See WHILE statement for more details.
Practical example: Using loops
To check the use of loops, we are going to create a window into which an Image control will be moved.

Project used

To handle the different concepts of this lesson, we are going to create different windows. These windows will be created in the "WD My first windows" project.
  • Open the "WD My First Windows" project if necessary.
    To do so, in WINDEV's home page (Ctrl + <), click "Tutorial" and select "My first windows (Exercise)".

Creating the window

  • Create a new blank window:
    1. Click Create an element among the quick access buttons. The element creation window appears: click "Window" then "Window". The window creation wizard starts.
    2. Select "Blank" and the "Phoenix" skin template.
    3. Validate. The window is automatically created in the editor. The window for saving an element is displayed.
    4. Specify the window title: "Loops". The window name ("WIN_Loops") is automatically proposed.
    5. Click "OK" to validate the information shown in the save window.

Creating controls

We are going to create the Image control then the buttons used to handle this image.
  • To create an Image control:
    1. On the "Creation" pane, in the "Usual controls" group, click "Image". Position the control in the window.
    2. Right-click the control and select "Description".
    3. We are going to associate an image to the Image control via the image catalog of WINDEV.

      Remark

      As soon as an image can be displayed in a control or window, WINDEV proposes to use the image catalog. This image catalog is started via the "Catalog" option (available by clicking the Drop-down menu button). This catalog contains hundreds of images, cliparts, ...
    4. Click the Drop-down menu button on the right of "Image" control. Select "Catalog" from the popup menu that is displayed.
      Catalog menu
      The window of image catalog is displayed.
    5. Type "Animal" in the search area. Click the magnifier to start the search.
      Image catalog
    6. Select Image and validate ("OK").
    7. A window used to configure the image is displayed. Keep the default options and validate.
    8. The image is displayed in the Image control. Validate the control description window.
    9. Save the window (press Ctrl + S or click Save an element among the quick access buttons).
  • We are now going to create a Button control to allow the image to move by 300 pixels to the right in the window. To do so, we will use the FOR statement of WLanguage.
    1. On the "Creation" pane, in the "Usual controls" group, click Create a Button control.
    2. Click the location where the control will be created (below the Image control for example).
    3. Click the control that was just created. The text displayed in the control becomes editable. Type the caption: "FOR statement".
    4. Press Enter to validate the input.
    5. Adapt the control size.
    6. Display the events associated with the control (F2).
    7. Write the following code in the "Click" WLanguage event:
      // Moves the image horizontally by 300 pixels
      FOR i = 1 TO 300
      IMG_NoName1..X++
      END
      This code is used to modify the X coordinate of the Image control (..X) in a loop from 1 to 300. At each loop turn, the X coordinate is increased by one pixel.

      Remark

      When typing conditional statements in the code editor, the different possible syntaxes are proposed in a list by the code editor.
      If you select one of these syntaxes, the statement structure is automatically inserted into the code editor. Simply enter the WLanguage code corresponding to each part of the statement.
    8. Close the code window (click X at the top right corner of code editor).
  • Let's now create a Button control to move the image until it reaches the right border of the window. To do so, we will use the WHILE statement of WLanguage.
    1. On the "Creation" pane, in the "Usual controls" group, click Create a Button control.
    2. Click the location where the control will be created (for example, to the right of the "FOR statement" control).
    3. Click the control that was just created. The text displayed in the control becomes editable. Type the caption: "WHILE statement".
    4. Press Enter to validate the input.
    5. Adapt the control size.
    6. Display the events associated with the control (F2).
    7. Write the following code in the "Click" WLanguage event:
      // Moves the image horizontally until you reach the window side
      WHILE IMG_NoName1..X < WinInWidth() - IMG_NoName1..Width
      IMG_NoName1..X++
      END
      This code is used to modify the X coordinate of the Image control (..X) until a condition is true. In our case, this condition is as follows: the position of the Image control (..X) must correspond to the width of the window minus the width of the Image control.

      Tip

      When a code line is too long to be displayed in the window of code editor, you have the ability to cut it in 2 by using a carriage return.
    8. Close the code window (click X at the top right corner of code editor).
  • Now let's create a last Button control to move the Image control until it reaches the left border of the window. To do so, we will use the LOOP statement of WLanguage.
    1. On the "Creation" pane, in the "Usual controls" group, click Create a Button control.
    2. Click the location where the control will be created (for example, to the right of the "WHILE statement" control).
    3. Click the control that was just created. The text displayed in the control becomes editable. Type the caption: "LOOP statement".
    4. Press Enter to validate the input.
    5. Adapt the control size.
    6. Display the WLanguage events associated with the control (F2).
    7. Write the following code in the "Click" WLanguage event:
      // Moves the image to the left
      LOOP
      IMG_NoName1..X--
      IF IMG_NoName1..X <= 0 THEN BREAK
      END
      This code is used to modify the X coordinate of Image control (..X). At each turn, a condition is checked.
      If this condition is true, the program exits from the loop. In our case, the condition is as follows:
      • the position of the Image control is 0,
      • the position of the Image control is less than 0 (used to manage the case where the user presses the button several times).

        Remark

        When typing this code, the LOOP statement may be underlined by a green line and a warning may appear in the pane of compilation errors.
        This warning reminds you that an exit statement must be found in the loop code to avoid an infinite loop.
    8. Close the code window (click X at the top right corner of code editor).

Window test

  • Let's now run the window test:
    1. Click Run the test of a window among the quick access buttons (or press F9).
    2. The created window is started in execution.
    3. Click the different buttons.
      Window test
    4. Close the test window.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 25
Comments
LOOP TUTORIAL
Esse Ao Vivo vai estrear as 11:00 do dia 13/08/2020
DICAS 2987 - WINDEV TUTORIAL 10 - 2.3.A - LOOP PARTE 1
https://windevdesenvolvimento.blogspot.com/2020/08/dicas-2987-windev-tutorial-10-23a-loop.html
https://youtu.be/6A9RUXznjpo

Esse Ao Vivo vai estrear as 17:00 do dia 13/08/2020
DICAS 2988 - WINDEV TUTORIAL 11 - 2.3.B - LOOP EXEMPLOS PARTE 2
https://windevdesenvolvimento.blogspot.com/2020/08/dicas-2988-windev-tutorial-11-23b-loop.html
https://youtu.be/8stsVHuhiKI

amarildo
06 Aug. 2020