This content comes from an automatic translation.
• This lesson will teach you the following concepts
• NOTE2_1
• FOR statement
• LOOP statement
• NOTE3: NOTE3_1
• To check the use of loops, we are going to create a window into which an Image control will be moved.
• Open the "WD My First Windows" project if necessary
• The window name ("WIN_Loops") is automatically proposed.
• IMG_NoName1..X--
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
NOTE2_1
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...

NOTE2_2. The FOR statement
The FOR statement is used when the number of occurrences to process is known
FOR Subscript = Start Value TO End Value
Process to run
FOR Cnt = 1 TO 2000
// Process to run
END
// Process to run: END. Remark
FOR Cnt = 2000 TO 1 STEP -10
// Process to run
END
// Process to run

FOR statement

NOTE2_3. The LOOP statement.
The LOOP statement is used to perform loops when the number of occurrences to process is unknown
LOOP
Process to run
IF THEN BREAK
Counter is int
Counter = 10
LOOP
// Process to run
Counter = Counter - 1
IF Counter = 0 THEN BREAK
END
 IF Counter = 0 THEN BREAK END: Tip: LOOP (): LOOP(10) // Process to runEND
// Process to run

LOOP statement

NOTE2_4. 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:
<Initialize the variable to its start value>
WHILE <Compare the variable to its end value>
Process to run

Counter is int
Counter = 0
WHILE Counter<10
// Process to run
Counter = Counter + 1
END
Counter = Counter + 1
NOTE3: NOTE3_1
Practical example

To check the use of loops, we are going to create a window into which an Image control will be moved.

. NOTE3_2
• Project used.
To handle the different concepts of this lesson, we are going to create different windows

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)".
1. NOTE3_3. Creating the window: Create a new blank window:. Click among the quick access buttons
2. click "Window" then "Window"
3. The window creation wizard starts.. Create an element. Select "Blank" and the "Phoenix" skin template.
4. Validate. The window is automatically created in the editor
5. The window for saving an element is displayed.

The window name ("WIN_Loops") is automatically proposed.

Click "OK" to validate the information shown in the save window.
• NOTE3_4
1. Creating controls. We are going to create the Image control then the buttons used to handle this image.
2. To create an Image control:
3. Under the "" section, in the "" group, click on ""..
 Position the control in the window. Creation. Usual controls. Image
4. 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
5. Drop-down menu. Click the button on the right of "Image" control. Select "Catalog" from the popup menu that is displayed
7. Type "Animal" in the search area. Click the magnifier to start the search.
8. . Image catalog
9. Select and validate ("OK").
• A window used to configure the image is displayed. Keep the default options and validate
1. The image is displayed in the Image control
2. Save the window (press Ctrl + S or click among the quick access buttons).
3. Save an element. 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 be using the FOR statement of WLanguage.
4. Under the "" section, in the "" group, click on .
5. Creation
6. Usual controls.
7. Create a Button control
// Moves the image horizontally by 300 pixels
FOR i = 1 TO 300
IMG_NoName1..X++
END
Adapt the control size.. Display the events associated with the control (F2).
 //############ // 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 () in a loop from 1 to 300
1. At each loop turn, the X coordinate is increased by one pixel
2. Remark
3. 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
4. Close the code window (click X at the top right corner of code editor).
5. Let's now create a Button control to move the image until it reaches the right border of the window
6. To do so, we will be using the WHILE statement of WLanguage.
7. Under the "" section, in the "" group, click on .
// Moves the image horizontally until you reach the window side
WHILE IMG_NoName1..X < WinInWidth() - IMG_NoName1..Width
IMG_NoName1..X++
END
The text displayed in the control becomes editable. Type the caption: "WHILE statement".: Press Enter to validate the input.
 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++ *# This code is used to modify the X coordinate of the Image control () until a condition is true *# In our case, this condition is as follows. the position of the Image control () must correspond to the width of the window minus the width of the Image control. ..X *# ..X *# 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. *# Close the code window (click X at the top right corner of code editor).
// Moves the image to the left
LOOP
IMG_NoName1..X--
IF IMG_NoName1..X <= 0 THEN BREAK
END
Click the location where the control will be created (for example, to the right of the "WHILE statement" control).. Click the control that was just created.
The text displayed in the control becomes editable. Type the caption: "LOOP statement".
• Display the WLanguage events associated with the control (F2).
 Write the following code in the "Click" WLanguage event: //############. // Moves the image to the left

IMG_NoName1..X--

• IF IMG_NoName1..X <= 0 THEN BREAK
1. END
2. At each turn, a condition is checked
3. If this condition is true, the program exits from the loop. In our case, the condition is as follows:
4. the position of the Image control is 0,
Minimum version required
• Version 24