• 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.
 Estimated time: 1 h
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 nCnt = 1 TO 2000
// Process to run
END
Note: An increment step of subscript can be defined via the STEP keyword. For example, the following code runs the process 2000 times and the nCnt variable decreases from 10 to 10:
FOR nCnt = 2000 TO 1 STEP -10
// Process to run
END

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 ()...END Example: LOOP(10) // Process to runEND

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
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 the home window, click "Tutorial" and select the first project "My first windows (Exercise)".
Tip: if the home window is not displayed, on the "Home" pane, in the "Online help" group, expand "Tutorial" and select "My first windows (Exercise)".

Creating the window

• Create a new blank window:
1. Click among the quick access buttons. The window for creating a new element is displayed: click "Window" then "Window". The wizard for window creation starts.
2. Select "Blank" and the "Elegant" skin template.
3. Validate. The window is automatically created in the editor. The backup window of created element is displayed.
4. Specify the window title: "Loops". The window name ("WIN_Loops") is automatically proposed.
5. Click the green button to validate the information displayed in the backup 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.
 Note 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 button). This catalog contains hundreds of images, cliparts, ...
4. Click the button on the right of "Image" control. Select "Catalog" from the popup menu that is displayed. The window of image catalog is displayed.
5. Type "Animal" in the search area. Click the magnifier to start the search.
6. Select the image and validate (green button).
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.
9. Save the window (press Ctrl + S or click among the quick access buttons).
• We are now going to create a button in order for the image to be moved by 300 pixels to the right in the window. To do so, we will be using the FOR statement of WLanguage.
1. On the "Creation" pane, in the "Usual controls" group, click .
2. Click the location where the button will be created (below the Image control for example).
3. Click the button that was just created. The text displayed in the button becomes editable. Type the caption: "FOR statement".
4. Press Enter to validate the input.
6. Display the processes associated with the button (F2 key).
7. Type the following click code:
// 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 Image control (..X) in a loop from 1 to 300. At each loop turn, the X coordinate is increased by one pixel.
 Note 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. All you have to do is type the code corresponding to each statement section.
• Let's now create a button used to move the image until it reaches the right border of the window. To do so, we will be using the WHILE statement of WLanguage.
1. On the "Creation" pane, in the "Usual controls" group, click .
2. Click the location where the button will be created (on the right of "FOR statement" button for example).
3. Click the button that was just created. The text displayed in the button becomes editable. Type the caption: "WHILE statement".
4. Press Enter to validate the input.
6. Display the processes associated with the button (F2 key).
7. Type the following click code:
// Moves the button horizontally up to the border
// of window
WHILE IMG_NoName1..X < WinInWidth() - IMG_NoName1..Width
IMG_NoName1..X++
END
This code is used to modify the X coordinate of Image control (..X) until a condition is true. In our case, this condition is as follows: the image position (..X) must correspond to the window width less the image width.
 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.
• Let's now create a last button used to move the image until it reaches the left border of window. To do so, we will be using the LOOP statement of WLanguage.
1. On the "Creation" pane, in the "Usual controls" group, click .
2. Click the location where the button will be created (on the right of "WHILE statement" button for example).
3. Click the button that was just created. The text displayed in the button becomes editable. Type the caption: "LOOP statement".
4. Press Enter to validate the input.
6. Display the processes associated with the button (F2 key).
7. Type the following click code:
// 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 image position is set to 0,
• the image position is less than 0 (used to manage the case where the user presses the button several times).
 Note 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.

Window test

• Let's now run the window test:
1. Click among the quick access buttons (or press F9).
2. The created window is started in execution.
3. Click the different buttons.
4. Close the test window.