PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
New WEBDEV 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 page
  • Creating controls
  • Page test
Appendix 4. 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: 30 mn
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 that counts the passages performed in the loop.
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

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

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 page into which an Image control will be moved.

Project used

To handle the different concepts of this lesson, we are going to create different pages. These pages will be created in the "My_First_Pages" project.
  • Open the "My_First_Pages" project if necessary.
    1. Open the WEBDEV home page (Ctrl + <).
    2. Click "Tutorial", then "My first pages (Exercise)".

Creating the page

  • Create a new blank page:
    1. Click Create an element among the quick access buttons. The element creation window appears: click "Page" then "Page". The page creation wizard appears.
    2. Select "Blank".
    3. Validate. The page is automatically created in the editor. The window for saving an element is displayed.
    4. Specify the page title: "Loops". The page name ("PAGE_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 page.
    2. Right-click the control and select "Description".
    3. In the "General" tab, modify the control name: this control is named IMG_Animal.
    4. We are going to associate an image to the tab via the image catalog of WEBDEV.

      Remark

      As soon as an image can be displayed in a control or page, WEBDEV 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, ...
    5. Click the Drop-down menu button on the right of "Image" control. Select "Catalog" from the popup menu that is displayed. The image catalog window appears.
    6. Type "Animal" in the search area. Click the magnifier to start the search.
      Image catalog
    7. Select Image and validate ("OK").
    8. A window used to configure the image is displayed.
      Image settings
    9. Keep the default options and validate.
    10. The image path appears in the Image control description window.
    11. In the "UI" tab, "Overlay and move" area, check "The control can be overlaid".
    12. Validate the control description window.
    13. Position the Image control at the top left of the page.
    14. Save the page (press Ctrl + S or click Save element among the quick access buttons).
  • We will now create a Button control to allow the image to move by 300 pixels to the right in the page. To do so, we will be using the FOR statement of WLanguage.
    1. On the "Creation" pane, in the "Usual controls" group, click Creating a Button control.
    2. Click the location where the Button 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. Open the control description window (Alt + Enter).
    6. In the "General" tab, in the "Button action" area:
      • for the "Type" option, select "Run browser codes only".
      • for the "During the action" option, select "Do not send anything to the server".
    7. Validate the control description window.
    8. Display the events associated with the control (F2).
    9. Enter the following code in the "Click (browser)" event:
      // Moves the image horizontally by 300 pixels
      FOR i = 1 TO 300
      IMG_Animal..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 write the code that corresponds to each part of the statement.
    10. Close the code window (click X at the top right corner of code editor).
  • Now let's create a Button control to move the image until the image border is positioned at 1200 pixels. To do so, we will be using the WHILE statement of WLanguage.
    1. On the "Creation" pane, in the "Usual controls" group, click Creating a Button control.
    2. Click the location where the control will be created (for example, to the right of the "FOR statement" Button 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. Open the control description window (Alt + Enter).
    6. In the "General" tab, in the "Button action" area:
      • for the "Type" option, select "Run the browser click code only".
      • for the "During the action" option, select "Do not send anything to the server".
    7. Display the events associated with the control (F2).
    8. Enter the following code in the "Click (Browser)" event:
      WHILE IMG_Animal..X < 1200
      IMG_Animal..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 1200.

      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.
    9. 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 page. To do so, we will be using the LOOP statement of WLanguage.
    1. On the "Creation" pane, in the "Usual controls" group, click Creating a Button control.
    2. Click the location where the button will be created (for example, on the right of WHILE Button 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. Open the control description window (Alt + Enter).
    6. In the "General" tab, in the "Button action" area:
      • for the "Type" option, select "Run the browser click code only".
      • for the "During the action" option, select "Do not send anything to the server".
    7. Validate the control description window.
    8. Display the events associated with the control (F2).
    9. Enter the following code in the "Click (browser)" event:
      // Moves the image to the left
      LOOP
      IMG_Animal..X--
      IF IMG_Animal..X <= 0 THEN BREAK
      END

      This WLanguage code allows you to modify the X coordinate of the Image control (..X property). 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.
    10. Close the code window (click X at the top right corner of code editor).

Page test

  • Let's now run the page test:
    1. Click Run the test of a page among the quick access buttons (or press F9).
    2. The created page is started in execution.
    3. Click the different buttons.
      Page test
    4. Close the test page.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 25
Comments
Click [Add] to post a comment